前言
上一章节我们学习了Html的使用，已经可以完成页面的搭建。只使用Html标签的页面就像是没有装修过的毛坯房一样丑陋，我们需要对其美化。也就是我们接下来要学习的，使用css美化html页面。
CSS简介
对于修改html标签显示效果，我们可以通过一些属性也可以实现，比如width,height,text,bgcolor等，但是使用属性的这种方式没有实现内容与样式表现的分离，不方便后期的维护，使用css之后可以解决此问题。
CSS 全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的，应用优先级高的，不冲突的共同作用。
CSS语法规范
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明.
a. 选择器通常是您需要改变样式的 HTML 元素。
b. 每条声明由一个属性和一个值组成。
基础语法：选择器｛属性：值;属性:值…… ｝
示例：
注意：请使用花括号来包围声明。
CSS导入方式
内嵌方式(内联方式)
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
<div style="color:blue;font-size:50px">This is my HTML page. </div>
内部方式
在head标签中使用style标签，在其内部书写css,示例如下:
<style type="text/css"> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>
外部方式
将css样式抽成一个单独文件，谁用谁就引用，示例如下：
创建单独文件div.css: 内容示例：div{color:green;font-size:50px}
需要使用样子的html中在head标签内部进行引用div.css文件
<link rel="stylesheet" type="text/css" href="div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型，告诉浏览器使用css解析器去解析
href:css文件地址
@import方式
这种方式作为了解，相对使用介绍。
<style type="text/css">
@import url("div.css")
</style>
该内容书写在head标签中。
备注:link和@import区别：
1.link所有浏览器都支持，@import某些版本低的IE不支持
2.@import是等待html加载完成才加载
3.@import不支持js动态修改
CSS选择器
选择器主要用于选择需要添加样式的html元素，css中提供了多种选择器。
基本选择器
通配符选择器
通配符使用星号*表示，意思是“所有的”
*{margin:0px; padding:0px;}
//这里是设置所有元素的外边距margin和内边距padding都为0。
标签(元素)选择器
标签选择器表示选中指定元素名的所有元素。上面css导入的案例中我们的使用的就是这种选择器。
在前端中，标签，标记，元素我们一般来说都指的同一个意思。
语法:
html标签{属性:属性值}
案例:
<style type="text/css">
//双斜杠在css中的注释
//选中所有span元素，这些元素内部的文字颜色是红色，字体大小为100像素
span{color: red;font-size: 100px}
</style>
id选择器
元素选择器选中的范围太广，有时候我们要为单独的某一个元素指定样式，此时可以使用id选择器为特定标签指定样式。
语法:
#id值{属性:属性值}
举例:
<style type="text/css">
#s1{color: red;font-size: 100px}
#s2{color: green;font-size: 100px}
#s3{color: blue;font-size: 100px}
</style>
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
class选择器
给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器,选中拥有指定class名的所有元素
.class名{属性:属性值}
示例如下:
<style type="text/css">
.s1{color: purple;font-size: 100px}
</style>
<div class="s1">hello,everyone!</div>
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
属性选择器
根据元素的属性及属性值来选择元素。
语法:
htm标签[属性='属性值']{css属性:css属性值;}
html标签[属性]{css属性:css属性值;}
.....
举例:
<style type="text/css">
input[type='text'] {
background-color: pink
}
input[type='password'] {
background-color: yellow
}
font[size] {
color: green
}
a[href] {
color: blue;
}
</style>
<form name="login" action="#" method="get">
<font size="3">用户名：<font>
<input type=“text" name="username" value="zhangsan"></input> </br>
密码： <input type="password" name="password" value="123456"></input> </br>
<input type="submit" value="登录"></input>
</form>
伪元素选择器
主要是针对a标签,a标签有四种状态：静止，悬浮，触发，完成。我们可以为a标签不同的状态指定不同的显示效果，此时就可使用伪元素选择器
语法:
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
举例:
<style type="text/css">
<!--静止状态 -->
a:link {color: red;}
<!--悬浮状态 -->’
a:hover {color: green;}
<!--触发状态 -->
a:active {color: yellow;}
<!--完成状态 -->
a:visited {color: blue;}
</style>
<a href="https://hao.360.cn/">点我吧</a>
复合选择器
复合选择器也可以叫组合选择器，是多个基本选择器组合在一起形成新的选择方式。
后代选择器
后代选择器可以选择作为某元素后代的元素
语法:
父元素 子元素{css属性}
注意: 父元素和子元素中间是一个空格。
<div id="div1">
<div class="div11">
<span>span1-1</span>
</div>
<div class="div12">
<span>span1-2</span>
</div>
</div>
<div class="div2">
<div id="div22">
<span>span2-1</span>
</div>
<div id="div23">
<span>span2-2</span>
</div>
</div>
<style type="text/css">
//选中id为div1下的所有class值为div11的所有元素
#div1 .div11{color:red;}
#div1 .div12{color:purple;}
.div2 #div22{color:green;}
.div2 #div23{color:blue;}
</style>
并集选择器
并集选择器是由各个选择器通过逗号连接而成的，并集选择器可以实现同时给多个选择器应用同一种样式。
//从淘宝首页复制，为逗号链接的所有元素指定内外边距
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
其他说明
其他复合选择器还有:子元素选择器，兄弟相邻选择器，交集选择器，结构选择器等等，而且不同文档对于名字的定义也有不同。我们当前文档不一一列举，今后会在jquery章节继续深入探讨更多的选择器，或者在练习过程中进行扩展。
样式的优先级
我们首先看一段代码:
<style>
div{color:blue}
#did{color:black}
.dclass{color:gray}
</style>
<div id ="did" class ='dclass' style="color:red">nihao</div>
问:div中的文字到底显示什么颜色?
这就涉及到css的优先级问题，如果多种方式共同作用在同一个元素上，样式有冲突的，应用优先级高的，不冲突的共同作用。
官方解释:
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
外部方式<内部方式< 内联方式
我们可以简单理解为越精确的选择器优先级越高，其实这种说法不全面，但是可以解答我们绝大部分情况的优先级问题，作为一个非专业前端人员目前不需要深究，如果想要学习更多，请百度《css权重》。
CSS属性
文字属性
1>.font-size:设置字体大小
2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等
3>.font-style:规定斜体字,常见的值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
4>font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
100 对应最细的字体变形，900 对应最粗的字体变形。
数字 400 等价于 normal，而 700 等价于 bold。
备注：通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样
文本属性
1>.color:设置文本颜色
2>.text-indent:缩进元素中文本的首行,取值类型如下：
1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
3>.text-decoration:
none:会关闭原本应用到一个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线
blink:让文本闪烁，只有Firefox浏览器才支持这个效果
4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
5>.word-spacing: 词间距，对中文无效
6>.letter-spacing: 字间距
背景属性
1>.background-color：设置背景颜色，默认透明
2>.background-image:url("图片路径"):设置背景图片
3>.background-repeat:repeat-y:只在垂直方向都平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺
4>. background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center
备注:
如果想让背景图片不平铺居中，除了background-position:center 以外还需要background-attachment:fixed;配合才能保证生效。
列表属性
list-style-type:decimal;改变列表的标志类型,none为取消前置标志
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
尺寸属性
width:设置元素的宽度
height:设置元素的高度
显示属性
display :none:不显示
block:块级显示
inline:行级显示
浮动属性float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
clear 属性
规定元素的哪一侧不允许其他浮动元素。
可能的值：
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
定位属性
定位属性配合偏移量可实现元素在页面显示时发生位移。
相对定位(relative)
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
示例代码：
<html>
<head>
<style type="text/css">
h2.pos_left {
position: relative;
left: -20px
}
h2.pos_right {
position: relative;
left: 20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
4.9.2 绝对定位(absolute)
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框.
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h2.pos_abs {
position: absolute;
left: 100px;
top: 150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
4.9.3 固定定位(fixed)
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
示例如下(网站左下角和右下角广告)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#left {
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 0;
bottom: 0;
}
#right {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
right: 0;
bottom: 0;
}
#middle{
width: 200px;
height: 200px;
background-color: blue;
position: fixed;
left: 0;
bottom: 50%;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
</body>
</html>
总结定位
相对定位是在自己原有位置基础上进行偏移，占用原本位置。
绝对定位是相对于父块级元素偏移，不占用原本位置，自己变成块级元素。
固定定位相对于整个浏览器窗口偏移。
CSS盒子模型
边框相关属性
border-style:边框样式，值有以下情况：
solid:实线
double:空心线
dashed:圆点组成的边框
dotted:虚线组成的边框
border-color:边框颜色
border-width:边框宽度
外边距相关属性
margin:外间距,边框和边框外层的元素的距离
margin:四个方向的距离(top right bottom left)
margin-top:
margin-bottom:
margin-left:
margin-right:
内边距相关属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
padding-left:
padding-right:
padding-top:
padding-bottom:
CSS3扩展属性
html随着发展加入了新特性，css同理，下面是css3中提供的一些新的属性。
border-radius创建圆角
示例： border-radius: 25px;
box-shadow:用于向方框添加阴影
示例：box-shadow: 10px 10px 5px #888888;
background-size: 属性规定背景图片的尺寸
<body style="text-align: center;
background:url(img/1.png);
background-size: 200px 300px;
background-repeat: no-repeat;">
</body>
background-image:为指定元素使用多个背景图像
text-shadow: 可向文本应用阴影。
示例：text-shadow: 5px 5px 5px #ffff00;
更多css和css3样式请参考手册
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
