1.CSS简介--层叠样式表（CascadingStyleSheets，CSS）
网页实质上是一个多层的结构，经过CSS能够分别为网页的每一个层来设置样式，而最后咱们能看到只是网页的最上边一层。
CSS修改元素样式的方式大致能够分为3种： 内联样式（行内样式）内部样式表外边样式表内联样式：
在标签内部经过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 rel="stylesheet" href="./style.css">
将样式编写到外边的CSS文件中，能够运用到浏览器的缓存机制，从而加快网页的加载速度，加强用户的体验。
2.CSS基本语法
（1）注释
CSS中的注释没论单行、多行只能运用/*和*/包裹。
HTML中的注释没论单行、多行只能运用<!--和-->包裹。
JS中的注释单行注释运用//。多行注释运用/*和*/包裹。
（2）选取器
选取器权重： 选取器权重内联样式1，0，0，0ID样式0，1，0，0类和伪类选取器0，0，1，0元素选取器0，0，0，1通配选取器0，0，0，0继承的样式无优先级在某个样式后面添加！important最高优先级CSS经过选取器选中页面中的指定元素。
通配符选取器：选取页面中的所有元素。
*{
color: red;
}
元素选取器：亦叫标签选取器，按照标签名叫作来选取元素。
h1{
color: green;
}
类选取器：按照class名叫作来选取元素。
.left{
color: blue;
}
ID选取器：按照id属性值选中一个元素。
#red{
color: red;
}
属性选取器：按照元素的属性值选中一组元素。 语法1：[属性名] 选取含有指定属性的元素语法2：[属性名=属性值] 选取含有指定属性和属性值的元素语法3：[属性名^=属性值] 选取属性值以指定值开头的元素语法4：[属性名$=属性值] 选取属性值以指定值结尾的元素语法5：[属性名*=属性值] 选取属性值中含有某值的元素复合选取器： 交集选取器：选中同期复合多个要求的元素。.a.b.c{
color: blue;
}
并集选取器：运用逗号分隔。h1,span{
color: green;
}
关系选取器： 子元素选取器：选中指定父元素的子元素。div.box > p > span{
color: orange;
}
后代选取器：选取指定元素内的指定后代元素。div span{
color: skyblue;
}
兄弟元素选取器：选取兄弟元素p + span{
color: red;
}
p ~ span{
color: red;
}
伪类选取器：选取指定伪类元素。
伪类（不存在的类），用来描述一个元素的特殊状态，例如：第1个子元素，被点击的元素，鼠标移入的元素，运用：开头。 :first-child 第1个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素n：第n个，n的范围0到正没穷2n或even：选中偶数位的元素2n+1或odd：选中奇数位的元素:link 未拜访的链接:visited 已拜访的链接 因为隐私的原由，因此visited这个伪类只能修改链接的颜色:hover 鼠标悬停的链接:active 鼠标点击的链接伪元素选取器：表
| 
发表于 2024-6-30 05:07:39
