HTML 样式

前言

  • CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式

  • CSS 是在 HTML 4 开始使用的,是为了更好的渲染 HTML 元素而引入的。

标签 描述 备注 🔗
<style> </style> 定义文本样式 🔗
<link /> 定义资源引用地址 🔗
  • 在 HTML 4 原来支持定义 HTML 元素样式的标签和属性已被弃用。这些标签将不支持新版本的 HTML 标签。

  • 不建议使用的标签有: <font>, <center>, <strike>

  • 不建议使用的属性: colorbgcolor.

  • CSS 可以通过以下方式添加到 HTML 中,最好的方式是通过外部引用 CSS 文件。

    • 内联样式:在 HTML 元素中使用 style 属性
    • 内部样式表:在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 CSS
    • 外部引用:在 HTML 文档头部 <head> 区域使用 <link /> 元素中的 href 属性引用外部 CSS 文件

1、内联样式

  • 当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1.1 改变段落的颜色和左外边距

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>
    <body>
    <p style="color: blue; margin-left: 20px;">
    这是一个段落。
    </p>
    </body>

    </html>
  • 效果

1.2 改变背景颜色

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>
    <body style="background-color: yellow;">
    <h2 style="background-color: red;">
    这是一个标题
    </h2>
    <p style="background-color: green;">
    这是一个段落
    </p>
    </body>

    </html>
    • 背景色属性 background-color 定义一个元素的背景颜色。
    • 早期背景色是使用 bgcolor 属性定义。
  • 效果

1.3 改变字体, 字体颜色,字体大小

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>
    <body>
    <h1 style="font-family: verdana;">
    这是一个标题
    </h1>
    <p style="font-family: arial; color: red; font-size: 20px;">
    这是一个段落
    </p>
    </body>

    </html>
    • 使用 font-family(字体),color(颜色),和 font-size(字体大小)属性来定义字体的样式。
    • 早期文本样式是使用 <font> 标签定义。
  • 效果

1.4 改变文本对齐方式

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>
    <body>
    <h1 style="text-align: center;">
    居中对齐的标题
    </h1>
    <p>这是一个段落</p>
    </body>

    </html>
    • 使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式。
    • 文本对齐属性取代了旧标签 <center>
  • 效果

2、内部样式表

  • 当单个文件需要特别样式时,就可以使用内部样式表。可以在 <head> 部分通过 <style> 标签定义内部样式表。
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <style type="text/css">
    h1 {font-family: verdana;}
    .hh {background-color: red;}
    #pp {font-family: arial; color: red; font-size: 20px;}
    </style>
    </head>
    <body>
    <h1>这是一个标题</h1>
    <h2 class="hh">这是一个标题</h2>
    <p id="pp">这是一个段落</p>
    </body>

    </html>
  • 效果

3、外部样式表

  • 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,可以通过更改一个文件来改变整个站点的外观。

    1
    2
    3
    <link type="text/css" rel="stylesheet" href="/css/style.css" />

    <link type="text/css" rel="stylesheet" href="file://d:/css/style.css" /> <!-- 本地文件 -->
  • 实例

    • html 文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <!DOCTYPE html>

      <html>

      <head>
      <meta charset="utf-8" />
      <title>Qian Chia 工作室</title>

      <link type="text/css" rel="stylesheet" href="/css/style.css" />
      </head>
      <body>
      <h1>这是一个标题</h1>
      <h2 class="hh">这是一个标题</h2>
      <p id="pp">这是一个段落</p>
      </body>

      </html>
    • css 文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      h1 {
      font-family: verdana;
      }

      .hh {
      background-color: red;
      }

      #pp {
      font-family: arial;
      color: red;
      font-size: 20px;
      }
  • 效果

4、属性

4.1 < style > 标签属性

属性 描述 备注 🔗
media media_query 为样式表规定不同的媒体类型 🔗
scoped scoped 如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素 H5 新加 🔗
type text/css 规定样式表的 MIME 类型 🔗
属性 描述 备注 🔗
charset char_encoding HTML5 不支持。定义被链接文档的字符编码方式 🔗
href URL 定义被链接文档的位置 🔗
hreflang language_code 定义被链接文档中文本的语言 🔗
media media_query 规定被链接文档将显示在什么设备上 🔗
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
必需。定义当前文档与被链接文档之间的关系。rel 是 relationship 的英文缩写 🔗
rev reversed relationship HTML5 不支持。定义被链接文档与当前文档之间的关系 🔗
sizes HeightxWidth
any
定义了链接属性大小,只对属性 rel=”icon” 起作用 H5 新加 🔗
target _blank
_self
_top
_parent
frame_name
HTML5 不支持。定义在何处加载被链接文档 🔗
type MIME_type 规定被链接文档的 MIME 类型 🔗

5、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、内联样式
    1. 2.1. 1.1 改变段落的颜色和左外边距
    2. 2.2. 1.2 改变背景颜色
    3. 2.3. 1.3 改变字体, 字体颜色,字体大小
    4. 2.4. 1.4 改变文本对齐方式
  3. 3. 2、内部样式表
  4. 4. 3、外部样式表
  5. 5. 4、属性
    1. 5.1. 4.1 < style > 标签属性
    2. 5.2. 4.2 < link > 标签属性
  6. 6. 5、HTML 实例
隐藏目录