前端开发学习笔记：CSS基础入门

需积分: 10 69 浏览量更新于2024-07-17 收藏 1.2MB PDF 举报

"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发工程师》课程的学习笔记，由西风潇潇编写的，主要介绍了CSS的基本概念、历史以及如何在HTML中引用CSS样式。笔记中提到了CSS用于定义HTML内容的显示样式，包括文字大小、颜色、字体等，并强调了CSS在内容与表现分离中的作用，以提高工作效率。CSS引用方式包括外部样式表、内部样式表和内联样式表。外部样式表通常用于多个页面的统一风格，内部样式表适用于单个文档的特殊样式，而内联样式表则是直接在HTML元素中定义样式。" 在网页设计中，CSS（层叠样式表）是至关重要的，它允许开发者将样式规则与HTML结构分开，实现更灵活的布局和设计。CSS全称为"Cascading Style Sheets"，层叠的概念意味着当多个样式规则应用于同一个元素时，它们会根据特定的规则进行合并和优先级判断。 - CSS的三个主要特点： 1. **样式定义**：CSS用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的视觉呈现，如字体、颜色、布局等。 2. **样式存储**：样式通常存储在外部的CSS文件中，也可以在HTML文档的`<head>`部分定义为内部样式表，或者直接在HTML元素中以`style`属性形式作为内联样式。 3. **内容与表现分离**：CSS的引入解决了HTML中内容和表现混杂的问题，使得开发者可以专注于内容的结构，而设计师则可以专注于页面的外观。 - **CSS的历史**：CSS的发展始于1990年代，随着HTML4.0的发布，CSS作为一种标准被引入，旨在提高网页设计的效率和可维护性。 - **CSS引用的三种方式**： - **外部样式表**：通过`<link>`标签链接到单独的CSS文件，适用于多个页面共享同一样式，例如： ```html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ``` - **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签定义，适用于单个文档的特定样式，例如： ```html <head> <style> /* 样式规则 */ </style> </head> ``` - **内联样式表**：直接在HTML元素中使用`style`属性，如`<p style="color: blue;">`，适用于特殊情况，但不推荐，因为它破坏了内容与表现的分离。 - **样式表文件**：CSS文件是纯文本文件，不含HTML标签，扩展名为`.css`。例如： ```css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("/images/back40.gif");} ``` 理解并熟练掌握CSS对于前端开发至关重要，因为它是构建响应式、易维护的网页界面的基础。通过合理地使用CSS，开发者能够创建美观、一致且易于阅读的网页内容。