一、对CSS的基础认知
CSS(Cascading style sheets)层叠样式表,用于美化网站,由选择器和属性值构成
1.1 CSS的三种写法
1.1.1 内嵌式
直接写在style标签中,style标签一般写在head标签里面,title标签下面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*css的注释*/
p
{
color: red;
font-size: 100px;
background-color: aqua;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<p>红色</p>
</body>
1.1.2 外联式
直接把CSS中写在一个 .css 文件中,通过link标签进行连接
.html文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- rel的属性值stylesheet表示关系为样式表,而href的属性值应该为相应的 .css 文件的路径 -->
<link rel="stylesheet" href="./mine.css">
</head>
<body>
<p>红色</p>
</body>
mine.css文件
p
{
color:red;
}
1.1.3 行内式
直接把CSS写到标签的style属性中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="color: green; font-size: 100px;">第一个div标签</div>
<div>第二个div标签</div>
</body>
小案例适合用内嵌式,大项目适合用内嵌式,而行内式一般配合js使用