css+div页面布局详解（一）

css怎样使用

1.css的作用：美化网页，页面布局
css的引入方式：
内部样式表：理论上可以放在HTML的任何地方
推荐放在hade标签中，需要先建一个style标签
外部样式表 （常用）：新建外部的css文件并编写样式
在HTML中使用link属性调用
行内样式表：写在元素的style属性中
适用于简单快速临时修改样式
在style中，使用键值对的形式，不需要{ }
写在那个元素中就控制那个元素，对其他元素没有效果
2.css选择器分为两种：基础选择器和复合选择器
基础选择器：
1）标签选择器：就是使用HTML标签名称作为选择器
结果：把某一种类标签选择出来，统一修改样式
优点：快速、统一设置同类标签的样式
缺点：没有差异化
2）类选择器：先找到需要修改样式的标签，在给标签增加class属性，属性值是选择器的类 名（在起类名时不能以数字开头，并且标签内的类名不能加**.**)
类选择器口绝：
1.样式点定义；
2.结构类调用；
3.一个或多个；
4.开发最常用
类选择器的特殊使用：多类名（下方xmind导图中有应用场景和使用方法）
3）id选择器：专门定义HTML中某个元素的样式，因为id属性是唯一的
id选择器的前缀是#
使用方法跟类选择器相差不大（xmind导图中有详细介绍）
id选择器口诀：
1.样式#定义；
2.结构id调用；
3.只能用一次
4.别人勿使用
4）通配符选择器：通配符选择器使用*定义，表示选取页面中的所有元素，例如

*{
color: red;
}

这就是将页面中的字体颜色都改成红色
复合选择器
复合选择器就是由多个选择器组成的选择器
3.css的字体属性
1）font-family设置字体
当使用font-family设置字体是最好使用英文写，例如：

font-family: Microsft yahei;

以上代码就将字体设置成微软雅黑
2）font-size设置字号大小（必须加单位（px））
3）font-weight字体粗细
设置字体粗细时不需要单位
取值范围：100-900（按100递增）
normal：正常粗细，与400等值
bold：加粗，与700等值
4）font-style字体样式
主要将倾斜的字体改为不倾斜显示，例如:

em{font-style: normal;}

5)font复合属性
这个属性不会经常使用下方xmind导图中有介绍

4.文本属性
1）颜色：color
预定的颜色名：red，green，blue
十六进制：#ffffff （最常用）
rgb代码：rgb（255.0.0）
2）文本对齐：text-align
只能给独占一行的元素设置文本对齐，例如：

div { text-align: center;}

这就将div中的内容水平居中
3）文本装饰：text-decoration
none:没有装饰线（最常用）
underline：下划线
line-through：删除线
overline：上划线

a { text-docoration: none ;}

最常将a标签的下划线去除
4）文本缩进：text-index
通常给段落设置2em;
只对独占一行的元素生效

p { text-index: 2em;}

5）行间距：line-height
控制文本行与行之间的距离
行间距由上间距、文本高度和下间距组成
行间距与盒子高度相同时可实现垂直居中

p { line-height: 26px;}

下方是本章的xmind导图：