云知梦CSS3学习笔记:从基础到进阶
"云知梦的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的基础操作至关重要。通过深入理解并实践这些概念,开发者可以更有效地控制网页的布局和样式,提升用户体验。
![](https://csdnimg.cn/release/download_crawler_static/10321028/bgc.jpg)
![](https://csdnimg.cn/release/download_crawler_static/10321028/bgd.jpg)
![](https://csdnimg.cn/release/download_crawler_static/10321028/bge.jpg)
剩余68页未读,继续阅读
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)
![](https://profile-avatar.csdnimg.cn/639a77740b4e4be19b83f1f8d89632b6_juliantem.jpg!1)
- 粉丝: 129
- 资源: 30
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Lombok 快速入门与注解详解
- SpringSecurity实战:声明式安全控制框架解析
- XML基础教程:从数据传输到存储解析
- Matlab实现图像空间平移与镜像变换示例
- Python流程控制与运算符详解
- Python基础:类型转换与循环语句
- 辰科CD-6024-4控制器说明书:LED亮度调节与触发功能解析
- AE particular插件全面解析:英汉对照与关键参数
- Shell脚本实践:创建tar包、字符串累加与简易运算器
- TMS320F28335:浮点处理器与ADC详解
- 互联网基础与结构解析:从ARPANET到多层次ISP
- Redhat系统中构建与Windows共享的Samba服务器实战
- microPython编程指南:从入门到实践
- 数据结构实验:顺序构建并遍历链表
- NVIDIA TX2系统安装与恢复指南
- C语言实现贪吃蛇游戏基础代码
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)