（一）基础选择器
1.标签选择器：<style> p{color:red;font-size:12px;} </style>
2.类选择器：<style> .类名{属性1：属性值1；} </style>
<div class="类名"></div>
3.id选择器（一次只能选择一个标签）：<style> #id名 {属性1：属性值1；} </style>
<div id="id名"></div>
4.通配选择器(选取页面中所有元素）：<style> *{属性1：属性值1；} </style>
5.后代选择器：写法为外层标签写在前面，内层标签写在后面，中间用空格分隔。
6.子选择器：只能选择作为元素的最近一级子元素
父元素 > 子元素{样式声明}
7.并集选择器：可以选择多组标签同时为他们定义相同的样式。
元素1，元素2，元素n{样式声明}
8.伪类选择器：
a:link 选择所有未被访问的链接
a:visted 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起）
9.因为a链接在浏览器中具有默认样式，所以需要给链接单独指定样式。
a{ color:gray;
text-decoration:none; }
a:hover { color:red;}
10.focus伪类：由于选取获得焦点的表单元素，一般情况下<input>类表单元素才能获取。
如：<style> input:focus {bcakground-color:yellow;} </style>
<body> <input type="text"> <body>
(二）CSS属性
1.字体
| 属性 | 表示 | 注意点 |
| font-size | 字号 | 单位为px |
| font-family | 字体 | ‘Microsoft YaHei’ |
| font-weight | 字体粗细 | 加粗为700或bold 不加粗为400或normal |
| font-style | 字体样式 | 倾斜是italic,不倾斜是normal |
| font | 字体连写 | 1.自提连写有顺序，不能随意换位置 2.其中字体和字号必须同时出现 |
| 表示 | 属性值 |
| 预定义的颜色值 | red,green |
| 十六进制 | #FF0000,#FF6600 |
| RGB代码 | rgb(255,0,0) rgb(100%,0%,0%) |
2.文本
| 属性 | 注意点 |
| text-align | 用于设置元素内文本内容的水平对齐方式，center,left,right |
| text-decoration | 可以给文本添加下划线，删除线，上划线（none,underline,overline,line-through） |
| text-indent | 用来指定文本的首行缩进，2em表示首行缩进2个字 |
| line-height | 用来设置行间距离（行高=上间距+文本高度+下间距） |
3.CSS引入方式
(1)内部样式表：写在html页面内部，<style></style>一般放在<head>中。
（2）行内样式：<div style="color:pink;font-size:12px;"></div>
(3)外部样式表（链接式）：样式单独写在CSS文件中。
创建css文件，文件中只有样式；在html中<link rel="stylesheet" href="css文件路径”>
4.Emmet语法
生成标签直接输入标签名按tab键即可；
如果想要生成多个标签加上*即可，如：div*3;
如果有父子关系的标签，用>即可，如：ul>li;
如果有兄弟标签用+即可，如：div+p;
如果生成带有class或者id名字的标签x,直接写x.classname或者x#idname+enter/tab键即可；
如果生成的div类名是有顺序的，可以用自增符号$,如：.demo$*5.
5.元素显示模式：元素或标签以什么方式进行显示。
6.类别
（1）块元素：<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>
特点：自己独占一行；
高度，宽度，外边距及内边距都可以控制；
宽度默认为容器（父级）的100%；是一个容器及盒子，里面可以放行内或者块级元素；
文字类的元素内不能使用块级元素，<h1>-<h6>,<p>主要用来存放文字，因此不能放块级元素。
（2）行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>.
特点：相邻行内元素在一行上，一行可以显示多个；
高宽直接设置是无效的；默认宽度就是他本身内容的宽度；
行内元素只能容纳文本或其他行内元素；
特殊情况链接<a>里面可以放块级元素.
(3)行内块元素：<img/>,<input/>,<td>
特点：行内块在一行上，但是他们之间会有空白缝隙，一行可以显示多个；
默认宽度就是它本身内容的宽度；高度，行高，外边距以及内边距都可以控制。
（4）元素显示模式的转换
display:block(转换为块级元素）
display:inline(转换为行内元素）
display:inline-block(转换为行内块元素）
7.CSS背景
| 属性 | 作用 | 值 |
| background-color | 背景颜色 | 预定义的颜色值，十六进制，RGB代码(transparent透明） |
| background-image | 背景图片 | url(图片路径） |
| background-repeat | 是否平铺 | repeat（默认）,no-repeat,repeat-x,repeat-y |
| background-position | 背景位置 | length,position（left,top,bottom,center,right） |
| background-attachment | 背景附着 | scroll(背景滚动），fixed(背景固定） |
| 背景简写 | 书写更简单 | 背景颜色，图片，平铺，滚动，位置 |
| 背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3); |
注意：position，如果参数值是精确坐标，第一个是x,第二个是y,如果只指定一个，那一定是x,y垂直居中。
如果指定的两个值都是方位名词，则两个值前后顺序无关，left top=top left,如果只指定一个，则另一个默认居中对齐。
如果指定的两个值是精确值和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
8.CSS三大特性
（1）层叠性（就近原则）那个样式离结构近就执行哪个样式
（2）继承性：子标签会继承父标签的某些样式；行高的继承，12px/1.5代表12乘以1.5.
（3）优先级
| 选择器 | 选择器权重 |
| 继承或者* | 0,0,0,0, |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style=“” | 1,0,0,0 |
| !important | 无穷大 |
注意：（1）比较权重从左到右。
（2）权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重，计算不进位。
9.盒子模型
（1）border边框
样式：border-width:5px;
border-style:none/dashed（虚线）/solid（实线）/dotted(点线）/hidden/double/groove/ridge/inset/outset;
border-color:red;
border:1px solid red;
border-top/border-bottom/border-left/border-right;
border-collapse:collapse;（相邻边框合并在一起）
（3）圆角边框：border-radius:length(数据或高度的百分比）；
注意：如果是一个正方形想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
（3）content内容
（4）padding内边距：padding-top/padding-bottom/padding-left/padding-right
padding:5px;(1个值表示上下左右都有5像素内边距；2个值表示第一个为上下内边距，第二个为左右内边距；3个值表示第一个代表上边距，第二个代表左右边距，第三个代表下边距；4个值则按逆时针依次为上右左下）;
如果盒子本身没有指定width/height属性，padding不会撑开盒子大小。
(5)margin外边距:margin-left/margin-right/margin-top/margin-bottom:px;
注意：外边距可以让块级盒子水平居中，需满足：
盒子必须指定了宽度；盒子左右的外边距都设置为auto.
如：.one{
width:960px;
margin:0 auto;
}
而行内元素或者行内块元素水平居中则是给父元素添加text-align:center即可。
外边距合并：当上下两个块元素（兄弟关系）相遇时，上一个有下边距，下一个有上边距 ，则它们之间的垂直距离两个值的最大值。
对于嵌套关系（父子）的块元素，父元素和子元素都有上外边距，此时父元素会选择值较大的外边距，并且给子元素设置的上外边距无效。
（6）清除内外边距
*{
padding:0;清除内边距
margin:0;清除外边距
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，但转换为块级和行内块元素就可以了。
（7）盒子阴影：阴影不占空间
box-shadow:h-shadow v-shadow blur(虚实）spread(范围）
| 值 | 描述 |
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊距离。 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
（8）文字阴影
text-shadow:h-shadow v-shadow blur color;
10.浮动（float）
普通流
定位
浮动
（1）网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
（2）选择器 { float:none/left/right;}
(3)设置了浮动的元素会漂浮在普通流的上面，不占位置，脱标。
如果多个盒子都设置了浮动，他们会按照属性值行内显示并且顶端对齐排列。
浮动的元素具有行内块元素的特性。
（4）浮动元素和标准流父级搭配使用。
11.清除浮动
（1）额外标签法：在浮动元素末尾添加一个空的标签（必须是块元素，不能是行内元素）。
（2）父级添加overflow属性
（3）父级添加after伪元素
（4）父级添加双伪元素
12.CSS定位：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
（1）定位组成
定位=定位模式+边位移。
| 值 | 语义 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边位移决定了该元素的最终位置，有4个属性：
| 边偏移属性 | 示例 | 描述 |
| top | top:80px | 顶部偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
(2)静态定位static:无定位的意思；
选择器{position:static;}
相对定位relative:继续保留原来的位置；（相对于原来位置的移动）
绝对定位absolute：不再占有原来的位置；（相对于他祖先元素来说）
固定定位fixed:元素固定于浏览器可视区的位置，浏览器页面滚动时元素位置不变；（不在占用原来位置）
粘性定位sticky:相对定位和固定定位的混合（占有原先的位置 ）
（3）子绝父相
（4）定位叠放次序z-index
选择器{z-index:1;}
13.元素的显示与隐藏
display:none（不再占有原来的位置）/block(转换为块级元素还有显示元素）
visibility:hidden(占有原来的位置）/visible(元素可视）
overflow:hidden/visible/scroll(显示滚动条）/auto(如果溢出显示滚动条）
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
