目录导航

带有CSS的HTML用于设计更具交互性的网页。要了解有关样式化HTML元素的更多信息,请参阅CSS教程

CSS的知识内容非常多,下面让我们快速看一下带有CSS的HTML,以创建一些交互式网页。可以通过以下三种方式之一来设置HTML元素的样式:

  • 内部CSS - 使用<head>部分中的<style>标记定义CSS。
  • 外部CSS - 在单独的.css文件中定义所有CSS属性,然后使用部分中的标记将文件包含在HTML文件中。
  • 内联CSS - 使用HTML元素中的style属性定义CSS属性。

HTML CSS语法

可以使用以下常规形式将HTML与CSS结合使用:

element{property1:value1;property2:value2;}

在此,element是HTML元素名称。propertyn是CSS属性。valuen值为CSS值。多种样式用分号分隔。

HTML内联CSS

可以使用内联CSS设置HTML元素的样式。以下示例演示了如何使用内联CSS设置HTML元素的样式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML CSS示例</h2>        
    <p style="text-align:center;">Welcome to nxtutor.com(中间对齐)</p>
    <p style="color:red">HTML CSS示例(color:red)</p>
    <p style="color:blue;font-size:18px;">HTML CSS示例(color:blue;font-size: 18px;)</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML内联CSS

HTML内部CSS

可以使用内部CSS为同一页面上的所有HTML元素定义通用样式。内部样式是使用<style>元素在<header>内部定义的。以下示例演示了如何使用内部CSS设置HTML元素的样式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <style>
        body{background-color:#0088cc;}
        h2{color:red}
        p{color:white,font-size: 12px;}
        div{color:white;font-size:18px;}
    </style>
</head>
<body>
    <h2>HTML CSS示例</h2>        
    <p>Welcome to nxtutor.com(中间对齐)</p>
    <p style="color:red">HTML CSS示例(color:red;font-size: 12px;)</p>
    <p>HTML CSS示例(color:white)</p>
    <div>HTML CSS示例(color:white;font-size:18px;)</div>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML内部CSS

HTML外部CSS

在所有三种样式中,外部样式最为重要。要使用外部CSS,需要创建一个扩展名为.css的外部文件,其中包含所有样式。 而且,可以将此文件导入任何其他HTML文档中,以将样式(在该CSS文件中定义)应用于HTML文档。看看下面的例子:

假设有以下一个mystyle.css的css文件: