• CSS3(一)概要、选择器、特殊性与刻度单位


    web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成。

    一、CSS3概要

    CSS(Cascading Style Sheet)是层叠样式表的意思,CSS3就是在CSS2.1的基础上升级的CSS新版本,属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

    1.1、特点

    1.2、效果演示

    纯CSS3画出小黄人并实现动画效果

    HTML页面:

     View Code

    CSS样式:

     View Code

    相册演示的代码可以在示例中下载到。

    1.3、帮助文档与学习

    权威的帮助文档是最好的学习资料,CSS2的帮助,非常详细:

    CSS3的帮助文档:

    点击下载帮助文档

    二、选择器

    在使用CSS时我们首先要做的事情是找到元素,在写相应的样式,在CSS2.1中最常使用的是三种选择器:

    a)、ID选择器:以#开始,引用时使用id,如id="div1"

    #div1

    {

       color:red;

    }

    b)、类选择器:以.开始,使用class属性引用,可以有多个,如class="cls1 cls2 cls3"

    .cls1

    {

       

    }

    c)、标签选择器:以标签名称开始,如p,span,div,*

    div span

    {

       font-size:14px;

    }

    当然还有如伪类选择,a:hover,a:link,a:visted,a:active。

    在CSS3中新增了很多的选择器,如果大家会jQuery,jQuery中多数选择器在CSS3中都可以直接使用。

    1.1、基础的选择器

    红色字体中选择器的区别是:p.info的意思是p元素中必须有class="info"属性将被选择,p .info是选择后代元素,示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>选择器</title>
            <style type="text/css">
                p.info{
                    color: red;
                }
                p .info{
                    color: blue;
                }
            </style>
        </head>
        <body>
            <h2>选择器</h2>
            <p class="info">p1</p>
            <p>
                    <span class="info">span1</span>
                    <p>p3</p>
            </p>
        </body>
    </html>
    复制代码

     运行结果:

    1.2、组合选择器

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1 span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                <span>span1</span>
                <div id="div2">
                    <span>span2</span>
                </div>
            </div>
            <span>span3</span>
        </body>
    </html>
    复制代码

    运行结果:

     示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1 > span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                <span>span1</span>
                <div id="div2">
                    <span>span2</span>
                </div>
            </div>
            <span>span3</span>
        </body>
    </html>
    复制代码

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>组合选择器</title>
            <style type="text/css">
                 #div1 + span
                 {
                     color: red;
                 }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <div id="div1">
                <span>span1</span>
                <div id="div2">
                    <span>span2</span>
                </div>
            </div>
            <span>span3</span>
            <span>span4</span>
        </body>
    </html>
    复制代码

    1.3、属性选择器

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>属性选择器</title>
            <style type="text/css">
                div[id][class~=cls1] {
                    background: lightgreen;
                }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <span>span0</span>
            <div id="div1" class="cls1">
                div1
            </div>
            <div id="div2" class="cls1 cls2">
                div2
            </div>
        </body>
    
    </html>
    复制代码

     运行结果:

    1.4、伪类

     示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>伪类</title>
            <style type="text/css">
               td:first-child
               {
                     background: lightcoral;
               }
            </style>
        </head>
        <body>
            <h2>组合选择器</h2>
            <table border="1" width="100%">
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
            </table>
            <hr />
            <table border="1" width="100%">
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
            </table>
        </body>
    
    </html>
    复制代码

     运行结果:

     练习:实现隔行换色,当鼠标悬停在每一行上时高亮显示为黄色,按下时高亮红色。

    复制代码
            <style type="text/css">
               tr:nth-child(2n+1){
                    background:lightblue;
               }
               tr:hover{
                   background: yellow;
               }
               tr:active{
                   background: orangered;
               }
            </style>
    复制代码

    1.5、伪元素

    标准的伪元素应该使用::,但单:也行,只是为了兼容。

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>伪类</title>
            <style type="text/css">
                a::before {
                    content: "网站";
                    display: inline-block;
                    background: red;
                    color: white;
                }
            </style>
        </head>
        <body>
            <h2>伪元素</h2>
            <a href="http://www.baidu.com">百度</a>
            <a href="http://best.cnblogs.com">博客园</a>
        </body>
    </html>
    复制代码

    运行结果:

    三、特殊性(优先级)

    a)、同类型,同级别的样式后者先于前者
    b)、ID > 类样式 > 标签 > *
    c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式  
    d)、具体 > 泛化的,特殊性即css优先级
    e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

    内嵌样式:内嵌在元素中,<span style="color:red">span</span>

    内部样式表:在页面中的样式,写在<style></style>中的样式

    外联样式表:单独存在一个css文件中,通过link引入或import导入的样式
    f)、!important 权重最高,比 inline style 还要高

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>优先级</title>
            <style type="text/css">
                * {
                    color: yellow;
                }
                p {
                    color: red !important;
                }
                .cls1 {
                    color: deeppink;
                }
                .cls2{
                    color: blueviolet;
                }
                #p1{
                    color:blue;
                }
            </style>
        </head>
        <body>
            <div>
                <p id="p1" class="cls2 cls1" style="color:#ccc">p1</p>
                <span>span1</span>
            </div>
        </body>
    </html>
    复制代码

    运行结果:

    3.2、计算特殊性值

    important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
    权重、特殊性计算法:
    CSS样式选择器分为4个等级,a、b、c、d
    1.如果样式是行内样式(通过Style=“”定义),那么a=1,1,0,0,0 
    2.b为ID选择器的总数 0,1,0,0 
    3.c为属性选择器,伪类选择器和class类选择器的数量。0,0,1,0 

    4.d为标签、伪元素选择器的数量 0,0,0,1 

    5.!important 权重最高,比 inline style 还要高

     比如结果为:1093比1100,按位比较,从左到右,只要一位高于则立即胜出,否则继续比较。

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>优先级</title>
            <style type="text/css">
                html body #div1
                {
                    background: red;
                }
                
                .cls1 #div1{  
                    background: blue;
                }
            </style>
        </head>
        <body>
            <div class="cls1">
                <div id="div1">div1
                </div>
                <div id="div2">div2
                </div>
            </div>
        </body>
    </html>
    复制代码

    运行结果:

    因为html body #div1的特殊性值为:0102,而.cls1 #div1的特殊性值为0110,后者胜出。

    四、刻度

    在CSS中刻度是用于设置元素尺寸的单位。

    特殊值0可以省略单位。例如:margin:0px可以写成margin:0 
    一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。 
    长度单位包括包括:相对单位和绝对单位。 
    相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin 
    绝对长度单位包括有: cm, mm, q, in, pt, pc, px

     

    4.1、绝对长度单位

    1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

    4.2、文本相对长度单位

    em
    相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
    body { font-size: 14px; }
    h1 { font-size: 16px; }
    .size1 p { font-size: 1em; }
    .size2 p { font-size: 2em; }
    .size3 p { font-size: 3em; }

    浏览器的默认字体大小为16像素,浏览器默认样式也称为user agent stylesheet,就是所有浏览器内置的默认样式,多数是可以被修改的,但chrome不能直接修改,可以被用户样式覆盖。

    示例代码:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div2{
                    background: blue;
                    height: 5em;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    复制代码

    结果:

    div2的高度为80px,是因为user agent stylesheet默认样式中字体大小为16px,按照这个规则我们可以手动修改字体大小,div2的高度将发生变化。

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5em;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    复制代码

    结果:

    rem

    rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数
    只相对于根元素的大小
    rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。(相对是的HTML元素的字体大,默认16px)

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5rem;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    复制代码

    运行结果:

    示例:

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>em与rem</title>
            <style type="text/css">
                html {
                    font-size: 10px;
                }
                body {
                    font-size: 16px;
                }
                #div1 {
                    font-size: 20px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 5rem;
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    Hello em
                </div>
            </div>
        </body>
    </html>
    复制代码

    结果:

    按理说高度为5*10px=50像素高度,但这里为60,是因为chrome浏览器限制了最小字体大小为12px,从上图可以看出。

    4.3、Web App与Rem

    为了实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的tmall就使用这种办法,示例如下:

    示例一:

     View Code

    运行结果:

     

    示例二:

    复制代码
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>web app 与rem</title>
            <style type="text/css">
                html {
                    font-size: 20px;
                }
                body {
                    font-size: 16px;
                }
                #div2 {
                    color: white;
                    background: blue;
                    height: 3rem;
                     3rem;
                    font-size: .7rem;
                }
            </style>
        </head>
    
        <body>
            <div id="div2">
                Hello rem
            </div>
            <script type="text/javascript">
                function resize() {
                    var w = document.documentElement.clientWidth;
                    document.documentElement.style.fontSize = w * 20 / 290 + "px";
                }
                window.onresize =resize;
                
                resize();
            </script>
        </body>
    
    </html>
    复制代码

    运行结果:

     

    变屏幕变宽时元素大小也随之发生变化,但这里并没有考虑高度,但为响应式布局与hack提供了思路。

  • 相关阅读:
    redis 缓存验证码 步骤
    方法返回值 前面的<T>是什么?
    spring boot的运行原理
    在本地tomcat中调试Spring boot项目遇到的一些问题
    UEditor中上传图片的步骤
    总结彻底解决Spring MVC+Mybatis中文乱码问题
    ueditor1.4.3二次开发添加自定义Dialog
    UEditor之图片上传如何和真实项目结合
    UEditor之实现配置简单的图片上传示例 (转)
    Java比较运算符
  • 原文地址:https://www.cnblogs.com/xiao-love-meng/p/6149626.html
Copyright © 2020-2023  润新知