Emmet语法
1.生成标签按tab键即可
2.生成多个标签,加上*就可以。比如div * 3,就会快速生成3个div
3.如果有父子级关系的标签,用>就可以了。比如ul>li
4.如果有兄弟关系的标签,用+就可以了。比如div+p
5.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的,可以用自增符号$
1.CSS的复合选择器
1.1后代选择器
包含选择器,可以选择父元素里面的子元素
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)
例如:
ul li {样式声明} /*选择ul里面所有的li标签元素*/
元素1和元素2中间用空格隔开
元素1是父级,元素2是子集,最终选择的是元素2
元素2可以是儿子,也可以是孙子,只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
1.2子选择器(重要)
只能选择作为某元素最近一级的子元素。
元素1 > 元素2 例如:
div > p {样式声明} /*选择div里面所有最近一级p标签元素*/
元素1和元素2之间用大于号隔开
元素1是父级,元素2是子集,最终选择的是元素2
1.3并集选择器(重要)
可以选择多组标签,同时为他们定义相同的形式
元素1,
元素2 {样式声明}
上述语法表示选择元素1和元素2
例如
ul,
div{样式声明}
/*约定的语法规范,并集选择器喜欢竖着写*/
/*最后一个选择器不用加逗号*/
约定的语法规范,并集选择器喜欢竖着写
最后一个选择器不用加逗号
1.4伪类选择器
用于向某些选择器添加特殊的效果
比如给链接添加特殊效果,或选择第1个,第n个元素。
1.5链接伪类选择器
a:link /选择所有未被访问的链接/
a:visit /选择所有已被访问的链接/
a:honer /选择鼠标指针位于其上的链接/
a:active /选择活动链接(鼠标按下未谈起)/
注意事项
1.为确保生效,应按照LVHA的循顺序声明:link-:visited-:hover-:active
2,a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
在实际开发中的写法:
/*a是标签选择器 所有的链接*/
a {
color: gray;
}
a:hover {
color: red; /*鼠标经过的时候,由原来的 灰色 变成了红色*/
}
1.6 :focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input:focus {
background-color: yellow;
}
1.7复合选择器总结
选择器 | 作用 | 隔开符号及用法 |
---|---|---|
后代选择器 | 用来选择后代元素 | 空格 .nav a |
子代选择器 | 选择最近一级元素 | 大于 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 逗号 .nav,.header |
链接伪类选择器 | 选择不同状态的链接 | a{}和a:hover实际开发的写法 |
:focus 选择器 | 选择获取光标的表单 | input:focus |
2.CSS的元素显示模式
2.1块元素
<h1>~<h6>
<p>
<div> (最典型)
<ul>
<ol>
<li>
块级元素的特点:
1.独占一行
2.高度、宽度、外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面放行内或块级元素
注意:文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是<div>
<h1>~<h6>也不能
2.2行内元素
<a></a> <b></b>
<em></em> <del></del>
<strong></strong> <i></i>
<s></s> <ins></ins>
<u></u> <span>最典型</span>
行内元素的特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高、宽的设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意:链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
2.3行内块元素
<img/>
<input/>
<td></td>
行内块特点:
1.和相邻行内元素(行内块)在一行上,但是它们之间有空白空隙,一行可以显示多个(行内元素特点)
2.默认宽度就是它本身内容的宽度(行内元素特点)
3.高度、行高、外边距以及内边距都可以控制(块级元素特点)
2.4元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
2.5元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性。比如想要增加链接a的触发范围。
a{
width:150px;
height:50px;
display:block;
//把行内元素a -> 块级元素
}
div{
//把块元素div -> 行内元素
display:inline;
}
->行内块 display:inline-block;
2.6单行文字垂直居中
文字的行高=盒子的高度
a {
text-intent: 2em;
height: 40px;
line-height: 40px;
}
3.CSS的背景
3.1背景属性
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 默认值transparent(透明) |
background-image | 背景图片 | none/url |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x(横向)/repeat-y(纵向)【默认情况下平铺】 |
background-position | 背景位置 | length/position: x y |
background-attatchment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 书写更简单 | |
背景色半透明 | background:rgba(0,0,0,0.3),最后一个参数是alpha透明值取0-1,后面必须是4个值 |
3.2背景图片位置
1.参数是方位名词
- 如果指定的两个值是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
- 如果只指定一个方位名词,另一个值省略,则第二个值默认居中对齐
2.参数是精确单位
- 第一个是x坐标,第二个是y坐标
- 如果只指定一个,则为x坐标,另一个默认垂直居中
3.3背景图像固定(背景附着)
background-attachment属性设置背景图像时候固定或者随着页面的其余部分滚动。
background-attachment可以做视差滚动效果
background-attachment: scroll(背景图像是随着对象内容滚动) |
fixed(背景图像固定)