css初步
css的优势
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
5.运用独立于页面的CSS，有利于网页被搜索引擎收录css基本语法
a.选择器{声明1；声明2；} 提示：最后一条声明可以不写分号，基于美观，推荐写上 b.style标签
css基本选择器
标签选择器
类选择器
ID选择器
提示：标签选择器直接应用于HTML标签 类选择器可在页面中多次使用 ID选择器在同一个页面中只能使用一次
优先级：ID选择器>类选择器>标签选择器css样式的引入
a.行内样式：
b.内部样式表（写在<head>的<style>标签中）
优点：方便在同一页面中修改样式
缺点:代码的复用性低c.外部样式表（保存在后缀名.css的样式表中）
链接式：
导入式：
优先级：行内样式>内部样式表>外部样式表css复合选择器
后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
选择器之间不能有空格，必须连续书写
并集选择器
多个选择器通过逗号连接而成 利用并集选择器同时声明风格相同样式
css常用属性
文本属性：
| 属性名称 | 解释及其用法 |
|---|---|
| color | 设置文本颜色 color:red |
| line-height | 设置行高（即行间距） |
| text-align | 设置对齐方式，取值为left,right,center |
| letter-spacing | 设置字符间距 |
| text-decoration | 设置文本修饰，取值为underline,none,overline^ |
| white-space | 规定如何处理空白，如规定是否换行，常用取值为不换行 |
字体属性：
| 属性名称 | 解释及其用法 |
|---|---|
| font | 在一个申明中设置字体的所有样式属性 |
| font-family | 定义字体类型 |
| font-size | 定义字体大小 |
| font-weight | 定义字体的粗细 |
| font-style | 设置字体风格 |
背景属性：
| 属性名称 | 解释及其用法 |
|---|---|
| background | 简写属性，作用是将背景的多个分量属性设置在一个申明中 |
| background-color | 设置元素的背景颜色 |
| background-image | 将图像设置为背景 |
| background-repeat | 设置背景的平铺方式 |
| background-position | 设置背景出现的初始位置 |
列表属性：
| 属性名称 | 解释及其用法 |
|---|---|
| list-style | 简写属性，把所有列表的属性设置于一个申明中 |
| list-style-image | 将图像设置为列表标志的位置 |
| list-style-position | 设置列表中列表项的位置 |
| list-style-type | 这是列表项标志的类型 |
外边距属性：
| 属性名称 | 解释及其用法 |
|---|---|
| margin-top | 上外边框 |
| margin-right | 右外边框 |
| margin-bottom | 下外边框 |
| margin-left | 左外边框 |
| margin | 四个方向的外边距各不相同时，在一个申明中统一设置四个方向的外边距设置顺序为：上，右,下，左 |
边框属性：
| 属性名称 | 解释及其用法 |
|---|---|
| border-color | 边框颜色 |
| border-width | 边框宽度 |
| border-style | none:默认值，无边框；solid:实线；dashed:虚线 |
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
| border | 在一个申明中统一设置4个方向的边框属性 |
内边距属性：
| 属性名称 | 解释及其用法 |
|---|---|
| padding-top | 内容与上边距之间的距离 |
| padding-right | 内容与右边距之间的距离 |
| padding-bottom | 内容与下边框之间的距离 |
| padding-left | 内容与左边距之间的距离 |
| padding | 四个方向的内边距各不相同时，在一个申明中统一设置四个方向的外边距设置顺序为：上，右,下，左 |
display属性：
| 属性名称 | 解释及其用法 |
|---|---|
| “display:取值有三个：block,inline,none | “block:将元素显示为块级元素，该元素前后会带有换行符 ；inline:默认，元素会显示为内联元素，该元素前后没有换行符 ；none:该元素不会被显示 |
overflow属性：
| 属性名称 | 解释及其用法 |
|---|---|
| visible | 默认值，内容不会被修剪，呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是流浪器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则流浪器会显示滚动条以便查看其余的内容 |