CSS常用属性、属性值

名称	说明	格式
标签选择器	选中同名标签设置相同样式	标签名：p{样式}、img{样式}……
类选择器	查找标签，差异化设置标签显示效果	定义：.类名{样式}；使用：class="类名（注：没有点）"
id选择器	查找标签，差异化设置标签显示效果，多有javaScript使用	#名字（id名）；注：同一个id选择器在一个页面只能使用一次
通配符选择器	查找页面所以标签，设置相同样式	*{设置的样式}

复合选择器

名称	用法描述	语法	注意事项
后代选择器	选择元素的后代元素	父选子选{CSS属性}（父子间空格隔开）	后代选择器选中所以后代
子代选择器	选中某元素的最近子代元素（最近子级）	父>子{CSS属性}（父子间用>隔开）
并集选择器	选中多组标签设置相同属性	选择器1，选择器2……选择器n{CSS属性}（用逗号隔开）
交集选择器	选中同时满足多个条件的元素	选择器1选择器2{CSS属性}（选择器之间连写，没有任何符号）	如果交集选择器中有标签选择器，标签选择器必须写在最前面
伪类选择器	"伪类"表示元素的状态，选中元素的某个状态设置样式	选择器：hover{CSS属性}（鼠标悬停状态）	任何标签都可以设置鼠标悬停状态

结构伪类选择器：

作用：根据元素的结构关系查找元素

经验：查找到的元素后可以加上{属性}和其他选择器一样可以往{}中添加属性

选择器	说明
X：first-child	查找第一个X元素
X：last-child	查找最后一个X元素
X：nth-child（n）	查找第n个X元素（第一个元素n为1）

nth-child(公式)

注：

用于ul标签较多

必须是n才可以，其他变量没作用

对于公式n+5/n-5而言：n是从0开始计算（不会覆盖first-child/last-child）

公式	功能
2n	偶数标签
2n+1；2n-1	奇数标签
5n	找到5的倍数的标签
n+5	找到第五个以后的标签
-n+5	找到第5个以前的标签

伪元素选择器：

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

注意：

必须设置content：" "属性用来设置伪元素的内容（内容可留空）

伪元素默认是行内显示模式

权重和标签选择器相同

选择器	说明
X::before	在X元素里面最前面添加一个伪元素
X::after	在X元素里面最后面添加一个伪元素

文字控制属性名（写在选择器中）

描述	属性名	效果
字体大小	font-size	文字尺寸（用px单位；且必须有单位，否则不生效）
文字粗细	font-weight	400px不加粗，700px加粗
行高	line-height	一般用于控制盒子内的文字
字体族	font-family	控制文字的字体形式
字体复合属性	font	复合属性
文本缩进	text-indent	显示自然段的开头两个空格效果
文本对齐	text-align	left（左）right（右）center（居中）
修饰线	text-decoration	+属性下滑线、删除线、顶格线等修饰线
颜色	color
字体倾斜	font-style	有些字体默认为倾斜效果

字体粗细（font-weight）的属性值：

	正常	加粗
关键字	normal	bold
数字（开发使用）	400px	700px

行高的组成：

行高=上间距+文本高度+下间距

修饰线（text-decoration）的属性值：

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线（顶格线）

颜色（color）的属性值：

颜色的表达方式	属性值	说明	使用场景
颜色关键字	颜色对于的单词	red、green、blue……	学习测试
rgb	rgb（r，g，b）	表示红绿蓝三原色，取值：0~255
rgba	rgb（r，g，b，a）	a表示透明度，取值：0~1	开发使用，实现透明色
十六进制	#RRGGBB	可以简写：相同两个字母可以写一个	开发使用（可以用Pxcook测量）

字体倾斜（font-style）的属性值：

属性值	效果
normal	正常
italic	倾斜

超链接标签a的四个状态

选择器	作用
：link	访问前
：visited	访问后
：hover	鼠标悬停时
：active	点击时（激活）

备注：要使用这四个顺序要按照link、visited、hover、active的顺序书写。

背景属性名

描述	属性名
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景图复合属性	background

背景图（bgi）属性值

url（图片路劲）；背景图一般都是在盒子里面写的，所以要先写好盒子的宽高

背景图平铺方式（bgr）属性值

属性值	效果
no-repeat	不平铺（图片出现在左上角）
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置（bgp）属性值

坐标

水平方向位置垂直方向位置（像素单位px，正负代表方向）

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

注

关键字取值方式可以颠倒取值顺序

只取一个关键字时，另一个方向默认居中；只取一个数字值时表示水平方向，垂直方向默认居中

数字与关键字可以混用

背景图缩放（bgz、bgs）的属性值

方式	属性值	效果
关键字	cover	等比例缩放图片以覆盖背景区（可能会导致图片溢出）；即覆盖整个盒子
	contain	等比例缩放图片当图片的宽或高与盒子的宽或高相等时停止缩放，可能会导致盒子有露白
百分比	根据盒子尺寸计算图片大小	比较好用
数字+单位

背景图固定（bga）的属性值

作用：背景图不会随着元素的内容（盒子）滚动。（盒子可以动，图片（被钉住了）不动）

属性值：fixed

背景的复合属性（bg）

属性值：背景色背景图背景图平铺方式背景图位置 /背景图缩放背景图固定（空格隔开，不分顺序）

背景图的缩放要在前面加"/"符号

转换显示模式

属性名：display

属性值：

属性值	效果
block	块级
inline-block	行内块
inline	行内

显示模式备注：

显示模式类型	特点
块级元素	独占一行；宽度默认是父级的100%；添加宽高属性生效
行内元素	一行可以显示多个；设置宽高属性不生效；宽高尺寸由内容撑开
行内块元素	一行可以显示多个；设置宽高属性生效；宽高尺寸由内容撑开

了解

默认情况下是块级的标签

标签名	作用
div	用于组织内容
h	标题
p	段落
hr	水平线
ol	有序列表
ul	无序列表
li	列表项
dl	定义列表
dt	定义列表中的术语
dd	定义列表中的描述
pre	用于预格式化的文本
blockquote	引用
article	独立的内容块
figure	用于自包含的内容，通常与`<figcaption>`一起使用
figcaption	用于`<figure>`元素的标题
section	用于文档中的一个区段
nav	导航连接
aside	用于页面的侧边栏内容
footer	用于文档或区段的脚注
header	文档或区段的头部
form	用于表单
table	用于表格
thead	表格头部
tbody	表格主体
tfoot	表格脚注
tr	表格的行
th	表格的表头单元格
td	表格的单元格

默认情况下是行内的标签

标签名	作用
a	超链接
span	文本的分组，没有语义意义
br	换行
i	斜体文本
b	加粗文本
u	下划线文本
sub	下标文本
sup	上标文本
em	强调文本（效果与i相同）
strong	强烈强调文本（效果与b相同）
mark	标记文本
small	小号文本
del	删除线
ins	插入文本（它本身并不直接提供下划线的效果，但浏览器通常会给 `<ins>` 标签添加一个文本下划线）
q	短的引用
time	时间和日期
var	变量
cite	引用作品标签
code	代码文本
samp	计算机输出
kbd	键盘输入
dfn	定义一个术语
abbr	用于缩写
data	表示数据值
progress	显示任务进度
meter	表示度量或已知范围值
wbr	用于文本中可能用于需要换行的地方提供断字

默认情况下是行内块的标签

标签名	作用
input	输入数据
img	嵌入图片
buttom	可点击的按钮
select	下拉选择框
textarea	多行文本输入
label	为表单元素定义标签
video	嵌入视频
audio	嵌入音频
canvas	绘制图形
iframe	嵌入另一个文档

盒子模型：

盒子模型的重要组成部分：

组成	标签名
内容区域	width&&height
内边距	padding（出现在内容与盒子边缘之间）（会撑大盒子）
边框线	border（会撑大盒子）
外边距	margin（出现在盒子的外面）（可用于拉开两盒子距离）

内边距属性写法

属性值：px

padding/padding-方位名词（top、left、bottom、right）

padding多值写法：

上方初值，顺时针取值，对位取值

取值个数	示例	含义
一个值	padding:1px；	四个方向内边距都为1px
四个值	padding:1px 2px 3px 4px	上：1px；右：2px；下：3px；左：4px
三个值	padding:1px 2px 3px	上：1px；左右:2px；下3px
两个值	padding:1px 2px	上下：1px；左右:2px

边框线（bd）的属性值

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

设置单方向边框线

属性名：border-方位名词（top、right、left、bottom）

属性值：边框线粗细（像素值）线条样式颜色（不区分顺序）

外边框（margin）的属性值

与内边框border一样

注意：

margin实现版心居中效果：

把margin的左右执行写成auto（条件：盒子必须要有宽度）

解决盒子被撑大问题

内减模式：box-sizing:border-box（一般在清楚默认样式时就使用内减模式了）

清楚默认样式

清除标签：

way_one:通配符选择器选择全部标签，margin、padding取值为0

* {
    margin:0；
    padding:0；
}

way_tow:并集选择器选择所有标签，margin、padding取值为0

标签1,标签2,标签3……标签n {
    margin:0；
    padding:0;
}

清除有序、无序列表方式list-style取值为none即可：

list-style:none;

盒子问题

元素溢出：

属性名：overflow（控制溢出元素的内容显示方式）

属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题--合并与塌陷

合并现象：

垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效

塌陷问题：

原因：父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding

父级设置overflow:hidden

父级设置border-top

行内元素--垂直内外边距

行内元素添加margin与padding，无法改变元素垂直位置时，给行内元素添加line-height可以改变垂直位置

盒子模型常用属性

属性名	功能
border-radius	实现圆角
box-shadow	实现阴影
opacity	实现透明度（不局限与颜色，范围0~1，0表示透明，1不透明）

圆角属性值

属性值：像素值/百分比（属性值是圆角半径）

格式：从左上角顺时针赋值，没有取角的值与对角的值取值相同

正圆形状：给正方形盒子设置圆角属性值为盒子宽高的一半（50%）

正圆最大值为50%，超过50%就没有效果了

胶囊形状：给长方形盒子设置圆角属性值为盒子高度一半

阴影属性值：

属性值：x轴偏移量（必写） y轴偏移量（必写）模糊半径颜色内外阴影

格式：box-shadow: 像素值像素值像素值像素值颜色（inset）；

注：默认是外阴影，内阴影要加inset

feng68_

关注

22
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫