前端研习录（02）——CSS内联样式、内部样式及外部样式

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/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>

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

前端研习录（02）——CSS内联样式、内部样式及外部样式相关推荐

css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...
css 内联、外联和外部样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表标签:<p> <div>-之类的标签使用方式:直接输入标签名类(class):cla ...
CSS内联样式的使用，吐血整理
前言本文主要是javascript和css方面的基础面试题,适合面试前以及平时复习食用. 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack.git.node ...
什么？CSS内联样式的使用
CSS 篇 link 与 @import 的区别 link 是 HTML 方式, @import 是CSS方式 link 最大限度支持并行下载, @import 过多嵌套导致串行下载,出现 FOUC ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
内部样式表、外部样式表、内联样式表
外部样式表: 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表 ,其书 ...
HTML基础内联样式改进三毛语录
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

前端研习录（02）——CSS内联样式、内部样式及外部样式

版权声明

一、CSS由什么构成

二、内联样式

三、内部样式

四、外部样式

前端研习录（02）——CSS内联样式、内部样式及外部样式相关推荐

最新文章

热门文章