云知梦CSS3学习笔记：从基础到进阶

需积分: 10 104 浏览量更新于2024-07-19 1 收藏 16.56MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"云知梦的CSS3学习笔记涵盖了HTML嵌套CSS样式、CSS优先级、注释、长度单位、选择器、字体与颜色等多个方面，是作者在学习过程中的重要笔记记录。" 在CSS3中，HTML嵌套CSS样式有三种主要方式： 1. 外部样式表 - 这是最推荐的方式，将CSS代码放在单独的`.css`文件中，通过`<link>`标签引入到HTML文档中，有利于代码的组织和重用。 2. 内部样式表 - CSS代码放在`<head>`标签内的`<style>`标签中，适用于整个页面的样式定义。 3. 内联样式 - 将CSS直接添加到HTML元素的`style`属性中，虽然方便快捷，但不利于代码维护，不推荐大量使用。 CSS优先级是决定哪个样式生效的关键，顺序如下： 1. 内联样式 - 具有最高优先级，如`style="..."`。 2. ID选择器 - 如`#example`，优先级次之。 3. 类选择器 - 如`.example`，优先级较低。 4. 标签选择器 - 如`p`，优先级最低。 CSS注释使用`/* ... */`包围，用于解释代码，便于阅读和维护。长度单位包括像素(px)和em。em是一个相对单位，通常用于字体大小，1em等于当前元素的字体大小，如1em默认为14px。在文字中使用em单位可实现响应式布局，但在图片中使用可能造成比例失真。选择器方面，关联选择器和组合选择器可以更精确地定位元素。`:first-letter`和`:first-line`分别用于选取元素的第一个字母和第一行文本。`:hover`选择器用于定义鼠标悬停时的样式，如例子所示，当鼠标悬停在图片上时，背景色变为`#f0f`。 `:selection`伪元素用于改变用户选中内容的样式，而属性选择器如`[name=username]`则可以针对具有特定属性的元素设置样式。关于字体与颜色，`font`属性是一个复合属性，可一次性设置字体家族、大小、样式和粗细，如`font: Arial, sans-serif 16px bold italic;`。其他文本相关的属性包括`letter-spacing`（字间距）、`word-spacing`（词间距）、`text-decoration`（下划线等装饰效果）、`text-align`（文本对齐）、`text-indent`（首行缩进）、`line-height`（行高）、`color`（颜色）和`word-break`（控制单词折行）。`text-decoration`可以设置下划线（`underline`）、上划线（`overline`）或删除线（`line-through`）。总结笔记中的关键点还包括 `.text-indent` 属性，用于设置文本首行的缩进，这对于段落的排版非常有用。以上就是云知梦CSS3学习笔记的主要内容，这些知识点对于理解和掌握CSS3的基础操作至关重要。通过深入理解并实践这些概念，开发者可以更有效地控制网页的布局和样式，提升用户体验。

资源详情

资源推荐