Css用法_css #999-CSDN博客

本文链接：https://blog.csdn.net/lxh_gdmu/article/details/48896115

样式分为:直接样式、内部样式、外部样式(推荐)

直接样式：

<p style="color:#F00">直接样式</p>

内部样式：

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>内部样式</title>
<style type="text/css">
p{color:#999}
</style>
</head>

<body>
<p>这是一个段落1</p>
</body>
</html>

外部样式(推荐)

.css文件

@charset "gb2312";
/* CSS Document */

*{font-family:"微软雅黑";font-size:16px}//*表示全部应用此效果
p{color:#F00}//p标签的属性设置
p#t{color:#0F0}//带有p和id为t的属性设置
p#t3 span{color:#999}//带有p和id为t3中<span></span>的属性设置
p.t4{color:#000}//带有p和class为t4的属性设置
p.t5 span{color:#F0F}//带有p和class为t5中<span></span>的属性设置

.html文件

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>样式</title>
<link rel="stylesheet" href="css/home.css" type="text/css">//rel表示样式表，href表示css文件路径
</head>
<body>
<p>这是一个段落1</p>
<p id="t">这是一个段落2</p>
<p class="t2">这是一个段落3</p>
<p>这是一个<span>段落4</span></p>
<p id="t3">这是<span>一个</span>段落5</p>
<p class="t4">这是一个段落6</p>
<p class="t5"><span>这是</span>一个段落6</p>
</body>
</html>