探索CSS的三种独特样式

发表时间: 2020-08-10 10:44

CSS

CSS全称为 Cascading Style Sheets,译为层叠样式表。CSS有三种样式：内联样式，内嵌样式，外联样式。

内联样式

内联样式通过HTML元素的style属性来设置CSS样式，语法如下：

 style="CSS属性：CSS属性值"；

示例代码：

 <!DOCTYPE html> <html>     <head>         <title>内联样式</title>         <meta charset="UTF-8">     </head>     <body>         <!-- style="css属性:css属性值;" -->         <div style="color:red;">启嘉班</div>      </body>  </html>

* 内联样式的缺点: 只对当前元素有效, 导致CSS代码可能出现冗余

内嵌样式表

通过HTML元素的style属性来设置CSS样式，语法如下：

 <style>     选择器{         属性名:属性值；     } </style>

示例代码：

 <!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>         p{             color: chartreuse;             font-size: 50px;         }                  </style> </head> <body>     <p>19级启嘉班</p> </body> </html>

优点: 相对于内联样式

*通过CSS选择器定位HTML页面中一个或一类元素

缺点:相对于内联样式

* 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效

* 编码的风格不符合编码原则中的低耦合

* 导致CSS代码可能出现冗余

外联样式

通过HTML元素的<link>元素来设置CSS样式表

1.创建一个CSS文件,用来存储CSS样式内容

2.在HTML页面中通过<link>元素引入外部指定的CSS文件

<link>元素:

* 作用: 用来引入HTML页面外部的资源

属性:

* rel属性: 用来设置外部资源与当前HTML页面的关系

* href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)

语法结构如下：

 <link rel="stylesheet" href="CSS文件路径">

示例代码：

 <link rel="stylesheet" href="style.css">

优点: 相对于内嵌样式表和内联样式

* 将CSS样式与HTML页面进行分离(低耦合)

* 不会出现内嵌样式表或内联样式产生的代码冗余

缺点: 可能对HTML页面的加载造成负担,导致性能下降

下一节更新CSS选择器

探索CSS的三种独特样式

CSS

内联样式

内嵌样式表

外联样式

热门阅读

推荐阅读