CSS学习第二天
1. Emmet语法
- 快速生成HTML结构语法
- 生成标签 直接输入
标签名+TAB键
即可;比如 div+TAB键
,就可以生成 <div> </div>
。
- 想要生成多个相同标签 加上
*
就可以;比如 div*3
就可以快速生成3
个div。
- 有父子级关系的标签,可以用
>
; 比如 ul > li
即可。
- 有兄弟级关系的标签,可以用
+
; 比如 div + p
即可。
- 生成带有
类名
或者id
名字的,直接写 .demo
或者#two tab键
即可。
- 生成的
div
类名是有顺序的,可以用自增符号$
;例如 .demo$*5
。
- 生成标签内部写内容可以用
{}
表示,例如div{$}*3
。
- 快速生成CSS样式语法
c s s css css基本采取简写形式即可,每个单词的第一个字母即可。
- 比如
w200 + tab键
可以生成width:200px
;
- 比如
lh26 + tab键
可以生成line-height:26px
。
####2.CSS复合选择器
两个或多个基础选择器,通过不同的方式组合而成。
- 后代选择器(重要)
又称为包含选择器,可以选择父元素里面的子元素,(包括儿子和孙子)。写法:外层标签写前面,内层标签写后面,中间用空格分开。当标签发生嵌套时,内层标签就成为外层标签的后代。
元素1 元素2 {样式说明;}
ul li a {样式说明;} /*选择ul标签里面li标签的a标签元素*/
- 子选择器(重要)
只能选择元素最近一级子元素,用大于号隔开,即亲儿子元素。
元素1 > 元素2 {
样式说明;}
div > p {
样式说明;}
- 并集选择器(重要)
可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,用逗号隔开,任何形式的选择器都可以作为并集选择器的一部分。
元素1 , 元素2 {
样式说明;}
ul,div {
样式声明;}
- 伪类选择器
用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。用冒号表示。
选择 |
含义 |
a:link |
选择所有未被访问的链接 |
a:visited |
选择所有已访问的链接 |
a:hover |
选择鼠标指针位于其上的链接 |
a:active |
选择活动链接(鼠标按下未弹起的链接) |
- focus伪类选择器
选取获得焦点(光标)的表单元素。光标一般情况下< i n p u t input input>类表单元素才能获取,因此这个选择器主要针对表单元素来说。
input:focus {
background-color:yellow;
}
- 复合选择器总结
选择器 |
作用 |
特征 |
使用情况 |
隔开符号及用法 |
后代选择器 |
用来选择后代选择器 |
可以是子孙后代 |
较多 |
符号是空格 ,.nav a |
子代选择器 |
选择最近一级元素 |
只选亲儿子 |
较少 |
符号是大于,.nav>a |
并集选择器 |
选择某些样式相同的元素 |
可以用于集体声明 |
较多 |
符号是逗号,.nav,.header |
链接伪类选择器 |
选择不同状态的链接 |
跟链接相关 |
较多 |
重点记住a{} 和a:hover 实际开发的写法 |
: f o c u s :focus :focus选择器 |
选择获得光标的表单 |
跟表单相关 |
较少 |
input:focus 记住这个写法 |
####3.CSS元素显示模式 |
|
|
|
|
元素显示模式就是元素(标签)以什么方式显示。分为块元素和行内元素。 |
|
|
|
|
- 块元素
常见的块元素有<