4-CSS的三种样式
- 什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
- CSS的编写格式是键值对形式的，比如
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值（类似字典）
CSS的三种样式
CSS有3种书写形式：
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<div>我是div</div>
<p>我是段落标签</p>
</body>
</html>
上图：这是普通的div和段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body style="background: cornflowerblue">
<div>我是div</div>
<p>我是段落标签</p>
</body>
</html>代码：设计了背景颜色
上图：设置颜色的时候，会自动弹出颜色提供选择
上图：可以看到背景颜色改为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<!--style="background: cornflowerblue"-->
<!--
单值属性：只有一个属性值
符合属性：有多个属性值
-->
<body>
<div style="color: red; font-size: 40px; background-color: greenyellow;">我是div</div>
<p style="color: purple; font-size: 100px; border: 5px solid red">我是段落标签</p>
</body>
</html>代码↓
line13：通过style设计字体为红色（color：red）；调整字体大小（font-size：40px）；调整字体的背景颜色（background-color：greenyellow）。
line14：设计字体为紫色；字体大小为100px；给字体设计边框，边框大小为5px，solid是实线，red红色（border有多个属性，说明这是复合属性）；
上图：实现效果
页内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--页内样式的标签-->
<style>
body{
background-color: dodgerblue;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落标签</p>
</body>
</html>代码：在head中使用style，然后关联body，设计body为蓝色，这样有关于body的内容都会变成蓝色；
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--页内样式的标签-->
<style>
/*body{*/
/* background-color: dodgerblue;*/
/*}*/
div{
color:red;
font-size: 45px;
}
p{
color: fuchsia;
font-size: 60px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落标签</p>
</body>
</html>代码：将body的样式注释掉； 然后针对div和p标签进行设计，下图为效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--页内样式的标签-->
<style>
/*body{*/
/* background-color: dodgerblue;*/
/*}*/
div{
color:red;
font-size: 45px;
}
p{
color: fuchsia;
font-size: 60px;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>代码：将body中的其他标签复制多条，然后看效果
上图：如果是行内样式，需要在每个div和每个p标签进行设计；而页内样式只需在head中针对同一类标签进行设计后，所有相同类的标签都会同时被设计出效果。
外部标签
上图：图中每个内容都是一个链接页面，也就是说一个网站会有多个页面，如果使用页内样式的话就要每个页面都单独去设计。 而使用外部标签的话，只需要每个页面去调用同一个样式的话，就可以实现多个页面使用相同的设计样式了。
上图：当前的文件结构
div{
color: turquoise;;
font-size: 50px;
border: 5px double red;
}
p{
color: maroon;
font-size: 88px;
}代码↓
在index.css文件中设计样式；
double为双实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--引入-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>我是MT</div>
<p>我是段落</p>
</body>
</html>代码↓
在03-外部样式.html文件中 引入index.css的样式；
link 就是引入；
rel要声明与引入的内容是什么关系，stylesheet表示 样式设计关系，就是说会引入样式设计；
href指定css文件。
上图：直接引入css文件中的样式就实线了效果设计；如果有多个页面，每个页面直接引入即可。
效果就近与叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--页内样式的标签-->
<style>
/*body{*/
/* background-color: dodgerblue;*/
/*}*/
div{
color:red;
font-size: 45px;
}
p{
color: fuchsia;
font-size: 60px;
}
</style>
<!--引入-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>代码↓
代码中可以看到使用了外部样式，又使用了页内样式。
这种情况，body就会使用离它最近的样式，代码中可以看到从body往上，是引入的样式最近，所以优先使用引入的外部样式，然后才会去使用页内样式；
同一个效果的设计优先使用最近的样式；如果外部样式和页内样式有不冲突的地方，就会叠加。
上图：外部样式最近，其次叠加页内样式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--引入-->
<link rel="stylesheet" href="css/index.css">
<!--页内样式的标签-->
<style>
/*body{*/
/* background-color: dodgerblue;*/
/*}*/
div{
color:red;
font-size: 45px;
}
p{
color: fuchsia;
font-size: 60px;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>代码：样外部样式放到页内样式上面，也就是说现在最近的样式是页内样式。
上图：样式的位置移动，设计的样式也就产生了变化。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT