child::
html 使用样式的三种方法
- father::html 标签属性
1. 语法:
1. 直接在html标签中指定style样式属性
- child::
内联style
- father::html 使用样式的三种方法
示例
指向原始笔记的链接 <p style="color: blue; font-size: 14px;">这是一个带有内联样式的段落。</p>2. 在head标签中添加style样式标签
<head> <style> css修改对应标签样式的语法 </style> </head>3. 使用link单标签引用css文件
child::
link css
适用范围
child::link与import的区别
实例
指向原始笔记的链接 <head> <link rel="stylesheet" href="css文件相对路径"> </head>4. 导入方式
child:
import
适用范围
child::link与import的区别
示例:
指向原始笔记的链接 <style> @import url(style.css); </style>5. 比较链接方式和导入方式
child::
link与import的区别
CSS 链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。
- 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕(解析HTML后)再被加载;
- 当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面(重绘),也就出现了短暂的花屏现象。
小结:我们应尽量使用
指向原始笔记的链接<link>标签导入外部 CSS 文件,避免或者少用使用其他三种方式2. css语法:
child::css 修改对应标签的样式 语法
指向原始笔记的链接