【免费】CSS学习与总结笔记pdf资源-CSDN文库

需积分: 0 94 浏览量 2024-07-07 16:20:45 上传评论收藏 10.8MB PDF 举报

### CSS学习与总结笔记 #### 一、CSS简介 ##### 1.1 HTML的局限性 HTML 是一种标记语言，其主要目的是定义网页内容的结构和意义，而非控制外观。这意味着，HTML 中的标签如 `<h1>`、`<p>`、`<img>` 和 `<a>` 等，用于描述内容的类型。尽管HTML本身可以添加一些基本的样式（如通过内联样式），但这种方式会导致代码冗余且难以维护。 ##### 1.2 CSS—网页的美容师 CSS（层叠样式表）是一种用来定义HTML文档外观和布局的语言。它允许开发者独立于内容来定义样式，从而使网页设计更加灵活和高效。CSS 的引入极大地改善了网页的设计和用户体验。它可以用于控制文本、图像、布局以及其他HTML元素的外观，从而让网页更加美观、易于阅读和导航。 ##### 1.3 CSS语法规范 **选择器**：用于指定哪些HTML元素应该应用特定的CSS样式。常见的选择器包括元素选择器、类选择器和ID选择器等。 **声明**：指定了应用于指定元素的具体样式，由属性和值组成。例如： ```css h4 { color: blue; font-size: 100px; } ``` - **属性**：如 `color` 和 `font-size`。 - **值**：如 `blue` 和 `100px`。 - **属性和值之间**使用英文冒号（:）分隔。 - **多个声明**之间使用英文分号（;）分隔。示例： ```html <style> p { color: red; font-size: 12px; } </style> ``` **注释**：CSS支持注释，格式为 `/* 注释内容 */`，这有助于提高代码可读性和便于团队协作。 ##### 1.4 CSS代码风格 - **样式格式书写**：建议采用清晰易读的格式，例如： ```css h3 { color: deeppink; font-size: 20px; } ``` - **样式大小写风格**：通常建议使用小写字母，除非某些特定情况下需要使用大写字母。 - **样式空格风格**：建议在属性值前和冒号后添加空格，同时在选择器和大括号之间也添加空格，以提高代码可读性。 #### 二、CSS引入方式 CSS 样式可以通过三种不同的方式引入： ##### 2.1 行内样式表（内联样式）行内样式是在HTML元素中直接使用 `style` 属性来指定样式。这种做法不推荐作为常规使用方法，因为它不利于代码的重用和维护。示例： ```html <p style="color: red; font-size: 12px;">这段文字将被渲染为红色，并且字号为12像素。</p> ``` ##### 2.2 内部样式表（嵌入式样式）内部样式表是将CSS代码放在HTML文档的 `<head>` 部分的 `<style>` 标签中。这种方法适用于单个页面的样式设计。示例： ```html <head> <style> p { color: red; font-size: 12px; } </style> </head> ``` ##### 2.3 外部样式表（链接式样式）外部样式表是最常用且最有效的CSS样式引入方式，它将CSS代码存储在一个单独的 `.css` 文件中，并通过 `<link>` 标签链接到HTML文档中。示例： ```html <head> <link rel="stylesheet" href="styles.css"> </head> ``` **外部样式表的优点**： - 代码复用性强，可以应用于多个页面。 - 易于维护，修改一处即可影响所有引用该样式表的页面。 - 有助于提升网页加载速度，因为浏览器会缓存已加载过的样式表文件。 #### 总结 - **HTML**：专注于内容的结构和意义。 - **CSS**：负责美化和布局，使网页更加丰富多彩。 - **CSS与HTML分离**：实现结构与样式的解耦，提高了代码的可维护性和扩展性。 - **CSS引入方式**：根据项目需求选择合适的引入方式，推荐使用外部样式表以增强可维护性和性能。通过以上介绍，我们可以了解到CSS作为一种强大的网页美化工具，不仅极大地提升了网页的美观程度，还促进了网页开发的标准化和模块化，为现代Web开发提供了坚实的基础。

资源推荐

资源详情

资源评论