04_CSS扫盲

CSS执行权重

1. 内联样式表的权值最高 1000
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

不常用属性

背景图片 background

• background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。

属性值
值		说明
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

文本样式

• text-decoration 向文本添加修饰

属性值
值				描述
none			默认。定义标准的文本。
underline		定义文本下的一条线。
overline		定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink			定义闪烁的文本。
inherit			规定应该从父元素继承 text-decoration 属性的值。

• text-indent 缩进元素中文本的首行

属性值
值		描述
length	定义固定的缩进。默认值：0。
%		定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

• text-shadow 设置文本阴影

属性值
值			描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur		可选。模糊的距离。
color		可选。阴影的颜色。参阅 CSS 颜色值。

• text-transfrom 控制元素中的字母

属性值
值			描述
none		默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit		规定应该从父元素继承 text-transform 属性的值。

• vertical-align 设置元素的垂直对齐

属性值
值			描述
baseline	默认。元素放置在父元素的基线上。
sub			垂直对齐文本的下标。
super		垂直对齐文本的上标
top			把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle		把此元素放置在父元素的中部。
bottom		把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	 
%			使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit		规定应该从父元素继承 vertical-align 属性的值。

• white-space 设置元素中空白的处理方式

属性值
值			描述
normal		默认。空白会被浏览器忽略。
pre			空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap		文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit		规定应该从父元素继承 white-space 属性的值。

字体样式

• font-family 指定文本的字体系列

属性值
值				描述
family-name		用于某个元素的字体族名称或/及类族名称的一个优先表。
inherit			规定应该从父元素继承字体系列。
##################################################################
有两种类型的字体系列名称：
family-name - 指定的系列名称：具体字体的名称，
比如："times"、"courier"、"arial"。
generic-family - 通常字体系列名称：
比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

• font-style 指定文本的字体样式

属性值
值		描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

• font-variant 以小型大写字体或者正常字体显示文本。

属性值
值			描述
normal		默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit		规定应该从父元素继承 font-variant 属性的值。

链接

四个链接状态是:

1. a:link - 正常，未访问过的链接
2. a:visited - 用户已访问过的链接
3. a:hover - 当用户鼠标放在链接上时
4. a:active - 链接被点击的那一刻

鼠标

• cursor 鼠标形状

常用鼠标形状如下所示：
属性值		描述
default		默认光标，箭头
pointer		超链接的指针，手型
wait		指示程序正在忙
help		指示可用的帮忙
text		指示文本
crosshair	鼠标呈现十字状

列表

• list-style-image 将图象设置为列表项标志。

属性值
值		描述
URL		图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

• list-style-position 设置列表中列表项标志的位置。

属性值
值			描述
inside		列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside		默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit		规定应该从父元素继承 list-style-position 属性的值。

• list-style-type 设置列表项标志的类型。

属性值
值	描述
none			无标记。
disc			默认。标记是实心圆。
circle			标记是空心圆。
square			标记是实心方块。
decimal			标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman		小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman		大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha		小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha		大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek		小写希腊字母(alpha, beta, gamma, 等。)
lower-latin		小写拉丁字母(a, b, c, d, e, 等。)
upper-latin		大写拉丁字母(A, B, C, D, E, 等。)
hebrew			传统的希伯来编号方式
armenian		传统的亚美尼亚编号方式
georgian		传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana		标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana		标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

盒子模型

不同部分说明

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content（内容） - 盒子的内容，显示文本和图像