文章目录
CSS介绍
CSS全称为: Cascading Style Sheets ,意为层叠样式表 ,与HTML相辅相成,它是网页的装饰者,用来修饰各标签排版(大小、边距、背景、位置等)、改变字体的样式(字体大小、字体颜色、对齐方式等)、设置图片(宽高、位置等)等。
CSS引入方式
引入方式:也就是说我们的css写在什么地方。
行内样式
行内样式就是将我们的css写在标签内部
<标签名 style="样式声明">
CSS样式声明: 由CSS属性和值组成
- CSS属性:你希望给HTML标签设置的样式名字
- 值:使用值来控制某个属性显示的效果
- 设置文本的颜色:color:red;
- 设置字体的大小:font-size:字体的像素;
style="css属性名:值;css属性名:值;"
内嵌样式
借助于style标签,我们可以将css样式和html进行分离,不过需要借助css的选择器到html中进行选择来定义样式。
<style>
选择器{
css属性名:值;
css属性名:值;
}
</style>
选择器:在HTML页面当中找到元素
外链样式表
创建一个后缀为.css的外部样式表文件夹,然后在html文件中用标签引入外部样式表;相当于将css样式存在一个单独的文件里面,当我们需要的时候就可以进行引入。
<link rel="stylesheet" href="外部样式表的地址">
三种方式的总结
样式表 | 优点 | 缺点 | 使用情况 | 使用场景 |
---|---|---|---|---|
行内样式表 | 书写方便 | 没有实现结构与样式分离,不便于维护,不可以重复利用 | 极少 | 某个标签需要单独的样式设置时使用 |
内嵌样式 | 部分结构与样式分离,较便于维护 | 没有彻底实现结构与样式分离,不可以重复利用 | 一般 | css代码量不多,且和当前页面联系紧密不需要复用时使用 |
外链样式表 | 完全实现结构与样式分离,可重复利用 | 如果代码量较少情况下,引入法更麻烦 | 最多,推荐 | css代码量大时,或者需要重复利用时使用 |
CSS选择器
标签选择器 ***
一个完整的html是由各式各样的标签组成,而标签选择器就是选定指定的标签进行添加样式修改 。
如下所示:
/* 找到页面当中所有的p标签 */
p {
color: blue;
}
类选择器 *****
类选择器就是根据标签的class定义的名字,来找到具体的html标签,然后对整个class包裹的内容进行添加样式。
类选择器的定义形式是:用一个英文的 . 加上一个class属性的值也就是类名。
如下所示:
.mouse {
color : black;
}
id选择器
id选择器就是根据标签的id定义的名字,来找到具体的html标签,然后对整个class包裹的内容进行添加样式。
如下所示:
#nav {
color: red;
}
通配符选择器 **
用*号来表示,选定所有的内容,html中的所有元素,在开发中,我们通常使用通用选择器来清除 HTML元素中默认的内外边距
* {
margin: 0;
padding: 0;
}
交集选择器 ***
-
结构:
选择器1选择器2{css属性名:属性值;}
-
找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
-
交集选择器中的选择器之间是紧挨着的,没有东西分隔
p.box { color: red; }
分组选择器
-
结构:
选择器1 , 选择器2 {css属性名:属性值;}
-
同时选择多组标签,设置相同的样式
-
并集选择器中的每组选择器之间通过 , 分隔
-
并集选择器中的每组选择器通常一行写一个,提高代码的可读性
<style> p, div, span, h1 { color: red; } </style>
默认样式的清除:浏览器会给我们的元素默认添加一些样式,默认样式会影响到我们页面的布局
元素关系选择器
子代选择器 *****
-
结构:
选择器1 > 选择器2 {css属性名:属性值;}
-
在选择器1所找到标签的子代(子代只包括:儿子)中,找到满足选择器2的标签,设置样式,
div>a { color: red; }
后代选择器 *****
-
结构:
选择器1 选择器2 {css属性名:属性值;}
-
在选择器1所找到标签的后代(后代包括:儿子、孙子、重孙子……)中,找到满足选择器2的标签,设置样式
div a { color: red; }
相邻兄弟选择器
-
相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号
+
,加号两边为相邻的两个元素,选择器会匹配加号后面的元素div + p { color: red; }
通用兄弟选择器
-
选中后面所有的兄弟,除了自己
p ~ p { color: pink; }
CSS特性
继承性
某些属性我们只需要给父元素加子元素也会生效。有这样的特点的存在好处就是可以减少代码。给父元素加子元素就有了。如果元素有默认样式,此时继承性依然存在,但是优先显示默认样式
层叠性
所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖
-
给同一个标签设置不同的样式: 会共同作用在标签上
-
给同一个标签设置相同的样式:最终写在最后的样式会生效
-
只有当选择器优先级相同时,才能通过层叠性判断结果
优先级
不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式
权重叠加计算
- 如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
- 第一级:行内样式的个数
- 第二级:id选择器的个数
- 第三级别:类选择器的个数
- 第四级别:标签选择器的个数
- 比较规则
- 先比较第一级数字,如果比较出来了,之后的统统不看
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性