1.css初识
css 中文解释：层叠样式表，把html比作骨骼的话，css就是衣服，他的外在都能通过css来修饰，js则是肌肉，能使html动起来。产生用户交互。。。
1.1css样式表类型
css样式类型：
行内样式：
内部样式：
外部样式（推荐使用）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外部样式：直接将css写入到css文件中，加载使用--> <link rel="stylesheet" href="css/top.css"> <style> /*内部样式：将样式写到head中的style中*/ #pg-index{ background-color: #00AA88; } </style> </head> <body> <!--行内样式：直接将css样式写入到标签内部--> <div id="pg-index" style="color: red"></div> </body> </html>
1.2css选择器类型
标签选择器:（html标签）
类别选择器:（class选择器）
ID选择器:
层级选择器:
分组选择器:
通用选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外部样式：直接将css写入到css文件中，加载使用--> <link rel="stylesheet" href="css/top.css"> <style> /*内部样式：将样式写到head中的style中*/ *{ /*通用选择器*/ font-family: "Microsoft YaHei", "Hiragino Sans GB"; } body{ /*标签选择器*/ margin: 0; } #pg-index{ /*id选择器*/ background-color: #00AA88; } .pg-index2{ /*类选择器(class选择器)*/ float: right; } #pg-index p{ /*层级选择器*/ font-size: 20px; } #pg-index,.pg-index2{ /*分组选择器*/ margin-left: 10px; } #pg-index p:hover{ /*伪类选择器*/ background-color: #00CC00; } </style> </head> <body> <!--行内样式：直接将css样式写入到标签内部--> <div id="pg-index" class="pg-index2" style="color: red"> <p>主体内容</p> </div> </body> </html>
伪类选择器:
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
1.3css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）
1.4css选择器优先级
<style type="text/css"> #show1{color:gold;} .show {color:pink;} h1 {color:red;} * {color:green;} </style> </head> <body> <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1> </body>
1.5css文本段落属性及边框
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
body{
/*标签选择器*/
border: 1px solid red;
100%;
text-align: center;
height: 50px;
line-height: 50px;
margin: 0;
}
1.6css文字属性
字号：font-size
语法：font-size：大小的取值(像素值)
文字颜色：color
语法：Color：颜色取值方式
color:#292378; //6个十六进制数获得颜色
color:#A64; //#AA6644的缩写
color:red; //颜色关键字定义颜色
color:rgb(100,159,170); //rgb定义颜色
1.7css背景属性
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
1.8css背景图片实例
<style> #myimg{ border:1px solid red; height:18px; width:18px; background-image: url('2.png'); background-position-y:138px; } </style> <body> <div id="myimg"> </div> </body>
1.9css位置属性
margin外边距填充属性
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right
margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示
padding内边距填充属性
padding是对内元素，用来控制元素内部元素的位置
四边填充 padding
上填充 padding-top
下填充 padding-bottom
左填充 padding-left
右填充 padding-right
padding 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
2.css浮动属性
2.1css显示属性
Display显示属性： block：将元素变成块级标签，可以设置高度和宽度 Inline：将元素变成行内标签，不能设置高度和宽度 Inline-block：同时具有两种 none：标签消失 <span style="background-color: gray;height:70px;20px;">行内标签</span>
2.2css溢出处理
2.3css位置属性
2.4css层级优先级
