css排版基础

CSS排版属性
CSS有两组主要的控制排版样式的属性：font和text。
CSS的font属性组指定了一般的特征比如font-style和font-weight。下面你将看到p元素被赋予font-style和font-weight属性

情况是这样的，一个label的Text="Help Demos Videos Webinars Blogs v Not logged in vDevExpress Channel ";

就是在一个<p></p>里。

p { font-style: oblique; font-weight: bold; }

斜黑体所有<p></p>
CSS的text属性组主要是处理字符，间距，单词和段落。例如，text-indent属性缩进文本块的第一行。letter-spacing属性控制文本块之间的空白。下面你将看到p元素被赋予text-indent和letter-spacing属性。

p { text-indent: 50px; letter-spacing: 2px; }

首行缩进50px,改成2em就是中文缩进2个字了,字符间距2px(仔细一看很大了)。

还有一些除字体和文本属性之外的其它CSS属性可以影响网页排版的效果。例如，color属性控制一个HTML元素的前景色，并且可以改变文本的颜色。下面你将看到p元素被设置成红色。

p {  color: red;}

字体大小
浏览器兼容性是网页设计中的一个主要问题，如果你想把你的网页设计在所有浏览器下看起来一样，这个问题将更严重。网页设计新生可能会乱搞一通直到字体大小看起来ok了，然后发现它在其它浏览器和平台下却完全不一样了。正确的设置字体大小，这个问题就会减小到最小的程度。
下面是一个简单地设置字体大小的方式：

h6 {  font-size: 12pt;}

上面的代码设置第6级标题元素为12pt。
对于font-size的取值，有4种衡量单位。

绝对大小
标准关键词的值是在用户agent里定义的（比如，web浏览器）。W3C CSS 2.1中的值指定为：xx-small, x-small, small, medium, large,x-large, xx-large。

相对大小
标准关键词的字体大小基于父级元素。这也是在用户agent里定义。可能的取值是larger和smaller。下面你将看到一个段落元素看起来在一个字体大小为12pt的父级元素（<div>）中（Firefox下）。

div {  font-size: 12pt;} p {  font-size: large;}

绝对长度

绝对长度是常量的大小。例如，12px就是12像素，2in就是2英寸。绝对长度常用于网页设计。
Possible units for absolute length units are pt, px, mm, cm, in, and pc.
绝对长度可能的单位是pt，px，mm，cm ,in和pc。

相对长度
另一种长度单位是相对长度。这意味着它们的大小依赖父元素的font-size。可能的单位是em，%和ex。
很少网页设计者使用ex，它是当前字体中字母“x”的高度。
em和%值更容易使用。em和%的行为一样，只是语法有一点不同：
0.5em等于50%
1em等于100%
0.2等于20%
0.73等于73%
2.21等于221%

CSS排版伪类和伪元素
CSS排版伪类和伪元素对于选定某些类型元素来说非常棒。伪类以冒号（:）开头，后面跟着类/元素名。
有好几个与排版有关伪类/伪元素，如:hover和:first-letter。
让我们看看一些能够设置我们排版样式的伪类和伪元素。
链接和动态伪类

网站超链接的设计非常重要。使用锚点链接伪类来为每个链接状态创建字体样式。
:hover可能是最熟悉的了，为它创建一个不一样的（然而还是相似的）样式以提供元素正处在交互状态的视觉暗视。
这是链接伪类代码：

a:link { color: #666666; text-decoration: none; } a:visited { color: #333333; } a:hover { text-decoration: underline; } a:active { color: #000000; }

 

第一个，最后一个和第n个伪元素
下面的伪元素都与元素相对于HTML文档和它内部的HTML元素的位置有关。
:first-letter允许你选定元素的第一个字母。下面是一个例子：

p:first-letter { font-size: 30pt; display: block; float: left; margin: 0 5px 5px 0; }

伪元素对创建首字下沉很有帮助。

first-line伪元素让你可以选择HTML元素包含文本的首行。下面一个例子为文本的第一行加粗，并让它的字母大写：

p:first-line { font-weight: bold; text-transform: uppercase; }

 

:nth-child()是一个CSS3伪元素，它会根据指定的选择器选定页面或父元素的第n个元素。在下面的例子中，我们选中页面中的第二段：

p:nth-child(2) { background: #e7f0ce;  padding: 10px; }

 

我们也可以选定div中的第二段或者列表中的第二项，如下：

div p:nth-child(2) { background: #e7f0ce; padding: 10px; } ul li:nth-child(2) { background: #e7f0ce; padding: 10px; }还可以使用:nth-child(even)和:nth-child(odd)伪类来获取偶数个和奇数个元素。此外还有:first-child伪元素（CSS2）和:last-child（CSS3）伪元素可以选择一个集合里的第一个和最后一个元素。