分类
|------内联 写在标签里面，控制精确，代码重用性差
|---------style=样式
<div style="background: yellow; 100px; height: 100px;"></div> <div style="background: red; 100px; height: 100px;"></div>
|------内嵌 嵌在页面的<head></head>里，控制没有内联的精确，代码重用性好
|---------<style type="text/css"></style>
<style> #first{background: pink; width: 200px; height: 100px;} #second{background: blue; width: 200px; height: 100px;} </style> <div id="first"> </div> <div id="second"> </div>
|------外部 单独的样式文件，控制没有内联的精确，代码重用性最好
|---------<link href="" rel="stylesheet" type="text/css"/>
#third{ background: purple; width: 200px; height: 300px; }
<link rel="stylesheet" href="1111.css" /> <div id="third"> </div>
选择器 样式表用来选取元素 标签：根据标签名选中元素
|------class
|---------.点
|---------根据class名来筛选元素
|---------可以有重复的名字
.common{ width: 100px; height: 100px; background-color: black; color: white; } .common:hover{ background-color: red; color: black;
<div class="common"> 我是第一个common </div> <div class="common"> 我是第二个common </div> <div class="common"> 我是第三个common </div>
|------id
|---------#
|---------根据id名来筛选唯一的元素
|---------不能有重复的名字
#third{ width: 100px; height: 100px; background-color: green; }
<div id="third"> </div>
|------复合
|---------逗号：并列 div,span
|---------空格：后代 #list li
|---------大于号：子元素选择器 div>p div中所有p标签
div,p{ border: 1px solid red; } #third,#fourth{ border: 1px solid black; } #first_ul li{ color:brown; } #second_ul li{ color: darkblue; } #div_p>p{ color: green; }
<div id="third"> </div> <div id="fourth"> </div> <ul id="first_ul"> <li>无序一</li> <li>无序一</li> <li>无序一</li> </ul> <ul id="second_ul"> <li>无序二</li> <li>无序二</li> <li>无序二</li> </ul> <div id="div_p"> <p>我是div中的第一行p元素</p> <p>我是div中的第二行p元素</p> <p>我是div中的第三行p元素</p> <div>我是div中的第四行div元素</div> </div>
|------属性选择器
|---------[属性名 = 属性值]{} 属性名后边可以加 |、*等 代表匹配所有属性有属性值的元素
|---------表单元素的属性选取
[href="aa.html"]{ color: red; } input[type="text"]{ background-color: gainsboro; }
<a href="aa.html">跳转</a> <input type="text" name="" id="" value="" /><br /> <input type="password" name=""id=""value="" />
|------伪类
|---------a标签的四个伪类
|------------a:link 未访问的链接
|------------a:visited 已访问的链接
|------------a:hover 鼠标划过链接
|------------a:active 已选中的链接
a:link{ color:red } a:visited{ color: black; } a:hover{ color: blue; } a:active{ color: yellow; }
<a href="https://www.baidu.com">跳转到百度</a>
样式
|------大小
|------------width：宽度
|------------height：高度
|------背景
|------------background-color 背景色
|------------background-image 背景图片
|------------background-repeat 背景平铺方式
|------------background-size 背景尺寸
|------------background-position 背景位置
#back_div{ width: 200px; height: 100px; border: 1px solid red; background-color: black; background-image: url(a7b0dbaeb11283ab2745586c10cf52f6.jpg); background-size: 30% 50%; background-repeat: no-repeat; background-position: 40px 20px; }
<div id="back_div"> </div>
|------字体
|------------ font-family 字体样式
|------------font-size 字体大小
|------------font-style：italic 倾斜
|------------font-weight：粗细
|------------text-decoration
|---------------underline;下划线
|---------------overline 上划线
|---------------line-through 删除线
|---------------none 去掉<a></a>超链接的下划线
|------------color：字体颜色
|------对齐方式
|------------text-align ：水平对齐方式
|------------line-height：行高
|------------text-indent：缩进 单位像素
|------line-height 与 vertical-align
|------------主要作为调节文本的垂直对齐方式，通过设置行高的大小
|------------主要作为调节行内元素的垂直对齐方式 baseline top bottom middle text-top text-bottom
a{ text-decoration: none; } #font_div{ width: 300px; height: 200px; border: 1px solid red; font-size: 20px; font-style: italic; font-weight: bolder; text-decoration: line-through; color: orange; text-align: center; line-height: 200px; }
<div id="font_div"> 哈哈哈 </div> <a href="">跳转</a>
边界边框
|------外边距margin
|---------上右下左
|---------两个属性时，代表 上下 左右
|---------行内元素只能调整margin-left margin-right。调margin-top和margin-bottom是不管用的
#second{ margin-left: 120px; margin-right: 120px;
|------内边距padding
|---------上右下左
|---------如果加了内边距，该元素会相应的变大
|------border 1px solid red; 分别代表粗细 线的样式 颜色；
显示与隐藏
|------display:none/block;
列表方块 <ol></ol> <ul></ul>
|------list-style:none 将列表前面的序号去掉
|------list-style-image 可以将前面的序号变成图片
.a0{ float: left; width:50px; height: 20px; border: 1px solid balck ; margin-left: 40px; list-style: none;
}
格式与布局
|------位置
|---------position
|------------fixed 固定 相对于浏览器的边框进行定位
|------------absolute 绝对定位 相对于父级元素（浏览器、绝对定位的上级）
|------------relative 相对定位 相对于自身应该出现的位置
|---------top 距离上边的距离
|---------right 距离右边的距离
|---------left 距离左边的距离
|---------bottom 距离下边的距离
|------流
|---------float
|------------left 向左流
|------------right 向右流
.a1{ float: left; width:48px; height: 20px; border: 1px solid balck ; margin-left: 35px; list-style: none;、
}
|---------clear
|------------both 清除所有的流
|------------left 清除左边的流
|------------right 清除右边的流
.clear{ clear: both; }
|------z-index分层
|---------需要前面使用position之后才有效果，值越大越靠上