CSS的三种引入方式
本次我们将以CSS给HTML设置样式的三种主流方法导入方便我们开始学习css的基础。1. 行内式给单个元素进行装饰原理直接在HTML标签的 style 属性里写CSS代码只对当前这一个标签生效优点写起来简单修改方便适合给单个元素临时调整样式缺点如果页面里有很多元素都要设置样式会导致代码非常臃肿不方便统一管理也不利于复用。!-- 第一种行内式 -- p stylecolor: red; font-size: 10rpx;第一种通过style属性直接在元素里配置样式/p2. 内嵌式给当前页面统一化- 原理在HTML文件里用 style 标签包裹CSS代码通过选择器这里用了最简单的标签选择器 h3 给页面里的所有 h3 标签设置样式优点样式和内容分离比行内式更整洁也方便给多个同类型元素设置相同样式缺点样式只能作用于当前这一个HTML文件如果有多个页面需要相同样式就得重复写多份代码不利于复用。style /* 第二种通过style标签和选择器里配置样式 标签选择器直接用标签名选中某个元素 */ h3 { color: aqua; font-size: 15rpx; } /style3. 外链式给多个页面共享相关文件包原理把CSS代码单独写在 .css 后缀的文件里这里是 ./css/style.css 表示和当前HTML文件同级的 css 文件夹里的 style.css 文件再通过 link 标签把它引入HTML中优点样式和HTML完全分离一份CSS文件可以被多个HTML文件引入样式统一管理修改时只需要改一份文件非常适合大型项目缺点需要单独维护CSS文件对于非常简单的单页面来说会增加文件数量。!-- 第三种外链式 (允许相对路径绝对路径和URL)-- link relstylesheet href./css/style.css /head