一.CSS选择器
-
基础选择器和组合选择器
-
基础选择器：标签选择器 类选择器 id选择器 通配符
-
组合选择器：后代选择器 子选择器 并集选择器 伪类选择器
1.1 标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
1.2 类选择器
<div class=‘red’> 变红色 </div>
.red {
color: red;
}
1.3 id选择器
<div id=‘red’> 变红色 </div>
#red {
属性1: 属性值1;
...
}
1.4 通配符
* {
属性1: 属性值1;
...
}
1.5 后代选择器(感觉有点多余)
元素1 元素2 { 样式声明 }
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
1.6 子选择器
元素1 > 元素2 { 样式声明 }
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
1.7 并集选择器
元素1,元素2 { 样式声明 }
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
1.8 伪类选择器(经常用)
a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接
二.字体样式
1.1 字体系列
font-family 属性定义文本的字体系列。
p { font-family:"微软雅黑";}
1.2 字体大小
font-size 属性定义字体大小
p {
font-size: 20px;
}
1.3 字体粗细
font-weight 属性设置文本字体的粗细 取值:100-900 取值:normal 正常字 bold 粗体字 normal等于400 blod等于700 学会让加粗标签（比如 h 和 b等) 不加粗，或者其他标签加粗
1.4 字体风格(斜体 italic)
font-style 属性设置文本的风格 取值:normal 正常字 italic 斜体字
二.文本样式
1.1 文本颜色
color 属性用于定义文本的颜色。 取值： 1.英文单词 2.十六进制 3.RGB代码
1.2 文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式 取值:left center right
1.3 装饰文本
text-decoration 属性规定添加到文本的修饰 取值：none 没有下划线 underline 设置下划线 overline 上划线 line-through 删除线
1.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。 em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小
1.5 行间距(可以让字体居中)
line-height 属性用于设置行间的距离（行高） 文字的垂直居中:行高和高度保持一致
三.背景样式
3.1 背景颜色
background-color 定义元素的背景颜色 background-color:颜色值;
3.2 背景图片
background-image 定义元素的背景图片 background-image : url (url) 实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
3.3 背景平铺
background-repeat 设置元素背景图像的平铺 background-repeat: repeat | no-repeat | repeat-x | repeat-y
3.4 背景图片位置
background-position 属性可以改变图片在背景中的位置 background-position: x y; 取值1:使用方位名词 取值2:使用精确单位
3.5 背景样式简写
background: transparent url(image.jpg) repeat-y fixed top ;
3.6 背景色半透明
background: rgba(0, 0, 0, 0.3);
四.元素的显示模式(非常重要)
4.1 块元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 块级元素的特点： 1.比较霸道，自己独占一行。 2.高度，宽度、外边距以及内边距都可以控制 3.宽度默认是容器（父级宽度）的100% 4.是一个容器及盒子，里面可以放行内或者块级元素。
4.2 行内元素
常见的行内元素：<a>、<b>、<i>、<s><u>、<span> 行内元素的特点： 1.一行可以显示多个 2.高、宽直接设置是无效的。 3.默认宽度就是它本身内容的宽度。 4.行内元素只能容纳文本或其他行内元素。
4.3 行内块元素(可以把块元素放一排)
常见的行内块标签:<img />、<input />、<td> 行内块元素的特点: 1.一行可以显示多个 他们之间会有空白缝隙（行内元素特点）。 2.默认宽度就是它本身内容的宽度 3.高度，行高、外边距以及内边距都可以控制
4.4 元素显示模式的转换
- 转换为块元素：display:block; - 转换为行内元素：display:inline; - 转换为行内块：display: inline-block;
五.盒子模型
-
盒子模型：把 HTML 页面中的元素看作是一个矩形的盒子
-
它包括：边框、外边距、内边距、和 实际内容
-
4.1 边框 border
边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色； 简写设置: border : border-width || border-style || border-color; 分开设置:border-width:xx; border-style:xx; border-color:xx; 边框会影响盒子实际大小
4.2 内边距 padding
边框与内容之间的距离 padding:10px; 上下左右 padding:10px 20px; 上下 左右 padding:10px 20px 30px; 上 左右 下 padding:10px 20px 30px 40px; 上 右 下 左 padding-left: padding-right: padding-top: padding-bottom: 内边距会影响盒子实际大小
4.3 外边距 margin
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。 margin:10px; 上下左右 margin:10px 20px; 上下 左右 margin:10px 20px 30px; 上 左右 下 margin:10px 20px 30px 40px; 上 右 下 左 margin-left: margin-right: margin-top: margin-bottom: 相邻块元素垂直外边距的合并：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。 嵌套块元素垂直外边距的塌陷：
4.4 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
4.5 外边距典型应用
让块级盒子水平居中：margin: 0px auto;
六.浮动
6.1 传统网页布局的三种方式
- 普通流（标准流） - 浮动 - 定位 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列 行内元素会按照顺序，从左到右顺序排列
6.2 浮动(注意不是行内快元素还是会换行)
float 属性用于创建浮动框，将其移动到一边 float:left/right/none 浮动特性: 1.浮动的盒子不再保留原先的位置 2.浮动的元素会具有行内块元素的特性
6.3 网页布局总结
1.纵向排列找标准流，多个块级元素横向排列找浮动**。 2.一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动 3.浮动元素经常和标准流父级搭配使用
6.4 清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
额外标签法：在浮动元素末尾添加一个空的标签
<div style="clear:both"></div>
父级添加after伪元素：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
七.CSS样式表
7.1 行内样式表
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
7.2 内部样式表
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。
<style>
div {
color: red;
font-size: 12px;
}
</style>
7.3 外部样式表
新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。 在 HTML 页面中，使用<link> 标签引入这个文件。 <link rel="stylesheet" href="css文件路径">
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
