HTML巩固练习之CSS基础

来源：互联网发布：手机淘宝商家注册流程编辑：程序博客网时间：2024/06/07 02:53

一：CSS的三种引用方式

1、外部样式表

2、内部样式表

3、内联样式表

二：代码编写

1、

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

2、

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>内部样式表</title>    <style type="text/css">    p {        color:red;    }    </style></head><body>    <p>绿叶学习网</p>    <p>绿叶学习网</p>    <p>绿叶学习网</p>  </body></html>

3、

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>内联样式表</title></head><body>    <p style="color:red;">绿叶学习网</p>    <p style="color:red;">绿叶学习网</p>    <p style="color:red;">绿叶学习网</p></body></html>

三：浏览器运行效果

四：三种方式的区别

为了提升网站的性能和维护性，一般使用外部样式表，方便应用到多个页面。

初学者建议使用内部样式表，代码量不多，HTML代码和CSS代码放在同一个文件，也方便修改和测试。

内联样式表冗余代码多，网站维护性差，不建议使用。不过可以使用内联样式表进行细节的微调。

0 0