前期前端学习常用命令笔记之CSS/CSS3

类型	说明
#标签id名称	对应id标签样式
.标签类名称	对应类标签样式
元素1>元素2	选择父元素是元素1 的所有元素2元素。
元素1~元素2	元素1后出现的所有元素2的样式
元素1,元素2	元素1和元素2相同样式
元素1 元素2	元素1后代的元素2（空格隔开）样式
元素1+元素2	相邻兄弟选择器，共同父元素，元素1、2同时出现时改变样式

1.2 伪类

选择器:	示例说明
link	选择所有未访问链接
visited	选择所有访问过的链接
hover	把鼠标放在链接上的状态
active	选择正在活动链接(鼠标按下未弹起的连接)
first-child	选择器匹配属于任意元素的第一个子元素的元素
lang(属性值)	元素的lang属性选择一个开始值
first-child	元素后第一个元素
nth-child(数字)	元素匹配的父元素中第 “数字” 个子元素
focus	选取获得焦点的表单元素(input:focus)

1.3 伪元素

必须有content

元素	备注
after	在元素内最后添加元素
before	在元素内最前添加元素

2 属性

属性	值	备注
height	值	高度
line-height	值	行高
white-space	nowarap	强制不换行
z-index	数值px	默认为0，改变z轴，需配合定位
opacity	0-1	透明度调整
filter	hue-rotate(数值)	调整滤镜颜色
vertical-align	middle	属性设置一个元素的垂直对齐方式：中部
justify-content	center	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式（弹性盒子）
visibility	hidden	指定一个元素不可见
*zoom	1	IE6/IE7专有清除浮动

3 宽width

值	备注
值	宽度值
fit-content	类似于auto 的计算

4 超出overflow

值	备注
hidden	超出部分隐藏/清除浮动获取高度/解决塌陷
scroll	滚动条

5 外边距margin/内边距padding

属性	值	备注
	0/百分比	或0%，边距左右占比
	0 auto	上下为0，左右自动（居中）
	值值值值	单位px，边距像素点
-top	值	单位px，边距上部距离
-buttom	值	单位px，边距底部距离
-inline	值	单位px，边距左右距离

6 颜色color

值	备注
单词（red、green、blue等）	单词对应颜色
rgb(红色参数,绿色参数,黄色参数)	0-255构成颜色
rgba(红色参数,绿色参数,黄色参数,透明度数值)	透明度为0~1由浅到深
十六进制数值十六进制数值十六进制数值	0~f 表示各数值

7 字体font

值	备注
[样式] [粗细] 字号/[行高] 定义	复合写法，设置字体

7.1 定义-family

值	备注
字体名称字体名称2 ....	中英文皆可，从左到右优先使用字体
‘Microsoft yahei’	使用微软雅黑
‘微软雅黑’	使用微软雅黑
Arical	使用Arical字体

7.2 样式-style

值	备注
normal	默认样式
italic	斜体样式

7.3 粗细-weight

值	备注
normal	默认粗细（400）
bold	粗体（700）
数字	按数字确认粗细

7.4 字号-size

值	备注
值	复合写法，设置字体

8 清除clear

浮动...

值	备注
left	清除格式左
right	清除格式右
both	清除全部格式

9 显示display

值	备注
inline	修改为行级标签（不能设置宽高）
inline-block	修改为行-块级标签
none	隐藏
block	修改为块级标签
-webkit-box	作为弹性伸缩盒子模型显示
flex	设置或检索弹性盒模型对象的子元素如何分配空间

10 浮动float

浮点，脱离文档流

值	备注
left	文档左对齐
right	文档右对齐

10.2 清除浮动

::after{
content:"";
display:block;
height:0;
clear:both;
vistbility:hidden;
}

::before, ::after{
content:"";
display:table;
}
::after{
clear:both;
}

11 文档text

11.1 对齐-align

值	备注
center	居中对齐
justify	实现两端对齐文本效果（慎用）
inherit	规定应该从父元素继承 text-align 属性的值

11.2 改变-transform

值	备注
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母

11.3 超出-overflow

值	备注
clip	超出文本文字截取
ellipsis	超出文本变为省略号

11.4 装饰-decoration

值	备注
underline	下划线
none	默认，没有装饰线

11.5 首行缩进-indent

值	备注
值	首行缩进距离
值em	几个文字大小的数量

12 清单风格list-style

-属性	值	备注
	none	无
-type	disc	项目符号为文本圆点
-type	none	项目符号为无文本圆点
-type	square	项目符号为实心矩形

13 边框border

值	备注
值线条类型颜色	值单位px 颜色参照color
ridge	外框上浮

13.2 样式-style

值	备注
solid	单行实线
dotted	点线
dashed	虚线
double	双线

13.3 半径-radius

值	备注
值	圆角
值值值值	左上右上右下左下圆角

13.4 细线边框-collapse

值	备注
collapse	重叠线条显示为一条

14 背景background

属性	值	备注
:linear-gradient	to 方向,上面颜色值,下面值	线性渐变
:linear-gradient	$值,darken($值2,百分比)	线性渐变（暗）
	transparent	透明
	背景颜色地址平铺状态滚动位置	复核写法

14.1 颜色-color

值	备注
参照color	背景颜色

14.2 图片-image

值	备注
url(图片地址)	背景图片

14.3 尺寸-size

值	备注
宽数值高数值（或百分比）	背景尺寸
contain	背景尺寸优先显示整图
conver	背景尺寸优先填满

14.4 平铺-repeat

值	备注
no-reprat	不平铺
reprat-x	横向平铺
reprat-y	纵向平铺

14.5 定位-position

值	备注
right center	背景图片定位右中央
right	背景图片定位右中央(默认center)
center	背景图片定位中央(默认center)
值值	值单位px x轴和y轴的位置

14.6 固定-attrachment

值	备注
scroll	背景图像是随着对象内容滚动
fixed	背景图像固定

15 指针cursor

值	备注
pointer	指针样式

16 定位position

值	备注
fixed	固定定位相对与浏览器可视区域进行定位
relative	相对定位相对于自己原本所在位置进行定位
absolute	绝对定位相对于具备定位能力的父级元素进行定位
static	HTML 元素的默认值，即没有定位，遵循正常的文档流对象
sticky	粘性定位依赖于用户的滚动，原为relative，超出后为fixed 定位之间切换

17 CSS3

属性	值	说明
transition	数值	设置元素当过渡效果
transition	all 数值 ease 数值	所有样式显示时间消失时间
word-wrap	break-word	文字自动换行
@keyframes 创建名称	form {} to {}	创建动画
animation	创建动画名称时间过渡方式	使用创建动画，过渡时间

17.1 animation

值	说明
创建动画名称时间过渡方式	使用创建动画，过渡时间

17.1.1animation-

连接名	值	说明
过渡方式	linear infinite	线性过渡方式不限制
-fill-mode	forwards	过渡后不删除动画
-iteration-count	infinite	线性过渡方式不限制
-delay	时间	属性定义动画什么时候开始（ -webkit-）

(需要加前缀 -webkit-)

属性	值	说明
box-orient	vertical	设置或检索伸缩盒对象的子元素的排列方式为垂直
line-clamp	数值	限制在一个块元素显示的文本的行数（不规范）
text-fill-color	颜色	文字颜色
text-stroke-width	数值	文字边框尺寸
text-stroke-color	颜色	文字边框颜色

线性渐变/径向渐变（background）

-webkit-gradient(方向,开始位置,结束位置,form(开始颜色),to(结束颜色))
-webkit-gradient(径向,圆心,半径,圆心,半径,form(开始颜色),to(结束颜色))

示例：

-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
background:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

17.2 滚动条

-webkit-scrollbar-track 底部
-webkit-scrollbar-thumb 顶部

scrollbar属性	值	说明
-color
box-shadow	inset 值值值颜色

17.3 阴影box-shadow

值	说明
inset(值值值颜色)	向元素内部添加阴影，右边阴影宽度，下面宽度，阴影模糊程度
h-shadow v-shadow [blur] [spread] [color] [inset]	边框外部阴影

17.4 字体阴影text-shadow

值	说明
h-shadow v-shadow blur color	向元素内部添加阴影，右边阴影宽度，下面宽度，阴影模糊程度

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

17.5 变形transform

值	说明
rotate(数值deg)	将元素旋转
scale(数值)	将元素缩放数值倍数

17.5.1 基点偏移-origin

值	说明
值值	基点偏移x，y对应的像素点

简了个码农叶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
前期前端学习常用命令笔记之CSS/CSS3

选择器、属性、宽width、超出overflow、外边距margin/内边距padding、颜色color、字体font、清除clear、显示display、浮动float、清除浮动、文档text、边框border、背景background、指针cursor、定位position、CSS3、animation、滚动条、阴影box-shadow、字体阴影text-shadow、变形transform、基点偏移-origin
复制链接

扫一扫