全栈 - 20 Web基础 网页的血肉CSS

作者: 宏伦工作室 | 来源:发表于2017-04-25 09:06 被阅读131次

    这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础 网页的血肉CSS。

    HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式。

    什么是CSS

    CSS全拼是Cascading Style Sheets,即层叠样式表。之所以将CSS比作网页的血肉,是因为CSS决定了网页中的元素以何种样式呈现,例如页面内容的整体布局、DOM元素的宽度和高度、标签文字的大小和颜色等。CSS可以使原本单调难看的DOM元素变得灵动而美观,CSS3中添加的一些新功能更是可以进一步增强网页的动画效果和感染力。

    在Chrome浏览器中网页元素上打开开发者工具,Elements标签页下左半部分中会自动高亮对应的DOM元素,右半部分中则会显示该元素对应的全部CSS样式。

    基本结构

    CSS语法的基本结构由两部分组成:选择器(selector)、样式(style)。选择器指定了CSS作用的目标DOM元素,而样式决定了在目标元素上应用何种样式,包括样式名(property)和样式值(value)。

    举例来说,如果希望改变页面中全部一级标题以及段落的字体大小和颜色,使用以下CSS即可。选择器为h1p,即直接使用目标DOM元素的名称,样式由大括号括起来,里面可以包含一行或多行样式,每行样式使用key: value即键值对的形式指定并且以分号结束。这里将字体大小即font-size分别设置为24和20,单位为像素px,字体颜色设置为蓝色和红色。

    h1 {
        font-size: 24px;
        color: blue;
    }
    
    p {
        font-size: 20px;
        color: red;
    }
    

    使用CSS

    使用CSS的方法主要有三种:

    • 引入外部.css文件;
    • 在HTML中定义CSS;
    • 在DOM元素中使用内联CSS。

    在我的Github上全栈数据工程师养成攻略的项目中,data文件夹里提供了一个template.html,里面包含以下内容,可以在此基础上进一步编写代码。其中的六个meta标签定义了网页的一些基本信息,title标签用于设置网页的标题,而rel="shortcut icon"link标签可用于指定网页所使用的浏览器图标。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="">
    </head>
    <body>
    </body>
    </html>
    

    第一种方法是新建一个.css文件,例如style.css,在里面编写所需的CSS代码,就像之前设定h1p的样式一样,然后在HTML的head中用link标签引入写好的样式文件。rel="stylesheet"指定了引入的是CSS样式文件,href属性则使用相对路径指明样式文件所在位置。

    <link rel="stylesheet" href="style.css">
    

    第二种方法直接在HTML中写CSS代码,需要使用style标签包含起来,style标签可以放在HTML中的任意位置,不过推荐放在head标签中。

    <style>
        h1 {
            font-size: 24px;
            color: blue;
        }
    
        p {
            font-size: 20px;
            color: red;
        }
    </style>
    

    第三种方法直接在DOM元素的开始部分中通过style属性指定CSS样式。

    <h1 style="font-size:30px;color:green;">这里是一级标题</h1>
    <p style="font-size:24px;background-color:blue;">这里是一段内容</p>
    

    以上三种方法都可以对目标DOM元素应用指定的CSS样式,并且优先级依次提高,即当定义同一条CSS属性时,后者中的属性值会覆盖前者。

    因此,如果CSS样式较多,不妨选择引入外部.css文件,从而实现CSS代码和HTML代码分离,更加便于开发和维护;如果CSS样式较少,不妨直接选择在HTML中定义CSS,避免新建过多项目文件。如果希望将样式应用于多个DOM元素,使用第一种和第二种方法都更为便捷和高效;如果希望仅将样式应用于某一个DOM元素,则使用第三种方式更加直接简单。

    常用选择器

    CSS中支持多种选择器,使得可以根据需求从不同的维度进行选择,灵活地控制网页中DOM元素的样式。

    最简单的选择器是DOM元素的标签名称,例如我们之前使用的h1p,这类选择器适用于同时更改某一种DOM元素的样式。

    也可以使用id作为选择器,适用于只控制某一个DOM元素的样式。应当注意,每个id在整个网页中都应只出现一次,以下将id为main的对应元素color值设为red

    #main {
        color: red;
    }
    

    为了使样式生效,在HTML的body中需要有对应的DOM元素。

    <p id="main">这是一段内容</p>
    

    还可以使用class作为选择器,适用于同时控制多个DOM元素的样式,只需将它们设为同一个class即可,以下将class为content的全部元素color值都设为red

    .content {
        color: red;
    }
    

    这样一来,在HTML中的DOM元素,如果class等于content,都会受到CSS样式的作用。

    <h1 class="content">这是一级标题</h1>
    <h2 class="content">这是二级标题</h2>
    <p class="content">这是一段内容</p>
    

    标签名、id、class可以组合使用,例如h1#main表示id为main的h1标签,p.content表示class为content的p标签。

    如果某个DOM元素符合多个选择器,则会对CSS样式进行合并覆盖操作。不同的属性名进行合并,其对应的属性值叠加作用于DOM元素之上;相同的属性名进行覆盖,仅应用优先级最高的选择器所对应的属性值。标签名、class、id选择器优先级依次提高,并且它们组合之后的选择器优先级更高。总而言之,选择器越具体越细化、条件越严格,则对应的优先级越高。

    除此之外,还有后代选择器、子元素选择器、相邻兄弟选择器、普通相邻兄弟选择器四种组合选择器,举例来说:

    • h1 p为后代选择器,表示h1标签中的p标签,样式作用于所有符合要求的p
    • h1>p为子元素选择器,表示h1标签直接子元素中的p标签,h1必须是p的直接父元素,限制条件比后代选择器更严格,样式作用于所有符合要求的p
    • h1+p为相邻兄弟选择器,表示和h1标签处于同一层级并且直接相邻的p标签,样式作用于所有符合要求的p,至多一前一后两个;
    • h1~p为普通相邻兄弟选择器,表示和h1标签处于同一层级的全部p标签,两者处于同一级别即可,限制条件不及相邻兄弟选择器严格,样式作用于所有符合要求的p

    从以上选择器的概念中也可以看出DOM的作用,DOM的层级树形结构可以清楚地描述HTML标签之间的父代、后代、子代、兄弟等关系,只有理解了DOM的概念和各类选择器的定义,才能根据需求快速选出最恰当而简洁的选择器。另外,以上四种组合选择器也可以和标签名、id、class三种基础选择器进行自由组合,从而实现更加复杂和灵活的选择器。

    最后还有一类称为伪类的选择器,这里介绍其中最常用的一种:hover,表示当鼠标悬浮时才生效的样式。相对于其他几种选择器,:hover所定义的样式并非静态,而是响应鼠标悬浮事件才会生效,因此可以用来实现一些动态交互效果。

    h1:hover {
        color: red;
    }
    

    常用样式

    CSS中的常用样式包括背景、大小、文本、边距、边框、显示、定位等几大类。

    背景指DOM元素所显示的背景。任何DOM元素都可以设置背景样式,例如文字、按钮等,但我们一般仅为大范围的DOM元素设置背景,例如整个htmlbody等,从而实现一种底层衬托的效果。

    • background-color:用于设置背景颜色,RGB、十六进制、颜色名都可以;
    • background-image:用于设置背景图片,需要用url()函数提供图片链接,使用相对路径或互联网上可访问的图片链接都行;
    • background-repeat:当图片不足以覆盖DOM元素时,是否重复平铺;
    • background-size:使用图片作为背景时,背景图片的大小;
    • background-position:使用图片作为背景图,如果图片大于背景,优先显示图片的哪一块。
    body {
        background-color: rgb(150, 234, 213);
        background-image: url(http://zhanghonglun.cn/blog/wp-content/uploads/2015/09/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
    }
    

    如果使用图片作为背景,则在不影响清晰度的前提下尽量选择小文件图片,避免加载缓慢影响用户体验。同时需要恰当地组合设置以上样式,使得图片背景对于不同分辨率的浏览器都能达到满意的展示效果。

    每个DOM元素都有自己的宽和高,即widthheight。对于文本类标签则可以设置字体大小,即font-size。大小的单位有像素px和百分比%等,前者为绝对值,后者为相对于父元素的相对值。默认情况下,html的宽和高都是浏览器大小的100%。DOM元素的默认高度为其所占内容所需的高度,默认宽度则取决于是块级元素还是内联元素,前者宽度默认为父元素的100%,而后者宽度默认为其所占内容所需的宽度。

    文本类标签可设置的样式包括:

    • color:文本的颜色,RGB、十六进制、颜色名都可以;
    • text-align:文本居向,可以是leftrightcenter
    • text-decoration:文本是否有下划线,设为none可以取消掉链接的默认下划线;
    • text-indent:文本首行缩进宽度;
    • line-height:文本段落的行距;
    • font-size:文本的大小,一般以像素px为单位;
    • font-family:文本的字体,可以同时设置多个值,浏览器将逐一尝试直到字体可用。
    h1 {
        color: #ddd;
        text-align: center;
        text-decoration: none;
        text-indent: 1em;
        line-height: 1.2;
        font-size: 22px;
        font-family: Microsoft Yahei;
    }
    

    边距主要包括marginpadding,前者是DOM元素四周外部的边距,后者是DOM元素四周内部的边距,默认情况下DOM元素的宽高包括padding但不包括margin。边距的单位可以是像素px或百分比%,如果提供一个值则代表上下左右四个方向,提供两个值则第一个值代表上下、第二个值代表左右,提供四个值则依次代表上、右、下、左。

    p {
        margin: 30px 40px;
        padding: 5px;
    }
    

    marginpadding之间还存在一个边框即border,可以设置边框的粗细、线型、颜色、圆角和阴影。

    div {
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.4);
    }
    

    marginborderpadding构成了DOM元素的盒模型(Box Model)。在开发者工具Element标签页下,右半部分底部即可看到当前高亮元素所对应的盒模型,从外到内依次是橙色的margin、黄色的border、绿色的padding和蓝色的内容部分。

    display属性可以决定DOM元素的显示方式,可以设置为inlineblockinline-block等,分别对应内联元素、块级元素、内联块级元素,使用以下代码即可将span设置为块级元素。

    <span style="display:block;">块级元素span</span>
    <span style="display:block;">块级元素span</span>
    

    position即定位,是CSS中非常重要的一项属性,决定了HTML页面中DOM元素的位置和布局。DOM元素会遵循默认的文档流进行排版,即从上到下依次排列,并且都占据相应的空间。块级元素单独占据一行,内联元素排列于同一行中直到超出浏览器宽度,并且所有DOM元素默认居左对齐。如果我们希望网页内容按照预期的设计进行布局,例如将DOM元素居中显示、在特定位置添加一个按钮或图标等,则需要灵活地使用多种定位方式。

    position可取的值包括staticfixedrelativeabsolutefloat,其中static即为默认遵循的文档流定位方式。

    fixed是指固定在浏览器窗口中的某个位置,需要结合topbottomleftright使用,例如将DOM元素固定在相对浏览器窗口上端40个像素、左端50个像素的位置。

    p {
        position: fixed;
        top: 40px;
        left: 50px;
    }
    

    relative同样需要结合top等属性使用,不同的是参照物不是浏览器窗口的四端,而是static定位方式所对应的默认位置,因此可以理解为在默认的位置上叠加一些偏移。

    absolute即绝对定位,需要结合top等属性使用,以其直接父元素为参照物进行定位。可以将某一个DOM元素A设为position:absolute,同时将其直接父元素B设为position:relative,从而可以自由任意地将A放置在B中的任何位置。

    float即浮动定位,可以将一个或多个DOM元素浮动至浏览器窗口的最左端或最右端。浮动定位虽然很自由,可以实现瀑布流之类的布局效果,但是破坏了默认的文档流,并且在操作不当时容易导致意料之外的结果,因此并不推荐。

    <h2 style="float:right;">浮动的内容</h2>
    

    以上定位方式中,staticrelative对应的DOM元素占据相应的页面空间,而fixedabsolutefloat对应的DOM元素不占据任何空间,只是叠加在已有的页面内容上,并且可以通过z-index属性设置多元素叠加时的显示顺序。

    CSS3

    CSS3是CSS的最新版本,引入了许多更为丰富的新属性,并且已经被大多数主流浏览器所支持,例如渐变、变换、过渡、动画等,还包括之前提及的边框圆角和阴影。如果说CSS给DOM元素赋予了丰富的样式,那么CSS3带来的则是更为炫酷的特效。

    渐变包括线性渐变和径向渐变,可以作为DOM元素的背景效果,不过比较鸡肋,在实际情况中使用并不多。

    transform即变换,包括平移、旋转、缩放、斜切等二维变换,以及3D旋转、3D缩放、透视等3D变换。可以将变换直接应用于DOM元素,用于修改其显示效果,也可以仅将变换应用于被鼠标悬浮下的状态,从而实现鼠标悬浮动画效果。需要注意的是,CSS3属性需要在属性名前加上相应的前缀,用于适应不同的浏览器。

    /*鼠标悬浮后变换*/
    #transform {
        width: 200px;
        height: 120px;
    }
    #transform:hover {
        cursor: pointer;
        /* Safari and Chrome */
        -webkit-transform: rotate(180deg);
        /* Firefox */
        -moz-transform: rotate(180deg);
        /* IE */
        -ms-transform: rotate(180deg);
        /* Opera */
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    

    另一项极为常用的CSS3属性是transition即过渡,用于在CSS属性变化时提供一段过渡效果。例如以上的鼠标悬浮变换,结合使用过渡可以实现更好的交互体验。

    #transform {
        width: 200px;
        height: 120px;
        /* 过渡 */
        -webkit-transition: -webkit-transform .4s;
        -moz-transition: -moz-transform .4s;
        -ms-transition: -ms-transform .4s;
        -o-transition: -o-transform .4s;
        transition: transform .4s;
    }
    #transform:hover {
        cursor: pointer;
        /* Safari and Chrome */
        -webkit-transform: rotate(180deg);
        /* Firefox */
        -moz-transform: rotate(180deg);
        /* IE */
        -ms-transform: rotate(180deg);
        /* Opera */
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    

    transition后面可以提供4个参数,分别表示需要过渡的CSS属性、过渡持续时间、过渡的时间变化曲线、过渡效果开始的延时时间,后两项可以省略,默认值分别为线性过渡和无延时。需要注意,所有的CSS3属性前都需要加上相应的浏览器前缀。由于transition是DOM元素始终具备的属性,所以应当直接应用于DOM元素,而不是仅应用于悬浮状态下。

    animation即动画,可以为DOM元素添加丰富而流畅的动画效果。使用之前需要先用@keyframes定义一个动画,其中包括多个关键帧,用于说明动画的不同时间节点所呈现的属性。以下动画定义了四个关键帧,不同帧所对应的位置和背景颜色不同。这样一来,动画运行之后便会从每一帧过渡到下一帧,直到回到最初的状态。

    @keyframes myfirst
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    

    定义好动画之后再使用animation属性将动画绑定至DOM元素即可。animation可以使用6个参数,分别对应动画的名称、动画持续时间、动画的时间曲线、动画开始的延时、动画播放的轮数、相邻轮数之间的动画方向,后四项可以省略,默认值分别为线性动画、无延时、播放1轮、正常播放。

    #animation {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation: myfirst 5s;
        -webkit-animation: myfirst 5s; /* Safari and Chrome */
    }
    

    关于CSS3的更多内容,可以参考以下链接:http://www.runoob.com/css3/css3-tutorial.html

    CSS实例

    HTML中button的默认样式十分难看,现在让我们用CSS的强大功能对其进行美化,并添加鼠标悬浮效果。

    首先,给button周围一些边距,将背景色设为透明,设置边框样式,并将字体调大一些。

    button {
        padding: 16px 20px;
        margin: 10px;
        outline: none;
        background-color: transparent;
        border: 1px solid #000;
        font-size: 30px;
    }
    

    然后,通过开发者工具交互地调整颜色,得到一个看起来还不错的颜色#6ebade,作为边框和文本的颜色,并设置边框圆角和文本字体,同时加上过渡。

    button {
        padding: 16px 20px;
        margin: 10px;
        outline: none;
        background-color: transparent;
        border: 1px solid #6ebade;
        font-size: 30px;
        color: #6ebade;
        border-radius: 5px;
        font-family: Microsoft Yahei;
        -webkit-transition: color, background-color .4s;
        -ms-transition: color, background-color .4s;
        -moz-transition: color, background-color .4s;
        -o-transition: color, background-color .4s;
        transition: color, background-color .4s;
    }
    

    最后,添加鼠标悬浮后的样式,包括改变鼠标样式、背景色和文本颜色。

    button:hover {
        background-color: #6ebade;
        color: #fff;
        cursor: pointer;
    }
    

    补充学习

    CSS的基本内容无非选择器和样式,但由于选择器类型丰富,选择器之间也可以自由灵活地进行组合,CSS可设置的样式属性名非常之多,每个属性名又对应许多种可选的属性值,这些都使得CSS相对HTML而言更加博大精深。同样的HTML、不同的CSS,最后呈现的效果可能差之千里。只有通过不断的练习,观察不同CSS代码组合之后的效果,才能更好地感受和理解每一项CSS属性的作用。以下链接提供了关于CSS的更多内容,http://www.runoob.com/css/css-intro.html,里面提供了更为详细和系统的讲解,并结合大量实例代码加以巩固,推荐完整地浏览和尝试一遍。

    视频链接:

    相关文章

      网友评论

        本文标题:全栈 - 20 Web基础 网页的血肉CSS

        本文链接:https://www.haomeiwen.com/subject/jxgmzttx.html