一、CSS概述
1.简介
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = ‘key1:value1;key2:value2;‘
- 在标签中使用 style=‘xx:xxx;‘
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
PS：css注释 /* */
2.标签选择器
id选择区:
#i1{
background-color: #2459a2;
height: 48px;
}
class选择器 ******
.名称{
...
}
<标签 class=‘名称‘> </标签>
标签选择器:
div{
...
}
所有div设置上此样式
层级选择器（空格隔开） ******
.c1 .c2 div{
}
组合选择器（逗号） ******
#c1,.c2,div{
}
属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n=‘alex‘]{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
3.补充CSS书写顺序
- 位置属性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)
二、CSS各种属性
1.边框：
border: 1px solid red border-top # 上 border-bottom # 下 border-left # 左 border-right # 右
2.background：
background-color; # 背景颜色 background-image:url(‘image/4.gif‘); # 默认，div大，图片重复放 background-repeat: repeat-y; # 是否重复 background-position-x: # 图片x轴位置 background-position-y: # 图片y轴位置 background: url(icon_18_118.png) 0 -119px no-repeat; # 简写
3.常用属性：
height; # 高度 百分比
width; # 宽度 像素，百分比
text-align: center; # 水平方向居中
line-height; # 垂直方向根据标签高度居中
color; # 字体颜色
font-size; # 字体大小
font-weight; # 字体加粗
text-decoration:none; # 去除超链接的下划线
opcity: 0.6; # 透明度
z-index: 10; # 高的在上面
overflow: hidden,auto # 规定当内容溢出元素框时发生的事情,隐藏或者出现滚动条
hover # 选择鼠标指针浮动在其上的元素，并设置其样式 a:hover{background-color:yellow;}
4.float：
让标签浪起来，块级标签也可以堆叠
<div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div>
控制不住加上：<div style="clear: both;"></div>
5.display：
display: none; -- 让标签消失
display: inline; # 行内
display: block; # 块级
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
6.margin(外边距)可以改变位置
CSS Margin(外边距)属性定义元素周围的空间。
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
PS：margin: 0 auto
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin:100px 50px;
ps:缩写如果写全的话，顺序是上右下左，其实就是顺时针方向.
7.padding（填充）改变自身
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
padding:25px 50px;
8.position：
fiexd (固定在页面的某个位置)
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
relative + absolute
<div style=‘position:relative;‘> <div style=‘position:absolute;top:0;left:0;‘></div> </div>