null - 程序员宅基地

CSS3详解_css3结构是什么技术和什么技术分离-程序员宅基地

技术标签： css html 基础学习 css3

1.CSS3简单介绍

HTML+CSS+JavaScript=结构+表现+交互
在这里插入图片描述

什么是CSS？

Cascading Style Sheet层叠级联样式表
CSS:表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

CSS发展史

CSS1.0
CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1浮动，定位
CSS3.0圆角，阴影，动画…浏览器兼容性~

2.CSS快速入门以及其优势

初次使用css改变文字标题颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网站</title>
    <!--规范
    style可以编写css代码
    h1{ }代表针h1标签写css代码
    语法:
    选择器{
        声明1;
        声明2; .
        声明3;
        }

    -->
    <style>
        h1{
     
      color:red

        }

    </style>

</head>


<body>
<h1>我的一级标题</h1>

</body>
</html>

创建css文件

创建完css文件直接在css文件中粘贴style内容即可

在这里插入图片描述
当HTML 和CSS分开编写之后需要再HTML文件中编写一个“指向地址”
如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网站</title>
    <!--规范
    style可以编写css代码
    h1{ }代表针h1标签写css代码
    语法:
    选择器{
        声明1;
        声明2; .
        声明3;
        }

    -->
    <link rel="stylesheet" href="CSS/style.css">

</head>


<body>
<h1>我的一级标题</h1>



</body>
</html>

css的优势:
1、内容和表现分离
2、网页结构表现统一-, 可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索弓|擎收录!

3.四种CSS导入方式

1.行内样式
2.内部样式
3.外部样式

三种方式优先级：

三种导入CSS方式：行内样式、内部样式、外部样式
就近原则，谁离h1标签比较近就比较优先

第一种情况：（蓝、黄、绿）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式表-->
    <style>
       h1{
     
      
           color: green;
       }
    </style>


    <link rel="stylesheet" href="CSS/style.css">

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blue">一级标题</h1>
</body>
</html>

/*外部样式*/
h1{
   
    
    color: yellow;
}

第二种：（黄、绿）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式表-->
    <style>
       h1{
     
      
           color: green;
       }
    </style>


    <link rel="stylesheet" href="CSS/style.css">

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 >一级标题</h1>
</body>
</html>

第三种：（绿、黄）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    

    <link rel="stylesheet" href="CSS/style.css">
    <!--内部样式表-->
    <style>
        h1{
     
      
            color: green;
        }
    </style>

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 >一级标题</h1>
</body>
</html>

外部样式有两种：1.链接式
2.导入式
缺点，打开大网站的时候会先展示骨架再展示渲染后的样式，CSS2.1属于，现在多数都是用CSS3.0的链接式
@import是CSS2.1特有的
导入式外部样式代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入式外部样式-->
    <style>@import url("CSS/style.css");;</style>

</head>
<body>
<h1>导入式外部样式</h1>
</body>
</html>

/*外部样式*/
h1{
    color: yellow;
}

4.三种基本选择器（重点）

为什么用选择器？————可以选择页面上的某一个或者某一类元素

标签选择器

用标签改变带有h1标签的文字的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
</head>
<style>
    h1{
     
      
        /*标签选择器会选中页面上带有这个标签的字体*/
        color: #010507;
        background: blue;
        border-radius: 50px;
    }
    p{
     
      
        font-size: 100px;
    }
</style>

<body>
<h1>&nbsp;&nbsp;&nbsp;&nbsp;学java</h1>
<p>听课程</p>


</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--类选择器的格式———— .class的名称{}
    类选择器的好处:可以按照标签归类，可以复用

    -->
    <style>
        .第一个类标签{
     
      
            color: green;
        }
        .第二个类标签{
     
      
            color: blue;
        }


    </style>

</head>


<body>

<h1 class="第一个类标签">标题一</h1>
<h1 class="第二个类标签">标题二</h1>
<h1 class="第一个类标签">标题三</h1>
<

本文链接：https://blog.csdn.net/qdyones/article/details/123102483

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios