CSS引入方式

定义: 按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:

一、行内样式表(行内式)

定义: 内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到

一个<style>标签中

特点:

a,<style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中

b,通过这种方式,可以方便控制当前整个页面中的元素样式位置

c,代码结构清晰,但是并没有实现结构与样式完全分离

d,使用内部样式设定CSS,通常也被称为嵌入式引入,这种方式是我们通常练习时常用的方式

示例:

<style>

div {

color: red;

font-size: 20px;

}

</style>

二、内部样式表(嵌入式)

定义: 行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式

特点:

a,style其实就是标签的属性

b,在双引号中间,写法要符合CSS规范

c,可以控制当前的标签设置样式

d,由于书写繁琐,并且没有体现出结构与样式相分离的思想,不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用

e,使用行内样式表设定CSS,通常也被称为行内式引入

示例:

<div style="color: red; font-size: 20px;">这是一个CSS内部样式测试案例</div>

三、外部样式表(链接式)

定义: 实际开发中都是外部样式表,适合于样式比较多的情况,核心是样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

注意: 使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中最常用的方式

引入步骤:

a,新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中

b,在HTML页面中,使用<link>标签引入这个文件

示例:

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

属性 作用

rel 定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet"表示被链接的文档是一个样式表文件

href 定义所连接外部样式表文件的URL,可以是相对路径,也可以是绝对路径

四、总结

五、Chrome调试工具

相关推荐
passerby60617 分钟前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角1 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!1 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰2 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi3 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen4 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马4 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu5 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
IT_陈寒5 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端
乘风gg5 小时前
DeepSeek V4.1 Flash 来了,明天中午 Flash 降价 60%
前端·ai编程·claude