1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端研习录(02)——CSS内联样式 内部样式及外部样式

前端研习录(02)——CSS内联样式 内部样式及外部样式

时间:2021-08-09 15:07:16

相关推荐

前端研习录(02)——CSS内联样式 内部样式及外部样式

版权声明

作者:清风不渡博客地址:/WXKKang

一、CSS由什么构成

重拾前端记忆,记录学习笔记,现在进入CSS部分,CSS的唯一作用就是美化我们的网页,通常由选择器+一条或多条声明组成,如下:

选择器{声明:声明值;声明:声明值;声明:声明值;}

注意:声明与声明值之间用“:”隔开,多个声明之间用“;”隔开

二、内联样式

内联样式直接在标签内通过用style的方式实现,如下:

<p style="color: blueviolet;font-size:20px">我是内联样式</p>

缺点:内联样式缺乏整体性和规划性,不利于维护,不提倡

三、内部样式

内部样式通常在<head>标签中通过<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>清风不渡</title><style>p{color: red;font-size: 40px;}</style></head><body><h3>内部样式</h3><p>我是内部样式</p></body></html>

缺点:单个页面内的css代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱

四、外部样式

在html文档外部建立css文档,通过link的方式引入html文档,然后在css文档中编写css代码,如下:

p{color: blue;font-size: 60px;}

<!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>清风不渡</title><!--引入css文件--><link rel="stylesheet" href="./css/one.css"></head><body><h3>外部样式</h3><p>我是外部样式</p></body></html>

优点:代码模块化管理,复用率高,维护方便

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。