CSS总结 • 【第2章 CSS样式】

全部章节 >>>>

---

//1.文本样式

属性	含义	属性值
font-size	大小	（默认：inherited，继承父级大小）（像素：px、百分比：%、倍数：em）（小：small、大：large、正常：medium）
font-weight	粗细	（默认：normal、普通）（粗体：bold、有强调的意思、粗细700）（自定义：100-900）
font-family	字体	（格式：“宋体”,“Arial”;）添加多种字体，用逗号隔开、防止一些用户没有第一种字体，就会显示第二种字体
font-style	样式	（默认：normal）（有斜体的字体设置斜体：italic）（所以字体斜体：oblique）
color	颜色	三种样式：（名称：red）（16进制的RGB值：#RRGGBB）（rgba函数：rgba(255，0，0，0.5)）红，绿，蓝，透明度
font	复合	基本写法：（style weight size family）必要写法：（size family）

//2.背景样式

属性	含义	属性值
background-color	背景颜色	和文本样式的三种写法一样
background-image	背景图片	（路径：url(路径)）
background-repeat	背景图片平铺方式	（默认：repeat，平铺满）（水平平铺：repeat-x）（垂直平铺：repeat-y）（不平铺：no-repeat）
background-position	背景图片位置	坐标：(x y)、数字：(px/%)、水平：(left/center/right)左/中/右、垂直(top/bottom)上/下
background-attachment	背景图随滚动条的移动方式	（按元素进行偏移(默认)：scroll）（按浏览器进行偏移：fixed）
background	复合	基本写法：(color image repeat position)

//3.段落样式

属性	含义	属性值
text-align	对齐方式	（默认左对齐：left）（居中：center）（右对齐：right）（两端对齐：justify）
line-height	行高	（默认：不是固定值，根据当前字体的大小变化）（数字：px或scale[相对于原来字体的比例]）
text-indent	首行缩进	缩进：font-size的两倍，或2em[em相对单位]，永远跟一个字体设置的大小相同
text-decoration	文本装饰	（默认：none）（下划线：underline）（删除线：line-through）（上划线：overline）
text-transform	文本大小写	针对英文（小写：lowercase）（大写：uppercase）（首字母大写：capitalize）
letter-spacing	字间距
word-spacing	词间距	针对英文
word-break	非常强烈的折行	break-all
word-wrap	不是那么强烈的折行	break-word
direction	内联内容方向	（左往右：ltr 表示：left-to-right） （右往左：rtl 表示：right-to-left）
writing-mode	文字排版方式	（默认值：horizontal-tb 表示：水平-top-bottom） （垂直，左至右：vertical-lr） （垂直，右至左：vertical-rl）
text-stroke	文字描边	（描边宽度：text-stroke-width） （描边颜色：text-stroke-color）
z-index	堆叠顺序	数字，数字越大，就处于越顶层

//4.边框样式

属性	含义	属性值
border-width	边框大小	（像素：px）（倍数：em）
border-color	边框颜色	和文本样式的三种写法一样
border-radius	圆角边框	（像素：px）（百分比：%）
border-style	边框样式	（默认，实线：solid）（虚线：dashed）（点线：dotted）
border-collapse	合并表格边框	（默认，分开：separated）（合并：collapse）
-	单独选择一边	（上：border-top）（右：border-right）（下：border-bottom）（左：border-left）
border	复合样式	基本写法：(大小，样式，颜色)

//5.样式特性

● 层叠性
- 后来居上：后面的会替代前面的样式

● 继承性
- 子承父业：继承父元素的某些样式

//6.元素显示类型display

属性	含义	属性值
display	元素显示类型	（块级元素：block）（行内元素：inline）（行内块元素：inline-block）（不占空间隐藏：none）
-	块级元素	block
-	行内元素	inline
-	行内块元素	inline-block
-	不占空间隐藏	none
visibility	元素显示和隐藏	（默认，显示：visible）（占空间隐藏：hidden）