WEB前端 -- CSS
一、CSS介绍
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
二、CSS的基本概念
层叠样式表
CSS样式表
三、CSS的书写的方式
3.1、行内样式
<div style="color:yellow"></div>
3.2、内部样式
head标签中
<style>
标签选择器
div{
color:red;
}
ID选择器
#id{
font-size:12px
}
类选择器
.class{
font-size:12px
}
组合选择器
包含选择器
div span{
}
<div>
<span>
</span>
</div>
分组选择器
div,span{
}
* --通用选择器
*{
color:red;
}
伪类选择器
a:hover{
color:red;
}
a:active{
}
a:visited{
}
a:link{
}
</style>
3.3、外部样式
<head>
<link href="a.css" />
</head>
3.4、CSS文字段落基本属性
1、height：设置div的高度
2、width：设置宽度
3、line-height：设置文字的居中(设置与height同样)
<div>123</div>
4、text-align：left rigth center
5、border：1px solid red;
3.5、CSS背景
background:
background-img:url("1.jpg")
background-repeat-x:
background-repeat-y:
background-position-x:
background-position-y
3.6、CSS的布局
float:浮动
left;
right;
清楚浮动：
<div style="clear:both"></div>
3.7、SS的盒子模型
margin: 设置外边距
padding:设置内边距
3.8、CSS的定位
position：
1、fixed
top right left bottom
2、relative
单独使用没有任何意义，需要结合absolute
3、absolute
定位方式：如果父级有定位方式，则以父级定位，如果没有，则以body定位。
3.8、z-index：
设置div浮动，置顶
3.9、opcatiy：
透明度
四、ie6的bug：
http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/
