CSS-代码书写方式
2020-08-04 本文已影响0人
小驴拉磨
1、书写方式
CSS代码书写方式有三种：嵌入式、外链式、行内式。
2、嵌入式
将CSS代码嵌入到HTML文件中，嵌入式是通过<style>标签将CSS代码嵌入到html网页中。
书写方式：
<style type="text/css">
/*书写CSS代码
选择器{属性:值;属性:值;}
*/
p {color: red;font-size: 100px;}
</style>
如果使用的HTML5的话 type="text/css"可以省略
<style></style>标签可以放在HTML的任何位置，但是一般都放在head里面
image.png
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小驴拉磨</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #FF0000;
}
</style>
</head>
<body>
<!-- 使用CSS代码给div设置宽度100像素，高度100像素，背景色为红色 -->
<div></div>
</body>
</html>
3、外链式
外链式是指单独写一个.css扩展名的文件，然后再<head></head>标签中使用<link></link>标签，将这个css文件引入到HTML文件中。
注意：css文件不能脱离html单独运行。
语法：
<link rel="stylesheet" href="css文件的地址">
css文件内：
/*
css代码
这个文件中只能书写css格式的代码
选择器{属性值:值;}
*/
body {
background-color: #f00;
}
效果：
image.png
验证是否引入css成功：
1、在浏览器打开html文件。
2、右击，选择检查
image.png
3、选择network->css，如果如果是红色表示引入失败，白色表示成功
引入失败
4、引入成功
引入成功
一个html可以引入多个css文件。
image.png
4、行内式
将css代码写在HTML的标签的style属性中。
style是一个通用属性，每一个标签都有这个属性。
语法格式
<标签名 style="属性名: 值; 属性名: 值; 属性名: 值"></标签名>
image.png
总结：
- 使用内嵌式的方式来书写CSS，它只能作用于当前的html文件。
- 使用外链式的方式来书写CSS，它可以作用于多个html文件。
- 使用行内式的方式来书写CSS，他只能作用于单个标签。
