版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
###CSS
- Casecading 层叠 Style样式 Sheet表，作用：美化页面
####CSS的引入方式
- 有三种引入方式：
-
内联样式： 在标签的style属性中添加样式代码，不能复用
<h1 style="color: red">内联样式</h1> -
内部样式： 在head标签里面添加style标签，在标签体内通过选择器给元素添加样式， 好处：是可以在当前页面复用， 坏处：只能在当前页面复用
-
外部样式： 在单独的css文件中添加样式代码，然后通过link标签把css文件引入，好处：可以多页面复用
- 引入方式的优先级： 内联优先级最高，内部和外部相同后执行覆盖先执行的
###选择器
- 标签名选择器
- 匹配指定标签名称的所有标签
- 格式： 标签名{样式代码}
- id选择器
- 匹配指定id的某一个元素
- 格式： #id{}
- 类选择器
- 匹配指定class的某一类元素
- 格式： .class{}
- 分组选择器
- 将多个选择器合并成一个选择器
- 格式： div,#abc,.c1{}
- 属性选择器
- 通过属性的名称和值去选择匹配的元素
- 格式： div[属性名=‘值’]
- 子孙后代选择器
- 格式： div div span{} div里面的div里面的所有span
- 子元素选择器
- 格式： div>div>span{} div里面的div里面的子元素span
- 伪类选择器
- 用于选择元素的状态： 未访问link 访问过visited 悬停hover 点击active
- 任意元素选择器
- 选中页面中所有的元素
- 格式： *{}
###颜色的赋值方式
- 三原色：红绿蓝 red green blue 每个颜色的取值0-255
-
颜色单词 red
-
6位16进制赋值 #ff0000 （用的最多）
-
3位16进制赋值 #f00
-
3位10进制赋值 rgb(255,0,0)
-
4位10进制赋值 rgba(255,0,0,1) a=alpha透明度取值0-1 值越小越透明
###背景图片/* 设置背景图片 */ background-image: url("../imgs/1.jpg"); /* 背景图片宽高 */ background-size:100px 100px; /* 禁止重复 */ background-repeat: no-repeat; /* 控制位置 left/right/top/bottom/center 通过百分比控制位置 */ background-position: 90% 90%;
###布局相关样式（盒子模型）
- 盒子模型： 宽高+外边距+边框+内边距
####宽高
- width、height：赋值方式两种： 1. 像素 2. 上级元素百分比
- 行内元素不能修改宽高，由内容决定
####外边距 - 什么是外边距：元素距上级元素或相邻兄弟元素的距离称为外边距
- 赋值方式：
/* 单独给某一个方向添加外边距
margin-left/top/right/bottom*/
/* margin-top: 50px;
margin-left: 30px;
margin-bottom: 20px; /
/ margin: 50px; / / 四个方向全是50 /
/ margin: 20px 40px; / / 上下20 左右40 /
/ margin: 0 auto; // 水平居中 /
/ margin: 10px 20px 30px 40px; / / 上右下左 顺时针 */ - 块级元素上下相邻 同时添加下外边距和上外边距 取最大值， 行内元素左右相邻，同时添加左外和右外 相加
上下相邻取最大 左右相邻相加 - 行内元素上下外边距无效
- 当元素的上边缘和上级元素上边缘重叠时，给元素添加上外边距， 会出现粘连问题，给上级元素添加overflow：hidden 解决
###边框
- border: 边框粗细 边框样式 颜色;
- border-left/right/bottom/top:边框粗细 边框样式 颜色;
- 行内元素边框全部生效，影响元素所占宽度 但不影响元素所占高度
###内边距 - 什么是内边距：元素边框距内容的距离
- 给元素添加内边距会影响元素的宽高
- 如果移动的是元素的子元素则给子元素添加外边距，如果移动的是元素的文本内容则只能使用内边距
- 行内元素内边距全部生效，影响元素所占宽度 但不影响元素所占高度
###特殊的行内元素
- 宽高：不能修改宽高
- 外边距： 上下无效
- 边框：不影响所占高度
- 内边距：不影响元素所占高度
###文本相关
- 文本水平对齐方式
text-align: left/right/center - 文本修饰
text-decoration:overline/underline/line-through/none - 文本颜色
color:red; - 文本阴影
text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊） - 行高
line-height:30px;
###字体相关
/* 字体大小 /
font-size: 30px;
/ 字体加粗 /
font-weight: bold/normal;
/ 斜体 /
font-style: italic;
/ 字体设置 */
font-family: “黑体”;
###CSS的三大特性 - 继承性： 元素可以继承上级元素的文本和字体相关的样式，个别标签自身特有的样式不受继承影响如：超链接a标签的字体颜色、h1-h6的字体大小。
- 层叠性： 当不同选择器选择到同一个元素的时候，如果作用的样式不同则所有样式全部层叠到一起（全部生效），如果作用的样式相同则由优先级决定
- 优先级：作用范围越小 优先级越高， id>class>标签名>继承(间接选中)
####元素的显示方式display
- block: 块级元素默认的显示方式， 可以修改宽高
- inline: 行内元素默认的显示方式， 可以共占一行
- inline-block: 行内块 ，可以修改宽高也可以共占一行
####行内元素垂直对齐方式vertical-align - 上对齐 top
- 下对齐 bottom
- 中间对齐 middle
- 基线对齐 baseline（默认）