1.CSS简介
1.1 CSS介绍
CSS用来修饰页面内容的
1.2 CSS按修饰分类
（1）标签样式表
p{
color:red;
}
（2）类样式表
.f20{
font-size:20px;
}
（3）ID样式表
#p4{
font-size:20px;
}
1.3 CSS按位置分类
（1）嵌入式样式表
直接在标签里添加style属性
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
（2）内部样式表
在<head>标签里用<style>标签表示
<head>
<meta charset="utf-8">
<style type="text/css">
p{
color:red;
}
.f20{
font-size:20px;
}
</style>
</head>
（3）外部样式表
在<head>标签里使用<link>标签引入外部文件
<head>
<link rel="stylesheet" href="css/demo01.css">
</head>
<html>
<head>
<meta charset="utf-8">
<!-- 内部样式表 -->
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码 */
/* 标签样式表 */
p{
color:red;
}
/* 类样式 */
.f20{
font-size:20px;
}
</style>
<!-- 引用外部的CSS样式表文件 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!--
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
-->
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
</body>
</html>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/273453.html