css在网页中使用的方法：
- 1:嵌入式：将css代码添加在html标签中。（该样式只作用于当前标签）
<h1 style="color:red;">文本</h1>style内定义要修改的属性，以冒号与赋值分格，每个定义属性之间用分号分隔。
- 2:内链式：当单个文档需要特殊的样式时，就应该使用内链表。将CSS样式代码写在
<style type="text/css"></style>中，并将<style>放在<head></head>中，该样式作用于当前整个页面
<head>
<style type="text/css">
h1{color:red;}
</style>
</head>- 3:外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。使用外部样式表，你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到<link>标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
颜色表示法：
1:英文表示法：red，blue，green等
2:16进制颜色表示法：#ff0000,#123456等 tip：第1，2位代表红色强度，第3，4位代表绿色强度，第5，6位代表蓝色强度。
3:10进制颜色表示法（rgb）：例：(255,0,0)红色，(0,255,0)绿色
css选择器
1、标签选择器
以标签名为样式名称定义的样式
例如：h1{color:#f00;} h1为html标签名称
2、类选择器
以类名称为样式名，定义的样式
例如：
.chen{color:#f00;} chen为类名称
<h1 class="chen">测试文字</h1> 引用.chen样式3、ID选择器
以ID名称为样式名，定义的样式
例如：
#abc{color:#00f;} 引用abc样式
<h1 id= "abc">测试文字</h1> //abc为ID名称4.并列选择器
将多个选择器并列定义
例如：
h1,h2,p,.abc,#abc{color:#0f0;}5.包含选择器
具有父子关系的选择器
例如：
#abc p{color:#333;}定义id名称叫做abc中的P元素的样式
优先级：
id>类>标签选择器
css reboot
很多元素自带属性，所以在样式表开头清除所有样式，后面重新定义
例：* {margin:0; padding:0;}
css属性
1:文字相关属性：
color:red/#FF0000; 用于定义文字的颜色font-size:10px; 用于定义字号font-family:"宋体"； 用于定义文字的字体（若为中文字体则需要在字体名外套上一对引号）line-height:30px/150% 用于定义行高font-weight:bold/normal bold用于定义文字加粗(nomal将已经加粗的文字取消加粗)text-decoration:none 用于定义文字修饰，none为无修饰效果，underline为文字添加下划线
2:段落文本属性
text-indent:*px; 用于设置文本首行缩进（数值根据文字大小决定）text-algin:*; 用于文本在元素中的对齐方式，left,center,right(左中右对齐)list-style:none; 用于设置列表样式，none为将列表符号清除（清除有序/无序列表前的 点/序号 ）background-color:*; 用于设置网页背景颜色background-image:url(*.jpg); 用于定义背景图片，url内填图片路径background-repeat:*; 用于定义背景图的重复方式，repeat表示重复（铺满），no-repeat：横向重复，repeat-x,repeat-y(横向/纵向重复)background-position:left top(可以赋值为坐标：水平｜垂直); 用于定义背景图位置 水平方向（left,center,right）｜垂直方向（top,center,bottom)background-attchment:fixed; 用于定义背景图固定，赋值fixed为固定背景，（背景图滚动为默认值，未定义固定则默认滚动）
背景图简写：
background:#ffffff url('img_tree.png') no-repeat right top;
使用空格分隔每个元素。
行内元素和块级元素
行内元素的大小在默认情况下由元素中包含其他元素的大小来决定
块级元素在默认情况下将占据整行空间
display:block; 用于改变元素显示方式，block将元素显示方式改为块级元素 inline将元素显示方式改为行内元素
元素大小设置CSS
width:100px; 设置元素宽度
height:100px; 设置元素高度
.father{
width: 200px;
height: 200px;
}margin(外边距)
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
.father{
width: 100px;height: 100px;
margin: 10px;
}margin:20px; 设置元素外边距（周围四个方向）margin-left:10px; 左侧外边距margin-right:10px; 右侧外边距margin-top:10px; 顶部外边距margin-bottom:10px; 底部外边距
margin简写
margin:25px 50px 75px 100px;
上边距为25px,右边距为50px
下边距为75px,左边距为100px
margin:25px 50px 75px;
上边距为25px,左右边距为50px,下边距为75px
margin:25px 50px;
上下边距为25px,左右边距为50px
margin:25px;
所有的4个边距都是25px
padding(内边距)
.father{
width: 100px;height: 100px;
padding: 10px;
}padding:20px; 设置元素内边距padding-left:10px; 左侧内边距 padding-right:10px; 右侧内边距 padding-top:10px; 顶部内边距padding-bottom:10px; 底部内边距
padding简写
padding:25px 50px 75px 100px;
上填充为25px,右填充为50px
下填充为75px,左填充为100pxpadding:25px 50px 75px;
上填充为25px,左右填充为50px,下填充为75pxpadding:25px 50px;
上下填充为25px,左右填充为50pxpadding:25px;
所有的填充都是25px
border(边框)
.test{border:1px solid #f00;}border: 1px solid #f00; 用于设置元素边框 1px表示边框粗细 solid 表示实线 #f00 表示边框颜色border-left: 左侧边框border-right: 右侧边框border-top: 顶部边框border-bottom:底部边框
圆角属性（border-radius）
.son_1{
width: 100px;
height: 100px;
border-radius: 50px;
}.son_1{
width: 100px;
height: 100px;
border-radius:10px 20px 30px 40px;
}水平半径：如果提供全部四个参数值，将按左上(top-left)、右上(top-right)、右下(bottom-right)、左下(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于左上、右下，第二个用于右上、左下。
如果提供三个，第一个用于左上，第二个用于右上、左下，第三个用于右下。
float(浮动)
.test{float:left;background:#eee;}float:left; 用于设置元素浮动 left表示左浮动（左对齐）,right表示右浮动（右对齐）
定位：将元素摆放在页面中任意的位置
css提供positions属性设置定位
参数说明：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
规则：
当开启元素的定位，取值是非static的时候
可以通过 left 、right、top、bottom设置元素的偏移量
left：元素相对于定位元素的左侧
right：元素相对于定位元素的右侧
top：元素相对于定位元素的上侧
bottom：元素相对于定位元素的下侧
1、当元素开启相对定位时：
特点：
1、不设置偏移量元素不会发生变化
2、相对对于元素原来的位置进行定位的
3、元素没有脱离文档流
4、相对定位会是元素提升一个层级
5、不会改变元素的性质
2、开启绝对定位
1、会使元素脱离文档流
2、没有设置偏移量，元素位置不会发生变化
3、绝对定位相对于离他最近的开启定位的父类位置进行定位的
如果都没有开启定位，相对于浏览器的窗口进行定位
（一般子元素开启绝对定位，父元素开启相对定位）
4、会使元素提升层级
5、会使行内元素变为块元素
3、固定定位永相对于窗口定位，位置不会随着滚动条滚动