1、CSS引入方式
- 内嵌式
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--以下为在style标签中设置p标签内容字体颜色为红色的代码--> <style> p { color: red; } </style> </head>
直接在style标签下编写,此处p为选择器,在第二节中解释。
- .css文件外接引入
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--以下为外接引入style.css文件的代码--> <link rel="stylesheet" href="./style.css"> </head>
在<head>标签下使用link标签引入同一目录下已编写好的style.css文件
- 行内式引入
<body>
<div style="color:gold; font-size:14px">这是一个div</div>
</body>
在body的标签中直接设置其属性style的值
2、选择器类型
- 标签选择器
CSS文件中标签选择器的设置方法
p {
color: red;
font-size: 60px;
}
对应HTML中标签的设置:
<p>这个标签的名字就是p</p>
<p>如果使用标签选择器设置p标签的文本颜色为蓝色,所有p标签都会被设置</p>
<div>这个标签的名字为div</div>
- 类选择器
CSS文件中类选择器的设置方法,以下我们设置了两个类red和size,类选择器的格式为
.类名
.red {
color: red;
}
.size {
font-size: 60px;
}
对应HTML中类的设置,比如我们想要让某个标签使用我们设置的字体样式为红
<p class="red"> 给这个标签设置为red类,就能使用css中为red类设置的字体样式</p>
<p class="red size"> 给这个标签设置为red类,就能使用css中为red,size类设置的字体样式</p>
- id 选择器
CSS文件中id选择器的设置方法,格式为 #id
#one {
color: blue;
}
对应HTML中id的设置,比如我们想要让某个标签使用我们设置的字体样式为蓝色
<div id="one"> 这个部分id 为 one,字体会变成蓝色 </div>
注意:id 主要是用于js的编写,不是为字体样式等服务的。