CSS入门指南:选择器、声明与样式引入解析

需积分: 3 2 下载量 178 浏览量 更新于2024-09-07 收藏 222KB PDF 举报
"这是一份关于CSS的笔记整理,涵盖了CSS的基本概念、语法、样式引入方式,以及一些核心样式属性的介绍,如背景、文字和边框等。笔记旨在帮助学习者理解CSS在前端开发中的作用,掌握CSS的编写规则,并了解如何在HTML中应用CSS样式。" CSS是层叠样式表,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS描述了如何在媒体(如屏幕、打印机)上展示元素。CSS3将不同功能模块化,便于更新和浏览器支持。 **CSS语法**: CSS规则由选择器和声明组成。选择器指向要应用样式的元素,如`p`元素。声明包含属性和对应的值,用冒号分隔,多个声明用分号隔开。例如: ```css p { color: red; font-size: 12px; } ``` **CSS注释**: 注释以`/*`开始,`*/`结束,对代码进行解释,浏览器会忽略。 **CSS样式引入**: 1. **内联式CSS**:将样式直接写在HTML元素的`style`属性中,如`<p style="color:red">`,多条样式用分号隔开。 2. **嵌入式CSS**:样式放在`<style>`标签内,通常位于`<head>`标签中,可为整个页面定义样式。 3. **外部式CSS**:样式存储在`.css`文件中,通过`<link rel="stylesheet" href="样式文件路径">`引入到HTML中,适用于多页面共享样式。 **CSS选择器**: 选择器用于选取要设置样式的元素,如`p`选择器选取所有段落,`#id`选择器选取ID为特定值的元素,`.class`选择器选取类名匹配的元素。 **CSS核心样式属性**: - **background(背景)**:包括背景颜色、图像、重复方式等,如`background-color: blue;`。 - **font(文字)**:管理文本样式,如`font-size`, `font-family`, `font-weight`等。 - **border(边框)**:定义元素边框的宽度、样式和颜色,如`border: 1px solid black;`。 **CSS框模型**: 框模型描述了元素占据的空间,包括内容区域、内边距、边框和外边距。理解框模型对于布局和定位至关重要。 通过学习这些基础知识,你可以开始创建具有吸引力和功能性的网页,控制元素的外观和布局。随着经验的增长,你还可以深入学习更高级的概念,如浮动、定位、响应式设计和过渡效果等。