层叠样式表
三种引入方式归纳:
引入方式:
**第一种:** 行内式 CSS引入
使用: 在标签内 加上style属性在引号内
样式名:样式值;(每个样式之间用分号相隔)
**第二种:** 内部式CSS引入
使用: 在head标签里面 加上一个style标签
标签名{样式;}
**第三种:** 外部式CSS引入
使用:创建一个CSS文件 在html页面中的head标签里面使用 link标签进行引入。
行内式 CSS引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第二种 内部式 -->
<!-- <style>
div{
color: red;
}
</style> -->
<!-- <link rel="stylesheet" href="css/index.css"> -->
</head>
<body>
<!-- 第一种 内部式 -->
<div style="color: green;">
看这个人头上是绿的
头顶大草原
<h3>绿油油</h3>
</div>
<div>
左青龙右白虎
</div>
</body>
</html>
效果图:
内部式CSS引入:
代码和上述一样的,这里就不重复了,将行内式标签注释掉,打开内部式样式运行得下面的图示:
外部式CSS引入:
将行内和内部式样式注释掉,新建一个css文件,在css文件里面写标签的样式,然后再html里面用link引入就可以达到效果:
如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第二种 内部式 -->
<!-- <style>
div{
color: red;
}
</style> -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 第一种 内部式 -->
<!-- <div style="color: green;">
看这个人头上是绿的
头顶大草原
<h3>绿油油</h3>
</div> -->
<div>
左青龙右白虎
</div>
</body>
</html>
图示:
三种样式的优先级:
将上述代码的外部样式link的注释去掉,内部样式的注释去掉,还有行内样式的注释去掉,同时打开那么当运行代码时页面会显示什么颜色呢,那下面我们一起探讨一下,到底是红色还是黄色还是绿色呢?
代码我们就不重复写了,还是沿用上述代码,依次打开三种css样式,外部样式,内部样式和行内样式:
看图示比较如下:
总结:
三种样式表到现在为止我们有了初步的认识啦,大家最喜欢哪一种样式表呢,就我个人而言觉着内部样式比较好用,为什么这么说呢,也不是说行内样式不行,我个人感觉css样式写到body里面代码太冗余啦,并不是太美观
其次讲到内部样式和外部样式其实两者用起来没什么区别,这就要归结于我个人的原因啦,我笔记本屏幕太小了,写外部要分开写不是很舒服哈哈哈哈!如果有一个大屏幕我肯定用外部啦,这个每个页面都分离,代码看起来很美观!