CSS
CSS介绍
导入css
Css选择器
CSS属性
CSS框模型
css介绍
1. css是什么
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
2. css作用
样式表解决了html的内容与表现分离
使用样式表极大的提高了工作效率。
3. css书写规则
基本语法
Css规则主要由两部分组成 1.选择器 2.一条或多条声明
选择器主要作用是为了确定需要改变样式的HTML元素
每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开
值的单位
颜色
书写注意事项
- 如果值为若干单词，则要给值加引号
- 多个声明之间使用分号(;)分开
- css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感
导入css
我们介绍以下几种导入css方式:
内联样式表
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
例如:
注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用
内部样式表
我们可以使用<style>标签在html文档的<head>中来定义样式表。
<html>
<head>
<style type="text/css">
hr{color:red}
</style>
</head>
<body>
<hr/>
<div style="border:1px solid black">这是一个div</div>
</html>
这种方式，样式只适合应用于一个页面
外部样式表
如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。
我们可以在html页面上使用<link>标签来导入外部样式表。
例如:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<hr/>
<div>这是一个div</div>
</html>
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。
外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。
下面是mystyle.css文件的内容:
hr{color:red}
div{border:1px solid black}
@import导入
这种方式也是外部导入。
使用方式如下：
<html>
<head>
<link type="text/css" @import "mystyle.css">
</head>
<body>
<hr/>
<div style="border:1px solid black">这是一个div</div>
</html>
关于@import与引用外部样式表的区别:
1. @import这种方式只有firefox支持，而ie不支持。
2.@import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。
而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。
3.@import不支持通过javascript修改样式，而link支持。
优先级问题
内联样式表>内部样式表>外部样式表
css选择器
css选择器主要是用于选择需要添加样式的html元素。
对于css来说，它的选择器有很多，我们主要介绍以下几种:
id选择器
Id选择器使用#引入，它引用的是id属性中的值。
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}/** 这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子：
<p id="intro">This is a paragraph of introduction.</p>
类选择器
类选择器使用时,需要在类名前加一个点号(.)
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
属性选择器
如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}亲自试一试
例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}亲自试一试
例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
例子 4
可以采用一些创造性的方法使用这个特性。
例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。
例子 5：为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
伪类
css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
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 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。
常用属性:
设置元素的宽度
height:设置元素的高度
列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
常用属性:
list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image:定义列表项标志为图象
list-style-position:定义列表项标志的位置
list-style-type:定义列表项标志的类型。
表格
CSS 表格属性可以帮助您极大地改善表格的外观
常用属性:
border-collapse:定义是否把表格边框合并为单一的边框。
border-spacing:定义分隔单元格边框的距离
caption-side:定义表格标题的位置
轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:
outline:在一个声明中设置所有的轮廓属性
outline-color:定义轮廓的颜色
outline-style:定义轮廓的样式
outline-定义轮廓的宽度
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
常用属性:
position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
分类
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
常用属性
clear:设置一个元素的侧面是否允许其它的浮动元素
float:定义元素在哪个方向浮动
cursor:当指向某元素之上时显示的指针类型
display:定义是否及如何显示元素
visibility:定义元素是否可见或不可见。
CSS框模型
盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常用属性:
border:简写属性，用于把针对于四个边的属性设置在一个声明。
border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。
border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。
border-简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度
border-top:简写属性，用于把上边框的所有属性设置到一个声明中
border-right:简写属性，用于把右边框所有属性设置到一个声明中
border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中
border-left:简写属性，用于把左边框的所有属性设置到一个声明中。
外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
常用属性:
margin:简写属性，在一个声明中设置所有外边距属性
margin-top:定义元素的上外边距
margin-right:定义元素的右外边距
margin-bottom:定义元素的下外边距
margin-left定义元素的左外边距
注意:在使用margin来定义所有外边距时，可以使用值复制。
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
常用属性:
padding:简写属性，作用是在一个声明中设置元素的所有内边距属性
padding-top:定义元素的上内边距
padding-right:定义元素的右内边距
padding-bottom:定义元素的下内边距
padding-left:定义元素的左内边距。