1. CSS引入方式
CSS的三种样式表
按照CSS样式的书写位置（引入方式），CSS样式表主要可以分为以下三大类
- 行内样式表（行内式）控制一个标签
- 内部样式表（嵌入式）控制一个页面
- 外部样式表（链接式）控制多个页面
2. 示例
Eg1: 内部样式表
- 写到html页面内部，将所有的CSS的代码抽取出来，单独放到style中
- 可以控制整个html的页面
- 代码结构清晰
- 结构与样式只是部分分离
源代码
<!DOCTYPE html>
<html lang="en">
<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>
div {
color: deeppink;
}
</style>
</head>
<body>
<div>写到html页面内部，将所有的CSS的代码抽取出来，单独放到style中</div>
</body>
</html>
测试效果
Eg2: 行内样式表
- 直接在标签的内部用style="color = ?"直接给定样式，简单快捷
- style本身就是标签的属性
- 但是只能控制当前标签的样式格式
- 没有体现结构样式相分离的思想
源代码
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<p>小河弯弯向南流</p>
<p>流到香江去看一看</p>
<p>东方之珠我的爱人</p>
<p>你的风采是否浪漫依然</p>
<p>月儿弯弯的海港</p>
<p style="color: deeppink;" >夜色深深灯火闪亮</p>
<p>东方之珠整夜未眠</p>
</body>
</html>
测试效果
Eg3: CSS外部样式表
- 在外部单独写一个样式带css文件中，之后再把css样式引入（.css）
- 在head这里直接link
源代码
html文件
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 在head这里直接link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>小河弯弯向南流</div>
<div>流到香江去看一看</div>
<div>东方之珠我的爱人</div>
<div>你的风采是否浪漫依然</div>
<div>月儿弯弯的海港</div>
</body>
</html>
CSS文件
/* 这个CSS文件里面只有样式没有标签 */
/* 可以通过html页面中的link标签将css引入样式 */
div {
color: deeppink;
}
测试效果
写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享
各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知
扫一扫
70
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
