CSS3 自学笔记（二）

一. Emmet语法：提高编写CSS和HTML的速度

 

        快速生成HTML：

        .demo$*5将会生成div class="demo1"至"demo5"。

        div{emmm}*5将自动生成<div>emmm</div>。

        快速生成CSS样式：

每个单词的首字母缩写加内容        比如ti20        text-indent:20px;

二. CSS的复合选择器

        后代选择器，子选择器，并集选择器，伪类选择器

        通过两个或多个基础选择器通过不同方式组合而成。

        1. 后代选择器（重要）

可以选择父元素里面的子元素（只要是元素1的后代都可以）。

元素1 元素2 {样式声明}
ol li {
    color: pink;
}

        2. 子选择器（重要）

选择某元素的最近一级子元素（亲儿子）

元素1 > 元素2 {样式声明}
div > p {    
    color: red;
}

        3. 并集选择器（重要）

选择多组标签，为他们定义相同的样式。

标签1, 标签2{
    样式
}
div, p{
    color: pink;
}

最后一个基础选择器后面不需要加逗号。

        4. 伪类选择器

链接伪类选择器：用于向某些选择器添加特殊的效果，比如选择第一个和第n个元素。

         注意点：

（1）为确保生效，按照顺序声明link visited hover active。love hate

（2）链接具有默认样式，需要单独给样式

开发中一般写做

a {
    color: black;
    text-decoration: none;
}
a:hover{
    color: skyblue;
    text-decoration: underline;
}

focus伪类选择器：用于选取获得焦点（光标）的表单元素

input:focus {
    background-color: yellow;
}

三. CSS的元素显示模式

        元素以什么方式进行显示，比如<div>自占一行，<span>一行占多个

HTML元素一般分为块元素(<div>)和行内元素。

        1. 块元素：

 文字类的元素或者文字类块级标签里面也不能放其他块级元素。

如p或h1-h6中不能放div。

        2. 行内元素

 注意：链接a中可以放块级元素，但是给<a>转换以下块级模式最安全。

        3. 行内块元素

 注意：可以设置原本为行内元素的高度，行高，外边距以及内边距。

四. 元素显示模式的转换

        将行内元素转换为块元素

a {
     width: 150px;
     height: 50px;
     background-color: pink;
     /* 将行内元素转换成块内元素 */
     display: block;
}

        块元素转换成行内元素

div {
     width: 150px;
     height: 50px;    //无效
     background-color: pink;
     display: inline;
}

        转换成行内块元素

display: inline-block;

        实现文字垂直居中的代码（小技巧噢）

        让盒子的高度等于文字的行高。

五. CSS的背景

        给页面元素添加背景样式：颜色，图片，平铺，位置，固定等

        1. 背景颜色：background-color: transparent（透明） | 颜色

        2. 背景图片：background-image

非常便于控制位置（精灵图也是一种应用场景）。

background-image: none | url(图片地址);

        3. 背景平铺：background-repeat

background-repeat: no-repeat | repeat-x | repeat-y;
//默认平铺

        4. 背景图片位置：background-position

background-position: x  y;

        如果参数是方位名词， 则x y的顺序不影响。若只给出一个方位名词，则另一个默认居中显示。 

        如果参数是精确单位，第一个肯定是x坐标，第二个肯定是y坐标。若只有一个，那么一定是x，y居中对齐。

        可以方位名词和精准单位混合使用，但第一个一定是x，第二个一定是y。

        5. 背景图像固定（背景附着）：background-attachment

background-attachment: scroll | fixed;

        scroll为默认值。

        6.背景复合写法

        一般习惯约定顺序为：颜色 地址 平铺 滚动 位置。空格隔开。

        7. 背景色半透明

background: rgba(0,0,0,0.3); /*a为透明度取值在0-1之间*/

六. 总结

 七. 综合案例：五彩导航