CSS单位与文字排版

标签的显示模式与Display属性

（1）标签的类型

HTML标记一般分为 块标记 和 行内标记 两种类型，它们也称为 块元素 和 行内元素。

块元素：每个块元素都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有：h1,h6,p,div,ul,ol,li等，其中div标记是最典型的块元素。

行内元素：行内元素不会占有独立的区域，仅仅依靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有strong,b,em,i,del,s,ins,u,a,span等，其中span标记是最典型的行内元素。

（2）Display属性

display属性可以控制标签的显示模式，它有四个可选值：none/inline/block/inline-block。

其中，none代表此元素不被显示，在文档中被删除；

block代表按块级元素显示，前后带换行符，自己占一行。

inline代表按内联元素显示，一个挨着一个。

inline-block代表按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高。

CSS的颜色值和单位

（1）命名颜色

red,black,white,purple,green,yellow,silver,gray,teal,blue,navy ...

（2）RGB颜色表示法

RGB模式表示色彩，三种颜色组合叠加可以产生自然界中所有的颜色，也是计算机常用模式。RGB颜色值规定的规范为：rgb(red, green, blue)，每个参数定义颜色的强度，可以是介于0到255之间的整数，也可以是百分比值。

（3）十六进制颜色值

由于RGB模式书写十分不方便，三个255值直接用3个十六进制数表示。十六进制颜色规定的规范为：#RRGGBB，其中RR（红色）、GG（绿色）、BB（蓝色）的十六进制整数规定了颜色的部分，所优质必须介于0余FF之间。

取值范围 #000000 ~ #FFFFFF （黑色到白色），十六进制颜色值其实就是RGB模式的另外一种写法，所有浏览器都兼容。

（4）CSS的长度单位

px：像素点，像素就是显示器显示的一个点。

em：1em等于当前的字体大小。例如，当前元素的字体大小为16px，那么1em=16px。

单位之间的关系：1in = 2.54cm = 25.4mm =96px

CSS的文字排版

（1）font-size ：字号大小

font-size属性用于设置字号，该属性的值既可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较有用，推荐使用像素单位px，绝对长度单位使用较少。

（2）font-family : 字体

font-family 属性用于设置字体，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到直到合适的字体。

（3）font-weight :字体粗细

normal   默认值。定义标准的字符。

bold       定义粗体字符。

bolder     定义更粗的字符。

lighter     定义更细的字符。

（4）font-style : 字体风格

可以设置斜体、倾斜或正常字体。

normal   默认值。浏览器显示一个标准的字体样式。

italic     浏览器会显示一个斜体的字体样式。

oblique  浏览器会显示一个倾斜的字体样式。

inherit   规定应该从父元素继承字体样式。

（5）letter-spacing : 字间距

letter-spacing 属性用于定义字间距，所谓字间距就是字符与字符之间的空白，其属性可为不同单位的数值，允许使用负数值。

normal  默认。规定字符间没有额外的空间。

ength   定义字符间的固定空间（允许使用负值）。

inherit  规定应该从父元素继承 letter-spacing 属性的值。

（6）word-spacing : 单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可以为不同单位的数值，允许使用负数值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置，不同之处在于letter-spacing定义的是字母之间的间距，而word-spacing定义的是英文单词之间的间距。

（7）line-height : 行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

（8）text-indent : 首行缩进

text-indent属性用于设置段落首行文本的锁紧，只能设置块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负数值，建议使用em作为设置单位。

（9）word-break ：自动换行

normal 使用浏览器默认的换行规则，不打断单词显示；

break-all 允许在单词内换行；

keep-all 只能在半角空格或连字符处换行；

（10）word-wrap ：允许长单词或URL地址换行到下一行

normal 只在允许的段字点换行（浏览器保持默认处理）

break-word 在长单词或URL地址内部进行换行

（11）color          设置文本颜色

（12）direction      设置文本方向。

ltr默认。文本方向从左到右。

rtl          文本方向从右到左。

inherit    规定应该从父元素继承 direction 属性的值。

（13）text-align  对齐元素中的文本

left       把文本排列到左边。默认值：由浏览器决定。

right     把文本排列到右边。

center   把文本排列到中间。

justify   实现两端对齐文本效果。

inherit   规定应该从父元素继承 text-align 属性的值。

（14） text-decoration  向文本添加修饰。

none          默认。定义标准的文本。

underline     定义文本下的一条线。

overline        定义文本上的一条线。

line-through   定义穿过文本下的一条线。

blink               定义闪烁的文本。

inherit          规定应该从父元素继承 text-decoration 属性的值。

（15）text-shadow  设置文本阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow        必需。水平阴影的位置。允许负值。

v-shadow      必需。垂直阴影的位置。允许负值。

blur           可选。模糊的距离。

color       可选。阴影的颜色。

（16） text-transform  控制元素中的字母

none         默认。定义带有小写字母和大写字母的标准的文本。

capitalize   文本中的每个单词以大写字母开头。

uppercase   定义仅有大写字母。

lowercase    定义无大写字母，仅有小写字母。

inherit         规定应该从父元素继承 text-transform 属性的值。

（17）unicode-bidi   设置或返回文本是否被重写

normal       默认。不使用附加的嵌入层面。

embed         创建一个附加的嵌入层面。 

bidi-override   创建一个附加的嵌入层面。重新排序取决于 direction 属性。 

initial         设置该属性为它的默认值。

inherit 从父元素继承该属性。

（18）   vertical-align 设置元素的垂直对齐

baseline    默认。元素放置在父元素的基线上。

sub            垂直对齐文本的下标。

super         垂直对齐文本的上标

top              把元素的顶端与行中最高元素的顶端对齐

text-top          把元素的顶端与父元素字体的顶端对齐

middle           把此元素放置在父元素的中部。

bottom             把元素的底端与行中最低的元素的顶端对齐。

text-bottom          把元素的底端与父元素字体的底端对齐。

length 

%              使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit        规定应该从父元素继承 vertical-align 属性的值。

（19）white-space    设置元素中空白的处理方式

normal         默认。空白会被浏览器忽略。

pre             空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap        文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap         保留空白符序列，但是正常地进行换行。

pre-line          合并空白符序列，但是保留换行符。

inherit           规定应该从父元素继承 white-space 属性的值。

（20）font    在一个声明中设置所有的字体属性

p.ex1{

font:15px arial,sans-serif;

}

p.ex2{

font:italic bold 12px/30px Georgia, serif;

}

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

normal 默认值。浏览器会显示一个标准的字体。

small-caps 浏览器会显示小型大写字母的字体。

inherit 规定应该从父元素继承 font-variant 属性的值。

（把段落设置为小型大写字母字体：）

p.small

{

font-variant:small-caps;

}

text—align和vertical-align

text-align——属性值：left、right、center、justify（两端对其）——作用在块级元素上，从而来设置这个块级元素所包含的行内内容的水平对齐方式。

vertical-align：（垂直对齐）-不作用在块级元素上实现整体控制，她作用在哪一个具体的行内元素上实现对这个行内元素，具体行内元素的一个具体的控制，控制它自身的一个垂直对齐的方式。可以作用在一个行内元素上，也可以作用在一个表格的单元元素上。

CSS 链接：不同的链接可以有不同的样式。

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面