CSS样式表详解：从基础到外部样式链接

需积分: 0 170 浏览量更新于2024-06-30 收藏 654KB PDF 举报

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

领优惠券(最高得80元）

"CSS常用属性速查表1" 在学习CSS时，了解其基本概念和重要属性是至关重要的。本文将详细解析标题和描述中提到的知识点，并深入探讨CSS的使用方式和选择器。首先，样式冲突是CSS中常见的问题。当一个元素受到多个样式规则的影响时，浏览器会遵循“就近原则”来决定最终应用的样式。这意味着，如果有两个或更多具有不同优先级的样式定义，最近或者最具体的样式将会被应用。例如，一个元素同时在内部样式表和外部样式表中定义了背景颜色，那么在HTML元素内部直接定义的内联样式将覆盖内部样式表中的样式，因为内联样式的优先级最高。其次，样式不冲突时，它们不会进行层叠，也就是说，如果一个元素只受到一个样式的定义，那么这个样式就会被直接应用，没有其他竞争的情况。而当样式定义冲突时，CSS使用层叠规则来解决，包括优先级计算。在CSS中，优先级由以下因素决定：行内样式（内联样式）> 内部样式表（嵌入样式）> 外部样式表。此外，每个CSS声明的权重也会根据选择器的类型增加，如ID选择器权重高于类选择器，类选择器又高于元素选择器。关于数位没有进位的情况，描述中提到了0,0,0,5加上0,0,0,5等于0,0,0,10而不是0,0,1,0。这是CSS中颜色值的一种表示方式，即十六进制颜色代码。在CSS中，颜色可以用十六进制表示，如#000000代表黑色，其中每两个字符表示红色、绿色和蓝色通道的强度。当两个颜色相加且没有超过最大值（即FF，代表255），则直接相加，不会产生进位。所以，#000005加上#000005确实等于#000010。接下来，我们看看定义CSS样式的三种主要方式： 1. 行内样式（内联样式）：直接在HTML元素内通过`style`属性定义样式，如`<p style="background:red;">I love java!</p>`。 2. 内页样式（嵌入样式）：在HTML文档的`<head>`部分使用`<style>`标签定义样式，如示例中的`<style type="text/css">p{background:green;}</style>`。 3. 外部样式：通过`<link>`标签链接到单独的CSS文件，如`<link rel="stylesheet" href="style.css">`。 CSS选择器是CSS中的核心组成部分，它们用于精确地选取需要应用样式的HTML元素。选择器的种类繁多，包括但不限于： 1. 类选择器（`.class`）：选择所有class属性等于指定类名的元素，如`.intro`。 2. ID选择器（`#id`）：选择id属性等于指定ID的唯一元素，如`#firstname`。 3. 全局选择器（`*`）：选择所有元素。 4. 元素选择器（`element`）：如`p`，选择所有`<p>`元素。 5. 并集选择器（`[element,element]`）：如`div,p`，选择所有`<div>`和`<p>`元素。 6. 后代选择器（`element element`）：如`div p`，选择所有位于`<div>`元素内的`<p>`元素。 7. 直接子元素选择器（`element>element`）：如`div > p`，仅选择直接作为`<div>`子元素的`<p>`。理解并熟练运用这些选择器，能够帮助开发者更高效地编写CSS，实现精确的样式控制。在实际项目中，合理组织和利用CSS选择器，能够极大地提高代码的可读性和维护性。同时，利用CSS层叠和优先级机制，可以灵活地管理样式，解决样式冲突问题。

资源详情

资源推荐

选择器示例示例说明 CSS

[attribute^=value] a[src^="https"]

选择每一个src属性的值

以"https"开头的元素

[

attribute

=".pdf"]

选择每一个src属性

的值以".pdf"结尾的

元素

3 

[

attribute**=

value*] a[src*="itnan"]

选择每一个src属性的值包含子

字符串"itnan"的元素

:first-of-type p:first-of-type

选择每个p元素是其父级的第一

个p元素

:last-of-type p:last-of-type

选择每个p元素是其父级的最后

一个p元素

:only-of-type p:only-of-type

选择每个p元素是其父级的唯一

p元素

:only-child p:only-child

选择每个p元素是其父级的唯一

子元素

:nth-child(

) （记住） p:nth-child(2)

选择每个p元素是其父级的第二

个子元素

:nth-last-child(

) p:nth-last-child(2)

选择每个p元素的是其父级的第

二个子元素，从最后一个子项计

数

:nth-of-type(

) p:nth-of-type(2)

选择每个p元素是其父级的第二

个p元素

:nth-last-of-type(

) p:nth-last-of-type(2)

选择每个p元素的是其父级的第

二个p元素，从最后一个子项计

数

:last-child p:last-child

选择每个p元素是其父级的最后

一个子级。

:enabled input:enabled 选择每一个已启用的输入元素 3

:disabled input:disabled 选择每一个禁用的输入元素 3

:checked input:checked 选择每个选中的输入元素 3

:not(

selector

) :not(p) 选择每个并非p元素的元素 3

:read-only :read-only

用于匹配设置 "readonly"（只

读）属性的元素

:required :required

用于匹配设置了 "required" 属性

的元素

:valid :valid 用于匹配输入值为合法的元素 3

:invalid :invalid 用于匹配输入值为非法的元素 3

剩余18页未读，继续阅读

7323

粉丝: 25
资源: 327

CSS样式表详解：从基础到外部样式链接

常用css属性查询表

CSS属性速查表

CSS-CSS属性速查表

HTML css 常用属性

emmet语法速查表

请列出CSS中常用属性的作用

CSS常用属性与动画特效 (可以完成旋转照片墙，或者其他相关CSS效果)

网页设计与制作css所有属性的意思

css常用的文本属性

HTML属性转换,使用Perl将CSS样式属性转换为HTML属性

css display 常用那些属性

css盒子模型的常用属性

css背景属性有几种

css3属性选择器详解

帮我列出css中常用的属性

css filter 属性 页面卡顿

一个CSS样式属性有哪些

css table属性 border属性不生效

css animation属性

解释CSS样式的引用方式，CSS选择器和常用属性

最新资源

css filter 属性页面卡顿