CSS基础入门：选择器、语法与开发者工具详解

需积分: 0 15 浏览量更新于2024-08-05 收藏 707KB PDF 举报

今天我们将深入探讨CSS的基础知识，以便更好地理解和应用这一强大的网页设计工具。CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页元素如何呈现的标记语言，它使得网页设计更具结构化和可维护性。CSS的核心是选择器，通过它们来精确地选取要应用样式的元素。首先，让我们了解一下什么是CSS。它是一种分离式的设计语言，允许开发者将样式信息从HTML文档中分离出来，从而使网页保持清晰的结构和优雅的视觉效果。CSS的语法规范要求我们使用`<style>`标签来包含CSS代码，其基本结构如下： ```html <style type="text/css"> /* 选择器 { 属性名: 属性值; 属性名: 属性值; ...; } */ </style> ``` CSS的注释非常重要，可以帮助我们理解代码的功能和意图。在CSS中，注释使用`/* ... */`包裹，如`/* 这是注释内容 */`。需要注意的是，注释中的星号(*)不会被解析，只是文本，直到遇到`*/`才结束注释。在开发过程中，浏览器的开发者工具（如Firefox的Firebug）是不可或缺的辅助工具。通过这个工具，我们可以实时查看和修改网页元素的样式，这对于调试和优化页面布局非常有用。例如，在HTML中，我们可以看到如下的例子： ```html <body> <p class="tieshou">铁手</p> <p>冷血</p> <p>无情</p> <p>追命</p> </body> ``` 当我们发现元素样式不符预期时，可以通过开发者工具检查每个元素的样式，调整`class="tieshou"`的`p`元素，如字体颜色、大小等。接下来的学习将围绕CSS的选择器展开，包括类型选择器、ID选择器、类选择器、属性选择器等，以及如何通过组合使用这些选择器来精确地控制页面元素的样式。此外，理解盒子模型和定位概念对于创建响应式和灵活的布局至关重要。通过学习CSS，我们可以提升网页设计的效率和美观度，实现网页的动态和个性化展示。

</style>

5.3 外部样式(链接式)

将 CSS 定义成一个.css 文件，然后引入到 HTML 中。

这种方式是使用频率最高的，也是最为实用的方法。它将 HTML 页面与 CSS 文件进行了

分离，这样使得前期制作和后期维护非常方便，网站后台技术人员与美工设计者也可以很好

的分工合作。

5.4 导入样式

它与链接式的功能基本相同，只是语法和运作方式上略有区别。采用此种方式，在 HTML

文件初始化的时候，会被导入到 HTML 文件内，作为文件的一部分，类似内嵌的效果。而链

接式则是在 HTML 的标记需要格式时才以链接的方式引入。

使用下面的方式可以完成导入操作：【放入到<style></style>标记之间】

@import url("global.css");

5.5 各种方式的优先级问题

如果上面四种方式同时作用到同一个 HTML 文件的同一个标记上时，将会出现优先级问

题。如果他们设置了不同的属性，那么会同时生效，如果设置了相同的属性，情况就比较复

杂。

color: red;/*文本的颜色*/

}

</style>

</head>

<body>

</body>

通过上面的代码测试，最终“冷血”显示的颜色为黑色。依次使用这种方式来进行测试，

发现了如下规律：

行内样式优先级>内嵌式优先级>链接式优先级>导入式优先级

开发经验：虽然各种 CSS 样式加入到页面的方式有先后的优先级，但在建设网站时，最好只

是用其中的 1-2 种，这样既有利于后期的维护和管理，也不会出现各种样式“撞车”的情况，

便于设计者理顺设计的整体思路。

6.CSS 选择器

选择器(selector)是 CSS 中很重要的概念，所有 HTML 语言中的标记都是通过不同的

批注 [ThinkPad12]: 用来声明 style 标签只能用来存

放 css 格式的文件。

批注 [ThinkPad13]: 指定为样式的脚本

批注 [ThinkPad14]: 指定 CSS 文件的路径(位置)

批注 [ThinkPad15]: 可以将同一个 CSS 文件链接到多

个 HTML 文件中去

批注 [ThinkPad16]: 此种方式作为了解即可。

批注 [ThinkPad17]: 为了精确的查找某个元素来设计

的。

剩余12页未读，继续阅读

半清斋

粉丝: 984

CSS基础入门：选择器、语法与开发者工具详解

《day14_预习资料》深入解析与学习要点

HTML基础练习：Day4_02_Assignment解析

学习中的day02_exam代码演示

Day05_CSS课堂笔记.md

树懒_day02.1_css笔记

day02_css基础

Day02_HTML课堂笔记.md

python 12、web前端html，css 2-1_CSS介绍及使用、常用选择器介绍_Day02_AM.mp4

黑马程序员_struts2框架开发2016版讲义和笔记资料_day01_day02_day03_day04

day05_html_js_css_

最新资源