<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在html中写入CSS代码的三种方式</title>
<!-- CSS:Cascading Style Sheet,“层叠样式表”的意思。
CSS能让网页制作者有效的定制、改善网页的效果。CSS是对HTML的补充。
CSS实现了网页内容和页面效果的彻底分离。
共有三种方式把CSS写入HTML代码中:
(1)、外部样式表:在项目里添加一个“样式表(.CSS文件)”,然后关联到本项目中;
(2)、嵌入样式表:在head标签内设置元素的样式;
(3)、内联样式表:在标签内设置元素的样式。优点:比较灵活,想给谁设置就给谁设置。
缺点:如果多个标签需要同一种设置,就需要写多行重复的代码。
CSS的语法有三部分构成:选择器、属性、值。
-->
<!-- 1、导入外部样式表 -->
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<!-- 外部样式表和嵌入样式表,谁放在下面,最终显示效果就是谁的。-->
<!-- 2、嵌入样式表(type属性:声明样式为CSS) -->
<style type="text/css">
p
{
background-color:Fuchsia;
font-size:x-large;
}
</style>
</head>
<body>
<!-- 3、内联样式表(优先级最高) -->
<p style="background-color:Blue;font-size:xx-large">我是标题1</p>
<p>我是标题2</p>
<p>我是标题3</p>
<p>我是标题4</p>
<p>我是标题5</p>
<p>我是标题6</p>
</body>
</html>
CSS代码:
p
{
background-color:Green;
font-size:large;
}
页面效果: