精通CSS样式和属性：Web前端入门到进阶指南

发表时间: 2022-05-25 21:40

Web前端入门到精通必会的CSS样式和属性，昨天更新了Web前端入门到精通必学的标签及属性大全，得到了很多同学的认可，有同学想要看接下来CSS以及JS的相关基础内容，今天他来了！

抽时间为大家总结了实际开发中必会的CSS、CSS3样式和属性（常用和不常用的内容都有标注），做成了网页版，以便于查询使用，对于初学者来说可以少走弯路，明确重点，时间诚可贵呀️！

盒模型

盒模型：width，height，padding，margin，box-sizing，display，visibility

单词	描述
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	设置元素是否是可见的

常用文本样式属性

常用文本样式属性：color，font-size，font-weight，font-style，text-decoration

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

字体属性

字体属性：font-family，@font-face

单词	描述
ont-family	设置元素的字体
@font-face	定义字体，例如：阿里巴巴普惠体

段落和行相关属性

段落和行相关属性：text-indent，line-height，text-align，font

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

CSS的书写位置

css的书写位置：style，link，@import

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

层叠性和选择权重

层叠性和选择权重：!important

单词	描述
!important	提升权重（不常用，了解即可）

伪元素

伪元素：::before，::after，::selection，::first-letter，::first-line

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

伪类

伪类：:link，:visited，:active，:hover

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

css3新增伪类

css3新增伪类：:empty，:focus，:enabled，:disabled，:checked，:root （不常用，了解即可）

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

标签选择器和id选择器

标签选择器和id选择器：element、#id

单词

描述

element

标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素

示例：p{color:red;}选择所有的p标签

#id

id选择器，使用井号#作为前缀，表示选择指定id的元素

示例：#firstname{color:yellow;} 选择id=firstname" 的元素

class 选择器

class 选择器：.class

单词

描述

.class

class选择器，使用点.作为前缀，表示选择指定类名的元素

p示例：.intro{color:red;} 选择class="intro" 的元素

复合选择器

复合选择器：后代，交集，并集

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

元素关系选择器

元素关系选择器：子选择器，相邻兄弟，通用兄弟选择器

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

序号选择器

序号选择器：:first-child，:last-child，:nth相关

单词	描述
: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个同级兄弟元素

属性选择器

属性选择器：[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] （不常用，了解即可）

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

浮动

浮动：float，BFC，overflow，clear

单词	描述
float	设置元素浮动
BFC	块级格式化上下文，它是页面上一个独立的容器
overflow	溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成BFC（块级格式上下文）
clear	清除元素的浮动

定位

定位：position，relative，top，bottom，left，right，absolute，z-index，fixed

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

鼠标样式

鼠标样式：cursor

单词	描述
cursor	设置光标的形状

边框

边框：border相关，属性（solid，dashed，dotted）

单词	描述
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	定义点状线边框

圆角

圆角：border-radius

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

盒子阴影

盒子阴影：box-shadow

单词	描述
box-shadow	给元素添加阴影效果

背景：background相关

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

浏览器前缀

浏览器前缀：-webkit-，-moz-，-ms-，-o-

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

2D/3D转换

2D/3D转换：transform，transform

单词	描述
transform	对元素进行旋转、缩放、移动或倾斜
transform-origin	设置元素变换的原点（不常用，了解即可）
scale	设置缩放变形（不常用，了解即可）
skew	设置斜切变形（不常用，了解即可）
translate	设置位移变形
perspective	设置透视强度，即“人眼到舞台的距离”

还需要总结什么？需要的同学留言，做我的粉丝我会宠你接下来我会抽时间把这15年的Web全栈相关的经验和知识从入门到精通逐一总结出来