CSS

CSS初级入门

页面引入 CSS 的方式：

行内样式：
```
<h1 style="color: red; font-family: simsun;">大家今天写代码要细心</h1>
```
优点：直接方便

缺点：可读性，复用性差，布恩那个遵循 W3C 规则。
内部样式：

在页面的中写：
```
<style type="text/css">
			h2{
				color: bule;
			}
</style>
```
优点：页面内代码的复用性高

缺点：不能实现页面间的复用
外部样式：

在页面的标签中引入外部样式：
```
<link rel="stylesheet" href="css/index.css"/>
```
优点：可以实现页面间的复用，最符合 W3C 的规范：实现标签与样式分离；

（了解）导入样式：不支持 js 的修改

在中导入:

<style type="text/css">
			@import url("css/index.css");
</style>

导入样式和外部样式的区别：

导入样式只有部分浏览器支持，外部样式都支持
加载时机不同：导入样式先加载 HTML 页面后，再加载导入的样式；外部引用样式，执行的时候就已经导入。

三种引用方式的优先级：行内样式 > 内部样式 > 外部样式

css 的总语法:

选择器{
    样式名1：样式1；
    样式名2：样式2；
    ...
    样式名n:样式n;
}

css 选择器：

标签选择器：tagName{}
类选择器：.className{}
id 选择器：#idName{}
通用选择器：*{}
后代选择器：fatherName 后代{} 是fatherName 里面的所有标签
子选择器：body>span{} 直接儿子标签
相邻选择器(选择当前标签的后面一个)：latter+former{} 选中的是 former
群组选择器：选择器之间用逗号分隔。h1,h2,h3{}
属性选择器：标签名[属性3][属性2][属性3]{}

优先级：id > class >tag

超链接伪类样式：

a:link 未被访问的连接样式

a:visited 已经被访问过的样式

a:active 超链接单击时的样式

a:hover 鼠标指针悬停在超链接上的样式

css 中常用的样式

字体样式：

font-family ：文字类型，
font-size:字体大小
font-style:字体倾斜类型
font-weight:字体粗细
color:字体颜色

文本样式：

letter-spacing:设置字间距
line-height:设置行高
text-align:水平对齐方式
text-decoration:文本修饰效果
text-indent:文本缩进

背景样式：

background-color:设置元素的被背景颜色
background-color：设置元素的背景图像
background-oisition:设置背景图像的开始位置
background-repeat:设置背景图像如何重复

列表样式：

list-style-type:none;
list-style-pisition:inside 图标的位置
list-style-image:url()设置列表图标为图片

盒子模型

将 html 页面的每一个标签看作是一个盒子

1. 盒子的组成

标签内容：边框（border），内边距（padding），外边距（margin）

边框：

border-color：边框颜色
border-style：边框类型，eg：solid(实线)，dashed（虚线）
border-width：边框粗细，上右下左的顺序

内边距：标签内容与边框之间的距离
外边距：标签边框与其他标签边框之间的距离,能用外边距微调距离时，就不要使用内边距
盒子模型的宽度=元素的宽度+左右内边距+左右边框线
盒子模型的高度=元素的高度+上下内边距+上下边框线

2. 盒子的分层

从前到后的顺序：border->content->padding->background-image->background-color->margin

3. 定位

position：static/ralation/fixed/absolute
static:静态定位，默认的
ralation:相对标签原来的位置发生偏移，不影响其他的元素（父级元素和相邻的元素，没有脱离标准文档流）
absolute:相对当前标签的父标签开始定位（设置了position的父元素，position的值可以是任意，一级一级向上找，直到找到浏览器，当前标签脱离标准文档流）
fixed:并不是所有的浏览器都支持，生成绝对定位的元素，相对于浏览器窗口进行定位
z-index:0/1/2/3 标准文档流是在0上，值越大越靠上

定位原则：一般用来微调标签的位置，能用相对定位就不要用绝对定位

4. 浮动

/*将块级元素变成行级元素*/
/*浮动的元素会脱离文档流*/
float:left/right;
/*清除浮动*/
clear:both/left/right;
/***注意：如果一个元素浮动了，后面相邻的元素会受到浮动的影响，如果不想让后面的浮动，就需要清除浮动***/

css 布局（重点）

div + css：整体布局
div + ul-li :导航条/左右侧菜单
div+dl-dt-dd:做图文混排
form+table：做规整的表单
margin:0px auto;页面整体居中
text-align:center；文字水平居中
line-height:高度;文字在这一行垂直居中
vertical-align:middle;当前行文字图片同时存在，使图片垂直居中