码迷,mamicode.com
首页 > Web开发 > 详细

大前端应用开发与架构设计-使用CSS美化Web站点(一)

时间:2018-06-26 12:33:30      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:pack   匹配   更改   分析   淘宝网   form   cti   http   art   

大前端应用开发与架构设计-使用CSS美化Web站点(一)

3.1 CSS概述

CSS(Cascading Style Sheets)即层叠样式表,是用来控制HTML元素的外观样式(例如字体颜色、大小以及元素的定位等等),目前最新的版本是CSS3。

网页中使用HTML+CSS能够实现网页的元素与外观样式分离,也就是HTML只负责页面元素以及语义部分,CSS负责页面的外观样式,这也是W3C组织推荐的做法,尽量使用CSS取代HTML属性,因为如果让HTML既负责页面结构,又要负责页面样式,那样结构和样式会显得十分臃肿和混乱,可维护性和可重用性降低。

为了更加直观的理解CSS在网站总的作用,这里以淘宝网为例子。

带CSS的淘宝网首页
技术分享图片

不带CSS的淘宝网首页
技术分享图片

如何删除样式呢?如下图所示
只要在开发者工具的Elements选项中删除<header></header>标签中的<style></style>内容即可
技术分享图片

3.2 CSS样式基本使用

CSS样式按照使用方式有三种,分别是行内样式,内部样式表和外部样式表。

  • 行内样式表:用于控制页面中局部(例如某篇文章的一行)的内容样式,使用方式是在标签中定义属性style="属性:值;属性:值"即可,日常开发中较少使用。

  • 内部样式:用于控制当前页面的内容样式,使用方式是在<head></head>标签内使定义<style></style>元素,然后将样式定义写在<style></style>元素内即可,此方式用于控制单页面,无法实现复用样式。

  • 外部样式:用于控制网站的内容样式,使用方式是使用<link href="样式路径" type="text/css" rel="stylesheet"/>即可,真正实现了网页的结构和内容样式的分离,也便于提高复用性(即多个网页使用同一个样式文件),也是日常开发中最常用的样式使用方式。

如下应用案例(style_ref_type.html)所示,展示了三种样式的使用方式

在web/css路径下建立外部样式文件(out.css)

div:last-child{
    color: blue;
}

#out_style_type{
    font-size: 28px;
    font-family: ‘Courier New‘, Courier, monospace;
    font-style: italic;
    font-weight: 400;
    
}

行内样式、内部样式和外部样式的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三种样式表的使用</title>

    <style>
        
        div:nth-child(1){
            color: red;
        }
        
    </style>

    <!--引入外部的样式到当前的页面中-->

    <link href="../../css/out.css" type="text/css" rel="stylesheet"/>

</head>
<body>
    
    <div>内部样式表,在页面的header标签中定义</div>
    <!--行内样式 通过style属性设置样式 修改局部元素时使用-->
    <div style="color:green;font-size:26px;">行内样式表,在元素中使用style属性定义样式</div>
    <div id="out_style_type">引入外部文件的样式,实现HTML和CSS分离,是最常用的样式使用方式</div>
    
</body>
</html>

这里首先使用内部样式,因为在进行大型项目开发之前页面基本无需复用样式。
考虑到CSS是作用于HTML元素,所以先准备HTML元素,应用案例(css_style.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS样式的定义以及标签选择器的使用</title>
</head>

<body>
    <h1>前端学习技术指南</h1>
    <hr/>
    <p>
        主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
    </p>

    <p>
        开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
    </p>
</body>

</html>

然后在<head></head>标签内部增加一对<style></style>标签,网页的所有内部样式都写在<style></style>标签内,然后分别修改<h1></h1>标题和<p></p>段落的字体颜色以及<p></p>段落的字体大小,代码片段如下所示

      <style>
        h1 {

            color: aqua;

        }

        p {
            color: blue;
            font-size: 14px;
        }
    </style>

CSS样式使用格式如下

选择器{
    属性名:属性值;
    属性名:属性值;
}

其中选择器就是CSS样式作用于HMTL对象,也就是匹配HTML页面中的元素,花括号内({})是对该对象具体的样式设置
属性名和属性值以"键值对"的形式出现,它们中间使用冒号(:)分割,每个属性以分号(;)结束。

如果想在样式中间(即<style></style>标签内)增加注释说明的,便于程序后期维护,可以使用/**/来添加注释,需要注意的是注释不能嵌套,完整应用案例(css_style.html)如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的使用</title>

    <!-- 定义内部样式表-->
    <style>
        /*
        样式定义的格式为 
        选择器{
            属性名:属性值;
        }
        选择器就是CSS作用的HTML元素,这里使用了h1,p
        */

        h1 {

            color: aqua;

        }

        p {
            /*如果元素有多个属性,使用分号隔开*/
            color: blue;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <h1>前端学习技术指南</h1>
    <hr/>
    <p>
        主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
    </p>

    <p>
        开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
    </p>
</body>

</html>

3.3 CSS字体样式属性

字体样式属性主要用于控制字体的大小(font-size)、字体类型(font-family)、颜色(color)、加粗(font-weight)、倾斜(font-style)等外观样式。

font-size属性用于控制字体的大小,通常网页中使用的字体大小为14px+,在日常开发时尽量使用偶数(例如14,16,18)数字字号,如下代码片段所示,修改h1标题的字体大小为26px。

   h1{
            /*设置字体大小*/
            font-size: 26px;
        }

font-family属性用于设置字体,Windows系统默认是微软雅黑,当然网页也可以设置多个字体,字体之间使用逗号(,)隔开即可。
如果字体是中文(例如宋体)或者英文字体包含空格,#和$时必须使用引号("")括起来,例如‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace,如果多个字体中包含了中文和英文字体,那么英文字体必须在中文字体之前。
在日常开发中推荐使用系统默认的字体,那样可以在任何浏览器中都能够正确的显示。

需要注意的是在旧版本(例如Windows XP)系统中不支持将font-family的属性值设置为类似微软雅黑或者宋体的中文,这里可以使用Unicode编码\5B8B\4F53\5FAE\8F6F\96C5\9ED1分别来表示宋体和微软雅黑中文字体,这两种字体也是最常用的中文字体。如下代码片段所示展示了字体设置的常用案例

       p{
            font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace,"\5B8B\4F53","\5FAE\8F6F\96C5\9ED1"
        }

font-weight属性用于设置字体的粗细,常用属性值有normal和bold,属性值还可以使用数字(100-900)表示,其中normal等价于400,bold等价于700。

 span{
            font-weight: 400;
        }

font-style属性用于设置字体的风格(主要是倾斜或者不倾斜),当属性值为normal时表示不倾斜,当属性值为italic时表示倾斜。

/*设置超链接标签的文本加粗和倾斜*/
        div a{
            font-weight: 700;
            font-style: italic;
        }

        div em{
            /*让斜体摆正*/
            font-style: normal;
        }

字体的应用案例(font_style.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体样式的使用</title>

    <style>
    
        h1{
            /*设置字体大小*/
            font-size: 26px;
            /*设置字体颜色*/
            color: aquamarine;
            /*设置字体*/
            font-family:"微软雅黑";
        }


        p{
            /*网页中普遍使用14px+的字体大小*/
            font-size: 14px;
            /*如果有多个字体,使用逗号分隔,字体名包含空格 使用引号括起来*/
            font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace
        }

        h3{
            font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman‘, serif;
            font-size :22px;
            color: aqua;

        }

        /*设置div下的p标签样式*/
        div p{
            font-family: "\5B8B\4F53","\5FAE\8F6F\96C5\9ED1";
            font-size: 18px;
            color:red;
            
        }

        span{
            font-weight: 400;
        }

        /*设置超链接标签的文本加粗和倾斜*/
        div a{
            font-weight: 700;
            font-style: italic;
        }

        div em{
            /*让斜体摆正*/
            font-style: normal;
        }

    </style>
</head>
<body>
        
        <h1>前端学习技术指南</h1>
        <hr/>
        <p>
            主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
        </p>
    
        <p>
            开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
        </p>

        <div>
                <h3>学习编程的方法</h3>

                <p>看视频、看书、写代码、写博客</p>

                <span>与行内人交流,参加行业大会</span>

                <p>分析开源项目</p>

        </div>
        <div>
            <h4>程序员常去的网站</h4>
            <a href="https://www.csdn.net">csdn</a>
            <a href="https://www.cnblogs.com">cnblogs</a>
            <a href="https://www.51cto.com">51cto</a>
            <a href="http://www.chinaunix.net">chinaunix</a>
            <a href="https://www.oschina.net">oschina</a>
      
        </div>

        <div>
            <em>斜体内容</em>
        </div>
</body>
</html>

在设置font属性时可以采用一种比较简单的写法,如下所示

选择器{font:font-style font-weight font-size font-family},需要注意的是属性值顺序是固定不变的,其中font-sizefont-family属性值是必须设置的。

3.4 CSS基本选择器

在大型门户网站(腾讯、网易、新浪、搜狐)中,HTML元素成千上万,如果想要修改某些元素的样式,那么首先必须得找到元素。在CSS中,选择需要添加样式的元素称为选择器。

3.4.1 标签选择器

标签选择器是用来更改页面指定标签(元素)的外观样式,其语法格式为

标签名称{
    属性名:属性值;
}

,其最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式,应用案例(tag_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器的使用</title>

    <style>
        /*标签选择器:修改指定标签的样式,会更改所有指定标签的样式*/

        p{
            font-size:18px;
            font-family: ‘Courier New‘, Courier, monospace;
        }

        h3{
            color: deepskyblue;
        }
    </style>
</head>

<body>

    <h1>前端学习技术指南</h1>
    <hr/>
    <p>
        主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
    </p>

    <p>
        开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
    </p>


    <h3>学习编程的方法</h3>

    <p>看视频、看书、写代码、写博客</p>

    <p>与行内人交流,参加行业大会</p>

    <p>分析开源项目</p>



</body>

</html>

3.4.2 类选择器

类选择器用于解决标签选择器不能实现个性化样式,其定义格式为

.类选择器名称{属性名:属性值}

如果想要在HTML标签中使用该样式,只需要在HTML元素的开始标签中加上class=类型选择器名称即可,在定义类选择器时命名不能使用中文,建议命名见名知意,多个单词之间使用-隔开,应用案例(class_selector.html)如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类选择器的使用</title>

    <style>
        /*定义三个类选择器,用于改变字体的颜色*/
        .color-aqua{
            color: aqua;
        }

        .color-chartreuse{
            color: chartreuse;
           
        }

        .color-deepskyblue{
            color: deepskyblue;
          
        }

  
    </style>
</head>
<body>
    <div>

        <h1>前端三大主流框架</h1>
        <!--使用上面定义的类选择器-->
        <p class="color-aqua">vue</p>
        <p class="color-chartreuse">angular</p>
        <p class="color-deepskyblue">react</p>
        
    </div>
</body>
</html>

接下来结合标签选择器和类选择器实现Google的Logo,应用案例(google.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用标签和类样式选择器实现Google logo</title>

    <style>
        span{
            font-size: 150px;
            font-family: ‘Courier New‘, Courier, monospace;
            font-weight: normal;
            
        }

        .blue{
            color:blue;
        }

        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

在日常开发中,多个类选择器可以作用在同一个HTML元素中,以便HTM元素能够实现更多的样式效果,多个类选择器使用空格隔开,类选择器的顺序不会影响页面效果,应用案例(multi_class_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多个类选择器的使用</title>

    <style>
        h1{
            font-size: 40px;
            font-family: ‘Courier New‘, Courier, monospace;
            color:chartreuse;
        }

        .font-size{
            font-size: 28px;
        }
        .color{
            color: aqua;
        }

        .font-weight{
            font-weight: 700;
        }
        
    </style>
</head>
<body>
    <div>
        <h1>四大天王</h1>
        <p class="font-family font-size color">刘德华</p>
        <p class="font-weight">张学友</p>
        <p class="font-size">黎明</p>
        <p class="font-family">郭富城</p>
    </div>
</body>
</html>

3.4.3 ID选择器

ID选择器用于改变页面中HTML元素中相同ID的元素的外观样式,其定义格式为

#ID名称{
    属性名:属性值;
    属性名:属性值;
}

应用案例(id_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id选择器的使用</title>

    <style>
        div{
            font-size: 18px;
        }

        #color{
            color: aquamarine;
        }

    
    </style>
</head>
<body>

    <h1>CSS基本选择器</h1>
    <div id="color">标签选择器</div>
    <div>类选择器</div>
    <div>样式选择器</div>
    <div>通配符选择器</div>
</body>
</html>

ID选择器和类选择器的区别是基于HTML元素的ID属性是唯一的,因此ID选择器的样式只能使用一次,而类选择器定义的样式可以反复使用。

3.5 伪类选择器

伪类选择器主要是给其他选择器增加效果,常用的伪类选择器包括链接伪类选择器、结构伪类选择器、目标伪类选择器三种。

3.5.1 链接伪类选择器

链接伪类选择器主要是作用在超链接元素(即<a href=></a>)上,其最常用的样式效果就是当我们访问常见的电商站点(例如淘宝、京东)的超链接元素时,字体的颜色会发生改变。
链接伪类选择器可以设置未访问的链接(a:link),已经访问的链接(a:visited),鼠标移动到超链接上(a:hover)和选定的链接(a:active)四种链接样式结果,应用案例(alink.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接伪类选择器</title>
    <base target="_blank"/>

    <style>

        /*
            linked visisted hover active 顺序固定
            日常开发中通常使用a:hover
        */

        /*未访问的链接*/
        a:link{
            color: red;
            font-size:16px;
            font-weight: 400;
        }

        /*已经访问的链接*/
        a:visited{
            color: orange;
            font-size: 16px;

        }

        /*鼠标悬浮在超链接元素的效果*/
        a:hover{
            color: aqua;
            font-size: 24px;
            font-family: ‘Courier New‘, Courier, monospace;
            font-weight: 700;
        }
      
          /*选定(选中超链接不松开鼠标)的超链接*/
          a:active{
            color: deeppink;
            font-size: 28px;
        }
        


    </style>
</head>
<body>
    <div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
    <div><a href="https://a.jd.com/">优惠券</a></div>
    <div><a href="https://red.jd.com/">闪购</a></div>

</body>
</html>

需要注意的是四种超链接样式效果的顺序是固定的,否则会无法显示设置的样式,日常开发中常用的是a:hover即鼠标移动到超链接上的样式效果,应用案例(alink_app.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超链接伪类选择器的日常应用场景</title>

    <style>
        /*
        
            在日常开发中(以京东网站为例),超链接伪类选择器通常只设置鼠标移动到超链接的样式
        */
        a{
            color: gray;
            font-size: 16px;
        }

        a:hover{
            color:red;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>


        <div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
        <div><a href="https://a.jd.com/">优惠券</a></div>
        <div><a href="https://red.jd.com/">闪购</a></div>
    
</body>
</html>

3.5.2 结构(位置)伪类选择器

CSS3中新增结构伪类选择器,用于页面中同时有多个相同类型元素(例如多个<li></li>)的情况下,修改指定的元素样式。
Selector:first-chid匹配符合Selector选择器,而且必须是其父元素的第一个子节点的元素。
Selector:last-chid匹配符合Selector选择器,而且必须是其父元素的最后一个子节点元素。
Selector:nth-child(n)匹配符合Selector选择器,而且必须是其父元素的第n个子节点的元素。
Selector:nth-last-chid(n):匹配符合Selector选择器,而且必须是其父元素的倒数第n个子节点的元素

,其中n可以是数字,奇数(odd),偶数(even),还可以是数学公式(例如n+1,2n 等等)。

应用案例(pos.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构(位置)伪类选择器</title>

    <style>
        /*选择第一个li元素*/
        li:first-child{
            color: red;
        }
        /*选择最后一个li元素*/
        li:last-child{
            color: aqua;
        }

        /*选择指定的li元素*/
        li:nth-child(3){
            color: darkorange;
        }
    
    </style>
</head>
<body>
    <div>
        <ul>
            <li>first</li>
            <li>second</li>
            <li>third</li>
            <li>fourth</li>
            <li>fifth</li>
        </ul>
    </div>
</body>
</html>

3.5.3 目标伪类选择器

目标伪类选择器(:target)用于页面中活动的目标元素,应用案例(target.html)如下所示,当点击锚链接元素时,跳转到锚链接的内容会改变其样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目标选择器</title>

    <style>
    
    /*当前活动目标元素改变字体颜色*/
    :target{
        color:salmon;

    }
    </style>
</head>
<body>
        <div id="chatper">
                <h1><a href="#first">第一章</a></h1>
                <h1><a href="#">第二章</a></h1>
                <h1><a href="#">第三章</a></h1>
                <h1><a href="#">第四章</a></h1>
                <h1><a href="#">第五章</a></h1>
                <h1><a href="#">第六章</a></h1>
                <h1><a href="#">第七章</a></h1>
                <h1><a href="#">第八章</a></h1>
                <h1><a href="#">第九章</a></h1>
                <h1><a href=#"">第十章</a></h1>
                <h1><a href="#">第十一章</a></h1>
                <h1><a href="#">第十二章</a></h1>
                <h1><a href="#">第十三章</a></h1>
                <h1><a href="#">第十四章</a></h1>
                <h1><a href="#">第十五章</a></h1>
                <h1><a href="#">第十六章</a></h1>
                <h1><a href="#">第十七章</a></h1>
                <h1><a href="#">第十八章</a></h1>
                <h1><a href="#">第十九章</a></h1>
                <h1><a href="#">第二十章</a></h1>
                <h1><a href="#">第二十一章</a></h1>
                <h1><a href=#"">第二十二章</a></h1>
                <h1><a href="#">第二十三章</a></h1>
                <h1><a href="#">第二十四章</a></h1>
          
              </div>
              
          
              <div id="content">
          
                  <div id="first">
          
                      <h1>第一章</h1>
          
                      <div id="chapter1">
          
                          <p>生命不息,编码不止</p>
                      </div>
                  </div>
              </div>
</body>
</html>

3.6 CSS外观样式

CSS外观样式主要用于控制本文颜色(color)、行间距(line-height)、水平对齐方式(text-align)、首行缩进(text-indent)、字间距(letter-spacing)和单词间距(word-spacing)以及CSS3新增的颜色半透明、文字阴影(text-shadow)效果。

3.6.1 文本颜色

在CSS中可以通过color属性定义文本的颜色,常用的取值方式有如下三种:

  1. 预定义的颜色值;例如red,green,blue等等
  2. 十六进制的颜色值,例如#FF0000,也是日常开发中最常用的使用方式
    技术分享图片
  3. RGB值,例如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)

在日常开发中想要定义文本颜色,还要记住十六进制的颜色值比较繁琐,这里我们借助Visual Studio Code的取色器插件(Visual Color Picker)实现设置颜色,安装和使用教程如下图所示

技术分享图片
颜色取色器使用

如下图所示,在使用时只需要使用Ctrl+Shift+P调出命令面板,然后输入VS Color Picker即可选颜色
技术分享图片

颜色取值的应用案例(color.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css更改外观属性</title>

    <style>

        /*使用预定义的颜色值*/
        .red{
            color:red;
        }

        /*
            使用十六进制表示颜色
            十六进制取值 0-9,a-f
        */
        #hex_color{
            color:#82ea8c;
        }
        /*使用rgb颜色值 最大数值为255*/
        li:nth-child(3){
            color: rgb(255, 0, 0);
        }


    
    </style>
</head>
<body>
    <h3>CSS颜色属性的三种取值方式</h3>

    <div id="color">
        <ol>
            <li class="red">预定义的颜色值,例如red,blue,green等等</li>
            <li id="hex_color">十六进制的值,例如#FF0000,#FF6600,日常开发中十六进制是最常用的定义颜色的方式</li>
            <li>RGB代码,如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)</li>
        </ol>
    </div>
</body>
</html>

3.6.2 文本间距

在写新闻文章时,行与行之间是存在一定距离的,这在CSS中称为行间距(line-height),通常行间距取值是字体大小+8px,
还可以指定文本的水平对其方式(text-align),其主要取值包括left,center,right。
而且通常在段落的文本中,首行通常会缩进(text-indent)。
还可以通过letter-spacing调整中文文字之间的距离,通过world-spacing调整英文单词之间的距离,但是通常使用默认间距即可。
文本间距的应用案例(news.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高对其和首行缩进的属性使用</title>

    <style>
        h2 {
            /*文本水平对齐的方式*/
            text-align: center;
        }

        p {
            font-size: 16px;
            /* 行间距(行与行之间的距离)  字体大小+8px*/
            line-height: 24px;
            /*水平对齐方式 主要取值为left center right*/
            text-align: left;
            /*首行缩进 1em表示1个字的宽度*/
            text-indent: 2em;
            /*字间距*/
            letter-spacing: 2px;
            /*英文单词单词间距(对中文无效)*/
            word-spacing: 1px;
        }
    </style>
</head>

<body>

    <div id="news">

        <h2>习大大外交思想引领中国特色大国外交开创新局面</h2>
        <p>中央外事工作会议6月22日至23日在北京召开,这次会议,习大大总结了党的十八大以来我国对外工作取得的历史性成就,回答了新时代如何做好对外工作的重大理论和实践问题,为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
        <p> 做好对外工作的重大理论和实践问题,为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
        <p>作为习大大新时代中国特色社会主义思想的重要组成部分,习大大外交思想是新时代我国对外工作的根本遵循和行动指南。</p>
        <p>Life is half spent before we know what it is.</p>
    </div>
</body>

</html>

3.6.3 CSS3新特性之颜色半透明和文字阴影

如果要想实现颜色半透明的效果,只需要使用color:rgba(r,g,b,a)即可,其中前三个参数和之前介绍的颜色属性的RGB值一样,a表示alpha,取值范围为0-1之间。
文字阴影可以通过text-shadow属性实现,该属性有四个参数值,分别表示文字的水平位置、垂直位置、模糊距离以及阴影颜色,其中水平位置和垂直位置是必须的。
它们的应用案例(css3_feature.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新特性之颜色半透明和文字阴影</title>

    <style>
        ul li {
            font-size: 28px;
            font-style: italic;
        }

        /*要想实现文字半透明效果,使用rgba(arg1,arg2,arg3,arg4) 传递四个参数,其中第四个参数的取值在0-1之间*/

        li:nth-child(1) {
            color: rgb(255, 77, 22);
        }

        li:nth-child(2) {
            color: rgba(255, 77, 22, 0.5);
        }


        ol li{
            font-size: 50px;
            /*水平位置* 垂直位置* 模糊距离 阴影颜色*/
            text-shadow: 5px 11px 3px rgba(255, 0, 0, 0.5);
        }

    </style>
    
</head>

<body>

    <div>
        <ul>
            <li>CSS3新特性之未添加颜色半透明</li>
            <li>CSS3新特性之添加颜色半透明效果</li>
        </ul>
    </div>

    <div>
        <ol>
            <li>CSS3新特性之文字阴影</li>
            <li>CSS3新特性之文字阴影</li>
           
        </ol>
    </div>
</body>

</html>

如果想要更改样式的属性值并立刻查看更改后的效果,可以直接在Chrome提供的开发人员工具中修改,如下图所示
技术分享图片
不过需要指出的是,当修改后获得想要的样式结果后,需要将修改的内容复制到对应的源文件(例如这里的css3_feature.html)中,否则一刷新浏览器,修改的结果将会丢失。

3.6.4 综合案例

使用选择器及其文本样式实现新闻案例(selector_text_style_app.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器及其文本样式的综合案例</title>

    <style>
        body {
            color: #3c3c3c;
            font-size: 16px;
        }

        h1 {
            text-align: center;
            font-weight: 400;
            font-size: 26px;
        }

        p {
            font-size: 16px;
            line-height: 24px;
            text-indent: 2em;
            text-align: left;
            letter-spacing: 1px;

        }
        /*标签选择器*/
        div {
            text-align: center;
            font-size: 14px;
        }
        /*类样式选择器*/
        .xinhua {
            color: #ff8000;

        }
        /* 链接伪类选择器 */
        .xinhua:hover {
            color: #00ffff;
        }
    </style>
</head>

<body>
    <h1>中国国家主席会见法国总理菲利普</h1>
    <div>2018-06-25 12:10:32 来源:
        <span>
            <a class="xinhua" href="http://home.xinhua-news.com/rss/newsdetail/6c76532a6336b9f1a88587df2a24f820/1529899831084">新华网</a>
        </span>
    </div>
    <hr />

    <p>新华社北京6月25日电 国家主席25日在人民大会堂会见法国总理菲利普。</p>
    <p>习大大欢迎菲利普访华,指出马克龙总统和总理先生在半年内相继访华,体现了法方对发展中法关系的高度重视,体现了中法关系的高水平。当前,世界正在发生深刻复杂变化。中方愿同法方一道,不断丰富中法全面战略伙伴关系内涵,继续做国家间相互尊重、合作共赢、交流互鉴的典范。</p>
    <p>习大大强调,中法是全面战略伙伴,双方要强化伙伴意识,坚持相互信任、平等相待,尊重和照顾彼此核心利益和重大关切。充分发挥中法各个对话交流机制和平台作用,增进相互了解,深化互信。要着力深化务实合作,尽早落实已达成的各项合作共识和协议,发挥好重大项目的引领带动作用,加快培育新的合作增长点。中方赞赏法方愿积极参与共建“一带一路”的合作,愿本着共商共建共享原则,实现“一带一路”倡议同法国和欧盟发展战略有效对接。双方要共举多边主义旗帜,坚持公平正义,共同维护国际关系基本准则。中方愿同欧方一道努力,推动中欧关系行稳致远。
    </p>
    <p>菲利普表示,马克龙总统年初对中国成功的访问,再次彰显了法中战略合作的重要性。中国既有长远规划,又能脚踏实地,发展成就令人钦佩。法国对法中关系充满信心,愿继续深化两国经贸、文化交流,推进民用核能、航空航天等战略性合作。“一带一路”倡议是一个面向未来的合作设想,符合全人类的利益。法国在国际事务中坚持独立自主的政策,在多边主义面临挑战的今天,拥有稳定的合作伙伴非常宝贵。法方愿同中方共同致力于促进世界的和平与稳定,加强欧盟同中国的合作关系。
    </p>
    <p> 杨洁篪、王毅、何立峰等参加会见。
    </p>
</body>

</html>

3.7 HTML标签分类

在使用HTML+CSS布局网页时,通常把HTML元素分为块级元素行内元素,之前在讲述使用HTML构建Web站点时使用了典型的块级元素<div></div>和典型的行级元素<span></span>描述了两者在结构上的区别。
块级元素:总是从新行开始,可以容纳其他块级元素(<p></p>以及标题标签不能存放块级元素)和内联元素,宽度默认是容器的100%,高度、行高、外边距以及内边距都可以设置,后期网页布局时会经常使用块级元素(<div></div>)实现网页的布局。

行级元素:和相邻的元素在一行显示,无法设置高度、宽度,水平方向的内边距和外边距可以设置,垂直的无法设置。默认的宽度就是内容本身的宽度,行内元素只能容纳文本或者其他行内元素(<a></a>标签除外)

有些html元素(例如<input>,<img>,<td></td>)既有行内元素的特点,又可以设置宽度和高度,它们被称为行内块元素,高度,行高、外边距以及内边距都可以控制。

它们的应用案例(html_element_type.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html元素分类</title>

    <style>
        body{
            background-color: red;

        }

        div{
            font-size: 18px;
            line-height: 26px;
            text-align: left;
            text-indent: 2em;
            padding: 2px;
            margin: 2px;
            background-color: aqua;

        }

        p{
            font-size: 18px;
            line-height: 26px;
            text-align: left;
            text-indent: 2em;
            padding: 2px;
            margin: 2px;
            background-color: aqua;
        }

        span{
            background-color:darkorange;
            /*行内元素无法设置宽度和高度 这里的设置无效*/
            width: 200px;
            height: 300px;
        }

        input{
            width: 400px;
            height: 20px;
        }

        img{
            border: 1px;
            width: 400px;
            height: 200px;
        }

     

    </style>
</head>
<body >
    <!--块级元素-->
    <div>我是块级元素</div>
    <p>我是块级元素</p>
    <div id="parent">
        <div id="child">我是子元素</div>
    </div>

    <!--行级元素-->
    <span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span>
    <br />

    <input type="text"><input type="text"><input type="text">
    <br/>

    <img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" >
    <table border="1" align="center" valign="bottom" width="300px" height="200px"  cellspacing="0" cellpadding="25">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>身高</td>
            <td>体重</td>
        </tr>
    </table>
</body>
</html>

大前端应用开发与架构设计-使用CSS美化Web站点(一)

标签:pack   匹配   更改   分析   淘宝网   form   cti   http   art   

原文地址:https://www.cnblogs.com/ittimeline/p/9228283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!