02CSS基础

02CSS基础

基本语法：

​ 选择器名 {
​ 属性: 值;
​ }

css根据写的位置，分三类：

​ 行内样式：在需要样式的标签中使用 style 属性，指明样式和值，多个用;隔开
​ 内部样式：在标签中，使用

CSS选择器：

基本选择器：

​ 标签选择器：标签名作为选择器名，会选择页面中所有对应的标签
​ 类选择器：在标签中使用 class 属性，起个名，在样式中，使用 .类名 选中具有相同class的元素，class名可以重复
​ ID选择器：在标签中使用 id 属性，起个名，在样式中，使用 #id名 选中指定id的元素，id不能重复
​ 注意：起名时，不要用 数字 开头
​ 优先级：ID > 类 > 标签

层次选择器：

​ E F：后代选择器，从E标签中选中后代标签F
​ E>F：子选择器，从E标签中选中子标签F
​ E+F: 相邻兄弟选择器，从E标签往下，选中同级的并且相邻的标签F
​ E~F: 通用兄弟选择器，从E标签往下，选中同级的标签F

结构伪类选择器：

​ E F:first-child：从E标签的后代中选中第一个子标签F，先查找第一个子标签，再看是不是F，如果不是F，则不选中
​ E:last-child
​ E F:nth-child(n): 选中指定第n个F标签

​ E F:first-of-type：从E标签的后代中选中第一个子标签F，先查找所有的F标签，再从中选中第一个

​ E:last-of-type：
​ E F:nth-of-type(n)

属性选择器：

​ E[attr]: 选中有attr属性的E标签
​ E[attr=val]：选中有attr属性并且值为val的E标签
​ E[attr^=val]：选中有attr属性并且值以val开头的E标签
​ E[attr$=val]：选中有attr属性并且值以val结尾的E标签
​ E[attr*=val]：选中有attr属性并且值包含val的E标签

div
span

样式：

字体样式：

​ font-family 设置字体类型
​ font-size 设置字体大小
​ font-style 设置字体风格
​ font-weight 设置字体的粗细
​ font 在一个声明中设置所有字体属性
​ 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

文本样式：

​ color 设置文本颜色
​ text-align 设置元素水平对齐方式
​ text-indent 设置首行文本的缩进
​ line-height 设置文本的行高
​ text-decoration 设置文本的装饰，下划线、上划线、删除线

​ vertical-align 设置图片和文本的对齐

​ text-shadow 文本阴影：text-shadow: gray 10px 10px 10px;

超链接伪类样式：

​ a:link 未单击访问时超链接样式
​ a:visited 单击访问后超链接样式
​ a:hover 鼠标悬浮其上的超链接样式
​ a:active 鼠标单击未释放的超链接样式
​ 注意：顺序一般按照 LoVe/HAte

列表样式：

​ list-style-type 修改列表项前面的数字或者圆点等样式
​ list-style-image
​ list-style-position
​ list-style：一次性设置上面三个， 一般只设置一个：list-style: none;

背景样式：

​ background-color：背景颜色
​ background-image：背景图片，当和颜色同时存在时，会覆盖颜色
​ background-repeat：图片平铺
​ background-position：图片定位
​ background：一次性设置上面4个

​ eg：background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;}

​ 背景定位

​ background-size：背景图片大小

渐变：

​ 线性渐变：background: linear-gradient(to top, red, orange, yellow, green, blue);
​ 径向渐变：background: radial-gradient(red, orange, yellow, green, blue)

盒子模型：

​ border：一次性设置下面3个属性
​ border-color: 下面4个汇总，可以有1、2、3、4个值
​ border-top-color：上边框颜色
​ border-bottom-color：下边框颜色
​ border-left-color：左边框颜色
​ border-right-color：右边框颜色
​ border-width：边框的粗细
​ border-top-width
​ border-bottom-width
​ border-left-width
​ border-right-width
​ border-style：边框样式
​ border-top-style
​ border-bottom-style
​ border-left-style
​ border-right-style

​ margin：外边距

​ margin-top
​ margin-right
​ margin-bottom
​ margin-left
​ 块元素左右居中：margin: 0px auto;

​ padding: 内边距
​ padding-top
​ padding-right
​ padding-bottom
​ padding-left

​ box-sizing：盒子大小
​ 值 ：content-box：设置的宽和高是内容的宽高，如果有内边距，就会把边框放大
​ border-box: 设置的宽和高就是边框盒子的宽高，如果有内边距，内容可能会超出盒子

​ border-radius: 设置边框角的弧度，可以有1、2、3、4个值，从左上角开始顺时针赋值

​ box-shadow：颜色 x轴 y轴 晕染半径

鼠标变小手：

​ cursor: pointer;

display：块元素和行内元素之间改变

​ block 块元素：可以设置宽和高，单独一行 控制元素的显示和隐藏
​ inline 行内元素：设置宽和高无效，可以多个元素在一行
​ inline-block 行内块：即可以设置宽和高，又可以在一行 控制块元素排到一行
​ none 隐藏元素 控制元素的显示和隐藏

float 浮动:

边框塌陷
解决：

1. 在塌陷的父节点的末尾加一个空的div，设置这个div样式 clear: both;
2. 在塌陷的父节点中使用:after结构伪类，设置样式：content: “”; display: block; clear: both;

定位：position

​ 相对定位：relative，相对于自己原来的位置进行定位
​ 绝对定位：absolute，一但定位，自己会脱离标准文档流(自己的层级会升高)，原位置内容会被下面的内容顶替，定位时，以最近已定位的祖先元素为基点，如果没有，以浏览器左上角为基点
​ 固定定位：fixed，一但定位，自己会脱离标准文档流(自己的层级会升高)，原位置内容会被下面的内容顶替，定位时，以浏览器左上角为基点，定位后，不管滚动条怎么拉动，位置固定不变

z-index：设置层级