【免费】day02_CSS预习笔记1资源-CSDN文库

需积分: 0 104 浏览量 2022-08-03 20:38:49 上传评论收藏 707KB PDF 举报

【CSS预习笔记1】- CSS基础与应用在网页设计中，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的样式和布局，使内容与表现分离，让页面更加美观和易读。这篇笔记将详细介绍CSS的基础知识，包括其定义、语法规范、注释、开发人员工具以及CSS的四种引入方式。 1. 什么是CSS？ CSS，全称层叠样式表，是一种用于描述HTML或XML（包括各种XML方言如SVG、XHTML等）文档样式的样式表语言。它的主要作用是定义页面中元素的外观、布局和结构。通过CSS，开发者可以轻松地改变字体、颜色、布局和更多其他视觉元素，而无需改动HTML内容本身。 2. CSS的语法规范 CSS的语法相当直观，通常包含选择器、属性和值。基本格式如下： ```css 选择器 { 属性名: 属性值; 属性名: 属性值; ... } ``` 例如，给所有段落设置字体颜色和大小： ```css p { color: red; font-size: 16px; } ``` 3. CSS的注释在CSS中，注释是用于解释代码的部分，不会被浏览器执行。注释的格式是 `/* 注释内容 */`。注意，CSS注释可以包含多个星号，直到遇到闭合的斜线为止。 4. 开发人员工具开发人员工具是前端开发者的重要辅助工具，例如Firefox的Firebug。通过这些工具，可以实时查看和修改元素的样式，检查盒模型、布局和网络请求等，对于调试和学习非常有用。 5. CSS的引入方式 CSS有四种引入方式： - 行内样式：直接在HTML元素的`style`属性中写入CSS，如`<p style="color: red;">文本</p>`。 - 内部样式（内嵌式）：在`<head>`标签内的`<style>`标签中编写CSS，适用于同一个页面的统一样式。 - 外部样式（链接式）：创建`.css`文件，然后通过`<link>`标签引入，这种方式便于代码管理和重用。 - 导入样式：使用`@import`规则将外部样式表导入到内部样式中，与链接式类似，但导入会在HTML解析时合并到内部样式。理解CSS的选择器是关键，选择器决定了哪些元素会受到特定样式的控制。例如，类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，更高级的选择器还有伪类（`:hover`、`:active`等）和组合选择器（`tag + tag`、`tag > tag`等）。CSS的层叠特性使得样式规则能够根据优先级有序应用，这在处理样式冲突时尤为重要。在实际应用中，CSS的布局知识如盒子模型（content、padding、border、margin）和定位（static、relative、absolute、fixed）也非常重要，它们决定了元素在页面上的位置和大小。此外，CSS还提供了许多高级特性，如Flexbox和Grid布局，用于创建更灵活和响应式的网页设计。 CSS是构建网页视觉效果的核心技术，熟练掌握CSS能让你的网页设计更加专业和高效。通过不断实践和学习，你将能够创造出更具吸引力的网页。

资源详情

资源评论

资源推荐