发布时间：2025-12-10 11:23:17 浏览次数：4
目录
一、基础概念
二、CSS使用
1、行内样式
2、内部样式
3、外部样式
4、CSS语法
5、CSS注释
三、基本选择器
1、id选择器
2、class选择器
3、元素选择器/标签选择器
4、选择器优先级
5、样式表的优先级
四、CSS常用样式
1、color：字体颜色
2、width height：宽高
3、背景样式
4、文本样式
5、列表样式
6、边框样式
6、HTML&&CSS调试器
五、盒子模型
1、盒子的宽高
2、设置宽度=元素实际宽度，box-sizing属性。
六、更多常用样式
1、float
1.1 元素怎样浮动
1.2 彼此相邻的浮动元素
1.3 清除浮动
2、Overflow
3、Display和Visibility
3.1 两者之间的区别
3.2 display样式：
七、复合选择器
1、全局选择器
2、并集选择器
3、交集选择器
4、后代选择器
5、子元素选择器
6、代码示例
7、伪类选择器
8、复合选择器比对
层叠样式表（英文名称：Cascading Style Sheets）
*层叠：多个样式可以作用到同一个html元素上，同时生效；
是一种用来表现html或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS很像化妆，通过不同的CSS将 同样的html内容打造为不同的呈现结果。
CSS优势
根据定义CSS位置不同，分为行内样式、内部样式和外部样式。
内联样式：直接在标签中编写样式，通过使用标签标签内部属性style。
<html标签 style="样式1:值1;样式2:值2;"></html标签><p style="color:red;">hello my class</p>弊端：只能对当前标签生效，没有做到内容与样式分离，耦合度太高。
定义在head标签内，通过style标签，该标签内容就是Css代码。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内部样式</title><style>p{color:red;}</style></head><body><p>hello my class</p></body></html>lina.css文件内容：
p{ color:red; }html页面中引入：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" href="css/lina.css" /></head><body><p>hello my class</p></body></html>作用域范围：
外部样式表>内部样式表>行内样式表
优先级：
外部样式表<内部样式表<行内出样式表
相同的样式作用在同一个标签上：就近原则；不同的样式作用在同一个标签上：叠加。
加载外部样式表或者内部样式表时候，需要注意加载顺序：加载html文件是从上向下加载的，也就是后面加载的样式会覆盖前面的样式。
css注释以/*开始，*/结束。
/*这是CSS的注释*/h1{color:red; /*这是颜色的注释*/font-size:12px;}选择具有相同id属性值的元素，建议html页面中的id值唯一。
id选择器可以为标有特定id的html元素指定特定的样式。
html元素以id属性来设置id选择器，CSS中的id选择器以“#”来定义。
PS：id属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。
虽然多个元素可以使用同一个id选择器设置样式，但是不推荐；如果需要同样的样式对多个标签起作用可以使用类选择器。
<head><meta charset="UTF-8"><title></title><style>#myDiv{color: red;font-style: italic;}</style></head><body><p id="myDiv">你好世界</p></body>选择具有相同class属性值元素。
class选择器用于描述一组元素样式，class选择器有别于id选择器，可以在多个元素中使用。
class选择器在html中以class表示，在css中以一个点"."表示。
PS：class属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。
<head><meta charset="UTF-8"><title></title><style>.myClass{color: red;}</style></head><body><p class="myClass">hello world</p></body>选择具有相同标签名称的元素。
定义选择器语法：标签名称{}
ps:标签名称必须是html提供好的标签。
使用标签选择器：自动使用在所有同名的标签上。
<head><meta charset="UTF-8"><title></title><style>p{color: blue;}</style></head><body><p>第一段</p><p>第二段</p></body>ID选择器>class选择器>标签选择器
当多个选择器作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加生效。
行内样式表>内部样式表>外部样式表
三个样式表中都有同样的内容作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加。
三种颜色值：
rgba(红，绿，蓝，透明度)透明度取值：0-1，0全透明，1不透明，0.5半透明。
PS：只有块状元素可以设置宽高，行级元素设置宽高不生效。
取值方式两种：
谷歌浏览器为例：快捷键F12或者开发者工具调出调试器
所有的html元素可以看做是盒子，在css中，"box model"是用来设计和布局时使用。
CSS盒子模型本质是一个盒子，封装周围的html元素，它包括：边框、边距、填充、实际内容。
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
元素的实际宽度和高度：
计算一个元素在实际在页面占据的总宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素实际在页面占据的总高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS的float会使得元素向左或者向右移动，其周围的元素也会重新排列。
float往往应用于图像，但它在布局时候一样有用。
元素的左右方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相连。
元素浮动之后，周围元素将重新排列，为了避免这种情况，使用clear属性清除浮动。
clear属性指定元素两侧不能出现浮动。
<head><meta charset="UTF-8"><title></title><style>p{width: 400px;height: 200px;margin-bottom: 10px;}</style></head><body><!--没有浮动属性的元素都属于常规文档流，从上往下从左往右依次显示浮动的元素都脱离了常规文档流；为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层如果想要费浮动元素不受浮动元素影响，需要使用clear属性。--><p style="background: rgba(255,0,0,0.5);float: left;">p1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动</p><p style="background: lawngreen;width: 600px;height: 350px;">p2-未浮动，常规文档流，<br/>PS:此时p1在p2的上方显示，因为p1和p2是不同文档流中的元素，显示互不影响。如果不想让p2被浮动元素影响，需要添加clear属性。添加clear：left;之后p2就会忽略p1浮动的影响，在p1后面显示，不会重叠</p><p style="background: lightblue;float: right;width: 1800px;">p3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动</p><p style="background: lightcoral;width: 600px;height: 350px;">p4-未浮动，常规文档流，<br/>PS:此时p3在p4的上方显示，因为p3和p4是不同文档流中的元素，显示互不影响如果不想让p4被浮动影响，需要添加clear属性。添加clear:right;之后p4就会忽略p3浮动影响，在p3后面显示，不会重叠了。clear属性有三个取值：left、right、both;分别是去除左浮动、右浮动和所有浮动影响。</p><p style="background: lavender;">p5-未浮动，常规文档流。</p></body>控制内容溢出元素框时显示方式。
overflow属性有如下值：
| 值 | 描述 |
| visible | 默认值。值不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其他内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。 |
| inherit | 规定应该从父元素继承overflow属性值 |
注意：overflow属性只作用于规定高度的块元素上。
在Mac系统中，滚动条默认是隐藏的，使用的时候才显示。
display设置一个元素应该如何显示，visibility设置一个元素可见还是隐藏。
隐藏一个元素可以通过把display设置为“none”或者visibility设置为“hidden”。但是这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素任然占用与未影藏之前一样的空间。该元素虽然被隐藏了但任然影响布局。
display：none也会隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不仅被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display:block；显示为块元素
display:inline；显示为内联元素
display:inline-block 显示为内联块元素，表现为同行显示并且可以修改宽高内外边距等属性。
由两个或多个基础选择器，通过不同方式组合而成。
可以更准确更细致的选择目标元素标签。
*{} 一般去掉标签的一些默认效果时候使用，或者整站通用效果时使用。但是不推荐使用。
并集选择器是各选择器通过连接形成的，通常用于集体声明。
语法：选择器1,选择器2,...,选择器n{}
任何形式选择器都可以作为并集选择器的一部分(标签选择器、class选择器、id选择器)。
<head><meta charset="UTF-8"><title></title><style>p,p,ul,li,ol,dl,dd,dt{margin: 0px;padding: 0px;}</style></head><body><p>111111111</p><p>22222222</p><ul><li>333333333</li></ul></body>条件：交集选择器又两个选择器构成，找到的标签必须满足，既有标签一的特点，也有标签二的特点。
语法：h3.class{color:red}
其中第一个选择器为标签选择器，第二个为类选择器。两个选择器之间不能有空格。
交集选择器是并且的意思，即...又...的意思。
概念：后代选择器又称为包含选择器。
作用：用来选择元素或者元素组的子孙后代。
将外层元素写在外面，内层元素写在后面，中间用空格分开。爷爷，父亲，儿子，孙子...
格式：父亲 儿子{属性:属性值;属性:属性值} 例如：.class h3{color:red;font-size:16px}
当标签发生嵌套时，内层标签就成为外层标签的后代。
作用：子元素选择器只能选择作为某个元素子元素(亲儿子)的元素。
写法：父元素写在前面，子元素写在后面，中间用>连接。
例如：.class>h3{color:red;font-size:16px}
和类选择器相比，类选择器使用.class{}，伪类选择器使用:link{}
作用：用于向某些选择器天长假特殊效果。比如向链接添加特殊效果。
伪类选择器很多：链接伪类、结构伪类等。
链接伪类：
注意：
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号和用法 |
| 后代选择器 | 用来选择后代元素 | 是选择所有的子孙后代 | 较多 | 空格 p .p1 |
| 子代选择器 | 选择最近一级元素 | 只选择亲儿子 | 较少 | > p>.p1 |
| 交集选择器 | 选择两个标签交集部分 | 即是...又是 | 较少 | 没有符号 p.p1 |
| 并集选择器 | 选择某些样式相同选择器 | 可以用于集体声明 | 较多 | , p,h1,p |
| 链接伪类选择器 | 给链接更改状态 | 较多 | : :hover |
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流