CSS 和 HTML 的结合方式
1、在标签的style属性上修改标签样式
在标签的 style 属性上设置”key:value value;”,修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 和 HTML 的结合方式1</title>
</head>
<body>
<!--
分别定义两个 div、span标签,
分别修改每个 div 标签的样式为:边框1个像素,实线,红色
-->
<div style="border: 1px solid red;">div标签1</div> 在style属性上设置值
<div style="border: 1px solid red;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>
</body>
</html>
运行效果1:
这种方式有以下几个缺点:
- 如果标签、样式多了,代码量会非常庞大。
- 可读性非常差。
- CSS代码没什么复用性可方言。
2、在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式
在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式。
格式如下:
xxx {
Key : value value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 和 HTML 的结合方式2</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
<!--
分别定义两个 div、span标签,
分别修改每个 div 标签的样式为:边框1个像素,实线,红色。
-->
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
运行效果2:
这种方式有以下几个缺点:
- 只能在同一页面内复用代码,不能在多个页面中复用CSS代码
- 不方便维护,实际项目中会有很多页面,要到每个页面中去修改,工作量相当大
3、把 css 样式写成一个单独的 css 文件
把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" />
标签 导入 css 样 式文件
CSS文件内容:
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
运行效果3:
介绍的三种CSS和HTML的结合方式运行效果都是一样的,CSS代码在HTML中不同的位置效果是一样的,第三种结合方式优化了前两种,是目前用的最普遍的方式,易维护,可复用,可读性强。
今天就先分享到这里啦!下一篇将继续分享有关CSS的知识哦!
您的鼓励是我前进的动力,将会分享更多知识给您
欢迎点赞 + 收藏 + 关注哦!!!