CSS，主要用于控制Web页面的外观。通过使用CSS样式设置页面的风格，可将页面的内容
与表现形式分离。css 层叠样式表美化页面配合html布局。
在当前可以浏览的网站当中，都存在着CSS样式代码，可以通过谷歌等浏览器的控制
台，去除网页中的CSS代码，来查看没有CSS时代网页的显示效果。在没有css的时候网页是十分简陋的。
在哪写？
l、内嵌（行内）（不推荐优先级最高）
写在标签里面，以属性的形式表现，属性名
<b style=””></b>
2、内联（少量样式可以在里面写）
style
写在head标签里面以标签的形式表现 标签名style
3、外部引用．Css <link rel="stylesheet" type="text/css" href="mystyle.css">
写在head标签里面以标签的形式表现标签名link
推荐使用外部引用，控制性强，便于维护
样式格式：
样式名：样式值：样式名：样式值
通过引入方式，在HTML页面中放入了CSS样式，接下来要做的操作就是让相应的
标签应用定义好的CSS样式，这里会涉及“选择器”的基本知识。
选择器格式：
选择器{样式名：样式值｝
选择器：用来找标签（条件）把指定的样式应用在找到的标签上
通用选择器： *所有标签（很危险）
标签选择器： 根据标签名来找
id选择器： 根据id值来找 #id值
id属性在当前文件里是唯一的
class选择器 根据class值来找 ．class值 ，class可以有多个，由空格分开
其他：
并列 两个选择器用—个样式用逗号分隔
选择器1 ，选择器2{样式）
子类在选中的标签中找 空格
属性选择器： [属性名=’属性值']
优先级
就近原则（相同样式 相同选择器）
权值（越大 优先级越高）
行内 1000
Id 100
Class 10
标签 1
通用* 0
html中图片路径： 从html文件开始找
css中图片路径： 从css文件开始找
js中图片路径： 从引入该js文件的html文件开始找
CSS中长度与颜色
长度单位 说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推荐使用）
颜色单位： 说明
十六进制 如：color:#ff0000
颜色名称 如：color:red
三原色单位 如：rgba(255,0,0,1)
一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。每个值域在0－255之间
CSS中的文字属性
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
12px
14px
16px
font-family 字体名称 设置字体名称
微软雅黑
font属性简化的使用方法：
font:是否斜体 是否同宽 是否粗体 大小 字体名称
例如:font:italic bold 200 隶书；
CSS中的文本属性
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单位 颜色
letter-spacing normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
数字 单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度 首行缩进
百分比 同上
line-height 像素 行高
数字/百分比 行高
text-transform none 正常显示可以包含大，小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
CSS中背景的使用
属性名称 属性值 说明
background-attachment scroll 设置背景图像会随视窗滚动
条的移动而移动。
fixed 设置背景图像不会随视窗滚动条
的移动而移动。
background-color 十六进制
英文名称 background-color:red;
三原色 background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg")
背景图片
none 不设置背景图片
background-position top left 设置背景图案出现在上左方。
top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在IE中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-size: cover; 背景填充
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
背景图案简化方案：
background:颜色 背景图片 repeat attachment position
CSS中列表的使用
属性名称 属性值 说明
list-style-type none 无符号
disc 实体的小圆点。
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position inside 清单项目较往右移。
outside 清单项目正常显示。
list-style-image URL list-style-image:url(lmk.gif)
none 不会显示任何图象
清单的简化设置：
list-style:circle inside url("bullet.gif")
CSS中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上，右，下，左线颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green
(上下为红色，左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
简化方案：border:形态 长度 颜色
例如 border:1px solid black;