CSS 介绍
1.css是什么
css指的是层叠样式表 1.样式定义如何显示HTML元素 2.样式通常储存在样式表中 3.把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题 4.外部样式可以极大提高工作效率 5.外部样式储存在CSS文件中 6.多个样式可叠层为一
2. css作用
1.样式表解决html的内容与表现的分离 2. 使用样式表极大的提高工作效率 3.提高样式代码的复用性
3.CSS书写规则
基本语法 CSS主要有两部分组成： 1.选择器 ：为了确定要改变样式的HTML元素 2.一条或者多条声明： 每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性之前使用冒号分开 如图：
u 值的单位
书写注意事项：
1. 如果值为若干单词，则要给值加引号
2. 多个声明之间用分号分开
3.css对大小写不铭感，如果涉及到与html文档一起使用时，class与id名称对大小写铭感
导入CSS的几种方式
内联样式表
要使用内联样式，需要在相关的标签内使用（style）属性。Style属性可以包含任何CSS属性
例如
<div style=”border:1px solid black”>这是一个DIV</div> 注意：使用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时候才用。
内部样式表
使用<style>标签在html文档的<head>中定义样式表
例如
<div style="color: red; font-size: 100px;">你好css</div> 语法：
1.使用style标签进行css的引入
2.属性的写法： 属性 : 属性值
3.多个属性之前使用分号隔开
注意：这种方式只适用于一个页面
外部样式表
优势：可以在多个页面中使用同一个样式表。可以在html页面上使用<link>标签来导入外部样式表
例如
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰呢。
外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑
mystyle.css文件内容：
语法：1.创建css文件，将css属性卸载css文件中
2.在head中用link标签进行引入 <link rel="stylesheet" type="text/css" href="css文件地址" target="_blank" rel="external nofollow" > rel:代表要引入的文件与HTML的关系 type : 告知浏览器使用css解析器去解析 href:css 文件的地址
@import导入
这种方式也是外部导入：
使用方式如下：
关于@import与引用外部样式表的区别：
1.@import 这种方式只有firefox支持，而ie不支持
2.@import这种方式导入css，会在整个页面加载之后才会加载样式。网络不好，会闪一下。
使用外部样式表会先装载样式表，这样看到的就是有样式修饰的页面。
3.@import不支持通过javascript修改样式，而link支持、
优先级：
内联样式表 > 内部样式表 > 外部样式表
CSS选择器
css选择器主要是用于选择需要添加样式的HTML元素
1. id 选择器
id选择器使用#引用，它引用的是id属性中的值
<html> <head> <meta charset="utf-8" /> <style type="text/css"> #d{ border: 3px ; color: red; } </style> </head> <body> <div id="d">王虎</div> </body> </html> 2.类选择器
类选择器使用时，需要在类名前加一个点号（.）
<html> <head> <meta charset="utf-8" /> <style type="text/css"> .d{ border: 10px ; color: red; } </style> </head> <body> <div class="d">王虎</div> </body> </html> 3.元素选择器
文档中的元素就是选择器
<html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ border: 10px ; color: blue; } </style> </head> <body> <div >王虎</div> </body> </html> 4.属性选择器
如果需要选择某个属性的元素，而不论属性是什么，可以使用属性选择器
<html> <head> <meta charset="utf-8" /> <style type="text/css"> input[type="text"]{ border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style:solid ; } </style> </head> <body> <input type="text" name="username" value="请输入你的姓名"/> <br /> <input type="password" name="password" /> </body> </html> 5.伪类
css伪类用于向某些选择器添加特殊效果
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：
活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。
css属性
字体
css字体属性定义文本的字体系列，大小，加粗，风格（如斜体）和变形（如小型大写字母）
常用属性：
font ： 简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family ： 定义字体系列
font-size ： 定义字体的尺寸
font-style ： 定义字体风格
文本
css文本属性可定义文本的外观。通过文本属性，你可以修改文本的颜色，字体间距，对齐文本，装饰文本，对文本进行缩进，等等
常用属性
color ; 定义文本颜色
text-align ： 定义文本对齐方式
letter-spacing ： 定义字符间隔
word-spacing：定义字间隔
背景
css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。css在这方面的能力在html之上。
常用属性：
background ： 简写属性，作用是将背景属性设置在一个声明中
background- color : 定义背景的颜色
background-image：定义背景图片
background-position：定义背景图片的起始位置
background-repeat： 定义别进图片如何重复
尺寸
css尺寸属性允许你控制元素的高度和宽度
常用熟悉： width设置宽度 height设置高度
列表
css属性允许你放置，改变列表项标志，或者将图像作为列表标志
常用属性：
list-style ： 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image： 定义列表项标志位图像
list-style-position： 定位列表项的位置
list-style-type ： 定义列表项标志的类型
表格
css 表格属性可以极大帮助你极大地改善表格的外观
常用属性：
border- collapse:定义是否把表格边框合并单一的边框
border - spacing：定义分隔单元格边框的距离
caption - side ：定义表格标题的位置
轮廓
轮廓是绘制与元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
css outline 属性规定元素轮廓的样式。颜色和宽度
常用属性：
outline ： 在一个声明中设置所有的轮廓属性
outline-color ： 定义轮廓的颜色
outline- style ： 定义轮廓的样式
outline-width： 定义轮廓的宽度
定位
css定位属性允许你对元素进行定位
允许你定义元素相框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置
css有三种基本的定位机制：普通流，浮动， 和局对定位
常用属性：
position：把元素放置到一个静态的，相对的，绝对的，或者固定的位置中
top：定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right ：定义了元素右外边距边界与其包含块左边界之间的偏移
left : 定义了定位元素左边距边界与其包含块左边边界之间的偏移
bottom ： 定义了定位元素下边距边界与其包含块下边界之间的偏移
分类
css分类属性允许如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度
常用属性：
clear ： 设置一个元素的侧面是否允许其它的浮动元素
float ： 定义元素在哪个方向浮动
cursor ： 当指向某元素之上时显示的指针类型
display ： 定义是否 和 如何显示元素
visibility： 定义元素是否可见或者不可见
CSS框模型
CSS框模型（Box Model）规定了元素处理元素内容，内边距，边框，和外边距的方式
CSS框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
边框
元素的边框是围绕元素内容和内边距的一条或多条线
CSS border允许你规定元素边框的样式，宽度和颜色
常用属性：
border ： 简写属性，用于把针对四个边的属性设置在一个声明。
border-color 定义元素边框中可见部分的颜色，或为四个边分别设置颜色
border-style ： 用于定义所有边框的样式，或者单独为各个边框设置样式
border-width ： 用于为元素的所有边框设置宽度，或者单独为各个边框设置宽度
border-top ： 用于把上边框的所有属性设置到一个声明中
border-right ： 用于把右边框的所有属性设置到一个声明中
border-bottom： 用于把下边框的所有属性设置到一个声明中border-left： 用于把左边框的所有属性设置到一个声明中
外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
设置外边距的最简单的的方法就是使用margin属性，这个属性接受任何长度单位，百分比甚至负值
margin-top 定义元素的上边距
margin-right 定义元素的右边距
margin-bottom 定义元素的下边距
margin-left定义元素的左边距
内边距
元素的内边距在边框和内容之间。控制该区域的属性是padding属性
常用属性：
padding- top 定义元素的上内边距
padding- right 定义元素的右内边距
padding-bottom 定义元素的下内边距
padding-left 定义元素的左内边距
![CSS3学习手册CSS3学习手册[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)