跳到主要内容

HTML 样式(CSS)

什么是CSS​

层叠样式表 （CSS） 用于设置网页布局的格式。 使用CSS可以控制颜色，字体，文本大小，间距，元素如何定位和布局，设置背景图像或背景颜色，根据不同设备或屏幕尺寸来显示不同的布局等等。

层叠样式表

“层叠”一词意味着子元素会继承父元素的样式。如果将body元素的文本颜色设置为“红色”，则所有标题， 段落和其他文本元素也将获得相同的颜色，除非子元素重新指定颜色。

样式引用方式​

样式的引用方式有3种：

  • 内联，通过使用 HTML 元素中的style属性设置。

  • 内部，通过使用style元素来设置。

  • 外部，通过使用link元素链接到外部CSS文件。

    提示

    通常在正式项目中通过引用单独的外部样式文件来设置样式。

内联样式​

内联 CSS 样式仅作用于当前的元素及它的子元素。

内联 CSS 使用 HTML 元素的style属性来设置。

<h1 style="color: red">标题</h1>

<p style="color: blue">这里是<strong>段落</strong></p>

<p>这里是另一个<strong>段落</strong></p>

about:blank

内部样式​

内部 CSS 用于定义单个 HTML 页面的样式。

内部 CSS 在 HTML 页面的head中的style元素中定义。

下例中，页面的所有h1元素的文本颜色都会被设置为 红色，所有的p元素及其子元素的文本颜色都会被设置为蓝色

<html>
    <head>
        <style>
            h1{ color: red}
            p { color: blue}
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <p>这里是<strong>段落</strong></p>
        <p>这里是另一个<strong>段落</strong></p>
    </body>
</html>

about:blank

外部样式​

外部样式表用于定义许多 HTML 页面的样式。

若要使用外部样式表，请在每个 HTML 页的head部分中添加指向该样式表的链接。

index.html
    <html>
        <head>
        <link rel="stylesheet" href="styles.css"/>
        </head>
        <body>
            <h1>标题</h1>
            <p>这里是<strong>段落</strong></p>
            <p>这里是另一个<strong>段落</strong></p>
        </body>
    </html>
about.html
    <html>
        <head>
        <link rel="stylesheet" href="styles.css"/>
        </head>
        <body>
            <h2>关于我们</h2>
        </body>
    </html>
styles.css
h1{ 
    color: red;
}
p { 
    color: blue;
}
h2 {
    color: green;
}
about:blank
提示

外部CSS样式文件中只能书写CSS样式。不能包含HTML等代码。

常用的CSS属性​

  • color，设置元素内文本的颜色。
  • background-color，设置元素的背景颜色。
  • font-size，设置元素内文本的大小。
  • border，设置元素的边框大小、样式和颜色。
  • padding，设置元素的内边距。
  • margin，设置元素的外边距。

HTML 参考​

名称描述

CSS 参考​

名称描述