前端学习笔记

HTML学习笔记

  1. 网页设计基础知识

    网页的最终目的就是给访问者显示有价值的信息，并留下最深刻的印象。

    首先必须知道什么是“浏览器”和“服务器”。互联网就是处在世界各地的计算机相互连接而成的一个计算机网络。网站的浏览者坐在家中查看各种网站上的内容，实际上就是从远程的计算机中读取了一些内容然后在本地的计算机上显示出来的过程。因此，提供内容信息的计算机就称为“服务器”。

    Web标准
    网页主要由三个部分组成：HTML、CSS和JavaScript。HTML负责网页的结构，CSS负责网页的样式，JavaScript负责网页的交互。

    初步理解网页设计与开发过程
    网站开发的全过程大致分为策划与定义、设计、开发、测试和发布，下面对开发的流程进行介绍：

    • 基本任务与角色
      设计师根据用户需求和功能需求，进行网页的布局和样式设计。
      开发人员根据设计师的设计，使用HTML、CSS和JavaScript等技术，将网页的结构、样式和交互功能实现出来。
      发布人员将测试通过的网页发布到互联网上，使访问者可以访问到。
    • 明确网站定位
      是个人网站还是代工？
    • 收集信息和素材
      全面收集相关的意见和想法可以使网站的信息和功能趋于完善。收集来的信息需要整理成文档，做好项目规划。
    • 策划栏目内容
      对收集来的相关信息进行整理后，要找出重点，根据定位、目标人群、功能需求等来设置栏目。

    与设计相关的技术因素

    1. 屏幕显示分辨率
    2. 浏览器类型和版本
    3. 操作系统类型和版本
    4. 网络连接速度

  2. HTML网页文档结构

    HTML简介
    网页的基础是HTML，全称为Hypertext Markup Language，即超文本标记语言。HTML是一种用于创建网页的标记语言，它使用标签来描述网页的结构和内容。其最基本的语法就是<标记>内容</标记>。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Study HTML</h1>
        <p>这是一个段落</p>
    </body>
    </html>

  3. 用HTML设置文本和标题

    文本排版

    <p></p>段落，<br>换行。
    <h1></h1>到<h6></h6>，分别对应一级到六级标题。
    <center></center>居中。
    <blockquote></blockquote>引用，设置文字段落的缩进。

    设置文字列表

    有序列表：<ol></ol>，<li></li>
    无序列表：<ul></ul>，<li></li>

    特殊文字符号

    &copy;版权符号,
    &trade;商标符号,
    &reg;注册商标符号,
    &lt;小于号符号,
    &gt;大于号符号,
    &nbsp;空格符号。
    <sup></sup>上标符号，<sub></sub>下标符号。
    &divide;除法符号。
    &times;乘法符号。
    &plusmn;正负号符号。
    &harr;双向箭头符号。
    &rarr;右向箭头符号。
    &larr;左向箭头符号。
    &uarr;上向箭头符号。
    &darr;下向箭头符号。

    在网页中使用图像

    • <img src="图像文件路径" alt="图像描述">，src属性指定图像文件的路径，alt属性指定图像的描述或替换文本（当图像无法显示时，会显示该文本）。
    • 设置图像的大小
      width属性指定图像的宽度，height属性指定图像的高度。如果只设置了其中一个属性，另一个属性会根据图像的比例自动调整。
      即使图像按原来的尺寸显示，也应该设置width和height属性来指明图像的显示大小，这样会使网页的加载速度更快，也可以避免图像在不同屏幕上显示的差异。
    • 设置图像的边框
      border属性指定图像的边框宽度。
    • 设置图像的间距
      margin属性指定图像与其他元素之间的间距。
    • 设置图像的对齐方式
      align属性指定图像的对齐方式，可选值有left、right和center。

  4. 用HTML创建超链接

    设置基本文字超链接

    • <a href="链接地址" target="_blank">链接文本</a>，href属性指定链接的目标地址（URL），target属性指定链接在何处打开，可选值有_blank（在新窗口打开）和_self（在当前窗口打开）。
    • 设置超链接的样式
      可以使用CSS来设置超链接的样式，如颜色、下划线等。 
      1
      2
      3
      4
      a {
          color: #0000ff;
          text-decoration: underline;
      }
      设置页面内部的特定目标的超链接

    可以使用id属性为页面元素设置唯一的标识符，然后在超链接中使用#上标识符来链接到该元素。

    1
    <a href="#目标元素的id">链接文本</a>

    或者是嵌入<a>标签,使用name属性为元素设置唯一的标识符。
    1
    <p><a name="first"></a>这是一个段落</p>

    设置超链接的标题

    可以使用title属性为超链接添加标题，当鼠标悬停在链接上时，会显示该标题。

    1
    <a href="链接地址" title="链接标题">链接文本</a>

    设置图片的超链接

    可以将图片嵌入超链接中，当用户点击图片时，会跳转到指定的链接。

    1
    <a href="链接地址"><img src="图像文件路径" alt="图像描述"></a>

    创建热点区域
    可以使用<map>和<area>标签创建热点区域，当用户点击热点区域时，会跳转到指定的链接。HTML中可以使用三种形状的热点区域：矩形、圆形和多边形。，即rect、circle和poly。\

    1. <map name="map1">，name属性指定地图的名称，用于在<img>标签中引用。
    2. <img src="图像文件路径" alt="图像描述" usemap="#map1">，usemap属性指定要使用的地图名称。
    3. <area shape="rect" coords="10,10,50,50" href="链接地址" alt="热点区域1">，shape属性指定热点区域的形状，coords属性指定热点区域的坐标（矩形为x1,y1,x2,y2，圆形为x,y,r，多边形为x1,y1,x2,y2,...），href属性指定点击热点区域时要跳转的链接地址，alt属性指定热点区域的替代文本（当热点区域无法显示时，会显示该文本）。 
      1
      2
      3
      <map name="map1">
          <area shape="rect" coords="10,10,50,50" href="链接地址" alt="热点区域1">
      </map>

  5. 用HTML创建表格

    创建基本表格

    1. <table border="1">，border属性指定表格的边框宽度。
    2. <tr>，表格行标签。
    3. <th>，表格标题单元格标签。
    4. <td>，表格数据单元格标签。 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <table border="1">
          <tr>
              <th>姓名</th>
              <th>年龄</th>
          </tr>
          <tr>
              <td>张三</td>
              <td>18</td>
          </tr>
      </table>
      alt text

    合并单元格
    5. 使用rowspan属性合并垂直单元格。（上下行合并）
    6. 使用colspan属性合并水平单元格。（左右列合并）
    注意合并单元格以后，相应的单元格标记就会减少了，要去掉<td>和</td>标签了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>20</td>
        </tr>
    </table>

    alt text

    设置大小和对齐方式
    7. 用width``height属性设置表宽和表高。
    8. 用align属性设置单元格中内容的水平对齐方式。其属性值有left、right和center。
    9. 用valign属性设置单元格中内容的垂直对齐方式。其属性值有top、bottom和middle。

    完整的表格标记、、
    10. <thead>，表格标题行标签。
    11. <tbody>，表格主体行标签。
    12. <tfoot>，表格底部行标签。
    13. <caption>，表格标题标签。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <table border="1">
        <caption>
            人员信息表
        </caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>李四</td>
                <td>20</td>
            </tr>
        </tfoot>
    </table>

CSS学习笔记

  1. CSS核心基础

    构造CSS规则

    1
    2
    3
    选择器 {
        属性名: 属性值;
    }

    基本CSS选择器

    1. 标记选择器

      一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。
      标记选择器的语法很简单，就是直接写标记名称即可。例如，要将所有的段落文字设置为红色，就可以使用以下CSS规则：

      1
      2
      3
      p {
          color: red;
      }

    2. 类别选择器

      类别选择器是指在HTML标记中使用class属性为元素指定一个类别名称，然后在CSS中使用该类别名称来选择元素。
      类别选择器的语法是在类别名称前加上一个点号（.）。例如，要将所有类别为paragraph的段落文字设置为蓝色，就可以使用以下CSS规则：

      1
      2
      3
      .paragraph {
          color: blue;
      }
      1
      <p class="paragraph">这是一个段落</p>

      类别选择器可以给多个元素指定相同的样式。也可以给单个元素指定多种样式(不常用),如：

      1
      2
      3
      4
      5
      6
      7
      .big {
          font-size: 50px;
      }

      .blue {
          color: blue;
      }
      1
      <p class="big blue">这是一个段落</p>

      亦或者：

      1
      2
      3
      4
      .big,.blue {
          font-size: 50px;
          color: blue;
      }
      1
      2
      3
      4
      5
      <p class="big blue">大号字体和蓝色字体</p>

      <p class="big">大号字体</p>

      <p class="blue">蓝色字体</p>

    3. ID选择器

      ID选择器是指在HTML标记中使用id属性为元素指定一个唯一的标识符，然后在CSS中使用该标识符来选择元素。
      ID选择器的语法是在标识符前加上一个井号（#）。例如，要将ID为para的段落文字设置为绿色，就可以使用以下CSS规则：

      1
      2
      3
      #para {
          color: green;
      }
      1
      <p id="para">这是一个段落</p>

      ID选择器只能给一个元素指定一个样式，不能给多个元素指定相同的样式，所以ID选择器的针对性更强。

    在HTML中使用CSS的方法

    1. 行内样式

      行内样式是指在HTML标记中直接使用style属性为元素指定CSS样式。
      行内样式的语法是在标记中添加style="属性名: 属性值;"。例如，要将一个段落文字设置为红色，就可以使用以下HTML标记：

      1
      <p style="color: red;">这是一个段落</p>

      行内样式的优先级最高，会覆盖其他样式。
      但是，由于行内样式直接写在HTML标记中，所以维护起来比较困难。
      所以，一般不建议使用行内样式。

    2. 内联样式

      内联样式表就是将CSS写在<head>标签中的<style>标签中。
      内联样式表的语法是在<style>标签中添加CSS规则。例如，要将所有的段落文字设置为红色，就可以使用以下内联样式表：

      1
      2
      3
      4
      5
      <style>
          p {
              color: red;
          }
      </style>

      与行内样式相比，内联样式表的维护起来比较方便，因为所有的样式都写在一个地方。
      但是，内联样式表的优先级低于行内样式，所以如果同时使用了行内样式和内联样式，行内样式会覆盖内联样式。

    3. 外联样式

      外联样式是使用频率最高也是最为实用的方法。
      外联样式是将CSS写在一个独立的文件中，然后在HTML标记中使用link标签引入该文件。
      外联样式的语法是在link标签中添加href="文件路径"属性。例如，要将所有的段落文字设置为红色，就可以使用以下外联样式表：

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

      其中，rel="stylesheet"表示这是一个样式表文件，href="style.css"表示该文件的路径为style.css。
      外联样式表的维护起来比较方便，因为所有的样式都写在一个地方。
      但是，外联样式表的优先级低于内联样式，所以如果同时使用了内联样式和外联样式，内联样式会覆盖外联样式。

    4. 导入样式

      导入样式是指在CSS文件中使用@import规则引入其他CSS文件。
      导入样式的语法是在CSS文件中添加@import "文件路径";。例如，要将style.css文件中的样式导入到main.css文件中，就可以使用以下导入样式规则：

      1
      @import "style.css";

      导入样式的优先级低于外联样式，所以如果同时使用了外联样式和导入样式，外联样式会覆盖导入样式。
      但是，导入样式的维护起来比较困难，因为所有的样式都写在一个地方。
      所以，一般不建议使用导入样式。

  2. CSS编写

    从零开始

    首先建立HTML框架。

    1
    2
    3
    <h1>一张AI生成的图</h1>
    <p>这组插画由六幅作品组成，均以极光为核心元素，场景各具特色。画面中，极光呈现绿、紫、粉等斑斓色彩，或与荒漠红岩地貌交融，或与未来都市建筑群辉映，或点缀山林溪流之景，色彩丰富且富有层次感，整体风格奇幻明快，展现出自然与科幻交织的想象世界。
    </p>

    这时的页面只有标题和正文内容，而没加任何效果，在浏览器中的显示效果如上图，虽然看上去十分单调，但页面的核心框架已经初现。

    考虑到单纯的文字显得贫乏，因此加入一张图片作为简单的插图，以增强页面的可读性。使用HTML的<img>标签插入图片。

    alt text

    此时的显示效果如上图，可以看到图片和文字的排列比较混乱，此时就可以使用CSS来改进样式。

    设置标题

    为了使标题更加突出，我们可以使用CSS来设置标题的样式。使用蓝色背景的白色文字可以使标题更加醒目。另外，这里将标题设为居中，并且与正文有一定的距离.

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        h1 {
            color: white;               /*文字颜色*/
            background-color: aqua;     /*背景色*/
            text-align: center;         /*居中*/
            padding: 15px;              /*内边距*/
        }
    </style>

    alt text

    控制图片

    在对标题和正文都进行了CSS控制后，整个页面的焦点便集中到插图上，这时可以发现文字与图片的排列有些不够协调，我们可以让图文混排。

    1
    2
    3
    4
    5
    img {
        float: left;
        border: 1px #9999cc dashed;
        margin: 5px;
    }

    alt text

    设置正文

    由于文字少不好看所以我就不设置了所以我又加了一段😅

    下面设置正文部分，可以控制文字的大小、缩进、排列的疏密等属性。

    1
    2
    3
    4
    5
    6
    p {
        font-size: 16px;        /*字体大小*/
        text-indent: 2em;       /*缩进*/
        line-height: 1.5;        /*行高*/
        padding: 5px;           /*内边距*/
    }

    alt text

    设置整体页面

    接下来对页面整体进行设置，对<body>标签进行设置，设置背景颜色为其他颜色

    1
    2
    3
    body {
        background-color: #f1908c;
    }

    对段落进行分别设置

    之前的CSS都是用的标记选择器，这回我们可以使用ID选择器来对两个段落进行设置。

    1
    2
    3
    4
    5
    6
    #p1 {
        border-right: 3px red double;
    }
    #p2 {
        border-right: 3px blue double;
    }

    可以看到，在两个段落的右侧分别出现了两条竖线，上面的是红色，下面的是蓝色。

    alt text

    完整代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 500px;
                margin: 0px auto;
                padding: 25px;
                border: 2px solid black;
            }

            h1 {
                color: white;               /*文字颜色*/
                background-color: aqua;     /*背景色*/
                text-align: center;           /*居中*/
                padding: 15px;                 /*内边距*/
            }

            img {
                float: left;
                border: 1px #9999cc dashed;
                margin: 5px;
            }

            p {
                font-size: 16px;        /*字体大小*/
                text-indent: 2em;       /*缩进*/
                line-height: 1.5;       /*行高*/
                padding: 5px;           /*内边距*/
            }

            body {
                background-color: #f1908c;
            }

            #p1 {
                border-right: 3px red double;
            }

            #p2 {
                border-right: 3px blue double;
            }
        </style>
    </head>
    <body>
        <h1>一张AI生成的图</h1>

        <img src="AI_图片生成 (1).png" alt="图片" width="30%">

        <p id="p1">这组插画由六幅作品组成，均以极光为核心元素，场景各具特色。
            画面中，极光呈现绿、紫、粉等斑斓色彩，或与荒漠红岩地貌交融，
            或与未来都市建筑群辉映，或点缀山林溪流之景，色彩丰富且富有层次感，
            整体风格奇幻明快，展现出自然与科幻交织的想象世界。
        </p>

        <p id="p2">这组六幅插画共同编织出极光与多元地貌的奇幻交响。
            极光以绿、紫、粉的绚烂姿态，在红岩荒漠的雄浑间狂舞，
            于未来都市的钢铁森林上流光，在沙漠都市的橙野中晕染，
            在山林溪谷的清幽里轻曳，在带植被的荒漠中铺展缤纷，
            又在红岩群的粗犷间绽放。自然的野性与科幻的前卫在此碰撞融合，
            每一幅都似独立却又同源，以明快且富有张力的色彩，
            构建出一个让人心驰神往、充满未知与想象的极光异境，
            每一处景致都在诉说着关于光与地的奇幻史诗。
        </p>

    </body>
    </html>

    CSS注释

    编写CSS代码与编写其他程序一样，养成良好的写注释习惯对于提高代码的可读性以及减少日后维护的成本都是非常重要的。(虽说有时候我自己都没有养成)😜

    CSS中，注释内容以/*开始，以*/结束。其内容可以是单行的，也可以是多行。

    1
    2
    3
    4
    /*这是有效的CSS注释*/
    /*这是
      多行
      注释*/

  3. CSS高级特性

    复合选择器

    1. 交集选择器

      交集选择器由两个选择器组成，中间没有空格，用于选择同时符合两个选择器的元素。

      1
      2
      3
      p#p1 {
          color: red;
      }

      上述代码将选择所有ID为p1的段落元素，并将其文字颜色设置为红色。

    2. 并集选择器

      并集选择器由多个选择器组成，中间用逗号隔开，用于选择符合任意一个选择器的元素。

      1
      2
      3
      p, #p2 {
          color: blue;
      }

      上述代码将选择所有段落元素和ID为p2的元素，并将其文字颜色设置为蓝色。

      另外，在实际网站中的一些页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又希望逐个来声明的情况，可以利用全局选择器*。

      1
      2
      3
      * {
          font-size: 16px;
      }

      上述代码将使所有标记的字体大小都为16像素。

    3. 后代选择器

      后代选择器由两个选择器组成，中间用空格隔开，用于选择作为另一个元素的后代元素的元素。

      1
      2
      3
      div p {
          color: green;
      }

      上述代码将选择所有作为div元素后代的段落元素，并将其文字颜色设置为绿色。

      后代选择器可以多层嵌套，例如：

      1
      2
      3
      .special i { color: red; }
      #one li { padding-left: 5px; }
      td.out .inside strong { font-size: 16px; }

      经验建议
      在构建页面HTML框架时通常只给外层标记（父标记）定义class或者专用id，内层标记（子标记）能通过嵌套表示则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当需要对单独的一个子标记设置CSS样式时才进行独立声明。

      • 子选择器

        子选择器由两个选择器组成，中间用大于号隔开，用于选择作为另一个元素的子元素的元素。

        1
        2
        3
        div > p {
            color: red;
        }

        上述代码将选择所有作为div元素子元素的段落元素，并将其文字颜色设置为红色。

      后代选择器是通过空格来定义的，它选择的是某个元素的所有后代元素，不仅仅是直接的子元素。例如，如果有一个id为haha的元素，#haha b这个后代选择器会选择该元素内部的所有b标签，无论它们是直接的子元素还是更深层次的后代元素。这意味着，无论b标签在DOM树中的深度如何，只要它是#haha元素的后代，就会被选中。

      1
      2
      3
      4
      5
      6
      7
      8
      <div class="parent">
          <h2>Title</h2>
          <p>这是父元素的文字</p>
          <div class="child">
              <p>这是子元素的文字 1</p>
              <p>这是子元素的文字 2</p>
          </div>
      </div>
      1
      2
      3
      .parent p {
          color: red;
      }

      alt text

      而子选择器是通过大于号来定义的，它选择的是某个元素的直接子元素，不包括更深层次的后代元素。例如，如果有一个id为haha的元素，#haha > b这个子选择器只会选择该元素直接子元素中的b标签，不会选择更深层次的后代元素。这意味着，只有当b标签直接是#haha元素的子元素时，才会被选中。

      1
      2
      3
      .parent > p {
          color: red;
      }

      alt text

    CSS的继承与层叠特性^继承层叠

    1. 继承性

      继承性是指某些CSS属性可以被元素的子元素继承，而不是只作用于该元素本身。例如，font-size、color、line-height等属性都可以被继承。

      但是，并不是所有的CSS属性都可以被继承。例如，border、margin、padding等属性就不能被继承。

    2. 层叠性

      层叠性是指当多个CSS规则应用到同一个元素上时，如何确定最终的样式。通常，后定义的规则会覆盖先定义的规则。

      但是，在某些情况下，层叠性可能会导致一些问题。例如，当两个规则都设置了font-size属性，但是一个规则的font-size属性值为16px，而另一个规则的font-size属性值为24px时，最终的font-size属性值会是24px。

      为了避免这种情况，我们可以使用!important关键字来提高某个规则的优先级。例如：

      1
      2
      3
      p {
          font-size: 16px !important;
      }

      一般来说，优先级规则可以表述为：行内样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器

  4. 用CSS设置文本样式

    长度单位^长度

    主要分为两种类型，一种是绝对类型，另一种是相对类型。

    1. 绝对类型
      • px像素
      • cm厘米
      • mm毫米
      • in英寸
      • pt磅（1pt = 1/72英寸）
      • pc派卡（1pc = 12点）
    2. 相对类型
      • %百分比
      • em相对单位，相对于父元素的字体大小
      • rem相对单位，相对于根元素（html）的字体大小
      • vh视口高度单位，相对于视口高度的百分比
      • vw视口宽度单位，相对于视口宽度的百分比

    颜色定义

    在HTML页面中，颜色统一采用RGB模式，元素的颜色可以通过以下方式设置。

    1
    2
    3
    4
    5
    p { color: blue;}                       /*直接使用颜色英文名*/
    p { color: #0000ff;}                  /*最常用的6位十六进制数字表示*/
    p { color: #00f;}                     /*形如#aabbcc的颜色值可以简写*/
    p { color: rgb(0,0,255);}             /*分别给出RGB三种颜色的十进制数值*/
    p { color: rgb(0%,0%,100%);}            /*分别给出RGB三种颜色的百分比数值*/

    设置文字字体

    在CSS中，使用font-family属性设置文字的字体，例如：

    1
    2
    3
    4
    5
    6
    h1 {
        font-family: "黑体";
    }
    p {
        font-family: "微软雅黑", "宋体", sans-serif;
    }

    上述对p元素文字字体同时声明了两个字体名称，其含义是告诉浏览器首先在访问者的计算机里寻找微软雅黑字体，如果没用就寻找宋体字体。如果这两种字体都没有，则使用浏览器默认字体显示。

    font-family属性可以同时声明多个字体，字体之间用逗号隔开。一些字体名称中间会出现空格，例如Time New Roman，这时需要用双引号将其括起来。(不管什么字体都用双引号括起来不就得了🙃)

    设置文字的倾斜效果

    在CSS中，使用font-style属性设置文字的倾斜效果，其属性值有italic（倾斜）和normal（正常）。例如：

    1
    2
    3
    p {
        font-style: italic;
    }

    上述代码将使所有p元素的文字都倾斜显示。

    设置文字的加粗效果

    在CSS中，使用font-weight属性设置文字的加粗效果，其属性值有normal（正常），bold（粗体），bolder（加粗），lighter（比正常细），100-900共有九个层次（100，200……900）数字越大字体越粗。例如：

    1
    2
    3
    p {
        font-weight: bold;
    }

    上述代码将使所有p元素的文字都加粗显示。

    英文字母大小写转换

    在CSS中，使用text-transform属性设置英文字母的大小写转换，其属性值有none（不转换），capitalize（每个单词的首字母大写），uppercase（全部大写），lowercase（全部小写）。例如：

    1
    2
    3
    p {
        text-transform: uppercase;
    }

    上述代码将使所有p元素的文字都转换为大写显示。

    控制文字大小

    CSS中是通过font-size属性设置文字的大小，而该属性的值可以使用很多种长度单位，如px、em、%等等。例如：

    1
    2
    3
    p {
        font-size: 16px;
    }

    上述代码将使所有p元素的文字大小都设置为16像素。在实际工作中，最常使用的单位是px和em，其中1em表示的是字母m的标准宽度。

    在文字排版时，有时会要求第一个字母比其他字母大很多，并下沉显示，就可以使用em单位。例如：

    1
    2
    3
    4
    .first-letter {
            font-size: 3em;
            float: left;
        }

    1
    2
    3
    4
    5
    <p id="p1"><span class="first-letter">这</span>组插画由六幅作品组成，均以极光为核心元素，场景各具特色。
            画面中，极光呈现绿、紫、粉等斑斓色彩，或与荒漠红岩地貌交融，
            或与未来都市建筑群辉映，或点缀山林溪流之景，色彩丰富且富有层次感，
            整体风格奇幻明快，展现出自然与科幻交织的想象世界。
    </p>

    image.png

  5. 用CSS设置图像效果

  6. 用CSS设置背景颜色与图像

  7. CSS盒子模型

  8. 盒子的浮动与定位

  9. 用CSS设置表格样式

  10. 用CSS设置链接与导航菜单

  11. 用CSS建立表单