这篇文章介绍了CSS的基础知识，包括层叠样式表的概念，以及三种样式引入方式：内联样式、内部样式表和外部样式表。文章详细讲解了各种选择器的用法，如元素选择器、ID选择器、类选择器，以及更复杂的复合选择器、伪类选择器等，帮助读者理解如何精准控制网页样式。
css介绍
css 是层叠样式表
网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我 们能看到的只有最上边的一层
css语法
CSS的语法：
选择器 声明块
选择器：如何选中对应的html标签
声明块：就是对应的css样式 名值对结构
名值对结构：样式名:样式值;
css引入方式
内联样式/行内样式
在需要修改的标签的开始标签中配置style=““， 在style中写自己需要修改的样式。多个修改用；隔开。
<p style="color: antiquewhite;">要这密中，觉高见馆。</p>缺点：
1、结构和样式耦合
2、不容易修改
内部样式表
在head标签里配置style标签，通过选择器选中对应html结构，在大括号里面设置css声明块，可以写多组样式，也是以;隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: pink;
font-size: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
你是一个div
</div>
</body>
</html>语法：选择器{css声明块}
缺点：不方便复用
外部样式表
在html文件外新建一个.css文件，在css文件通过选择器选中对应的结构，设置相关的样式
通过link标签中的href，将html文件和css文件联系在一起。在href中写文件的位置
<link rel="stylesheet" href=" />常用的选择器
元素（标签）选择器
通过标签名选中对应的内容
语法 标签名{}
<style>
div {
}
</style>缺点：当文件元素过多时用标签选择器容易波及其他的标签
id选择器
通过id属性值，选中对应的结构
语法：#id属性值{}
注意：id属性值不能重复使用，不能以数字开头，不能是汉字
</head>
<style>
#div {
}
</style>
</head>
<body>
<div id=“div”>
你是一个
</div>
</body>通配符选择器
选中页面中所有的标签，当文件全部有相同样式时可以用通配符选择器
语法：*{}
class选择器
通过指定class属性值，选中对应的结构
语法：.class属性值{}
注意：（1）、这也是最常用的选择器
2）、可以起多个class属性值，中间以空格隔开
</head>
<style>
.div {
}
</style>
</head>
<body>
<div class=“div”>
你是一个
</div>
</body>复合选择器
交集选择器
作用：选中满足多个条件的元素
语法：选择器1选择器2选择器3····{}
注意：如果选择器中有元素选择器，元素选择器必须放在第一位
并集选择器
作用：选中多个选择器对应的内容
语法：选择1,选择器2，选择器3···{}
关系选择器
子元素选择器
通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
后代选择器
通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
注意：由于子元素一定情况下也属于后代元素， 在使用的时候，能用子元素选择器，不用后代选择器,否则一定程度上会影响网站性能
下一个兄弟选择器
通过指定兄找到紧挨着下一个兄弟
语法：兄+弟{}
选择所有兄弟选择器
通过指定兄找到下面所有的兄弟，不包括前面的
语法：兄～弟{}
属性选择器
通过指定的属性名或属性值来选中对应的内容
不同的应用场景：
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
伪类选择器
伪类不特指某一个元素，指的是一个元素的特殊状态-比如：第一个元素，被点击的元素，鼠标移入的元素···
伪类根据所有的子元素进行排序
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值
n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数同类型的子元素中去选择
:first-of-type 选中第一个子元素
:last-of-type 选中最后一个子元素
:nth-of-type() 选中第n个子元素否定伪类
将符合条件的元素从选择器中去除
:not() 
扫一扫
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
