一、CSS引入
<link rel="stylesheet" href="path">
二、CSS基本选择器
1.通配选择器
为所有元素设置样式
* {
padding: 0;
margin: 0;
}
2.元素选择器
为某种元素统一设置样式
p {
color: red;
}
3.类选择器
为某个类名统一设置样式
.className {
color: red;
}
4.ID选择器
为某个ID设置样式
#idName {
color: red;
}
三、复合选择器
1.交集选择器
选中同时符合多个条件的元素
/* 选中同时包含p id="b" class="a" 的元素 */
p.a#b{
}
2.并集选择器
选中多个选择器对应的元素
/* 选中 p 或 id="b" 或 class="a" 的元素 */
p,
.a,
#b{
}
3.后代选择器
选中指定元素中符合要求的后代元素
/* 选中class="a"的元素中的id="b"的p标签 */
.a p#b{
}
4.子代选择器
选中指定元素中符合要求的子元素
/* 选中div中的子代a元素 */
div>.a{
}
5.兄弟选择器
-
相邻兄弟选择器
选中指定元素后符合条件的相邻兄弟元素
/* 选中div后面的p元素 */ div+p{ } -
通用兄弟选择器
选中指定元素后符合条件的所有兄弟元素
/* 选中div后面所有的p元素 */ div~p{ }
6.属性选择器
选中属性值符合一定要求的元素
- [属性名] 选中具有某个属性的元素
- [属性名=“x”] 选中包含某个属性，且属性值等于x的元素
- [属性名^=“x”] 选中包含某个属性，且属性值以x开头的元素
- [属性名$=“x”] 选中包含某个属性，且属性值以x结尾的元素
- [属性名*=“x”] 选中包含某个属性，且属性值包含x的元素
7.伪类选择器
-
动态伪类
- :link 超链接未被访问的状态
- :visited 超链接访问过的状态
- :hover 鼠标悬停在元素上的状态
- :active 元素激活的状态
- :focus 获取焦点的元素（用于表单类元素）
-
结构伪类
-
:first-chird 选择第一个元素
-
:last-chird 选择最后一个元素
-
:nth-chird(n) 选择第n个元素
关于n的取值：
0或为空：什么都不选中
n：选中所有子元素
1~正无穷：选择对应序号的元素
2n 或 even：选中序号为偶数的子元素
2n+1 或 odd：选中序号为奇数的子元素
-an+b：选中序号以a为公差，a1=b的等差数列的子元素
-
:first-of-type 选择同类型中第一个元素
-
:lasr-of-type 选择同类型中最后一个元素
-
:nth-of-type(n) 选择同类型中第n个元素
-
:nth-last-child(n) 选中倒数第n个元素
-
:nth-last-of-type 选择同类型中倒数第n个元素
-
:only-chird 选中没有兄弟的元素
-
only-of-type 选中没有相同元素兄弟的元素
-
:root 选中根元素
-
:empty 选中空元素
-
-
否定伪类
:not() 排除满足括号中条件的元素
-
UI伪类
- :checked 被选中的复选框或单选按钮
- :enable 可用的表单元素（没有disabled属性）
- :disabled 不可用的表单元素（有disabled属性）
-
目标伪类
:target 选中锚点指向的元素
-
语言伪类
:lang() 根据指定语言选择元素（lang属性）
8.伪元素选择器
伪元素：像元素但不是元素，是元素中的特殊位置
- ::first-letter 选中元素的第一个文字
- ::first-line 选中元素的第一行文字
- ::selection 选中元素中的第一行文字
- ::placeholder 选中输入框的提示文字
- ::before 在元素最开始的地方创建一个子元素，使用content属性指定内容
- ::after 在元素最后的位置创建一个子元素，使用content属性指定内容
四、css属性
1.字体属性
-
字体大小
font-size: 10px;
-
字体族
font-family: “楷体”;
-
字体风格
font-style: “”;
-
字体粗细
font-weight: “”;
2.文本属性
-
文本颜色
color: red;
-
文本间距
letter-spacing: 20px; /* 字母间距 */
word-spacing: 20px; /* 单词间距 */
-
文本修饰
text-decoration: overline/underline/line-through/none; /* 行上线/下划线/删除线/无 */
-
文本缩进
text-indext: 20px;
-
文本对齐_水平
text-align: left/center/right;
-
行高
line-height: 20px;
-
文本对齐_垂直
单行文字居中：height=line-height
-
vertical-align: top/middle/bottom; 对行内元素进行对齐
3.列表属性
-
列表符号调整
list-style-type
-
列表符号的位置
list-style-position: inside/outside;
-
自定义列表符号
list-style-image: url(“path”);
-
复合属性
list-style 可代表上述属性，没有数量、顺序的要求
4.表格属性
-
边框属性
border: 1px red solid;
-
表格独有属性
/* 控制表格的列宽 */
table-layout: ;
/* 控制单元格间距 */
border-spaing: 10px;
/* 合并相邻的单元格的边框*/
border-collapse: collapse;
/* 隐藏没有内容的单元格*/
empty-cells: hide;
5.背景属性
- background-color: ; /* 设置背景颜色 */
- background-image: url(path); /* 设置背景图片 */
- background-repeat: ; /* 设置背景图片重复方式 */
- background-position: ; /* 设置背景图片位置 */
- background :; /* 复合属性 */
6.鼠标属性
cursor: url(“”);
五、盒子模型
1.常用长度单位
- px（像素）
- em（相对于当前元素的font-size的倍数）
- rem（相对于根元素的font-size的倍数）
- %（相对于父元素）
2.元素显示模式
-
块级元素（block）
- 在页面中独占一行，不与任何元素共用一行，是从上到下排列的
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
-
行内元素（inline）
- 在页面中不独占一行，一行不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过CSS设置宽高
-
行内块元素（inline-block）
- 在页面中不独占一行，一行不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
3.各元素的显示模式
-
块元素
主体结构标签：<html> 、<body> 排版标签：<h1> ~<h6>、 <hr> 、<p> 、<pre> 、<div> 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd> 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption> <form> 与 <option> -
行内元素
文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins> <a>与<label> -
行内块元素
图片：<img> 单元格：<td>、<th> 表单控件：<input>、<textarea>、<select>、<button> 框架标签：<iframe>
4.修改元素显示模式
display: none/block/inline/inline-block;
5.盒子模型的组成
-
内容区（content）
CSS属性名 功能 属性值 width 设置内容区域宽度 长度 max-width 设置内容区域最大宽度 长度 min-width 设置内容区域最小宽度 长度 height 设置内容区域高度 长度 max-height 设置内容区域最大高度 长度 min-height 设置内容区域最小高度 长度 -
内边距（padding）
padding复合属性，有padding-left，padding-right，padding-top，padding-bottom
padding: 20px; /* 四个方向内边距为20px */ padding: 10px 20px; /* 上下方向内边距为10px，左右方向内边距为20px */ padding: 10px 20px 30px; /* 上方向内边距为10px，左右方向内边距为20px,下方向内边距为30px */ padding: 10px 20px 30px 40px; /* 上 右 下 左 */ -
边框（border）
border 与 left/right/top/bottom 与 color/style/width组合。如border-left-color: ;
-
外边距（margin）
margin复合属性，有margin-left，margin-right，margin-top，margin-bottom
margin: 20px; /* 四个方向外边距为20px */ margin: 10px 20px; /* 上下方向外边距为10px，左右方向外边距为20px */ margin: 10px 20px 30px; /* 上方向外边距为10px，左右方向外边距为20px,下方向外边距为30px */ margin: 10px 20px 30px 40px; /* 上 右 下 左 */
6.处理内容溢出
overflow: auto/hidden/scroll; /* 自动显示滚动条，内容不溢出不显示/隐藏/显示滚动条，不管内容是否溢出 */
7.隐藏元素的两种方式
display: none;
visibility: hidden;
六、定位
1.相对定位
position: relative; /* 采用相对定位，相对原来位置 */
left: 10px; /* 指定相对定位具体位置，right/top/bottom也可以使用 */
2.绝对定位
position: absolute; /* 采用绝对定位 */
left: 10px; /* 指定绝对定位具体位置，right/top/bottom也可以使用 */
3.固定定位
position: fixed; /* 采用固定定位，固定在视口上 */
left: 10px; /* 指定固定定位具体位置，right/top/bottom也可以使用 */
4.粘性定位
position: sticky; /* 采用粘性定位 */
top: 10px; /* 指定固定定位具体位置，right/top/bottom也可以使用 */
5.定位的层级
z-index:
扫一扫
3070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
