css的三种样式分析之优缺点

最新推荐文章于 2022-12-04 23:10:52 发布

原创最新推荐文章于 2022-12-04 23:10:52 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

7 篇文章

订阅专栏

本文分析了CSS的三种样式写法：行内样式、内嵌样式和外部样式。行内样式直接在HTML标签中定义，便于快速实现但不易维护；内嵌样式在<head>中使用<style>标签，比行内样式更易维护，但仍有限制；外部样式通过链接单独的CSS文件实现，实现了样式与结构的分离，有利于维护和重用，适用于多个页面共享同一样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css----(cascading (层叠) , style(样式),sheets(表))—修饰html
css的写法:
1. 行内样式:—直接将样式属性写在开始标签style属性中
```
<div style="属性名称:属性值;属性名称:属性值;">
    缺点:1.结构样式没有分离 不利于后期维护 2.样式不能重复使用(推荐不使用)
</div>
```
2. 内嵌样式–在head标签中通过style标签书写
  1. css样式的注释方法:/* 解释 */
  2. 1.优点:结构样式分离好维护 2.样式重用
  3. 缺点:只能在一个页面中使用css样式
```
<style type="text/css">
p{
	width:100px;
    hight:100px;
    background-color:red;	
}
</style>
```
3. 外部样式—在css文件夹中书写css样式在哪一个页面中需要就进行引入(通过link)
  1. 先在新的css文件中写上然后写其他标签或选择器的具体css样式
```
@charset 'utf-8' ;
```
  2. 在html中引入css
```
<link rel='stylesheet' href='css/index.css'>
```
    rel ----- relationship : 定义连接的文件和html文档之间的关系
    
    优点:1.结构化样式分离,好维护 2.样式重用多个页面使用