CSS样式
引入方式
内联样式：
<p style="background: orange; font-size: 24px;">CSS<p>
内部样式：
<head> <style> h1 { background: red; } </style> </head>
外部样式：
<link rel="stylesheet" type="text/css" href="xxx.css">
选择器
全局选择器：
*{ margin: 0; padding: 0; }
元素选择器：HTML文档中的元素，p、b、div、a、img、body等。
p{ font-size:14px; }
类选择器：
<h2 class="oneclass">你好</h2> /*定义类选择器*/ .oneclass{ width:800px; }
ID选择器：针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义
<h2 id="mytitle">你好</h2> #mytitle{ border:3px dashed green; }
合并选择器：
.header, .footer{ height:300px; }
选择器的优先级：
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
字体属性
color：规定文本的颜色
div{ color:red;} div{ color:#ff0000;} div{ color:rgb(255,0,0);} div{ color:rgba(255,0,0,.5);} #（a）取值 0~1 之间， 代表透明度
font-size：设置文本的大小，最小字体是12px
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
font-weight：设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100~900 | 定义由细到粗 400等同默认，而700等同于bold |
H1 {font-weight:normal;} div{font-weight:bold;} p{font-weight:900;}
font-style：指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
font-family：属性指定一个元素的字体，每个值用逗号分开
font-family:"Microsoft YaHei","Simsun","SimHei";
背景属性：
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
background-repeat属性：
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
background-size属性：
| 值 | 说明 |
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
background-position属性：该属性设置背景图像的起始位置，其默认值是：0% 0%
| 值 | 说明 |
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0% |
| xpos ypos | 单位是像素 |
.box{ width: 600px; height: 600px; background-color: #fcc; background-image: url("images/img1.jpg"); background-repeat: no-repeat; background-position: center; }
文本属性
text-align：指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
text-decoration：text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
text-transform：text-transform 属性控制文本的大小写
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
text-indent：text-indent 属性规定文本块中首行文本的缩进
p{ text-indent:50px; }
如果值是负数，将第一行左缩进
表格属性
表格边框：指定CSS表格边框，使用border属性
table, td { border: 1px solid black; } 粗细 样式 颜色
折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; } table,td { border: 1px solid black; }
表格文字对齐：表格中的文本对齐和垂直对齐属性，text-align属性设置水平对齐方式，向左，右，或中心
td { text-align:right; } td { height:50px; vertical-align:bottom; }
表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
td { padding:15px; }
表格颜色：下面的例子指定边框的颜色，和th元素的背景和文本颜色
table, td, th { border:1px solid green; } td { background-color:green; color:white; }
关系选择器
后代选择器：选择所有被E元素包含的F元素，中间用空格隔开
<ul> <li>宝马</li> <li>奔驰</li> </ul> <ol> <li>奥迪</li> </ol>
ul li{ color:green; }
子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
<div> <a href="#">子元素1</a> <p> <a href="#">孙元素</a> </p> <a href="#">子元素2</a> </div>
div>a{ color:red }
相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
<h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
h1+p{ color:red; }
通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择
<h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
h1~p{ color:red; }
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
- Content(内容) - 盒子的内容，显示文本和图像
