全部章节 >>>>
//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) |