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

java

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

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

今天我们将深入探讨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页未读，继续阅读

半清斋

粉丝: 376
资源: 322

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

Day05_CSS课堂笔记.md

hibernate_day02笔记

day1_hourly.loc[(day1_hourly[OS] == '1'), 'Rule 1'] = day1_hourly[SAT] < (day1_hourly[MAT] + Tsf - Et)

indexNames = day1_hourly[ (day1_hourly[OMI] == 0.0) & (day1_hourly[SAF] == 0.0) ].index

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)

Starting Day18Springboot1Application using Java 1.8.0_291 on 杨文龙 with PID 6708 (F:\code_SSM\day18_springboot1\target\classes started by ASUS in F:\code\day10_maven)，为什么是in F:\code\day10_maven

last_day_of_this_month = first_day_of_next_month - timedelta(days=1) 将以上时间改为年月日

DAY_OF_WEEK,

使用C语言自定义1个函数day_of_year(year, month, day)，计算并返回年year、月month和日day对应的是该年的第几天。 函数接口定义： int day_of_year(year, month, day); year, month, day分别为输入的年，月，日

Failed to execute goal on project day77_nPortal: Could not resolve dependencies for project com.qf:day77_nPortal:jar:1.0-SNAPSHOT: Could not find artifact com.qf:day77_nService:jar:1.0-SNAPSHOT

day1_hourly = day1.resample('H').mean()

calendar.DAY_OF_MONTH

最新资源

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)

使用C语言自定义1个函数day_of_year(year, month, day)，计算并返回年year、月month和日day对应的是该年的第几天。函数接口定义： int day_of_year(year, month, day); year, month, day分别为输入的年，月，日