详细介绍有关CSS页面布局技巧

下面是我给大家整理的详细介绍有关CSS页面布局技巧，有兴趣的同学可以去看看。

设置文本样式

1、字体类型

绝大多数用户系统默认支持的中文字体有宋体、黑体、幼圆、楷体；默认支持的英文字体有arial、arial black、arial narrow、 century gothic 、comic sansms、times new roman等等。在使用中，宋体和arial使用频率最高。

CSS提供font-family属性设置字体类型。 
实例：p{font-family: 宋体；} 
注意：若同时设置多个字体属性，则优先级是先后顺序。

2、字体大小

CSS提供font-size属性设置字体大小。 
实例：p{font-size: 12px；}

相对大小 
px, em, 10%, larger, smaller（后两个是相对于父元素）

绝对大小 
pt, pc, in cm, mm

关键字 
xx-small, x-small, small, large, x-large,xx-large

3、字体加粗

CSS提供font-weight属性设置字体加粗。 
实例：p{font-weight: bold；}

数字： 100、200、…、900

关键字：bold, bolder, lighter, normal

4、文字颜色

CSS提供color属性设置文字颜色。 
实例：p{color: red；}

颜色名称：red, green,……

RGB值： （255,255,255）,…….

十六进制值：#ff0000,……

5、斜体

CSS提供font-style属性设置字斜体。属性值有normal, italic, oblique三种。 
实例：p{font-style: italic；}

6、下划线、顶划线、删除线

CSS提供font-decoration属性设置下划线、顶划线、删除线。属性值有underline（下划线）、blink（闪烁文字）、overline（顶划线）、line-through（删除线）四种。 
实例：p{font-decoration: underline；}

7、英文字母大小写

CSS提供font-transform属性设置英文字母大小写。属性值有none（无）、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）四种。 
实例：p{font-transform: none；}

8、文本的段落样式

水平对齐 
CSS提供text-align属性设置水平对齐。属性值有left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）四种。 
实例：p{text-align: left；}

垂直对齐 
CSS提供writing-mode和layout-flow属性设置垂直对齐。

语法：writing-mode：lr-tb; （左右-上下） 
          writing-mode：tb-rl; （上下-右左） 
          layout-flow：horizontal; （水平排列） 
          layout-flow：vertical-ideographic; （垂直排列）

首行缩进 
CSS提供text-indent属性设置首行缩进。属性值可以是像素值或者百分比。 
实例：p{text-indent: 12px；}

行间距 
CSS提供line-height属性设置行间距。属性值可以是长度值。 
实例：p{line-height: 12px；}

字间距 
CSS提供letter-spacing属性设置字间距。属性值可以是长度值。 
实例：p{letter-spacing: 12px；} （字母间距） 
          p{word-spacing: 12px；} （单词间距）

上面是我整理给大家的有关CSS页面布局技巧，希望今后会对大家有帮助。

相关文章：

详细讲解CSS基础知识点

css文件有哪些方法">动态操作js/css文件有哪些方法

CSS实现精灵图与字体图标

以上就是详细介绍有关CSS页面布局技巧的详细内容，更多请关注php中文网其它相关文章！