CSS：样式分离与层叠规则详解

191 浏览量更新于2024-08-31 收藏 82KB PDF 举报

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括XMLHttpRequest返回的文档）文档呈现方式的语言。它的主要作用是实现网页内容与表现形式的分离，使得网页设计更加模块化和易于维护。CSS通过定义元素的外观，如字体、颜色、布局、尺寸等，来控制网页的视觉样式。在CSS的运用中，主要有以下几个关键概念： 1. **层叠次序**：当一个HTML元素受到多个CSS规则的影响时，遵循特定的层叠顺序来决定最终样式。这个顺序是： - 浏览器的默认样式（用户代理样式，由浏览器提供） - 外部样式表（通常存储在`.css`文件中，可以全局应用，提高效率） - 内部样式表（在HTML `<head>` 标签内的`<style>` 标签中的样式） - 内联样式（直接在HTML元素`<element style="...">`内的样式） 2. **基本语法**： CSS由选择器、属性和值组成，采用以下结构：`selector { property: value; }`。选择器指定目标元素，属性如`font-family`、`color`、`text-align`等，而值则是这些属性的具体设定。值如果有多个单词，需要使用引号包围，如`font-family: "sans-serif";`。多条声明之间用分号隔开，以保持清晰，如`p { text-align: center; color: red; }`。 3. **高级语法**： - **选择器分组**：允许对一组选择器应用相同的样式，通过逗号分隔，如`div.container, h1 { ... }`。 - **继承**：子元素可以继承父元素的某些样式，除非明确重置或覆盖。 - **优先级**：除了层叠顺序外，还可以通过`!important`关键字为特定样式声明更高优先级。 - **媒体查询**：根据设备特性（如屏幕尺寸、分辨率）应用不同的样式，实现响应式设计。 - **伪类和伪元素**：如`:hover`、`:active`用于定义鼠标悬停或点击状态，`::before`和`::after`用于插入元素前后的内容。 4. **CSS的兼容性和注意事项**： - 不同浏览器可能对CSS的支持程度不同，特别是在早期版本。开发时需注意浏览器前缀（如-webkit-、-moz-等）以确保兼容性。 - CSS对大小写不敏感，但class和id名称在HTML文档中是区分大小写的。 - 属性值中不应有不必要的空格，例如`margin-left: 20px`而非`margin-left: 20 px`，以免浏览器解析错误。理解并掌握CSS的基本原理和高级特性是前端开发者必须具备的核心技能之一，它直接影响着网站的美观、易用性和兼容性。

css是什么是什么_动力节点动力节点Java学院整理学院整理

一一概述概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

二二层叠次序层叠次序

当同一个当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置

2. 外部样式表

3. 内部样式表（位于 <head> 标签内部）

4. 内联样式（在 HTML 元素内部）

三三 CSS 基本语法基本语法

CSS语法由三部分构成：选择器、属性和值：语法由三部分构成：选择器、属性和值：

selector {property: value}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值

（value）。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。

提示：提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

提示：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后

一条规则是不需要加分号的，但是加上分号是良好的习惯：

p {text-align:center; color:red;}

提示：提示：应该在每行只描述一个属性，这样可以增强样式定义的可读性：

p {

text-align: center;

color: black;

font-family: arial;

}

提示：提示：是否包含空格不会影响 CSS 在浏览器的工作效果，但是可以增加可读性；与 XHTML 不同，CSS 对大小写不敏感。不

过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

提示：提示：不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，

但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

四四 CSS 高级语法高级语法

1. 选择器分组选择器分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，

我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h2,h3,h5,h6 {

color: green;

}

下载后可阅读完整内容，剩余3页未读，立即下载

皮卡丘穿皮裤

粉丝: 187
资源: 955

CSS：样式分离与层叠规则详解

css float属性_动力节点Java学院整理

HTML框架_动力节点Java学院整理

css3背景_动力节点Java学院整理

css3过渡_动力节点Java学院整理

css3截图_动力节点Java学院整理

css简介_动力节点Java学院整理

html5是什么_动力节点Java学院整理

css position定位属性_动力节点Java学院整理

css3旋转木马_动力节点Java学院整理

CSS 属性选择器_动力节点Java学院整理

最新资源