CSS基础：理解与应用选择符

需积分: 9 169 浏览量更新于2024-08-17 收藏 4.37MB PPT 举报

"CSS基础教程，包括标签选择符、ID选择符、类型选择符、特殊选择符、通用选择符、伪类和伪对象选择符、分组(并集)选择符、包含选择符以及CSS的继承、层叠和特殊性概念。示例代码展示了CSS如何在HTML中应用，包括内联样式和内部样式表的使用。" 在Web设计中，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS的基本元素是选择符和属性值，它们共同决定了网页的外观和布局。 1. **标签选择符**：用于选择HTML元素，如`<h2>`选择所有的二级标题元素。示例：`h2 {color: red;}`将所有二级标题颜色设为红色。 2. **ID选择符**：通过元素的唯一ID来定位，前缀为`#`，例如`#myID {color: blue;}`选择ID为'myID'的元素，并将其颜色设为蓝色。 3. **类型选择符**：如`div`，选择所有`<div>`元素。可以结合标签选择符一起使用，如`div h2`选择所有`<div>`内的`<h2>`元素。 4. **特殊选择符**：包括`>`（子选择符），`+`（相邻兄弟选择符）和`~`（一般兄弟选择符），用于更精确地选择元素。 5. **通用选择符**：`*`选择所有元素，`* {margin: 0; padding: 0;}`将所有元素的内外边距设为零。 6. **伪类和伪对象选择符**：如`:hover`、`:active`、`:focus`用于元素在特定状态时的样式，`::before`和`::after`用于在元素内容前后插入内容。 7. **分组(并集)选择符**：用逗号`,`隔开多个选择符，如`h1, h2, h3 {font-size: 2em;}`同时设置所有一级、二级和三级标题的字体大小。 8. **包含选择符**：`div p`选择所有在`<div>`内的`<p>`元素。 9. **交集选择符**：`div.myClass`选择所有同时具有`div`类型和`myClass`类的元素。在HTML中应用CSS，有以下几种方式： - **内联样式**：通过`style`属性直接在HTML元素中定义，如`<h2 style="color: #ff0000;">CSS标记1</h2>`。 - **内部样式表**：放在`<head>`标签内的`<style>`标签中，如`<style>h2{color: #ff0000;}</style>`，这会影响整个页面中所有匹配的选择符。 - **外部样式表**：链接到单独的`.css`文件，如`<link rel="stylesheet" type="text/css" href="styles.css">`。 CSS的**继承**允许子元素从父元素继承某些属性，如字体和颜色。**层叠**则决定当多个规则应用于同一元素时，哪个规则生效，通常根据来源、特异性和顺序等因素。**特殊性**（Specificity）是一个规则的权重，由选择符的类型决定，ID选择符权重最高，接着是类、属性和标签选择符。了解这些基础知识后，开发者就能更有效地控制网页的样式和布局，创建出美观且响应式的网页设计。

劳劳拉

粉丝: 21
资源: 2万+

CSS基础：理解与应用选择符

css-basic-concept:CSS基本的Cocept Pracetices存储库

纯CSS3实现漂亮的input输入框动画样式库(Text input love)

basic_css_example

My-Basic-Counter

Javascript-Basic-Projects

Freecodecamp-Basic-Algorithm-Scripting:Freecodecamp的基本算法脚本解决方案

very-basic-calculator:非常基本的计算器，具有基本的javascript功能

Basic-CSV-editor-using-JS

Basic-Backend-Contact-Form-NodeJS

js_basic:自学JSHTML5css相关知识

最新资源