CSS选择的艺术

最新推荐文章于 2023-03-01 15:13:04 发布

小小辉33

最新推荐文章于 2023-03-01 15:13:04 发布

阅读量276

点赞数

分类专栏： web前端文章标签： web前端 css

本文链接：https://blog.csdn.net/XiaoYaoYao2/article/details/78955022

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS样式规则：

CSS规则由两部分构成：选择器、声明
h1{font-size:30px;}
h1:选择器 font-size：声明 30px:值

CSS引用：

写在<head></head>标签内：
<style type="text/css">
CSS样式...
</style>

对不同元素加入相同样式时可以使用：

p,h1,h2,h3,h4{font-size: 30px;}

CSS注释

html注释：
CSS注释： /*注释语句*/

CSS行内样式：

在开始标签内添加style样式属性
如： <p style="color:red;">内容</p>

CSS内部样式：

内部样式（嵌入样式），把css样式代码写在：
<style type="text/css">
样式...
</style>
说明：style标签要放在head标签内

为css样式添加html的注释标签
<style type="text/css">

</style>
说明：高版本浏览器会自动忽略html注释标签
为了避免低版本浏览器识别不了style标签会把样式表的内容显示在页面上这个情况

CSS外部样式：

外部样式表，把CSS样式代码写在独立的一个文件中
扩展名：CSS文件名.CSS
引入外部文件：link标签
<link href="XX.css" rel="stylesheet" type="text/css"/>
说明：link标签要放在head标签内

CSS导入式:

@import "外部CSS样式"
1、语法：
<style type="text/css">
@import "css.css"
</style>
说明：写在style标签内引用外部文件
2、语法：
<style type="text/css">
@import url(css.css);
</style>

CSS使用方法总结：

类别引入方法位置加载
行内样式开始标签内style html文件内同时

内部样式 <head>中<style>内 html文件内同时

链入外部样式 <head>中<link>引用 CSS样式文件页面加载时，同时
与html文件分离加载CSS样式

导入式@import 在样式代码最开始处 CSS样式文件在读取完html文件
与html文件分离之后加载

使用链入外部样式的好处：

1、Css和html分离
2、多个文件可以使用同一个样式文件
3、多文件引用同一个css文件，css只需下载一次

CSS使用方法优先级：

行内样式 > 内部样式 > 外部样式
注意：内部样式与链入外部样式谁更接近设置的元素，谁的优先级就高
最后定义的优先级最高，就近原则

CSS选择器：

标签选择器全局选择器
类选择器群组选择器
ID选择器后代选择器

标签选择器：

以HTML标签作为选择器：
p,h1,h2,h3,h4{font-size: 30px;}

类选择器：

第一步：为HTML标签添加class属性：
<h1 class="red">内容1</h1>
<p>内容2</p>
<p class="red">内容3</p>
第二部：
通过类选择器来为具有此class属性的元素设置CSS样式：
.red{color: red;}
对不同类型元素的同一个名称的类选择器设置不同的样式规则：
p.red{font-size: 50px;}
h1.red{font-size: 20px;}
同一个元素可以设置多个类，之间用空格隔开：
p.special{
font-size: 50px;
}
.one{
text-decoration: underline;
}
<p class="special one">内容</p>

ID选择器:

第一步：为HTML标签添加ID属性：
<h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>
第二步：通过ID选择器来为具有此ID的元素设置CSS规则
#p1{color: red;}
#p2{color: blue;}
注意：同一个html元素下，每一个ID都是唯一的，一个ID不能被同时2个元素引用
一个元素也不能引用两个ID

群组选择器：

集体统一设置样式：
p,h1,h2,h3,h4{font-size: 30px;}
p{
color: blue;
font-family: "隶书";
}
h1{color：red;}
不仅仅是对html标签样式有用，对其他选择器也可以集体统一设置样式
注意：class和ID的值是区分大小写的

全局选择器：

当网页很大，给所有标签设置样式：
*{
color: blue;
....
}

后代选择器：

<html>-----<body>-----<h1>-----<em>
<html>-----<body>-----<p>
说明：h1是body的子元素，em是h1的子元素
body是em的祖先，em是body的后代
p与h1是兄弟关系
html称为根，也是所有元素的祖先
例子：
<em>CSS层叠样式</em>
<p><em>CSS</em>层叠样式</p>
<p><em>CSS</em>层叠样式</p>
使用后代选择器设置，之间用空格隔开：
p em{font-size: 40px;}
其他设置：
p a em{....} p标签中a标签中的em
#p1 em{....} id为p1的标签中的em
p.red a em{....} class为red的p标签中的a标签中的em

伪类选择器

链接伪类：链接的4种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态
:link 未访问状态
:visited 已访问状态
:hover 鼠标悬停状态
:active 激活状态
伪类:hover和:active
1、hover用于访问的鼠标经过某个元素时
2、active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）
:hover和:active兼容：
1、IE6及更早版本，支持<a>元素的四种状态
2、IE6浏览器不支持其他元素的:hover和:active
链接伪类的顺序：
:link > :visited > :hover > :active
说明：
1、:hover必须置于:link和:visited之后，才有效
2、:active必须置于:hover之后，才有效
3、伪类名称对大小写不敏感

CSS继承：

父元素设置样式，子元素可以继承部分属性

CSS层叠：

1、可以定义多个样式
2、不冲突时，多个样式可层叠为一个
3、冲突时，按不同样式规则优先级来应用样式

CSS选择器优先级：

ID选择器 > class选择器 > 标签选择器
同类样式多次引用，样式表中后定义的优先级高（就近原则）

CSS优先级规则：

同一样式表中：
1、权值相同
就近原则
2、权值不同
根据权值来判断CSS样式
哪种CSS样式权值高，就使用哪种样式

选择器权值

标签选择器权值为1
类选择器和伪类权值为10
ID选择器权值为100
通配符选择器权值为0
行内样式：权值为1000

权值规则：

1、统计不同选择器的个数
2、每类选择器的个数乘以相应权值
3、把所有的值相加得出选择器的权值
例子：
#main div.green p{...}

标签个数：id=1 class=1 标签=2
权值： 100 10 2 = 112
这个样式的权值为112

!important规则：

1、可调整样式规则的优先级
2、添加在样式规则之后，中间用空格隔开
div{color: red !important;}

CSS优先级总结：

1、！important声明最高
2、CSS使用方法的优先级
行内样式 > 内部样式 > 外部样式
注：link链入外部样式和style内部样式优先级，取决于先后顺序
3、样式表中优先级
ID选择器 > class选择器 > 标签选择器 > 通配符选择器
权值相同：就近原则
权值不同：使用权值高的

CSS样式命名：

1、采用英文字母、数字以及“-”和“_”命名
2、以小写字母开头，不能以数字和“-”、“_”开头
3、命名形式：单字，连字符，下划线和驼峰
.special{...} 单字
.mainspecial{...} 多字
.mainTitle{...} 驼峰
.main-title{...} 连字符
.main_title{...} 下划线
4、使用有意义命名
6、适当使用class