六、chrome调试工具
七、Emmet语法
1、HTML
- 直接输入标签,按tab键即可,例如 div 按tab键,就直接生成<div></div>
- 生成多个标签,例如div*3;
- 有父子级关系,例如,ul>li,
- 有兄弟级关系,例如div+span;
- 生成带有类名,或者ID名,div.red,div#red;
- 标签带有文字,p{我是美女}
- 生成的类名是有递增的顺序的,带自增符号$;
- CSS
缩写的样式(首字母)按tab键,例如text-decoration:none:tdn;
- 格式化代码
Shift+alt+F .
保存时自动格式化代码:点击文件-》首选项-》设置—》搜索format,勾选上format on Save 即可自动保存时格式化代码。
八、CSS的复合选择器。
更准确、更高效的选择目标元素(标签),由多个基本选择器,通过组合的方式。
1.后代选择器
元素1 元素2…{ 属性:值} (元素1包含2)
可以是任意的基础选择器。
2.子选择器
元素1>元素2{ } (只会选择第一代儿子)
3、并集选择器
元素1,元素2 { }(元素1和元素2)并集选择器竖着写
4、伪类选择器
用于向某些选择器添加特殊效果,比如给链接加效果,或选择第1、第n个元素。链接伪类、结构伪类等
A:link 选择所有未被访问链接
A:visited 选择所有已被访问的链接
A:hover 选择鼠标指针位于其上的链接
A:active 选择活动链接(鼠标下未弹起的链接)
链接伪类的注意事项:为了确保链接生效,必须按照(LVHA)的顺序声明。
重点是 a{}和a:hover{}的写法。
:Foucs 获得焦点的表单元素
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器主要针对表单元素。
九、CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示。比如<div>自己占一行,比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型。
1.块元素:<div>最典型的块元素。
特点:1、比较霸道,自己独占一行。2、高度、宽度、外边距、内边距都可以控制。3、宽度默认是容器(父级宽度)的100%、4、是一个容器及盒子,里面可以放行内或者块级元素。
注意事项:文字类的元素内不能使用块元素。例如<p>/<h1>等。
2.行内元素:<span>是最典型的行内元素。
特点:1、相邻行内元素在一行上,一行可以显示多个。2、高宽直接设置是无效的,3、默认宽度就是他本身内容的宽度。4、行内元素只能容纳文本或其他行内元素。
注意:链接里面不能放链接。特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全。
3.行内块元素:<img/>、<input/>、<td>
特点:1、相邻元素在一行上,但是之间有空白缝隙,一行可以显示多个(行内元素特点)2、默认宽度就是本身内容宽度(行内元素特点)。3、高度、行高、外边距以及内边距都可以控制(块级元素特点)
4.元素显示模式转换
一个模式转换成另一个模式。 Display:block;(转换为块级元素) display:inline(转换为行内元素) display:inline-block;(转换为行内块元素)
十、CSS的背景
背景颜色、背景图片、背景平铺等
Background-color:transparent|color
Background-image:none |url(url)
Background-repeat:repeat(平铺),no-repeat(不平铺))repeat-x(沿着x轴平铺)
Background-position:x,y;(x,y是坐标,也可以使用方位名词left,top,right,center或精确单位,精确单位和方位名词可以混合使用)
背景图像固定(滚动): background-attachment: scroll (滚动的)|fixed(固定的)
复合属性Backgroud的顺序一般为:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。(background:black url(images/bg.png) no-repeat fixed top center)
背景半透明:rgba(0,0,0,0,0.3) 最后一个参数alpha透明度,取值范围在0~1之间。
十一、CSS三大特性
层叠性:相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则:就近原则,
继承性:text,font,line-,color属性
Font:12px/1.5 ‘Microsoft YaHei’ 这个1.5就是行高是当前元素的文字的font-size的1.5倍。
优先级:继承或者* 元素选择器 类选择器 伪类选择器 ID选择器 行内样式 style=”” !impotant 重要的
复合选择器:权重叠加