1.Emmet语法(它使用缩写来提高HTML和CSS的编写速度)。
1.1生成标签,直接输入标签名,按tab键即可。
1.2如果想生成多个标签,加上*即可。比如div*3。
1.3如果有父子级关系,可以用“>”号。比如ul>li。
1.4如果有兄弟关系,可以用“+”号,比如div+p。
1.5生成带有类名或者id名字的,直接写.deom或者#。
1.6如果生成的div类名是有顺序的,可以.deom$*5。
1.7如果想要生成的标签内部写内容可以用{}。
2.复合选择器(对基础选择器进行组合,可以更准确更高效的选择目标元素)
2.1后代选择器
选择父元素里的子元素。eg. ol li {样式声明}。
2.2子选择器
只能选择作为某元素的最近一级子元素。(简单理解就是选亲儿子元素)eg. 元素1>元素2
2.3并集选择器
选择多组标签,同时为他们定义相同的标签。eg. div, p {样式声明}。
2.4伪类选择器
向某些选择器添加特殊效果。用:表示。eg. :hover。
2.5链接伪类选择器
a:link /*选择所有未被访问的链接*/。
a:visited /*选择所有已被访问的链接*/。
a:hover/*选择鼠标指针位于其上的标签*/。
a:active/*活动标签*/。
注意事项:1.为保证生效,请按照LVHA的循环顺序生明。
2.记忆法:love hate或lv包包hao。
3.因为a在浏览器中具有默认样式,所以我们在实际工作中都需要给链接单独指定样式
3.CSS的元素显示样式
3.1块元素
特点:1.比较霸道,自己独占一行。
2.高度、宽度以及内外边距可以控制。
3.宽度默认是容器(父级元素)的100%。
4.是一个容器,里面可以放行内或块级元素。
注意:1.文字类的元素不能使用块级元素。
2.<p>标签主要用于存放文字,因此<p>里面不能放文字。
3.2行内元素
特点:1.相邻元素可以在一行上,一行可以显示多个。
2.宽高直接设置是无效的。
3.默认宽度就是他本身内容的宽度。
4.行内元素只能容纳文本及其他行内元素。
5.链接里不能放链接。
3.3行内块元素
特点:1.和相邻行内元素(行内块元素)在一行上,但中间有空白缝隙。
2.默认宽度就是他本身内容的宽度。
3.宽高、内外边距都可以控制。
3.4元素显示模式的转换
1.行内元素转换为块级元素:
display:inline-block;