CSS
1、什么是CSS？
Casding Style Sheet 层叠样式表
2、作用：
使样式与内容分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3、编写CSS代码的位置
1.标签内部 优先级最高
<div style=””></div>
2.页面内部（一般写在头部）
<style>CSS代码</style>
3.外部CSS文件
.css文件
使用<link rel="stylesheet" type="text/css" href="xxx.css">导入
4、基本语法
CSS规则主要由两个主要部分组成
选择器{css属性：值;css属性 ：值.....}
标签内部的css不需要选择器
5、CSS选择器
1.标签选择器
标签名{css属性：值;css属性 ：值.....}
所有此类型的标签都有这个样式
2.类选择器
<div class=”类名”></div>
.（类名）{css属性：值;css属性 ：值.....}
3.id选择器
<div id=”xxx”>
#xxx{css属性：值;css属性 ：值.....}
4.id>类>标签
6、常用属性
1.font font-size字体大小; font-family字体类型; font-weight字体粗细;
font:大小 类型 粗细; //顺序不能乱
2.background-color 背景颜色
3.width height:宽高
7、一般属性
1.line-height行高
2.text-align文本对齐方式 center left right
3.text-indent文本缩进 eg:50px
4.leter-spacing字符间距 px
5.text-decoration下划线 underline字下面;overline字上面;line-through穿过字,none无
6.color:字体颜色
7.background-color背景颜色;-image背景图片;
-repeat背景图片重复方式 no-repeat不重复; repeat-x，repeat-y
-position背景图片的位置111px,222px;
:url(xxx.jpg);背景图片
可以background:yellow url(xxx.jpg) no-repeat 200px 122px;不要求顺序
8.list-style列表风格
list-style:circle空心圆; none无;disc实心圆;square实心正方形;decimal数字
float:left浮动布局，会取消独占一行的效果 right
9、盒模型
1.边框border
border-left border-right border-top border-bottom左右上下边框
-color边框颜色 -style边框样式 -width边框宽度
eg:border-left:1px red solid;
2.外边距margin -left -right -top -bottom
margin:0px 1px 2px 3px;分别是上右下左
margin:1px; 上右下左全设置
margin:1px 2px;上下 左右
margin:1px 2px 3px;上 左右 下;
margin:0px auto;左右居中
3.内边界 padding 在原有的基础上增加设置的值
-left -right -top -bottom
padding:100px 200px 300px 400px;
4.clear区域隔离：如果它的左边（或右边）的上一个元素存在左浮动或右浮动，则换行
只对块级有用
Right left both none
10、绝对定位和相对定位
1.position:absolute;绝对定位
2.position:relative;相对定位
3.Z轴索引值 z-index 越大越靠外，越小越靠里
11、超链接伪类
|
a:link |
未单击访问时超链接样式 |
|
a:visited |
单击访问后超链接样式 |
|
a:hover |
鼠标悬浮其上的超链接样式 |
|
a:active |
鼠标单击未释放的超链接样式 |
12、其他选择器
- *通用选择器
- E空格F 后代选择器
- E>F子标签选择器
- E+F直接后兄弟选择器
- E~F一般后兄弟选择器
- E[name]属性选择器 有name属性的标签;E[name=”xxx”] name=xxx的标签; E[name^=”xxx”]以xxx开头的标签E[name$=”xxx”]以xxx结尾的标签
- E,F,G多元素选择器
- 伪类选择器