CSS笔记
选择器 {样式}
CSS选择器的作用：根据不同的需求把不同的标签选出来。
标签选择器
选择所有该类标签进行改变样式
p {
color: green;
font-size: 19px;
}
类选择器
在HTML标签中加入 class=“类名”，
.类名 {
属性1： 属性值1；
。。。。
}
id选择器（id选择器中的id具有唯一性，不可重复）
在HTML标签中加入 class=”id名“
#id {
属性1： 属性值1；
。。。
}
通配符选择器
通配符选择器使用“*”定义，表示选取页面中所有元素（标签）
*{
属性1： 属性值1；
。。。
}
字体属性
-
使用 font-family 属性定义文本的字体系列（ p s： Microsoft Yahei ）
-
font-size 设置字体大小
-
font-weight 设置文本字体的粗细（bold，normal，400表示正常，700加粗）
-
font-style 设置文本的风格(主要讲倾斜的字体变得正常，font-style=normal)
-
字体复合属性：
font: font-style font-weight font-size/line-height font-family;
必须严格按照上面格式中的顺序写，不能更换顺序，并且各个属性间以空格隔开
文本属性
- 文本对齐（text-align： center）
- 装饰文本（text-decoration ，none 默认没有装饰线，underline 下划线，overline 上划线，line-through 删除线）
- 文本缩进（text-indent，可以用像素大小表示缩进距离，一般用 em 表相对当前元素缩进一文字大小）
- 行间距（line-height：20px）
CSS引入方式
-
行内样式表（行内式）
直接在 html 标签内部的 style 属性中设定 CSS 样式。
<div style="color: red; font-size: 12px; ">青春不常在抓紧谈恋爱</div> -
内部样式表（嵌入式）
适合少量样式。写到 html 页面首部，是将所有的 CSS 代码抽取出来，单独放倒一个
Emmet 语法
快速生成 HTML 结构语法
- 生成标签 直接输入标签名按Tab 健即可
div+Tab
- 如果想要生成多个相同标签加上* 就可以了，例如 div*3
div*5+Tab
如果有父子级关系的标签，可以用 > ,例如 ul > li
如果有兄弟关系的标签，用 + 就可以，例如 div + p
如果生成带有类名或者 id 名字的，直接写 .demo (生成的标签里的 class=”demo“)或者 #two（id=”two“） tab键就行了
如果想要在生成的标签内部写内容可以用{}表示
div{我不曾看见过太阳}+Tab
快速生成 CSS 样式语法
采用首字母缩写的简写形式即可
例如：w200+Tab 可以生成 width： 200px；
lh26+Tab 可以生成 line-height：26px；
格式化代码
按住快捷键 shift+alt+f
CSS的复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器：
后代选择器（重要）：
可以选择父元素里面的子元素，写法时把外层标签写在前面，内层标签写后面，中间用空格分隔开。
语法： 元素1 元素2 { 样式声明}
思考：直接在父标签加 class 或 id 再用 CSS美化可以么
子选择器
只能选择作为某元素的最近一级子元素
语法：元素1 > 元素2 {样式声明} —元素1是父级，元素二是子集
并集选择器（重要）
选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
语法：元素1，元素2 {样式声明}
伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特别效果，或选择第1个，第n个元素。
链接伪类选择器
a:link //选择所有未被访问的链接
a:visited //选择所有已被访问的链接
a:hover //选择鼠标指针位于其上的链接
a:active //选择活动链接（鼠标按下未弹起的链接）
为确保生效，链接伪类需按照LVHA的顺序声明
链接自浏览器中具有默认样式，所以我们实际工作中需要给链接单独指定样式
focus选择器
input: focus //用于选取获得焦点的表单元素
CSS 的元素显示模式
块级元素
常见的块级元素有h1~h6 , p , div , ul, ol, li 等，其中 div 是最典型的块元素。
块级元素特点：
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
行内元素
行内元素特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
行内块元素
、、，他们同时具有块级元素和行内元素的特点。
行内块元素的特点：
- 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行级元素特点）
- 默认宽度就是它本身的内容的宽度（行级元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。
- 转换为块元素：display ：block
- 转换为行内元素： display ：inline
- 转换为行内块：display ：inline-block
CSS背景
背景图片
background-image 属性描述元素的背景图像，实际开发常见于 logo 或者一些装饰行的小图片。
background-image: none / url(url)
背景平铺
当图片大小小于盒子时，默认平铺。
background-repeat: repeat / no-repeat / repeat-x / repeat-y
repeat-x 背景图片在横向上平铺
repeat-y 背景图片在纵向上平铺
背景图片位置
利用 background-position 属性可以改变图片在背景中的位置。
background-position:x y
参数代表意思是：x 坐标，y 坐标，同时也可以使用方位名词来表示，例如 top ，center ，left，bottom。
背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment: scroll | fixed
scroll 表示背景图片是随着对象内容滚动
fixed 表示背景图像固定
背景复合写法
习惯性写法 background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
背景色半透明
background: rgba(0,0,0,0.3)
a 是 alpha 缩写，表示透明度，取值范围在 0~1 之间，0 表示全透明，1 表示不透明
CSS 三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。样式冲突遵从就近原则，哪个样式离结构近，就执行哪个样式。
继承性
字标签会继承父标签的某些样式，如文本颜色和字号(不是所有特性都继承)。
优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style=“ ” | 1,0,0,0 |
| !important | =无穷大 |
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。（继承的权重是0）
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
