CSS - 常用属性以及继承和优先级

CSS

发布日期: 2017-12-21

文章字数: 1.9k

阅读时长: 7 分

阅读次数:

字体(font)属性

设置字体大小

语法: font-size : 具体数值 + 单位

常用单位: px、em、rem、%
em 和 % 是基于父元素字体大小进行计算, rem则基于html字体大小进行计算
设置文字的粗细

语法: font-weight : val

取值: n*100(1<=n<=9)、normal(400)、bold(700)
设置文字的行高

语法: line-height : val

文字垂直方向居中: line-height = 容器 height
设置字体的样式

语法: font-style : val

取值: normal(默认)、italic(斜体)、oblique(倾斜, 针对没有斜体的文字)
设置英文字母大小写

语法: font - variant : val

取值: normal(默认)、small-caps(小型大写字母)
设置字体

语法: font - family : val

注意点:
1. 可设置多个值, 用( , )逗号隔开, 解决兼容, 一直找到可用字体
2. 字体名称包含空格, 它必须加上引号

自定义字体(加载网络字体)

语法:

/* 定义(引入)字体 */
@font-face { 
    font-family: 自定义字体名称; 
    src: url('Sansation_Light.ttf'), 
         url('Sansation_Light.eot'); /* IE9 */ 
} 

/* 使用字体 */
选择器 {
    font-family: 自定义字体名称;
}

其他可选属性:

font-stretch 设置字体改如何被拉长
font-style 设置字体样式
font-weight 设置字体粗细
unicode-range 设置字体支持的Unicode字符范围

font整合属性

语法: font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family

注意点:
1. 需要按顺序设置
2. font-size 和 font-family 的值是必需的
3. line-height 必须紧跟着 font-size 通过 / 连接

文本(text)属性

设置文本水平对齐方式

语法: text-align : center|left|right|justify(两端对齐)
设置文本装饰线

语法: text-decoration : val

取值: none|underline|overline|line-through|blnk(闪烁文本)
设置文本首行缩进

语法: text-indent : 数值 + 单位

注意点:
1. 支持负数, 表示向左缩进
2. 常用单位 em , 表示缩进多少个字符
设置文本阴影

语法: text-shadow : x y [blur] [color]

注意点:
1. 必须值: x — 水平位置 y — 垂直位置, 均支持负值
2. 可选值: blur — 阴影距离(仅正值) color — 阴影颜色(默认跟随字体颜色)
3. 需要按顺序设置, color 可放在最前或者最后
4. 可添加多个阴影, 阴影列表用 ( , ) 逗号隔开
5. 阴影不占实际空间, 即不会影响页面布局
设置文本大小写

语法: text-transform : val

取值: none(默认)、capitalize(首字母大写)、uppercase(全大写)、lowercase(全小写)
设置字符间距

语法: letter-spacing : 数值 + 单位

注意点: 默认normal, 支持负值
设置单词间距

语法: word-spacing : 数值 + 单位

注意点: 默认normal, 支持负值, 需要手动用空格区分单词
设置当文本溢出容器时处理方式

语法: text-overflow : val

取值: clip(默认值, 修剪)、ellipsis(省略号代替修剪部分)、string(指定字符串代替)
设置自动换行的处理方式

语法: word-break : val

取值: normal(默认)、break-all(允许单词内换行)、keep-all(只能在摆角空格/连字符处换行)
允许长内容(单词/URL)自动转行

语法: word-wrap : normal|break-word(允许)
设置元素内空白的处理方式

语法: white-space : val

取值:
1. normal 默认忽略空白
2. pre 保留空白, 与<pre>标签类似
3. nowrap 不换行, 直到遇到 <br> 标签
4. pre-wrap 保留空白符序列, 正常换行
5. pre-line 合并空白符序列, 保留换行符

文本单行忽略显示

white-space : nowrap;
text-overflow : ellipsis;
overflow: hidden;

列表(list-style)属性

设置项目标志的类型

语法: list-style-type : typename

常用属性值: none(无标记)、disc(实心圆)、circle(空心圆)、square(实心方块)、decimal(数字)
设置项目标记的位置

语法: list-style-position : outside(默认)|inside

效果:
1. outside : 列表项目标记放置在文本以外, 且环绕文本不根据标记对齐
2. inside : 列表项目标记放置在文本以内, 且环绕文本根据标记对齐
设置图片项目标志

语法: list-style-image : 图片URL

注意点: 以防图像不可用, 使用图片项目标志时, 建议设置 list-style-type
list-style整合属性

语法: list-style : list-style-type list-style-position list-style-image

注意点: 需要按顺序设置, 但可不设置其中某个属性, 表示该属性使用默认值

表格相关样式

设置单元格边框是否合并

语法: border-collapse : separate(默认分开)|collapse(合并)
设置相邻单元格边框之间的距离

语法: border-spacing : x [y]

注意:
1. 需要带单位, 只设一个值表示水平和垂直方向的间距一致
2. 当border-collapse 设置为 collapse 时, 该属性不起作用
设置表格标题(<caption>标签)的位置

语法: caption-side : top(默认)|bottom
隐藏空单元格

语法: empty-cells : show(默认)|hide(隐藏)

注意点: empty-cells : hide 仅在 border-collapse : separate 时生效
设置表格布局

语法: table-layout : auto|fixed

注意点:
1. auto 默认值, 列宽根据单元格内容设置
2. fixed 列宽根据表格宽度设置

设置颜色

前景颜色

语法: color : 颜色

注意: 前景包括文本、边框、阴影
背景颜色

语法: background-color : 颜色
CSS中设置颜色

a) 基本颜色关键字(英文)

如 white、black、pink、skyblue、deepskyblue 等

局限性: 仅提供百来种基本颜色关键字

b) RGB颜色(常用形式)

十进制语法: rgb(red,green,blue), 取值 0 - 255

十六进制语法: #rrggbb 可简写: #rgb, 取值 00 - ff

白色: rgb(255,255,255)|#fff

黑色: rgb(0,0,0)|#000

c) RGBA颜色(一般做特效用, 带透明度)

A — alpha透明度, 取值 0 - 1

语法: rhba(red,green,blue,alpha)

完全透明: transparent|rgba(red,green,blue,0)

设置鼠标指针样式

语法: cursor : style

常用值:

auto 默认值, 使用浏览器设置的光标
none 不显示光标
default 系统默认光标(斜箭头)
pointer 链接光标(小手)
text 文本输入/选择光标
move 移动光标

设置图片光标

语法: cursor : url(图片URL) x y , replaceStyle

注意点:

x 和 y 代表图片光标与当前像素格(1px*1px区域)的偏移量, 支持负值
replaceStyle 代表当图片失效时, 代替的指针样式

样式的继承与优先级

继承

继承指的是: 没有设置样式的元素会继承父元素的样式

注意点:

默认继承的属性: 子元素的字体样式和文本样式如果不设值, 默认继承父元素的对应样式
对于不可继承的样式属性, 可通过 inherit 属性强制继承

语法: 样式属性名: inherit

注意点:
1. 只继承属性值, 不继承样式名称
2. 继承的是 计算值