一、CSS引入方式
具体有 3 种引入方式,语法如下表格所示:
引入方式 | 语法 |
---|---|
内联样式 | 在HTML标签中使用style属性,例如:<div style="color: red;">这是一个红色的div</div> |
内部样式表 | 在HTML文件的<head> 标签内使用<style> 标签,例如:<head><style type="text/css">div { color: red; }</style></head> |
外部样式表 | 使用<link> 标签在HTML文件的<head> 标签内引入外部CSS文件,例如:<head><link rel="stylesheet" type="text/css" href="styles.css"></head> |
对于上述 3 种引入方式,企业开发的使用情况如下:
1. 内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用。
2. 内部样式,通过定义 css 选择器,让样式作用于当前页面的指定的标签上。
3. 外部样式, html 和 css 实现了完全的分离,企业开发常用方式。
二、颜色表示
颜色的表示方式常见的有以下三种:
表示方式 | 说明 | 示例 |
---|---|---|
颜色名称 | 直接使用预定义的颜色名称来表示颜色,如red(红色)、blue(蓝色)、green(绿色)等。这些名称不区分大小写。 | <p style="color: red;">这是红色文本。</p> |
十六进制值 | 以#开头,后面跟着6个十六进制数字,每两位表示一种颜色成分的强度,分别对应红、绿、蓝(RGB)。例如,#FF0000表示红色,其中FF表示红色成分的最大值。 | <p style="color: #FF0000;">这是红色文本。</p> |
RGB和RGBA值 | RGB值使用rgb()函数表示,参数为红、绿、蓝三种成分的强度,范围为0到255。RGBA值在此基础上增加了一个表示不透明度的参数,范围为0到1。 | <p style="color: rgb(255, 0, 0);">这是红色文本。</p> <p style="color: rgba(255, 0, 0, 0.5);">这是半透明红色文本。</p> |
三、CSS选择器
选择器类型 | 语法 | 作用 | 示例 |
---|---|---|---|
元素(标签)选择器 | 标签名 | 选择所有指定标签元素 | p { color: red; } |
id选择器 | # + id属性值 | 选择具有特定id的唯一元素 | #myId { background-color: blue; } |
类选择器 | . + 类名 | 选择具有特定类名的所有元素 | .myClass { font-size: 16px; } |
优先级
id选择器#myId
的优先级最高,类选择器.myClass
的优先级次之,元素选择器p
的优先级最低。