CSS基础入门与常用标签笔记

需积分: 3 1 下载量 136 浏览量 更新于2024-09-11 1 收藏 3KB TXT 举报
本篇CSS自学笔记记录了作者在学习CSS过程中的一些基础概念和规则,包括HTML元素的结构、CSS选择器的使用、样式声明的组织方法以及一些关键属性的详细说明。首先,我们了解到了HTML的基本结构,如`<html>`、`<div>`、`.class`(用于类选择器)和`#id`(用于ID选择器),以及`<p>`、`<span>`等常见元素及其用法。 CSS选择器部分,重点讲解了如何通过类选择器 `.lcl` 和 ID选择器 `#top` 来指定样式。此外,还提到了伪类选择器 `:hover` 的应用,如`:hover {border: solid 2px #063;}`,表示鼠标悬停时的样式变化。 样式定义方面,强调了在CSS中使用通配符 `*` 表示所有元素,以及如何同时对多个元素应用相同的样式,如`.c1, p {}` 或 `#c2, p {} div p {}`,展示了选择器优先级的概念。同时,CSS布局与尺寸控制也有所涉及,如`width`, `height`(可设置为`auto`、`hidden`等值),`float`属性用于浮动元素布局,以及`overflow`属性处理元素内容溢出。 文本样式方面,讲解了字体属性如`font-family`, `color`, `weight`, `style`, `text-decoration`(下划线、上划线、删除线等)的使用,以及文本对齐方式`text-align`和垂直对齐`vertical-align`。字体间距、行高、缩进、空白处理以及边框样式、宽度、颜色和位置都有详尽的说明。 背景相关属性是另一个重要部分,包括`background-color`、`background-image`(图片背景)、`background-repeat`(重复模式)、`background-position`(背景位置)和`background-attachment`(滚动行为)。这里特别提到背景图片需要考虑图片路径和大小,如使用相对单位或`url()`函数引用外部图片。 最后,本笔记提到了CSS盒模型(包括高度、overflow和边距)、盒子布局模型的使用,以及一些基本的CSS语法规范和习惯,比如使用分号分隔样式声明,确保代码的可读性和维护性。 这篇笔记提供了丰富的CSS基础知识和实践经验,适合初学者系统地学习和巩固CSS技能。通过阅读和实践这些内容,读者可以更好地理解和掌握CSS语言,为网页设计和开发打下坚实的基础。