HTML5+CSS3+JavaScript从入门到精通-09

原创

qiqi_fu

发布于 2021-12-03 15:17:04

4550

发布于 2021-12-03 15:17:04

文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第九章 CSS中的各种样式

案例

09-01 字体的font-family属性

<!DOCTYPE html>
<!--web09-01-->
<!--
    font-family: 字体类型
    font-size:字体大小
    font-weight:字体粗细
    font-style:字体倾斜
    color:字体颜色

    默认情况下，浏览器字体是  宋体。
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>字体的font-family属性</title>
    <style type="text/css">
        h3 {
            font-family: 方正粗黑宋简体;
        }
        p {
            font-family: 微软雅黑,Arial,'Times New Roman'; /*有时候电脑没有装一些字体，这里就按优先顺序显示*/
        }
    </style>
</head>
<body>
    <h3 align="center">字体的font-family属性</h3>
    <hr />
    <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
</body>
</html>

09-02 字体的font-size属性

<!DOCTYPE html>
<!--web09-02-->
<!--
    font-size:关键字/像素值
    现在用关键字做字体大小的设置的人越来越少，大多数使用像素值
    关键字：
    xx-small:最小
    x-small:较小
    small:小
    medium: 默认值，正常
    large:大
    x-large:较大
    xx-large:最大
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>字体的font-size属性</title>
    <style type="text/css">
        #a {
            font-size: small;
        }
        #b {
            font-size: x-large;
        }
        #c {
            font-size: 12px; /*px - 像素*/
        }
        #d {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h3 align="center">字体的font-size属性</h3>
    <hr />
    <p id="a">爆竹声中一岁除</p>
    <p id="b">春风送暖入屠苏</p>
    <p id="c">千门万户曈曈日</p>
    <p id="d">总把新桃换旧符</p>
</body>

</html>

09-03 字体样式

<!DOCTYPE html>
<!--web09-03-->
<!--
    font-weight:(100-900)
    normal(400); Lighter; bold(700); bolder
    一般用normal 和 bold， 不建议使用数值；

    font-style:
    normal
    italic: 使用文字的斜体
    oblique:让没有斜体属性的文字倾斜(如果用italic没有倾斜效果，就要用 oblique)
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>字体样式</title>
    <style type="text/css">
        #a {
            font-family: 黑体;
            font-size: 15px;
            color: red;
        }
        #b {
            font-family: 楷体;
            font-size: 20px;
            font-weight: bold;
            color: orange;
        }
        #c {
            font-family: 宋体;
            font-size: 25px;
            font-style: italic;
            color: green;
        }
        #d {
            font-family: 宋体;
            font-size: 30px;
            font-weight: lighter;
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <h3 align="center">字体样式</h3>
    <hr />
    <p id="a" align="center">爆竹声中一岁除</p>
    <p id="b" align="center">春风送暖入屠苏</p>
    <p id="c" align="center">千门万户曈曈日</p>
    <p id="d" align="center">总把新桃换旧符</p>
</body>
</html>

09-04 段落样式中的text-decoration属性

<!DOCTYPE html>
<!--web09-04-->
<!--
    段落样式：
    text-decoration:1.下划线(underline)、2.删除线(line-through)、3.顶画线(overline)
    text-transform:大小写转换 1.默认值(none); 2.转换成大写(uppercase); 3.转换成小写(lowercase); 4.每个单词首字母转大写(capitalize)
    text-indent:段落首行缩进
    text-align:文本水平对齐方式
    line-height:行高
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>段落样式中的text-decoration属性</title>
    <style type="text/css">
        #a {
            text-decoration: none;
            color: blue;
        }
        #b {
            text-decoration: underline;
            color: orange;
        }
        #c {
            text-decoration: line-through;
            color: green;
        }
        #d {
            text-decoration: overline;
            color: rgb(255,0,0);
        }
    </style>
</head>
<body>
    <h3 align="center">段落样式中的text-decoration属性</h3>
    <hr />
    <p id="a" align="center">爆竹声中一岁除</p>
    <p id="b" align="center">春风送暖入屠苏</p>
    <p id="c" align="center">千门万户曈曈日</p>
    <p id="d" align="center">总把新桃换旧符</p>
</body>

</html>

09-05 段落样式中的text-transform和text-indent属性

<!DOCTYPE html>
<!--web09-05-->
<!--
    text-indent: 首行缩进，一般2个字的间距，所以值为font-size值的2倍即可
    默认情况，也可在内容中使用4个&nbsp实现，但代码比较冗余
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>段落样式中的text-transform和text-indent属性</title>
    <style type="text/css">
        #a {
            font-size: 16px;
            text-indent: 32px;
            color: red;
            text-decoration: underline;
        }
        #b {
            font-size: 20px;
            text-indent: 40px;
            color: green;
            font-weight: bold;
        }
        #c {
            font-size: 16px;
            text-indent: 32px;
            text-transform: capitalize;
        }
        #d {
            font-size: 16px;
            text-indent: 32px;
            text-transform: uppercase;
        }
        #e {
            font-size: 16px;
            text-indent: 32px;
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <h3 align="center">岳阳楼记</h3>
    <hr />
    <p id="a">
        字体12，缩进32，红色，下划线。
    </p>
    <p id="b">
        字体20，缩进40，绿色，粗体。
    </p>
    <h3 align="center">改变时态</h3>
    <hr />
    <p id="c">
        aaaaaaaaaaaa aaaaaaaaaaaa 单词首字母大写
    </p>
    <p id="d">
        bbbbbbbbbb bbbBBBbbbbbb 转大写
    </p>
    <p id="e">
        CCCCCCcccCCCCCC DDDDDDDD 转小写
    </p>
</body>
</html>

09-06 段落样式中的text-align和line-height属性

<!DOCTYPE html>
<!--web09-06-->
<!--
    text-align: left, center, right. 对文本和图片均有效
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>段落样式中的text-align和line-height属性</title>
    <style type="text/css">
        #a {
            font-size: 16px;
            text-indent: 32px;
            color: red;
            text-align: left;
            line-height: 20px;
        }
        #b {
            color: blue;
            text-align: right;
            line-height: 50px;
        }
        #c {
            color: green;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <h3 align="center">岳阳楼记</h3> 
    <hr />
    <p id="a">字体16，缩进32，红色，左对齐，行高20</p>
    <p id="b">蓝色，右对齐，行高50</p>
    <p id="c">绿色，居中，行高60</p>
</body>

</html>

09-07 表框样式

<!DOCTYPE html>
<!--web09-07-->
<!--
    三个边框样式属性，需要同时设定，才会在浏览器中显示元素表框
    border-width:边框宽度
    border-color:
    border-style: 边框的外观

    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>表框样式</title>
    <style type="text/css">
        /*none, double(双线，与边框一样粗), hidden(同none，对于表，hidden用于解决边框冲突)*/
        #x1 {
            border-width: 15px;border-color: orange;border-style: inset;/*内凹*/
        }
        #x2 {
            border-width:15px;border-color:yellow;border-style:outset;/*外凹*/
        }
        #x3 {
            border-width:15px;border-color:blue;border-style:ridge;/*脊线*/
        }
        #x4 {
            border-width:15px;border-color:green;border-style:groove;/*槽线*/
        }
        #x5 {
            border-width:9px;border-color:green;border-style:solid;/*实线*/
        }
        #x6 {
            border-width:6px;border-color:blue;border-style:dashed;/*虚线*/
        }
        #x7 {
            border-width:16px;border-color:yellow;border-style:dotted;/*点线*/
        }
        #x8 {
            border:10px red double /*也可以这样写*/
        }
    </style>
</head>
<body>
    <h3 align="center">表框样式</h3>
    <hr />
    <img id="x1" src="b1.png" />
    <img id="x2" src="b1.png" />
    <img id="x3" src="b1.png" />
    <img id="x4" src="b1.png" /><br />
    <img id="x5" src="b1.png" />
    <img id="x6" src="b1.png" />
    <img id="x7" src="b1.png" />
    <img id="x8" src="b1.png" />
</body>
</html>

09-08 边框的局部样式

<!DOCTYPE html>
<!--web09-08-->
<html>
<head>
    <meta charset="utf-8" />
    <title>边框的局部样式</title>
    <style type="text/css">
        #div1 {
            width: 600px;
            height: 200px;
            border-top: 10px double black;/*也可以border-top-width, border-top-color, border-top-style来分开设置*/
            border-right: 5px dotted orange;
            border-bottom: 8px dashed blue;
            border-left: 16px groove green;
        }
    </style>
</head>
<body>
    <h3 align="center">边框的局部样式</h3>
    <hr />
    <div id="div1"></div>
</body>
</html>

09-09 background-color背景颜色

<!DOCTYPE html>
<!--web09-09-->
<html>
<head>
    <meta charset="utf-8" />
    <title>background-color背景颜色</title>
    <style type="text/css">
        #a {
            background-color: yellow;
            color: red;
            font-size: 20px;
            text-indent: 40px;
            border: groove 10px orange;
        }
        #b {
            background-color: rgb(100,250,100);
            color: blue;
            font-size: 20px;
            text-indent: 40px;
            border: inset 5px red;
        }
    </style>
</head>
<body>
    <h3 align="center">background-color背景颜色</h3>
    <hr />
    <p id="a">黄色背景，红色字体，字体大小20，边框橙色，groove, 10px</p>
    <p id="b">背景rgb(100,250,100)，字体蓝色，字体大小20px，缩进40，边框红色 inset 5px</p>
</body>
</html>

09-10 背景图像

<!DOCTYPE html>
<!--web09-10-->
<!--
    background-image | background-repeat | background-position | background-attachment
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>背景图像</title>
    <style type="text/css">
        /*下面没有用到background-attachment的属性：scroll/fixed,(scroll背景图像随对象滚动而滚动，fixed为背景图像固定不动)*/
        #a {/*background-repeat默认值 repeat，水平垂直同时平铺*/
            background-image: url(g1.gif);
            border: 5px red groove;
            color: red;
        }
        #b {
            background-image: url(b1.png);
            background-repeat: repeat-x;/*横向平铺*/
            border: 5px yellow double;
            color: blue;
        }
        #c {
            background-image: url(b1.png);
            background-repeat: repeat-y;/*纵向平铺*/
            border: 10px yellow inset;
            color: green;
        }
        #d {
            background-image: url(b1.png);
            background-repeat: no-repeat;/*不平铺*/
            background-position: top center;/*top left center right bottem 组合两个而成*/
            border: 10px yellow inset;
            color: orange;
        }
    </style>
</head>
<body>
    <h3 align="center">背景图像</h3>
    <hr />
    <dir id="a">
        <h3 align="center">元日</h3>
        <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
    </dir>
    <dir id="b">
        <h3 align="center">元日</h3>
        <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
    </dir>
    <dir id="c">
        <h3 align="center">元日</h3>
        <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
    </dir>
    <dir id="d">
        <h3 align="center">元日</h3>
        <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
    </dir>
</body>

</html>

09-11 图像的大小、边框和水平对齐方式

<!DOCTYPE html>
<!--web09-11-->
<html>
<head>
    <meta charset="utf-8" />
    <title>图像的大小、边框和水平对齐方式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 80px;
            border: 5px groove yellow;
        }
        .div_img1 {
            /* 对class的样式定义，用.    
               对id的样式定义，用#   */
            text-align: left;
        }
        .div_img2 {
            text-align: center;
        }
        .div_img3 {
            text-align: right;
        }
        img {
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="div_img1">
        <img src="b1.png" />
    </div>
    <div class="div_img2">
        <img src="b1.png" />
    </div>
    <div class="div_img3">
        <img src="b1.png" />
    </div>
</body>
</html>

09-12 图像的垂直对齐方式

<!DOCTYPE html>
<!--web09-12-->
<html>
<head>
    <meta charset="utf-8" />
    <title>图像的垂直对齐方式</title>
    <style type="text/css">
        img {
            width: 80px;
            height: 80px;
        }
        #img_1 {
            vertical-align: bottom;/*底部对齐*/
        }
        #img_2 {
            vertical-align: middle;/*中部对齐*/
        }
        #img_3 {
            vertical-align: top;/*顶部对齐*/
        }
        #img_4 {
            vertical-align: baseline;/*基线对齐*/
        }
    </style>
</head>
<body>
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。<img id="img_1" src="b1.png" />
    <hr />
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。<img id="img_2" src="b1.png" />
    <hr />
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。<img id="img_3" src="b1.png" />
    <hr />
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。<img id="img_4" src="b1.png" />
    <hr />
</body>
</html>

09-13 文字环绕

<!DOCTYPE html>
<!--web09-13-->
<html>
<head>
    <meta charset="utf-8" />
    <title>文字环绕</title>
    <style type="text/css">
        img {
            float: left; /*float浮动属性，可用于所有元素 - left | right | none | inherit */
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <h3 align="center">后赤壁赋</h3>
    <hr />
    <p>
        <img src="g1.gif" />
        爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
    </p>
</body>

</html>

09-14 设置文字与图像的间距

<!DOCTYPE html>
<!--web09-14-->
<html>
<head>
    <meta charset="utf-8" />
    <title>设置文字与图像的间距</title>
    <style type="text/css">
        img {
            float: right;
            width: 150px;
            height: 100px;
            margin-top: 15px;
            margin-bottom: 20px;
            margin-left: 25px;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <h3 align="center">后赤壁赋</h3>
    <hr />
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
    <img src="b1.png" />
    爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
</body>

</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html