CSS层叠样式表（一）——使用CSS样式的方式 - 好文

1、HTML<!DOTYPE>声明标签

1）<!DOTYPE>声明必须是HTML文档的第一行，位于<html>标签之前

2）<!DOTYPE>声明不是HTML标签；它是web浏览器关于页面使用哪个HTML版本进行编写的指令。

3）HTML5中的声明格式为：<!DOTYPLE html>

其中，字符集的声明为<meta charset="utf-8">

2、内链样式表--如：<body style="background-color:green; margin:0;" >

格式：在标记后加空格，写style=...，属性与属性之间用“；”隔开，属性与属性值之间用“：”隔开

例子：内链样式表设置网页的背景颜色及网页字体颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS的使用方式</title>
</head> <body style="background-color:green;color:#fff">  <h1
style="color:#fff">CSS的使用方式</h1> <p>CSS的使用方式</p> </body> </html>color:#fff">

<h1 style="color:#fff">CSS的使用方式</h1> <p>CSS的使用方式</p> </body> </html>
注：#fff表示白色

运行结果：

3、嵌入式样式表--如：<style type="text/css"></style>

格式：该样式表需要放在<head>标记中，属性与属性值之间用“：”隔开

例子：嵌入式样式表设置网页的背景颜色及网页字体颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS的使用方式</title>
<style type="text/css"> /*控制全局的样式*/ body { background-color:green; color:red; }
/*控制P这一段落的样式*/ P { background-color:red; color:green; } </style> </head> <body>
<h1>CSS的使用方式</h1> <p>CSS的使用方式</p> </body> </html>
注：在CSS代码中进行注解
注释语法：
/* 注解注释内容 */

运行结果：

4、引入式样式表--如：<link rel="stylesheet"type="text/css"href="style.css">

格式：与嵌入式的格式相似，只是样式的设置需要引用一个.css文件，href=“*.css”

例子：嵌入式样式表设置网页的背景颜色及网页字体颜色
主程序： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>CSS的使用方式</title><link rel="stylesheet" type="text/css" href="style.css">
</head> <body> <h1>CSS的使用方式</h1> <p>CSS的使用方式</p> </body> </html><link
rel="stylesheet" type="text/css" href="style.css"> </head> <body>
<h1>CSS的使用方式</h1> <p>CSS的使用方式</p> </body> </html> style.css程序： body {
background-color:red; color:#fff; }
运行结果：

热门工具换一换