CCS书写方式
2.1什么是书写方式?
CSS应该写到什么地方?
书写方式分为三种嵌入式 外链式 行内式
2.2嵌入式
什么是嵌入式
jiangCSS代码嵌入到HTML文件中,嵌入式式通过
如果我们使用的是HTML5的文档 type属性可以不写
注意:
在<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type="text/css">
div{
width: 100px;/*宽度100像素*/
height: 100px;/*高度100像素*/
background-color:#ff0000;/*背景颜色红色*/
}
</style>
</head>
<body>
<!---要使用CSS代码给div设置一个宽度100像素高度1
00像素以及背景颜色为红色
把div理解为一个存放东西的盒子--->
<div></div>
</body>
</html>这里插入代码片
2.3外链式什么是外链式?
外链式是单独一个以CSS为扩展名的文件,然后在
标签中使用标签,将这个CSS’文件链接到html文件中。、
Css文件不能单独运行必须要依赖HTML文件中!
语法格式;
<!—将单独的css文件链接到当前的HTML文件中---->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外链式</title>
</head>
<body>
<!---将单独的css文件链接到当前的HTML文件中---->
<link rel="stylesheet" href="css地址">
</body>
</html>
2.3行内式
什么是行内式
将CSS代码书写到HTML标签的style属性中
Style是一个通用属性,每一个标签里面都拥有这个属性!
语法格式
<标签名 style=“属性:值;属性:值:”><标签名>
总结:
使用嵌入式的方式来书写CSS’代码,他只能作用于当前的HTML文件。
使用外链式的方式来书写CSS代码,他可以作用于多个HTML文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内式</title>
<link rel="stylesheet" type="text/css" href="lhj.css">
</head>
<body>
<!----将DIV设置为宽度100px 高度100px,背景颜色为红色
使用行式是的方式来设置----->
<div style="width: 100px; height: 100px; background-color:#f00;"></div>
</body>
</html>