CSS是什么
CSS–网页的美容师，是层叠样式表Cascading Style Sheets的简称，它也是一种标记语言。使用CSS可以使得网页标签拥有各种样式，让网页变得美观。
如何使用CSS样式
- 行内样式表
使用style属性引入样式
<div style="background-color: #fff;"></div>
- 内部样式表
通过<style>标签引入，该标签要写在<head>标签中
<head>
<style>
div {background-color: #fff;}
</style>
</head>
- 外部样式表
新建一个后缀名为.css的文件，通过<link>在html中引入，也是要写在<head>标签里面
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
在实际开发中，这三种方式有时会混合使用，CSS实际生效的优先级为：
行内样式 > 内部样式 > 外部样式(后两者是就近原则)
CSS选择器
选择器用来指定给网页上哪些标签添加样式。选择器分为基础选择器和复合选择器。
基础选择器有三种：
- 标签选择器
指用HTML标签名称作为选择器，按标签名称分类，为页面中某一标签统一使用样式。语法
div {
background-color: #fff;
}
- 类选择器
前面有一个点.，选择标签带有属性class='as’的标签，注意可以为标签添加多个类名，但要使用空格分开，如
<div class="as othername"></div>
<div class="as"></div>
''''''
.as {
background-color: #fff;
}
- id选择器
html以id属性来设置id选择器，CSS中id选择器以#来定义，id选择器是唯一的，不能有重复的id
<div id="as"></div>
''''''
#as {
background-color: #fff;
}
这里还说一种特殊选择器：通配符选择器*，匹配网页上所有的标签：
* {
background-color: #fff;
}
复合选择器有四种：
观察下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
</head>
<body>
<ol>
<li></li>
<li></li>
<li><a>我是链接</a></li>
</ol>
<div>
<a href="#"></a>
<p><a href="#"></a></p>
</div>
</body>
</html>
- 后代选择器
选择父元素中的子元素，语法就是把外层标签写在外面，内层标签写在后面，中间用空格分开，如要将<ol>标签下的<li>标签里的<a>添加样式
ol li a {
color: #fff;
}
- 子选择器
只能选择作为某元素的最近一级子元素，用大于号>，如将<div>标签下的<a>标签添加样式，此时会发现只有第一个<a>标签有样式，而被p标签包含的则不生效，与后代选择器不同。
div>a {
color: #fff;
}
- 并集选择器
简单来说就是，基础选择器的组合使用，能使这些选择器上的标签都带上样式，选择器之间用逗号,分开
ol li a,div {
color: #fff;
}
- 伪类选择器
常在链接a标签上使用，
a:link {} 所有未被访问的a标签
a:visited {} 所有已被访问的a标签
a:hover {} 选择鼠标指针位于其上的标签
a:active {} 选择活动链接（按下未弹起）
CSS元素显示模式
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素block | 一行只能放一个块级元素 | 可以设置宽度高度 | 100% | 容器级可以包含任何标签 |
| 行内元素inline | 一行可以放多个行内元素 | 不能设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素inline-block | 一行放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
常用字体属性
| 属性 | 表示 | 备注 |
|---|---|---|
| font-size | 字号 | 单位：px，rem |
| font-family | 字体 | 宋体，微软雅黑等 |
| font-weight | 字体粗细 | 加粗是700，相当于bold；正常是400，相当于normal，无单位 |
| font-style | 字体样式 | 斜体italic，不倾斜normal |
| font | 样式连续书写 | 如：font: italic 700 16px ‘宋体’ |
常用文本属性
| 属性 | 表示 | 备注 |
|---|---|---|
| color | 文本颜色 | 常用16进制 |
| text-align | 文本对齐 | 设定文字水平对齐方式 |
| text-indent | 文本缩进 | 设置段首缩进两个字距离，text-indent: 2rem; |
| text-decoration | 文本修饰 | 常用：添加下划线underline和取消下划线none |
| line-height | 行高 | 控制行与行距离，常与heighe属性设置一样的数值搭配使用，让文字垂直居中 |
常用背景属性
| 属性 | 表示 | 备注 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色|16进制|RGB代码 |
| background-image | 图片对齐 | 背景图片，一定要有 url() 包着 |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | 背景图片定位十分方便，两个参数，为方向名词（top/center等）或者精确数值（第一个值为x轴值），精灵图（雪碧图）常用 |
| background-attachment | 背景附着 | 背景图像是否固定或者随着页面的其余部分滚动。scroll/fixed |
| background | 属性复合写法 | 背景属性书写无固定顺序 |
设置背景透明，看rgba的最后一个参数
background-color: rgba(0,0,0,0.6)
理解CSS三大特性，设置样式游刃有余
CSS三大特性，通俗易懂
CSS盒子模型
一张图看懂盒子模型的组成
常用盒子属性
| 属性 | 说明 |
|---|---|
| border-width | 定义边框粗细，单位px |
| border-style | 边框的样式，常见solid实线，dashed虚线，dotted点线 |
| border-color | 边框的颜色 |
| border-radius | 边框圆角，单位px或者百分比 |
| border | 边框复合属性：border: 1px solid green; |
| border-top | 复合属性设置上边框：border: 1px solid green;其余同理 |
| padding | 内边距复合属性：设置盒子内容到边框的距离，单位px，见下表 |
| padding-top | 设置盒子内容到上边框的距离，其余同理 |
| margin | 外边距复合属性：设置盒子与其它盒子的距离，单位px，方法同padding |
| padding-top | 设置盒子到上边盒子的距离，其余同理 |
内边距
| 值的个数 | 说明 |
|---|---|
| padding: 5px | 上下左右内边距为5px |
| padding: 5px 10px | 上下内边距5px，左右内边距为10px |
| padding: 5px 10px 15px | 上内边距为5px，左右内边距为10px，下内边距为15px |
| padding: 5px 10px 15px 20px | 顺时针，上右下左内边距分别为5px 10px 15px 20px |
CSS3新的样式
盒子阴影box-shadow
| 值 | 说明 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，可将默认阴影设为内部显示 |
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}
浮动与清除浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及的包含块或另一个浮动框的边缘。
语法：
选择器 {
float: 属性值;
}
属性值
none：不浮动
left：左浮动
right：右浮动
浮动后的元素具有以下特性：
- 浮动元素会脱离标准流，“漂浮”在标准元素上面
- 浮动的元素会一行显示并且元素顶部对齐
- 浮动的元素具有行内块元素的特性
- 浮动的盒子不再保留原先的位置
浮动的影响
父级盒子很多情况下，不希望给定高度，而是希望由子元素撑开高度；当父级元素不设高度，子元素设置了浮动时，就会出现问题：父级盒子高度变 0，与父级盒子同级的盒子会把 父级的原先的位置占用了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.father {}
.div1 {
height: 50px;
width: 50px;
background-color: red;
float: left;
}
.div2 {
height: 50px;
width: 50px;
background-color:blue;
float: left;
}
.brother {
height: 70px;
width: 70px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="brother"></div>
</body>
</html>
清除浮动的方法
- 额外标签法，在所有浮动元素的末尾添加一个空标签，这个标签必须是块级元素，然后使用css样式的
clear属性清除浮动
.clear {clear: both;}
''''''
<div class="father">
<div class="div1"></div>
<div class="div2"></div>
<div class="clear"></div>
</div>
- 父级添加
overflow属性，将其值设为hidden，auto，scroll任意一个
.father {overflow: hidden;}
- after伪元素法，额外标签法的升级，不用添加额外的空标签；给父元素添加样式
.clearfix {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6,7 专有 */
}
- 双伪元素清除浮动，也是给父元素添加样式
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6,7 专有 */
}
定位
将盒子定位在某一位置，定位 = 定位模式 + 边偏移
选择器 {
postition: 定位模式;
top: 100px;
left: 100px;
}
定位模式
| 值 | 说明 |
|---|---|
| static | 静态定位 |
| relative | 相对定位，相对于自己原来的位置定位，原先盒子仍然占有空间 |
| absolute | 绝对定位，脱离标准流，相对于它的祖先元素定位，如果没有父盒子或者父盒子没定位，则相对于浏览器定位；如果祖先元素有定位，则以最近一级有定位的祖先元素作为参考移动点；该定位不占有原先的位置 |
| fixed | 固定定位，脱离标准流，以浏览器的可视窗口为参照点移动元素，该定位不占有原先的位置 |
边偏移，就是定位的盒子最终移动到的位置
| 边偏移属性 | 示例 | 说明 |
|---|---|---|
| top | top: 80px; | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| buttom | buttom: 80px; | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left: 80px; | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right: 80px; | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
特性：
- 行内元素添加绝对或者固定定位，可以设置高度宽度
- 块级元素添加绝对或者固定定位，如果不给高度宽度，默认大小是内容的大小
由于定位可以不占用原先位置，自由浮动，所以使用定位加元素隐藏可以做出鼠标经过弹出隐藏框的效果。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
