CSS（层叠样式表：Cascading Style Sheets）：对网页样式的编写
引入CSS
1. 行间样式：<div style = ""></div>
2.页面级css：<head><style type="text/css"></style> </head>
3.外部css文件：<head><link rel="stylesheet" type="text/css" href ="xx.css"></head>
选择器：
选择器的优先级：
即： CSS权重（由高至低）：
！important Infinity
行间样式 1000
id 100
class/属性/伪类 10
标签/伪元素 1
通配符（*） 0
进制为256进制（IE7.0测试数据）
当权重相同时后面覆盖前面
css中的注释： /* */
文本：
font-size：字体大小（正常默认值为16px，常用值为12px）
font-weight：字体加粗（lighter，normal,bold,bolder）
(数值法：100，200，300，...，900)
font-family:字体（常用值：arial）
color:字体颜色（1.纯英文 2.颜色代码 3.颜色函数）
transparent: 透明色
text-align:文本对齐方式：left（左对齐）,
center（居中）,
right（右对齐）,
justify（两端对齐）,
inherit（继承父元素）
line-height:单行文本行高，默认值（normal）
单行文本水平垂直居中时：text-align：center；
line-height=容器高度；
text-indent:缩进（单位通常用：em）
text-decoration:文本修饰： none（常用的标准文本），
underline（下划线），
overline（上划线），
line-through（中划线），
blink（闪烁文本）
text-overflow：ellipsis溢出文字以。。。展示
overflow：1.visible（默认值）
* 2.hidden 溢出隐藏
3.scroll 内容会被修减，但浏览器会显示滚动条以便查看
4.auto 内容如果被修减，但浏览器会显示滚动条以便查看
cursor:光标移入后的样式：default（默认），
pointer（常用，一只手）
help（问好）
伪类选择器：
：hover：改变鼠标移入后的样式
：link：未访问的
：visited 已访问的
标签类别：
1.行级元素：内容决定元素所占位置。特征：不可以通过css改变宽高。{span, strong, em, a, del,...}
2.块级元素：独占一行。 特征：可以通过css改变宽高。{div, p, ul, li, ol, form, ...}
3.行级块元素：内容决定大小。特点：可通过css改变宽高。{img ...}
*（凡是带有inline的元素都带有文字特性）
改变标签类别：
display：1.inline 行级元素
2. block 块级元素
3.inline-block 行级块元素
盒子模型：
- 外边距 margin，
- 盒子壁 border，
- 内边距 padding，
- 盒子内容 width+height
- 元素 element
盒子总大小：margin + border + padding + （content = width + height）；
定位：在定位后可用left， right， top， bottom进行位置改动
position： 1.static（默认值）
2.relative（相对于正常位置新型定位，保留原有位置）
3.absolute（相对于上一个有定位的元素进行定位，不保留原有位置）
4.fixed（相对于浏览器窗口进行定位）
浮动：
float：left/right
浮动元素产生了浮动流
伪元素：
主要可用于清除浮动流（clear：both）
应用于css ： 元素名：：before
元素名：：after
伪元素内参数：content：“”输出文本
伪元素清除浮动： ：：after{ content：“”； clear：both； display：inline-block；
扫一扫
2644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
