1.CSS简介
CSS，指的是Cascading Style Sheet(层叠样式表)。
2.CSS的引入方式
1)外部样式表（link）： <link rel="stylesheet" href="文件的路径">
2)内部样式表（style）：
<style type="text/css">
p{
color: green;
}
</style>
3）行内样式表： <p style="color: green;">床前明月光</p>
ps：实际开发中我们极少使用@import方式的原因是，@import会先加载HTML再加载CSS，这样用户的体验真的很差，而link方式是相反的。
3.CSS选择器和权重
1）元素选择器(类似p标签、span标签啥的) 1
2）id选择器（#） 100
3）class选择器（.） 10
4）后代选择器（空格）
5）群组选择器（，）
6）通用选择器(*) 0
ps：权重值越高，优先级越高
4.字体样式
font: [font-style] [font-weight] [font-size] [font-family]
| 属性 | 说明 |
| font-family | 字体类型（Arial，"Times New Roman"，"微软雅黑"） |
| font-size | 字体大小（px） |
| font-weight | 字体粗细：normal（正常，默认值）,lighter（较细）,bold(较粗，常用),bolder(很粗) |
| font-style | 字体风格:normal(正常),italic（斜体）,oblique（斜体） |
| color | 字体颜色：red,green,black...或#FFFFFF（白色）,#000000(黑色) |
5.文本样式
| 属性 | 说明 | 补充 |
| text-indent | 首行缩进 | px,中文段落首行缩进要两个字的空间，要把text-indent的px设置为font-size的两倍 |
| text-align | 水平对齐 | left（左对齐）,center(居中对齐),right(右对齐) |
| text-decoration | 文本修饰 | none(默认值，无下划线),underline(下划线),line-through(中划线),overline(顶划线) |
| text-transform | 大小写转换 | none(默认值，无转换),uppercase(转为大写),lowercase(转为小写),capitalize(英文单词首字母大写) |
| line-height | 行高 | px(一行的高度) |
| letter-spacing | 字母间距 | px(每个字母之间的间距) |
| word-spacing | 词间距 | px(只针对英文单词，每个单词之间的间距) |
5.边框样式
| 属性 | 说明 | 补充 |
| border-width | 边框的宽度 | px |
| border-style | 边框的外观 | solid(实线),dashed(虚线),none(无样式) |
| border-color | 边框的颜色 | red,black,white 或#FFFFFF |
ps:可以简写为这样类似的写法
border:1px solid red;1)上边框：border-top
2)下边框：border-bottom
3)左边框：border-left
4)右边框：border-right
6.列表项符号
1)list-style-type属性
| 属性 | 说明 |
| decimal | 1,2,3(默认) |
| lower-roman | 小写罗马数字：i,ii,iii |
| upper-roman | 大写罗马数字:I,II,III |
| lower-alpha | a,b,c |
| upper-alpha | A,B,C |
| 属性 | 说明 |
| disc | 实心圆●（默认） |
| circle | 空心圆○ |
| square | 正方形■ |
ps：去掉列表项符号就用
list-style-type:none;2)list-style-image
这个属性并不常用，一般还是用iconfont图标技术来改变列表项图片。
list-style-image: url(./image/rabbit.jpg)7.表格样式
1）表格标题位置
caption{
/* top是默认值标题在顶部，bottom是标题在底部 */
caption-side: bottom;
}2）表格边框合并
table{
/* separate是默认值边框分开有空隙，collapse是边框合并无空隙 */
border-collapse: collapse;
}3）表格边框间距（就是格子和格子之间的距离）
table{
border-spacing: 30px;
}8.图片样式
1）图片大小：width，height
2）图片对齐：
| 水平对齐text-align | 垂直对齐vertical-align |
| left(左对齐) | top(顶部对齐) |
| center(居中对齐) | middle(中部对齐) |
| right(右对齐) | baseline(基线对齐) |
| bottom(底部对齐) |
9.背景样式
| 属性 | 说明 |
| background-color | 背景颜色 |
| background-image | 背景图片地址：background-image:url() 千万记得要添加width和height |
| background-repeat | 背景图片重复，例如横向重复，纵向重复，取值有： repeat:默认，只在水平和垂直方向上同时平铺 repeat-x:只在水平方向上平铺 repeat-y:只在垂直方向上平铺 no-repeat:不平铺 |
| background-position | 背景图片位置，取值： 1）像素值px，background-position:12px 24px; 表示该图片离窗口左上角水平方向的距离为12px，垂直方向的距离为24px 2）关键字 backgroud-repeat要和background-position配合使用 |
| background-attachment | 背景图片固定，取值： 1）scroll：默认值，随元素一起滚动 2）fixed：固定不动 |
10.超链接伪类
| 伪类 | 说明 |
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
11.鼠标样式
1)浏览器鼠标样式
| 属性值 | 外观 |
| default(默认值) |  |
| pointer |  |
| text |  |
| ... | ... |
#div_default{
cursor: default;
}
#div_pointer{
cursor: pointer;
}2）自定义鼠标样式
语法：
cursor:url(图片地址),属性值;ps：鼠标图片后缀名一般都是.cur，而这个属性值有3种：default、pointer和text
12.CSS盒子模型
ps：margin可以设置负值，当指定负值时，整个盒子会向指定负值的相反方向移动
1）宽和高
只有块元素才可以设置width和height，行内元素哒咩，它的宽度和高度只能由内容区撑起来。如果想为行内元素（例如span标签，a标签）设置宽度和高度可以用display属性。
display属性可以把行内元素转换为块元素，也可以把块元素转换为行内元素。
2）边框
border: 1px solid red;3）内边距padding
指内容区到边框的那一部分，简写方式：
padding:40px; ——4个方向的内边距都是40px
padding:20px 30px; ——上下方向的内边距是20px，左右方向的是30px
padding:5px 10px 15px 20px; ——上右下左的原则
4）外边距margin
指边框到父元素或兄弟元素的那一部分，简写方式类似上面。
margin-top、margin-right、margin-bottom、margin-left
13.浮动布局
1）文档流
概念：元素在页面中出现的先后顺序。正常文档流又称为普通文档流（normal flow）。
2）浮动原理
1.浮动元素将脱离文档流标签，浮动元素后面的标准元素会依次向上填充。
2.浮动元素不会覆盖行内元素。
3.浮动元素变成行内块级元素，内容多宽就有多宽。
取值只有两个：left(元素向左浮动)，right(元素向右浮动)
3）清除浮动
第一种（不推荐）额外标签法：给谁清除浮动，就在其后面加一个空白标签。但是这样添加了许多无意义的标签，结构化很差。
<style type="text/css">
#father{
width: 300px;
background-color: #0C6A9D;
border: 1px solid silver;
/* overflow: hidden; */
}
#father div{
margin: 15px;
padding: 10px;
}
#son1{
background-color: #FF69B4;
float: left;
}
#son2{
background-color: #FCD568;
float:right;
}
.clear{
clear:both
}
</style> <div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div class="clear"></div>
</div>第二种父级添加overflow方法，优点是常用，缺点是内容增多时候容易造成不会自动换行导致内容被隐藏。而且不能和position配合使用，因为超出的尺寸会被隐藏。
#father{
overflow: hidden;
}第三种父级div定义height，缺点是只适合高度固定的布局，如果高度和父级div不一样就会出现问题。
14.定位布局
| 属性值 | 说明 | 补充 |
| fixed | 固定定位(指被固定的元素不会随着滚动条的拖动而改变位置)，一般只会用到其中两个，参考对象是浏览器的4条边，是相对于浏览器而言 | position:fixed; top:px; bottom:px; left:px; right:px; |
| relative | 相对定位，相对于它的原始位置计算而来。 （写错了是left） | position:relative; top:px; bottom:px; left:px; right:px; |
| absolute | 绝对定位，一个元素变成了绝对定位元素，那它就完全脱离文档流了。它之前和之后的元素会认为它不存在。绝对定位的参考对象是浏览器的4条边，是相对于浏览器而言 | position:absolute; top:px; bottom:px; left:px; right:px; |
| static | 静态定位（默认值） | 默认情况下，元素没有指定position属性时，它就是静态定位 |
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
