轻松学习网页设计

css布局与传统html布局比较

1、传统html布局缺点：

• html标记控制布局繁琐，修改麻烦
• 每个页面都要单独控制，网站更新工作量大

2、css布局优点：

• css样式功能强大，布局灵活，修改方便
• 多个页面可以通过一个css文件控制，网站更新方便快捷。

css控制文本

1、设置对象中文本缩进

语法：text-indent:length

text-indent:2em

2、文本水平对齐方式

语法：text-align:left/center/right

3、对象中空白处理

语法：white-space:normal（自动换行）、pre（换行和空白受保护）、nowrap（强制在同一行显示）

4、文本大小写控制

语法：text-transform:none（正常大小）、capitalize（每个单词的第一个字母转换成大写）、uppercase（转换成大写）、lowercase（转换成小写）

5、元素的垂直对齐方式

语法：vertical-align：sub（设置文字为下标）、super（设置文字为上标）、top（把元素的顶端与行中最高元素的顶端对齐）、text-bottom（把元素的底端与父元素的底端对齐）

css样式的特点

1、继承：

网页中子元素，将继承父元素的样式

例如：要控制P标签中文字大小，可以直接给body标记加样式。

2、层叠：

网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。

后面定义的样式，会覆盖前面定义的样式。

css优先级

四种方式的优先级：

内联式（行内样式）>内嵌式（内部式）>链接式（外部式）>@import导入式

css优先权：就近原则

作用范围越小，优先级越高

离要修饰目标越近的样式优先级越高

选择符优先级：行内>ID选择符>class类选择符>html标记类型选择符

我们可以采用！important语法来提升优先级

p{

background-color:#FFCCCC !inportant;IE6不支持该语句

background-color:#66CCCC

}