版权声明
作者:清风不渡博客地址:/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>
优点:代码模块化管理,复用率高,维护方便