02/03-Emmet语法
使用缩写来快速生成HTML结构和CSS样式语法;
(1)在HTML中:
输入标签名再按tab键,直接生成标签;
输入标签名*数字,再按tab键,直接生成多个相同的标签;
输入父标签名>子标签名,再按tab键,直接生成父子两级标签;
输入标签名+另一标签名,再按tab键,直接生成并列的两级标签;
输入 .类名 或者 #id名,生成默认的带有该class名称的div标签;
(如果想要其他标签,输入 标签名. 类名 或者 标签名#id名)
.类名$*数字(自增符号$),生成class名称按顺序排列的多个标签;
输入 标签名{双标签中间的文字},直接生成中间有内容的标签。
(2)在CSS中:
常用简写
输入连在一起的 属性名单词首字母、属性值 ,再按tab键,直接生成 属性:属性值;
05~13 CSS复合选择器
复合选择器建立在基础选择器的基础上,由基础选择器组合而成的;
分为:后代选择器、子选择器、并集选择器、伪类选择器等。’
(1)后代选择器:又称为包含选择器,可以选择某一父元素里面的一类子元素;(嵌套形式的标签即为父子关系)
元素可以是任意基础选择器,标签、id或类选择器等;
多层嵌套的标签可以通过叠加多个基础选择器来选择;
父元素 子元素 ... { 样式声明 }
(2)子选择器:选择离父元素最近一级的子元素(亲儿子);
父元素>子元素 { 样式声明 }
(3)并集选择器:同时选择多组标签,将它们设置成相同的样式;
元素1, 元素2,... { 样式声明 }
(4)伪类选择器:特点是用冒号:表示,包括链接伪类选择器、focus伪类选择器等;
- 链接伪类选择器是针对链接标签<a>:
a:link | 设置所有从未被访问过的链接的样式 |
a:visited | 设置所有被访问过的链接的样式 |
a:hover | 设置所有鼠标经过时链接的样式 |
a:active | 设置所有被点击但未放下的链接的样式 |
定义样式时,要按 :link、:visited、:hover、:active 的顺序来写;
a链接标签在浏览器中有默认样式(蓝色字体带下划线),所以实际开发中要给链接单独设置样式;
实际开发中的写法:
a {
color: #333; /*黑色*/
text-decoration: none;
}
a:hover {
color: #369; /*深蓝色*/
}
- focus伪类选择器
鼠标选中表单元素时,可以设置成一种不同的样式:
input:focus { 样式声明 }
14~19 CSS的元素显示模式
是指元素(标签)以什么方式进行显示,HTML标签一般分为块元素和行内元素。
(1)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>等,
特点有以下几点:
独占一行;
高、宽度、内、外边距都可以控制,默认宽度与父级的宽度相同;
一个容器或盒子里面可以放行内元素或者块元素,但文字类元素(p、h1...)里面不能放块元素。
(2)常见的行内元素有<a>、<strong>、<em>、<del>、<ins>、<span>等,也称为内联元素;
特点有以下几点:
相邻的行内元素显示在一行上;
高、宽直接设置是无效的,默认宽度是本身内容的宽度;
行内元素内部只能放文本或者其他行内元素;
链接元素<a>里不能再放链接,但可以放块元素,最好把<a>转换成块级模式。
(3)行内块元素同时具有块元素和行内元素的特点,如<img />、<input />、<td>;
特点有以下几点:
相邻的行内元素显示在一行上,但它们之间会有空白缝隙;
高、宽度、内、外边距都可以控制,默认宽度是本身内容的宽度。
元素显示模式的转换:
例如要增加链接标签<a>的触发范围,给它设置高度、宽度,就要把<a>转换成块级模式;
做法是在CSS的选择器中,样式声明之后,加入:
display: block;
若要将块元素转换为行内元素,则 display: inline;
若要(span)转换为行内块元素,则 display: inline-block;
22- 单行文字垂直居中
原理:让文字的行高(line-height)等于盒子的高度(height)。
23~34 CSS的背景
(1)定义元素的背景颜色:
background-color: 颜色值 或 transport(默认);
如果想要背景颜色有透明度,则在background属性中加入参数a(alpha)表示透明度,取值在0~1之间:
background: rgba ( r值, g值, b值, a值 );
(2)背景图片,常见于logo、装饰性小图片或大背景图:
background-image: url(...) 或 none(默认);
(3)背景图像平铺:
background-repeat: repeat(默认x\y上都平铺);
no-repeat(不平铺);
repeat-x(沿x轴平铺);
repeat-y(沿y轴平铺);
(4)背景图像位置:
background-position: x y;
x、y坐标可以是精确数值,如百分数、20px,此时:
有严格的坐标顺序x、y;
可以只写一个数值,则这个值一定是x坐标,y坐标则默认为居中。
x、y坐标也可以是方位名词,即 left\center\right(水平x方向)、top\center\buttom(垂直y方向),此时:
两个值的前后顺序不会改变效果;
可以只写一个值,另一个会默认为center。
x、y坐标可以将精确数值与方位名词混合使用(混合单位),此时:
有严格的坐标顺序x、y。
(5)背景图像固定(背景附着)
background-attachment: scroll(背景图像岁对象内容滚动);
fixed(固定不动);
背景复合写法:可以将背景属性合并写在一个background属性中;
属性值没有规定的顺序,但是习惯顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;
(6)背景颜色线性渐变
background: -webkit-linear-gradient (起始方向, 颜色1, 颜色2,... );
linear-gradient 必须加浏览器私有前缀 -webkit;
起始方向可以是 方位名词或者度数,默认是top。
9.5/7