这里写目录标题
语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS的引入方式
内联样式(行内样式)
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
特点:缺乏整体性和规划性,不利于维护,维护成本高,代码复用度低;
<body>
<!--
行内式引入
借助标签的style属性引入的
style="样式名:样式值;样式名:样式值;... ... "
问题1 代码复用度不高
2更新和维护工作量大
好处:直观
-->
<p style="background-color: lightgray;width: 500px;color: green;" >今天天气很凉快,北京今日无新增</p>
<p style="background-color: lightgray;width: 500px;color: green;" >后天放假</p>
</body>
内部样式 (内嵌样式)
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
<head>
<style>
h1 {
background: red; }
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*css中的注释
内嵌式,在head标签中 使用一对style标签引入css样式表
通过选择器来确定样式 的作用标签
优点:
1提高了代码复用度
2维护工作量降低
3利于整体风格统一
缺点:
1通过选择器,不太直观
2样式只能作用在当前页面内
*/
p{
background-color: lightgray;
width: 500px;
color: green;
}
</style>
</head>
<body>
<!---->
<p >今天天气很凉快,北京今日无新增</p>
<p >后天放假</p>
</body>
</html>
外部样式(推荐)
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<link rel="stylesheet" type="text/css" href="xxx.css">
外部css文件:
p{
background-color: lightgray;
width: 500px;
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
在head标签中通过 link标签引入外部样式表
1多个html可以使用同样的样式,代码复用度进一步提高
2利于整个网站风格统一
3减少当前页面的代码
-->
<link rel="stylesheet" type="text/css" href="css/mycss.css" />
</head>
<body>
<p >今天天气很凉快,北京今日无新增</p><