html与css学习笔记（2）

2025/1/30 16:24:56 来源：https://blog.csdn.net/m0_74370400/article/details/145267506 浏览: 次关键词：html与css学习笔记（2）

一、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>`

选择器类型	语法	作用	示例
元素（标签）选择器	标签名	选择所有指定标签元素	`p { color: red; }`
id选择器	`#` + id属性值	选择具有特定id的唯一元素	`#myId { background-color: blue; }`
类选择器	`.` + 类名	选择具有特定类名的所有元素	`.myClass { font-size: 16px; }`

优先级

id选择器#myId的优先级最高，类选择器.myClass的优先级次之，元素选择器p的优先级最低。