"《页面制作》笔记(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,开发者能够创建美观、一致且易于阅读的网页内容。