前端入门视频笔记 CSS3（二） P93-128

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