CSS

CSS初级入门

页面引入 CSS 的方式：

1. 行内样式：

   <h1 style="color: red; font-family: simsun;">大家今天写代码要细心</h1>
   

   优点：直接方便

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

2. 内部样式：

   在页面的 中写：

   <style type="text/css">
   			h2{
   				color: bule;
   			}
   </style>
   

   优点：页面内代码的复用性高

   缺点：不能实现页面间的复用

3. 外部样式：

   在页面的 标签中引入外部样式：

   <link rel="stylesheet" href="css/index.css"/>
   

   优点：可以实现页面间的复用，最符合 W3C 的规范：实现标签与样式分离；

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

   在 中导入:

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

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

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

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

css 的总语法:

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

css 选择器：

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

优先级：id > class >tag

超链接伪类样式：

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

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

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

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

css 中常用的样式

1. 字体样式：

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

2. 文本样式：

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

3. 背景样式：

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

4. 列表样式：

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

盒子模型

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

1. 盒子的组成

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

2. 边框：

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

3. 内边距：标签内容与边框之间的距离

4. 外边距：标签边框与其他标签边框之间的距离,能用外边距微调距离时，就不要使用内边距

5. 盒子模型的宽度=元素的宽度+左右内边距+左右边框线

6. 盒子模型的高度=元素的高度+上下内边距+上下边框线

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 布局（重点）

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