CSS笔记资源-CSDN文库

需积分: 9 90 浏览量 2020-05-07 13:41:37 上传评论收藏 750KB PDF 举报

### CSS概述 CSS，全称为 Cascading Style Sheets（层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言。CSS的主要作用是为HTML文档中的元素定义样式，包括颜色、布局以及字体等视觉效果，使得网页内容更具美观性和易读性。 #### CSS与HTML的关系 1. **HTML**：负责构建网页的基本结构和内容展示，它通过标签来表示不同的内容类型。 2. **CSS**：负责美化HTML元素，即通过各种样式属性来定义这些元素的外观。这种分工明确的设计模式遵循了“内容与表现分离”的原则，使得开发者能够更专注于内容本身而不用担心样式问题。 ### HTML属性 vs. CSS样式尽管HTML标签本身具备一些样式属性（例如`bgcolor`、`align`等），但W3C建议尽量采用CSS来替代这些HTML属性。这样做的好处包括： - **代码重用**：CSS样式可以被多个元素共享，提高了代码的复用率。 - **更好的可维护性**：样式集中管理，方便修改和维护。 ### CSS的使用方式 CSS可以通过以下几种方式进行定义： 1. **内联样式**（行内样式）： - 在HTML元素的`style`属性中直接定义样式。 - 特点： - 不能跨元素重用。 - 具有最高的优先级。 - 示例代码： ```html <div style="color:red; background-color:pink; font-size:50px;"> 内联样式示例 </div> ``` 2. **内部样式**： - 在`<head>`标签内定义`<style>`标签，并在其中编写样式。 - 特点： - 可以在同一个HTML文档中重用。 - 适用于小型项目或测试阶段。 - 示例代码： ```html <head> <style> h2 { color: red; background-color: yellow; } </style> </head> <body> <h2>内部样式示例</h2> </body> ``` 3. **外部样式**： - 将CSS代码写入单独的`.css`文件，并在HTML文件中通过`<link>`标签引用该文件。 - 特点： - 最常用的方式，适用于大型项目。 - 提供了良好的可维护性和灵活性。 - 示例代码： ```html <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h3>外部样式示例</h3> </body> ``` ### CSS的特性 1. **继承性**： - 许多CSS属性可以被子元素自动继承，如字体大小、颜色等。 - 但需要注意的是，并非所有属性都能被继承，例如边框、内边距等。 2. **层叠性**： - 当一个元素被多个样式规则覆盖时，所有不冲突的样式都会被应用到该元素上。 3. **优先级**： - 当多个样式发生冲突时，会根据以下优先级规则应用样式： - 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式 - 同级别样式按出现顺序决定优先级（后定义的样式优先）。 4. **使用`!important`调整优先级**： - `!important`可以提高某个样式规则的优先级。 - 但应谨慎使用，因为它可能会破坏CSS的层级结构，导致调试困难。 ### 基础选择器 1. **通用选择器**： - `*`：匹配页面上的所有元素。 - 应尽量减少使用，因其会影响性能。 - 示例： ```css * { margin: 0; padding: 0; } ``` - 通常用于CSS Reset，以确保所有浏览器的一致性。 2. **标签选择器**： - 使用HTML标签名作为选择器。 - 适用于定义某种元素的通用样式。 - 示例： ```css p { font-size: 16px; } ``` 3. **ID选择器**： - 以`#`开头，匹配具有特定ID的唯一元素。 - 示例： ```css #uniqueElement { color: blue; } ``` 4. **类选择器**： - 以`.`开头，可用于页面上的多个元素。 - 可以实现样式的复用。 - 示例： ```css .myClass { background-color: yellow; } ``` 5. **群组选择器**： - 可以将多个选择器组合在一起，用以定义共同的样式。 - 示例： ```css p, h1, h2 { color: black; } ``` 6. **后代选择器与子代选择器**： - **后代选择器**：选择所有后代元素，不论层级多少。 - 示例： ```css #container div { color: red; } ``` - **子代选择器**：仅选择直接子元素。 - 示例： ```css #container > div { color: red; } ``` 了解这些基础知识对于熟练掌握CSS来说至关重要。通过合理运用这些选择器和技术，开发者可以高效地设计出既美观又实用的网页界面。

资源推荐

资源详情

资源评论