设置CSS样式的方式
-
内联样式（行内样式）
<p style="color:red;font-size:60px"><!--设置字体颜色和大小--> CSS设置样式</p>
问题：使用内联样式，只能对一个标签生效
? 复用程度不高，维护起来比较麻烦
-
内部样式表
- 将样式编写到head标签中的style标签里，然后通过css选择器选中元素，并为其设置各种样式。
<style> p{ /*标签选择器*/ color:green; font-size:50px; }</style>
好处：可同时为多个标签设置样式，更加方便对样式进行复用
问题：内部样式表只能对一个网页起作用，不能跨页面复用
-
外部样式表(最佳实现)
-
可以将css样式编写到外部的css文件中
然后通过link标签来引入到对应的网页中
<head> <!--在head标签中编写--><link rel="stylesheet" href="./style.css"> </head>
好处 ：样式可以在不同页面之间进行复用
? 可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户体验。
CSS基本语法
css中的注释
<style>/* 注释内容 */</style>
声明块
- 声明块：通过声明块来指定为元素设置的样式，是一个名值对 ---名和值之间以 : 连接，以 ; 结尾
选择器
常用选择器
-
元素选择器
- 作用：根据标签名选中指定的元素
- 语法：标签名{ }
- 例：p{ } 、div{ } 、h1{ }
-
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 例 #box{ }、#red{ }
-
类选择器
- 作用：根据元素的class属性值选中一组元素
- 语法： .class属性值{ }
- 例 .box{ } 、.bottom{ }
- 补充：class是一个标签的属性，和id类似，不同的是class可以重复使用,可以为同个元素指定多个class属性
-
适配选择器
复合选择器
-
交集选择器
-
并集选择器
- 作用：同时选择多个选择器对应的元素
- 语法：选择器1，选择器2，选择器3...选择器n{ }
- 例 #box,p,h1,div,span{}
关系选择器
-
相关概念
-
父元素：直接包含子元素的元素
-
子元素：直接被父元素包含的元素
-
祖先元素：直接或间接包含后代元素
? 一个元素的父元素也是他的祖先元素
-
后代元素：直接或间接被祖先元素包含的元素
? 子元素也是后代元素
-
兄弟元素：拥有相同父元素的元素
- 子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法:父元素>子元素
- 后代元素选择器
- 作用：选中选中指定元素内的指定后代元素
- 语法：祖先 后代
- 兄弟选择器
- 作用 ①：选择下一个兄弟
- 语法：前一个+后一个
- 作用 ②：选择下边所有的兄弟
- 语法：兄~弟
属性选择器
-
语法：[属性名] 选择含有指定属性的元素
-
[属性名=属性值] 选择含有指定属性和属性值的元素
-
[属性名^=属性值] 选择属性值以指定值开头的元素
-
[属性名$=属性值] 选择属性值以指定值结尾的元素
-
[属性名*=属性值] 选择属性值中含有某值的元素
伪类选择器
a标签特有的伪类
- :link 用来表示没访问过的链接(正常的链接)
- ：visited 表示访问过的链接 （由于隐私原因，visited这个伪类只能修改链接的颜色
- ：hover 表示鼠标移入的状态
- ：active用来表示鼠标点击
伪元素选择器
-
：：first-letter 表示第一个字母、
-
：：first-line 表示第一行
-
：：selection 表示选中的内容
-
：：before 元素的开始
：：after 元素的最后 必须结合content属性来使用
<style>p::before{ content:"【"; color: saddlebrown; } p::after{ content:"】"; }</style>
选择器的权重及样式继承
样式的继承
我们为一个元素设置样式同时也会应用到它的后代元素上，发生在祖先元素和后代元素之间
注：并不是所有的样式都会被继承，比如 背景相关的布局
选择器的权重
样式冲突：通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配符选择器 0,0,0,0
继承的样式 没有优先级
注：可以在某一个样式后添加！important 则此样式会获得最高的优先级，甚至超过内联样式（一般不会使用）
经验首页