CSS样式表知识总结
CSS样式表知识总结
1.分类
|----内联style=“样式”，属性写道标签里面
<div style="width: 100px;height: 100px;background-color: red;"> </div>
|----内嵌 嵌在页面的<head></head>
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </head>
|----外部 在head标签内引入
<link rel="stylesheet" type="text/css" href="0809.css"/>
|------href引入css文件
2.选择器：样式表用来选区元素的
|----标签：根据标签名选中元素
<head> p{ color: red; /*这个方法叫内嵌*/ } </head> <body> <p>这里是第一行的P标签</p> </body>
|----class，通过"."根据class名来筛选元素，可以用重复的名字
<head>
.common{ width: 100px; height: 100px; background-color: fuchsia; color: blue; }
</head> <div class="common"> 这是我的第一个common </div>
|----id,通过"#"根据id名来筛选唯一的元素，不可以用重复名
<head> #third{ width: 100px; height: 100px; background-color: green; } </head> <body> <div id="third"> 123 </div> <body>
|----复合选择器
|----都好：并列div，span
|----空格：后代#list li
|----大于号：子元素选择器 div>p，div中所有的p元素
CSS样式
|---大小
|-----width：宽度
|----height：高度
|---背景
|----background-color：背景颜色
|----background-image：背景图片
|----background-repeat：背景平铺方式
|----background-size：背景尺寸
|----background-position：背景位置
|---字体
|----font-family：字体样式
|----font-size：字体大小
|----font-style：italic;italic倾斜
|----font-weight：粗细
|----text-decoration:{
|----underline：下划线
|----overline：上划线
|----line-through：删除线
|----none：去掉线；可以去除<a></a>超链接的下划线
}
|----color：字体颜色
|---对齐方式
|----text-align:水平对齐方式
|----line-height：行高
|----text-indent：缩进 单位像素
|---line-height 与 vertical-align
|----line-height：主要作为调节文本的垂直对齐方式，通过设置行高的大小
|----vertical-align：主要作为调节行内元素（span/img/input..）的垂直对齐方式 baseline top bottom middle text-top text-bottom
|---边界边框
|-----外边距margin：
1.上右下左
2.两个属性是代表上下；左右
3.行内元素只能调整margin-left margin-right。调margin-top和margin-bottom是不管用的
|-----内边距padding：
1.上右下左
2.如果加了内边距，该元素会相应的变大
|-----border 1px solid red; 分别代表粗细 线的样式 颜色；
|----显示与隐藏：display:none/block;
|----列表方块<ol></ol> <ul></ul>：
1.list-style:none 将列表前面的序号去掉
2.list-style-image 可以将前面的序号变成图片
|----格式与布局：
|------位置：
1.positio：
a.fixed固定：相对于浏览器的边框进行固定
b.absolute绝对定位：相对于父级元素(浏览器；绝对定位的上级)
c.relative相对定位：相对于自身应该出现的位置
2.top：距离上边的距离
3.right：距离右边的距离
4.left：距离左边的距离
5.bottom：距离下边的距离
|------流：
1.float：
a.left向左流
b.right向右流
2.clear：
a.both清除所有的流
b.left清除左边的流
c.right清除右边的流
3.z-index分层：需要前面使用position之后才有效果，值越大越靠上
