# 前端 CSS、CSS3 核心样式和属性

TIP

Web 前端入门到精通必会

# 1、盒模型

属性名称 描述
width,height 设置元素的宽度,高度
padding-top,padding-right 设置元素上内边距,右内边距
padding-bottom,padding-left 设置元素下内边距,左内边距
padding 设置元素四个方向的内边距
margin-top 设置盒子与上方盒子的距离
margin-right 设置盒子与右方盒子的距离
margin-bottom 设置盒子与下方盒子的距离
margin-left 设置盒子与左方盒子的距离
margin 设置元素上、右、下和左四个方向的外边距
box-sizing 规定计算一个元素实际宽高的方式
display 设置元素表现的类型,例如: display:block;设置元素表现为块元素
visibility 设置元素是否是可见的

# 2、常用文本样式属性

属性名称 描述
color 规定字体的颜色,也称为前景色
font-size 设置字体大小
font-weight 设置字体粗细
font-style 设置字体样式
text-decoration 设置添加到文本的装饰线

# 3、字体属性

属性名称 描述
font-family 设置元素的字体
@font-face 定义字体,例如:阿里巴巴普惠体

# 4、段落和行相关属性

属性名称 描述
text-indent 设置首行文本的缩进
line-height 设置文本行间的距离(行高)
text-align 设置文本对齐方式
font 设置所有字体属性

# 5、CSS 的书写位置

属性名称 描述
style 内嵌式,书写在 head 标签对中,使用<style></style>标签对,里面书写 css 样式。例如:
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
行内式,直接在标签上书写 style 属性设置 css 样式。这种方式不常用,了解即可
示例:<h1 style="color:blue;text-align:center">这是一个标题</h1>
link 链接外部样式文件,例如:
<head>
<link rel="stylesheet" href="css文件">
</head>
@import 导入样式规则 (不常用,了解即可)
例如:@import url('css 文件')

# 6、层叠性和选择权重

属性名 描述
!important 提升权重(不常用,了解即可)

# 7、伪元素

属性名 描述
::before 作为匹配选中元素的第一个子元素,必须设置 content 属性
::after 作为匹配选中元素的最后一个子元素,必须设置 content 属性
::selection 设置文档中被用户高亮的部分,即使用鼠标圈选的部分(不常用,了解即可)
::first-letter 选择块元素中的第一个字母设置样式(不常用,了解即可)
::first-line 选择块元素中的第一行全部文字设置样式(不常用,了解即可)

# 8、伪类

属性名 描述
:link 选择所有未被访问的超级链接
:visited 选择所有访问过的超级链接
:active 选择被用户激活的元素
:hover 选择鼠标悬停的元素

# 9、css3 新增伪类

注:

不常用,了解即可

属性名 描述
:empty 选择没有任何子级的元素
:focus 选择当前获得焦点的元素
:enabled 选择已启用的元素
:disabled 选择禁用的元素
:checked 选择选中的输入元素(仅适用于单选按钮或复选框)
:root 选择根元素,即标签

# 10、标签选择器、id、class 选择器

属性名 描述
element 标签选择器,直接使用元素的标签名,表示选择指定元素名称的所有元素
示例:p{color:red;}选择所有的 p 标签
#id id 选择器,使用井号#作为前缀,表示选择指定 id 的元素
示例:#firstname{color:yellow;} 选择 id=firstname" 的元素
.class class 选择器,使用点.作为前缀, 表示选择指定类名的元素
p 示例:.intro{color:red;} 选择 class="intro" 的元素

# 11、复合选择器

属性名 描述
element1 element2 后代选择器,使用空格分隔两个元素
示例:.box p{} 表示选择类名为 box 的标签的后代元素 p 标签
element1.class 交集选择器
示例:h3.spec{} 表示选择有.spec 类的<h3>标签
element1,element2 并集选择器,也叫分组选择器,使用逗号隔开
示例:ul, ol{} 表示同时选择<ul>标签和<ol>标签

# 12、元素关系选择器

属性名 描述
element>element 子选择器,使用 > 符号分隔两个元素
示例: div > p {} 选择<div>下的所有子级<p>元素
element+element 相邻兄弟选择器,使用 + 分隔两个元素
示例:div + p {}选择所有紧接着<div>元素之后的第一个<p>元素
element1~element2 通用兄弟选择器,使用 ~ 分隔两个元素
示例:p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素

# 13、序号选择器

属性名 描述
:first-child 匹配其父元素中的第一个子元素
示例:p:first-child{} 匹配<p>的父元素的第一个<p>元素
:last-child 匹配父元素中最后一个子元素
示例:p:last-child{}匹配<p>的父元素下最后一个<p>元素
:nth-child(n) 匹配父元素中的第 n 个子元素
示例:p:nth-child(2)匹配<p>的父元素中第 2 个子元素<p>标签
:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 (不常用,了解即可)
示例:p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第 2 个同级兄弟元素
:nth-last-child(n) 匹配属于其父元素的第 n 个子元素的所有元素,从最后一个子元素开始计数 (不常用,了解即可)
示例:p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第 2 个同级兄弟元素
:nth-last-of-type(n) 匹配同类型中的倒数第 n 个同级兄弟元素,从最后一个子元素开始计数(不常用,了解即可)
示例:p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第 2 个同级兄弟元素

# 14、属性选择器

注:

不常用,了解即可

属性名 描述
[attribute] 选择指定属性的元素
[attribute=value] 选择指定了属性和值的元素
[attribute^=value] 选择属性值带指定的值开始的元素
[attribute$=value] 选择属性值带指定的值结尾的元素
[attribute*=value] 选择元素属性值包含指定值的元素
[attribute~=value] 选择属性值包含一个指定单词的元素
[attribute|=value] 选择属性值以指定值开头的元素

# 15、浮动

属性名 描述
float 设置元素浮动
BFC 块级格式化上下文,它是页面上一个独立的容器
overflow 溢出隐藏:溢出盒子边框的内容会被隐藏,也可以让盒子形成 BFC(块级格式上下文)
clear 清除元素的浮动

# 16、定位

属性名 描述
position 规定元素的定位类型
relative 定义相对定位
top 设置定位元素距离顶部的距离
bottom 设置定位元素距离底部的距离
left 设置定位元素距离左侧的距离
right 设置定位元素距离右侧的距离
absolute 定义绝对定位
z-index 设置定位元素的堆叠顺序,数值大的会盖住数值小的
fixed 定义固定定位

# 17、鼠标样式

属性名 描述
cursor 设置光标的形状

# 18、边框

属性名 描述
border-width 设置边框的宽度
border-style 设置边框线的形状
border-color 设置边框的颜色
border-top-width 设置上边框宽度
border-right-width 设置右边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-top-style 设置上边框样式
border-right-style 设置右边框样式
border-bottom-style 设置下边框样式
border-left-style 设置左边框样式
border-top-color 设置上边框颜色
border-right-color 设置右边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-top 上方向边框样式的复合写法
border-bottom 下方向边框样式的复合写法
border-right 右方向边框样式的复合写法
border-left 左方向边框样式的复合写法
border 边框的复合写法,设置所有的边框属性
solid 定义实线边框
dashed 定义虚线边框
dotted 定义点状线边框

# 19、圆角

属性名 描述
border-top-left-radius 设置左上方的圆角
border-top-right-radius 设置右上方的圆角
border-bottom-left-radius 设置左下方的圆角
border-bottom-right-radius 设置右下方的圆角
border-radius 设置圆角的复合写法

# 20、盒子阴影

属性名 描述
box-shadow 给元素添加阴影效果

# 21、背景

属性名 描述
background-color 设置背景颜色
background-image 设置盒子的背景图片、设置线性渐变背景、设置径向渐变背景
background-repeat 设置背景图像是否重复
background-size 设置背景图片大小
background-clip 设置背景的绘制区域(不常用,了解即可)
background-origin 设置背景图片显示区域的位置(不常用,了解即可)
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动(不常用,了解即可)
background-position 设置背景图像的位置
background 设置背景样式的复合写法

# 22、浏览器前缀

属性名 描述
-webkit- 谷歌浏览器的私有前缀
-moz- 火狐浏览器的私有前缀
-ms- IE、Edge 浏览器的私有前缀
-o- 欧朋浏览器的私有前缀

# 23、2D/3D 转换

属性名 描述
transform 对元素进行旋转、缩放、移动或倾斜
transform-origin 设置元素变换的原点 (不常用,了解即可)
scale 设置缩放变形(不常用,了解即可)
skew 设置斜切变形(不常用,了解即可)
translate 设置位移变形
perspective 设置透视强度,即“人眼到舞台的距离”
上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X