HTML5之css3选择器&文字与字体相关样式

html5之css3选择器&文字与字体相关样式

目录

一、css3的概念、优势及应用

二、渐进增强和优雅降级的简介

三、css3部分新增选择器的语法及应用场景

---

一、css3的概念、优势及应用

1.1 css3的概念
    css3即层叠样式表（cascading stylesheet）
1.2 css3的优势
    css3是css技术的升级版本，css3语言开发是朝着模块化发展的
    模块包括：盒子模型、列表模型、超链接方式、语言模块、背景和边框、
    文字特效、多栏布局等
1.3 css3的应用
    css用于控制网页的样式和布局、css3是最新的css标准
    css3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持css2
1.4 css3的选择器
    选择器是css3中的一个重要内容。使用它可大幅度提高开发人员书写或修改样式表时的工作效率
    在css3中，提倡使用选择器来让样式与元素直接绑定起来
    这样的话，在样式表中什么样式与什么元素匹配变得一目了然，修改起来也很方便。
    不仅如此，通过选择器，我们还可以实现各种机构复杂的制定，
    同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。

二、渐进增强和优雅降级的简介

2.1 简介
    渐进增强一个概念和优雅降级印象中是随着css3流出来的一个概念
    由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，
    所以在高级浏览器中使用css3，而低级浏览器只保证最基本的功能。
    乍一看两个概念差不多，都是关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容
    以及这种不同造成的工作流程的差异
2.2 渐进增强
    什么是渐进增强呢？渐进增强 progressive enhancement
    针对低级浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互
    等改进和追加功能达到更好的用户体验
2.3 优雅降级
    优雅降级 graceful degration
    一开始就构建完整的功能，然后在针对低浏览器进行兼容。
2.4 区别
    优雅降级是从复杂的现状开始，并试图减少用户体验的供给
    而渐进增强则是从一个非常基础的，能够起作用额版本开始，并不断扩充，以适应未来环境的需要
    优雅降级意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
2.5 语法
    渐进增强的写法
    .transtion{
        -wenkit-transtion:all .5s;
        -moz-transtion:all .5s;
        -o-transtion:all .5s;
        transtion:all .5s;}
    优雅降级的写法
    .transtion{
        transtion:all .5s;
        -o-transtion:all .5s;
        -moz-transtion:all .5s;
        -webkit-transtion:all .5s;}

三、css3部分新增选择器的语法及应用场景

3.1 属性选择的语法及应用
    在html中，通过各种各样的属性，我们可以给元素增加很多附加信息。
    例如：通过width属性，我们可以指定p元素的宽度
    通过id属性，我们可以将不同的p元素区分，并且通过js来控制这个p元素的内容和状态。
    3.1.1 e[att]（css2.0） 语法：元素[属性]{css样式}
        用于选取带有指定属性的元素
        例如：
        css：<style type="text/css">
            img[alt]{border:1px black solid;}
        </style>
        结构：<img src="" alt=""/>
        <img src=""/>
        用过上面这样，css样式就只会作用于，里面有alt属性的img元素了。
    3.1.2 e[att="val"] （css2.0）语法：元素[属性="属性值"]{css样式}
        用于选取带有指定属性和值的元素
        例如：
        css：<style type="text/css">
            img[alt="piture"]{border:1px black solid;}
        </style>
        结构：<img src="" alt="piture"/>
        <img src="" alt=""/>
        当两个元素里面有相同的属性时，用属性值来区分。
        用过上面这样，css样式就只会作用于，里面即有alt属性而且alt属性值是piture的元素了。
    3.1.3 e[att~="val"] （css2.0）语法：元素[属性~="属性值"]{css样式}
        用于选取属性值中包含指定词汇的元素，选取具有att属性且属性值为一用空格分隔的字词列表
        其中一个等于val的e元素（包含只有一个值且该值等于val的情况）
        例如：
        css：<style>
            p[class~="a"] {border: 2px solid #000;}
        </style>
        结构：<p class="a">1</p>
        <p class="b">2</p>
        <p class="a b">3</p>
        上面这样css样式只会作用于，class属性值是a和属性值中有a且有空格的元素。
    3.1.4 e[att|="val"] （css2.0）语法：元素[属性|="属性值"]{css样式}
        用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
        例如：
        css：<style>
            p[class|="a"] {border: 2px solid #000;}
        </style>
        结构：<p class="a-test">1</p>
        <p class="b-test">2</p>
        <p class="c-test">3</p>
        上面这样css样式只会作用于属性值中有a且是整个单词的元素
    3.1.5 e[att^="val"]（css3.0）语法：元素[属性^="属性值"]{css样式}
        匹配属性值以指定值开头的每个元素
        例如：
        css：<style>
            p[class^="a"] {border: 2px solid #000;}
        </style>
        结构：<p class="abc">1</p>
        <p class="acb">2</p>
        <p class="bac">3</p>
        上面这样css样式作用于，属性值开头是a的元素
    3.1.6 e[att$="val"]（css3.0）语法：元素[属性$="属性值"]{css样式}
        匹配属性值以指定值结尾的每个元素
        例如：
        css：<style>
            p[class$="c"] {border: 2px solid #000;}
        </style>
        结构：<p class="abc">1</p>
        <p class="acb">2</p>
        <p class="bac">3</p>
        上面这样css样式只作用于，属性值以c结尾的元素。
    3.1.7 e[att*="val"]（css3.0）语法：元素[属性*="属性值"]{css样式}
        匹配属性值中包含指定值的每个元素。
        例如：
        css：<style>
            p[class*="b"] {border: 2px solid #000;}
        </style>
        结构：<p class="abc">1</p>
        <p class="acb">2</p>
        <p class="bac">3</p>
        上面这样css样式只会作用于属性值中包含b的元素。
3.2 伪类选择器的语法及应用
    3.2.1 ：first-child与：last-child选择器
        单独指定第一个子元素和最后一个子元素的样式
        例如：
        css：<style type="text/css">
            li:first-child{background:#0f0}
            li:last-child{background:#f00}
        </style>
        结构:<ul>
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
        </ul>
        上面这样css样式只会分别作用于，第一个li和最后一个li
    3.2.2 ：nth-child与：nth-last-child选择器
        对指定序号的子元素使用样式
        例如：
        css：<style type="text/css">
            li:nth-child(2){background:#0f0}
            li:nth-last-child(2){background:#f00}
        </style>
        结构:<ul>
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
        </ul>
        上面这样css样式只会分别作用于，正数第二个和倒数第二个元素。
    3.2.3
        对所有第奇数个子元素或第偶数个子元素使用样式
        ：nth-child（odd）{}//所有正数下第奇数个子元素
        ：nth-child（even）{}//所有正数下第偶数个子元素
        ：nth-last-child（odd）{}//所有倒数上去第奇数个子元素
        ：nth-last-child（even）{}//所有倒数上去第偶数个子元素
        例1：
        css：<style>
            h2:nth-child(odd){color:#f66}
            h2:nth-child(even){color:#f00}
        </style>
        结构：<p>
            <h2>标题</h2>
            <p>内容</p>
            <h2>标题</h2>
            <p>内容</p>
            <h2>标题</h2>
            <p>内容</p>
            <h2>标题</h2>
            <p>内容</p>
        </p>
        说明：nth-child选择器在计算子元素是第奇数个元素还是偶数个元素时
        是连同父元素的所有子元素一起计算的
        换句话说就是h2:nth-child(odd)指代的是当p中的第奇数个子元素
        如果是h2子元素的时候使用
        例2：
        css：<style>
            li:nth-child(odd){font-size: 18px;}
            li:nth-child(even){font-size: 36px;}
        </style>
        结构：<p >
            <h2>标题a</h2>
            <ul>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
            </ul>
        </p>
        说明：父元素是列表的时候，因为列表中只可能有列表项目一种子元素
        所以不会有问题，而当父元素是p的时候，因为p的子元素中有了不止一种子元素
        所以引起了问题的产生