HTML中CSS的3种基本使用方式

来源：互联网发布：河北网络集成商编辑：程序博客网时间：2024/05/21 06:17

① 行间样式表

行间样式表：    是将CSS代码写在HTML的标签里。比如我将一段文本字体设置为红色，并将其居中显示，实现如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>行间样式表示例</title>    </head>    <body>        <p align="center" style="color: red;">行间样式表</p>    </body></html>

结果如下
行间样式表

② 内部样式表

内部样式表：    与行间样式表类似，都是将CSS代码写在HTML文档中；    不同的是内部样式表不是写在标签中，而且有一定的格式。比如我将一段文本的颜色设置成黄色居中，背景设置为宽100px,高40px,颜色为红色实现如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>内部样式表示例</title>        <style type="text/css">            div{                width: 100px;                height: 40px;                color: yellow;                background-color: red;                text-align: center;            }        </style>    </head>    <body>        <div>内部样式表</div>    </body></html>

结果如下
内部样式表

③ 外部样式表

外部样式表：    与内部样式表的相同之处在于都有一定的格式；    不同的是他的CSS代码是写在HTML文档外的.css文件中，而且使用时需要引用以下是实现②中需求的文件代码：

test.html

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>外部样式表示例</title>        <link rel="stylesheet" href="css/test_css.css" />    </head>    <body>        <div>外部样式表</div>    </body></html>

test_css.css

div {    width: 100px;    height: 40px;    color: yellow;    background-color: red;    text-align: center;}

结果如下
外部样式表

在上面的html文档中，有一行代码<link rel="stylesheet" href="css/test_css.css" />这是引用外部样式表的固定格式。href是.css文件的路径，在这里.css文件是放在css文件下的。

阅读全文

0 0