1.Emmet语法
(1)快速生成HTML结构语法
① 生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>
② 如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div
③ 如果有父子级关系的标签,可以用>比如ul > li就可以了
④ 如果有兄弟关系的标签,用+就可以了比如div+p
⑤ 如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
⑥ 如果生成的div类名是有顺序的,可以用自增符号s
⑦ 如果想要在生成的标签内部写内容可以用{}表示
(2)快速生成CSS样式语法
① 比如w200 按tab 可以生成 width:200px;
② 比如lh26 按tab 可以生成 line-height:26px;
(3)快速格式化代码
首先选择文件-->首选项-->设置;然后搜索emmet.include;然后选择用户里的settings.json中编辑
将以下两行代码加上去
"editor.formatOnType" : true,
"editor.formatOnSave";: true
快捷键 Shift+Alt+F
只需要设置一次即可,以后都可以自动保存格式化代码
2.复合选择器
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多
符号是空格..nav a
b
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于.navap
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是通号 ..nav, .header
链接伪类选择 选择不同状态的链接 跟链接相关 较多 重点记住a0和a:hover实际开发的写法
:focus 选择器 选择获得光标的表单 踉表单相关 较少 input:focus记住这个写法
3.CSS的元素显示模式
元素显示模式就是元素以什么方式进行显示,一般分为块元素和行内元素两种类型。
元素显示模式转换
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;
(1)块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素
特点:
① 比较霸道,自己独占一行
② 高度,宽度、外边距以及内边距都可以控制.
③ 宽度默认是容器(父级宽度)的100%
④ 是一个容器及盒子,里面可以放行内或者块级元素
注意:
① 文字类的元素内不能使用块级元素
② <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
③ <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
(2)行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、ci、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
特点:
① 相邻行肉元素在一行上,一行可以显示多个
② 高、宽直接设置是无效的
③ 默认宽度就是它本身内容的宽度
④ 行内元素只能容纳文本或其他行内元素
注意:
① 链接里面不能再放链接
② 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
(3)行内块元素
特点:
① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
② 默认宓度就是它本身内容的宽度(行内元素特点)
③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)
4.CSS的背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
5.CSS的三大特性
(1)层叠性
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
(2)继承性
恰当地使用继承可以简化代码,降低CSS样式的复杂性
子元素可以继承父元素的样式
(3)优先级
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
权重叠加
如果是复合选择器,则会有权重叠加,需要计算权重
div ul li------>0,0,0,3
nav ul li ----->0,0,1,2
ahover -----> 0,0,1,1
.nav a ------>0,0,1,1
选择器权重如下表示:
选择器 选择器权限
继承或者* 0.0.0.,0
元素选择器 b.oo,1
类选择器,伪类选择器 0.0,1,0
ID选择器 0.1,0.,0
行内样式 style=- 1.0,0,0
!important重要的 无穷大
注意:
① 权重是有4组数字组成但是不会有进位。
② 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推..
③ 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
④ 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!important无穷大.
css字体
CSS使用font-family属性定义文本的字体系列。
①特点:
(1)各种字体之间必须使用英文状态下的逗号隔开。
(2)一般情况下,如果有空格隔开的多个单词组成的字体加引号。
(3)尽量使用系统默认自带字体 ,保证在任何用户的浏览器中都能正确显示。
(4)最常见的几个字体: body {font-family: 'Microsoft YaHei',tahoma,arial, "Hiragino Sans GB';}。