目录
Emmet语法
1.快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可， 比如 div 然后 tab键，就可以生成<div></div>
- 如果想要生成多个标签，加上*号 ， 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，用>号 ， 比如 ul>li 就会生成 <ul> <li></li> </ul>
- 如果有兄弟关系，用+号 ， 比如 div+p
- 如果生成带有类名或者是id名字的，直接写 .demo （类名）或者 #deuoh（id名字） 按tab键就可以了
- 如果生成的div类命是有顺序的，可以用自增符号$ ，比如 .demo$*5
- 想生成的标签里面有内容 ， div{西里斯布莱克} p{$}*3
2.快速生成CSS样式语法
只需要输入前一个字母 比如 text-align：center（txc）
3.快速格式化代码
当文档格式乱的时候，按shift+alt+F
CSS的复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等
1.后代选择器（重要）
又称包含选择器，可以选择父元素里面的子元素。当标签发生嵌套时，内层标签就成为外层标签的嵌套。
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器 ， 比如 .malfoy ol li a {}
元素1 元素2 {样式声明} 比如 ol li {color：pink；}
2.子选择器
子元素选择器，只选择作为某元素的最近的一级子元素
- 元素1和元素2中间用>隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子
元素1>元素2 {样式说明} 比如 div>p {} 选择div中所有最近一级p标签元素
3.并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式，常用于集体声明。
用英文逗号连接而成 div,p {样式说明}
4.伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
用冒号：表示，比如 :hover :first-child
4.1链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
- 请按照LVHA的顺序声明 ：link visited hover active
- 因为链接在浏览器中有默认样式，实际工作中要单独给链接指定样式
- 平时工作中 首先给<a>标签设置颜色和无下划线，然后a:hover
4.2：focus伪类选择器
用于选取获得鼠标所在的表单元素
input:focus {
background-color: paleturquoise;
color: palevioletred;
}
CSS的元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示。
HTML一般分为块元素和行内元素两种类型。块元素一行只能放一个，行内元素一行能放好几个
1.块元素
常见的有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
块级元素的特点：
- 自己独占一行
- 高度，宽度，外边距和内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器和盒子，里面可以放块级元素和行内元素
注意：文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，所以里面不能存放块级元素，特别是<div>// <h1>也是一样
2.行内元素
<span>是最典型的行内元素，有的地方称为 内联元素
行内元素的特点：
- 一行上可以放多个行内元素
- 高宽设置是没有效果的
- 默认的宽度就是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素，不允许放块元素
注意：链接里面不能再放链接，<a>里面可以放块级元素，但是需要转换一下块级模式最安全
3.行内块元素
同时具有块元素和行内元素的特点，比如 <img />,<input />,<td>
行内块元素的特点：
- 一行内可以放多个元素，但是之间会有空白缝隙（行内元素特点）
- 默认宽度是它内容本身的宽度（行内元素特点）
- 高度，行高，外边距等 都可以控制（块级元素特点）
4.元素显示模式转换
一个模式的元素需要另外一种模式的特性。 比如，想要使<a>链接可以设置高度和宽度
display:block; 可以把行内元素转换为块级元素
display:inline; 转换为行内元素
display：inline-block; 转换为行内块元素
单行文字垂直居中的小技巧
让文字的行高等于盒子的高度 line-height = height
CSS背景
1.背景颜色
background-color ：transparent ; (透明）
背景色透明 一般默认的是透明色
2.背景图片
background-image: none | url(url);
实际开发常见于logo或者一些装饰性的 小图片 或者是 超大的背景图片，优点是非常便于控制位置
none 无背景图的（默认的） url 使用绝对地址或相对地址指定背景图像
3.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat：repeat | no-repeat | repeat-x | repeat-y ;
平铺 | 不平铺 | 横向平铺 |纵向平铺
页面元素既可以添加背景图片也是添加背景颜色，不过背景颜色在背景图片下面
4.背景图片位置
background-position 可以改变图片在背景中的位置
background-position：x y；
x坐标和y坐标：可以使用方位名词或者精确单位
4.1参数是方位名词
- 如果两个值都是方位名词，则两个值前后顺序无关 left top = top left
- 如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
4.2参数是精确单位
- 如果是精确单位，第一个肯定是x坐标，第二个肯定是y坐标 ：20px 50px;
- 如果只有一个数值，那么肯定是x坐标，第二个默认垂直居中
4.3参数是混合单位
- 如果精确单位和方位名词混合使用，则第一个是x坐标，第二个是y坐标；
5.背景图像固定（背景附着）
background-attachment 属性 设置背景图像是否固定或者 随着页面的其余部分滚动
后期可以制作视差滚动的效果
background-attachment：scroll | fixed ；
scroll 背景图像随对象内容滚动（默认）；fixed 背景图像固定
6.背景复合写法
把背景属性合并简写到同一个属性 background 中，一般习惯约定顺序为：
background：背景颜色 背景图片url 背景平铺 背景图像滚动 背景图片位置
必须用空格隔开！！！
7.背景色半透明
background：rgba(0,0,0,0.3);
- 最后一个参数是alpha透明值，取值范围在0-1之间
- 习惯把0.3的0省略掉，写成background：grba（0，0，0，.3）
- 背景半透明是指盒子背景半透明，里面的内容不受影响；
8.背景总结
扫一扫
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
