样式复用、方便网站的后期维护
css样式表就是把页面和style分离开来，利于后期的维护
行内样式
内部样式
标签选择器
下面代码写在head前，花括号左侧是选择器（例如li），里边是写样式。前面是样式，后面是样式值，用冒号分开
<style type="text/css"> li{ color: red; font-size: 70px; list-style: none; } </style>
类选择器
<li class="red">第一行</li>
<li class="blue">第二行</li>
<li class="red">第三行</li>
<li class="blue">第四行</li>
<li class="red">第五行</li>
<li class="blue">第六行</li>
ID选择器
#first{
font-weight: bold;（加粗）
}
<li id="first">第一行</li>
外部样式
能够用于多个网页
基本知识：
长度单位：px,像素
颜色单位：
十六进制：#ffffff
颜色名称：red
RGB颜色：（255,255,255）
尺寸属性：
width min-width max-width
height min-height max-height
文本属性：
font缩写形式
font-weight粗细 bold粗体
font-size大小
font-family字体系列 用引号引发来
font-style倾斜 italic
字体颜色：
color
opacity 透明
行距、行高
line-height行高
letter-spacing修饰间距
text-decoration下划线
text-align对齐
overflow 属性规定当内容溢出元素框时发生的事情。
div
{
width:150px;
height:150px;
overflow:scroll;
}
text-overflow 属性规定当文本溢出包含元素时发生的事情。
div.test
{
text-overflow:ellipsis;
}
text-shadow 属性向文本设置阴影。
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
text-indent 属性规定文本块中首行文本的缩进。
p
{
text-indent:50px;
}
text-stroke 指定文字的描边效果
css定位技术
css定位机制
一、普通文档流 外边距margin 内边距padding
二、浮动float
三、定位属性position 就是页面中的元素不动
static
relative相对定位，相对于原始的位置，不会影响下一位置
fixed 不会根据滚动条滚动
position: fixed;
right: 0px;
bottom: 0px;
absolute 绝对定位，相对于前方定位，若前方没有窗体，直接按边界进行计算
css其余定位属性
top
right
button
left
z-index整数之越大，则被层叠在最上
例如 z-index: 2;层叠在z-index:1之上
加载js的时候，用到的是<script style='text/javascript' src='js/demo.js'></script>
加载css的时候，用到的是<link rel="stylesheet" href="css/demo.css"/>
裁剪属性：clip经过对元素的剪切来控制元素的可显示区域
clip：rec()
clip: rect(0px,252px,126px,126px);上右下左
垂直居中-决定定位+负边距 能够使内容变大，背景不变
overflow 标签固定，内容比盒子大，用它处理
hidden隐藏
\visible\sroll、auto
text-overflow文本益处发生
background
background-image
background-repeat背景重复方式 no-repeat repeat-x
background-size背景尺寸
background-position 位置偏移 x y
超连接的四种状态
未访问状态link
已访问的visited
鼠标访问（a:hover）伪类选择器
激活选定状态active
盒子模型
margin外边距
padding内边距
border边框
width宽度
height高度
border-style样式
border-radius设置边框的弧度角度
border-image边框图片
非标准流
定位和浮动
clear清除浮动