CSS–层叠样式表
网页实际上是一个多层的结构,通过CSS可分别为网页的每一层来设置样式，最终用户看到的只是网页的最上一层。
总之，CSS是用来设置网页中元素的样式。
1、使用CSS修改元素的样式
方式一：内联样式(行内样式)-- 标签的style属性
- 在标签内部通过style属性来设置元素的样式；
存在问题：使用内联样式，样式只能对一个标签生效；如果希望影响到多个元素，必须在每一个元素中都重复设置一边，非常不方便。
注意：开发时绝对不要使用内联样式。
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
方式二：内部样式表
将样式编写到head中的style标签中，然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
内部样式表更加方便对样式进行复用。
问题：内部样式表只能对所在的网页起作用，不能跨页面进行复用。
<style>
p{
color: green;
font-size: 50px;
}
</style>
方式三：外部样式表–最佳方式
将CSS样式编写到一个外部CSS文件里，然后通过link标签来引入外部的CSS文件。
外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。
将样式表写到外部CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
style.css文件内容如下：
p{
color: green;
font-size: 50px;
}
外部样式表需要通过link标签进行引入:
<head>
<link rel="stylesheet" href="./style.css">
</head>
2、CSS语法
css中的注释：/* */
2.1 CSS的基本语法
-
选择器
通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中所有的p元素。 -
声明块
通过声明块来指定要为元素设置的样式，
声明块是由一个个的声明组成，一个样式名对应一个样式值，名和值之间可以：连接。
p{
color: red;
font-size: 40px;
}
2.2 常用选择器
-
元素选择器
作用：根据标签名来选中指定的元素。
语法：标签名{}
例子：p{}，h1{}，div{} -
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{}，#red{} -
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
例子：.class1{}
class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，也可同时为一个元素指定多个class属性。
- 通配选择器
作用：选中页面中的所有元素
语法：*
例子：*{}
<head>
<style>
/* 元素选择器 */
p{
color: red;
font-size: 40px;
}
/* id选择器 */
#p2{
color: green;
font-size: 30px;
}
/* 类选择器 */
.blue{
color: blue;
font-size: 30px;
}
/* 通配选择器 */
*{
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<p>我是第一个p</p>
<p id="p2">我是第二个p</p>
<h1 class="blue">秋水共长天一色<h1>
<h1 class="blue abc">我是标题</h1>
<p class="blue">我是第一个p</p>
</body>
2.3 复合选择器
-
交集选择器
作用：选中同时满足多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
例子：div.red{}，.a.b.c{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头 -
并集选择器
也叫选择器分组。
作用：同时选择多个选择器对应的元素。
语法：选择器1,选择器2,选择器3,选择器n{}
例子：#b1,.p1,h1,span,div.red{}
<head>
<style>
/* 类为red的div元素 */
div.red{
font-size: 30px;
}
/* class同时是a b c的元素 */
.a.b.c{
color: red;
}
h1, span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p</p>
<div class="red2 a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
2.3 关系选择器
元素之间的关系：
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素是子元素
- 祖先元素：直接或交接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素。
- 后代元素：直接或间接被祖先元素包含的元素叫做后代元素。子元素也是后代元素。
- 兄弟元素：拥有相同父元素的元素叫兄弟元素。
-
子元素选择器
作用：选中父元素中指定的子元素
语法：父元素 > 子元素{} -
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先元素 后代元素{} -
下一个兄弟选择器
作用：选中指定元素的下一个兄弟元素
语法：前一个 + 下一个{} -
后面所有兄弟选择器
作用：选中指定元素后面所有的兄弟元素
语法：兄 ~ 弟{}
<head>
<style>
/* 子元素选择器 */
div.box > span{
font-size: 30px;
}
/* 后代元素选择器 */
div span{
font-size: 30px;
}
/* 下一个兄弟选择器 */
p + span{
color: green;
}
/* 后面所有兄弟选择器 */
p ~ span{
color: green;
}
</style>
</head>
<body>
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
<p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<span>我是div外的span </span>
</body>
2.4 属性选择器
根据属性名选择含有指定属性的所有元素。
- 选择含有指定属性的所有元素
/*选择含有title属性的所有元素：*/
p[title]{
color: orange;
}
- 选择含有指定属性以及对应值的元素
选择指定title属性值的元素：
p[title=abc]{
color: orange;
}
- 选择以属性值开头的所有元素
选择含有以title属性值abc开头的所有元素：
p[title^=abc]{
color: orange;
}
- 选择以属性值结尾的所有元素
选择以title属性值abc结尾的所有元素：
p[title$=abc]{
color: orange;
}
- 选择包含属性值的所有元素
选择含有title属性值中含有e的所有元素：
p[title*=e]{
color: orange;
}
<body>
<!-- 设置p元素的titil属性值，将鼠标放到对应的内容上会显示titile属性值 -->
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
2.5 伪类选择器
伪类（不存在的类，特殊的类）。
- 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用**😗*开头
- 对所有子元素进行排序选择：
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
- 对于:nth-child()的参数，有如下特殊值：
-
- n ：第n个，n的范围0到正无穷；
- 2n 或 even：表示选中偶数位的元素；
- 2n+1 或 odd ：表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序。
- 对同类型元素进行排序选择
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序。
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
<head>
<style>
/* 选择无序表中第一个子元素 */
ul > li: first-child{
color:red;
}
/* 选择无序表中最后一个子元素 */
ul > li: last-child{
color:red;
}
/* 选择无序表中第n个子元素 */
ul > li: nth-child(2n+1){
color:red;
}
/* 选择无序表中第n个子元素 */
ul > li: nth-child(2n){
color:red;
}
/* 选择无序表中li类型的第1个子元素 */
ul > li: first-of-type{
color:red;
}
/* 选择无序表中除第3个li元素之外的子元素
*/
ul > li: not(:nth-of-type(3)){
color:red;
}
</style>
</head>
<body>
<ul>
<span>我是一个span</span>
<li>第〇个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
2.6 a元素的伪类
- :link
用来表示没有访问过的链接 - :visited
用来表示访问过的链接 - :hover
用来表示鼠标移入的状态 - :active
用来表示鼠标点击
<head>
<style>
:link{
color: blue;
}
:visited{
color: green;
}
:hover{
color: red;
}
:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<br><br>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
2.7 伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）。
- 伪元素使用 :: 开头
- :: first-line 表示第一行
- :: selection 表示鼠标选中的内容
- :: before 元素的开始
- :: after 元素的最后
- before 和 after 必须结合content属性来使用
<head>
<style>
p{
font-size: 20px;
}
p::first-letter{
font-size: 50px;
}
p::first-line{
backgroud-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: ' [ ';
}
div::after{
content: ' ] ';
}
</style>
</head>
<body>
<div>Hello Hello How are you</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
2.8 样式的继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上；继承是发生在祖先与后代之间的。
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承。
<head>
<style>
p{
color: red;
background-color: orange;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
</body>
2.9 选择器的权重
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
选择器的权重
内联样式 1,0,0,0 （style=""）
id选择器 0,1,0,0 （#id值{}）
类和伪类选择器 0,0,1,0 （.类名{}和:伪类名{}）
元素选择器 0,0,0,1 （p{} div{}）
通配选择器(*) 0,0,0,0 （ *{}）
继承的样式 没有优先级
- 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）;
- 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器;
- 如果优先级计算后相同，此时则优先使用靠下的样式;
- 可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中这个玩意一定要慎用！<head> <style> /* id选择器*/ #box1{ background-color: orange; } /* 类选择器 ,标注了！important,优先级最高*/ .d1{ background-color: purple !important; } /* 类选择器*/ .red{ background-color: red; /* font-size: 20px; */ } /* 元素选择器*/ div,p,span{ background-color:yellowgreen; } /* 通配选择器*/ *{ font-size: 50px; } /* 元素选择器*/ div{ font-size: 20px; } </style>
2.10 单位
长度单位主要有四种表示：
- 像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样
- 百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
- em
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
- rem
- rem是相对于根元素的字体大小来计算
2.11 颜色
在CSS中颜色设置有5种方式：
- 直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green …，但是在css中直接使用颜色名非常的不方便。 - RGB值
- R red，G green ，B blue
- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
- 语法：RGB(红色,绿色,蓝色)
- RGBA:
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
- 十六进制的RGB值：
- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
- HSL值 HSLA值
background-color: red;
background-color: rgb(0, 255, 0);
background-color: rgba(106,153,85,.5);
background-color: #ffff00;
background-color: #ff0;
background-color: hsla(98, 48%, 40%, 0.658);
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
