我们可以使用三种方法来给一个对象(例如div,span,table)应用样式。
1：使用#定义样式，并使用id为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
#STYLE_1 { font-size: 20px; }
--></style>
</head>
<body>
<div id="STYLE_1">用Id来给对象应用样式</div>
</body>
</html>
2：使用.定义样式，并使用class为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
.STYLE_1 { font-size: 20px; }
--></style>
</head>
<body>
<div class="STYLE_1">用class来给对象应用样式</div>
</body>
</html>
3：不定义样式，直接使用style为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
</head>
<body>
<div style="font-size:20px">用style来给对象应用样式</div>
</body>
</html>
使用这三种方法所产生的效果是相同的，但我们需要注意的是，这三种方法间的优先级问题。
如果我们对一个对象同时使用上述三种方法定义样式，会怎么样呢？
比如我们先定义一个#STYLE { font-size:12px; }再定义一个.STYLE { font-size:14px; }最后在对象上使用style="font-size:16px;"代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
#STYLE { font-size: 12px; }
.STYLE { font-size: 14px; }
--></style>
</head>
<body>
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div>
</body>
</html>
这种情况下，浏览器会根据三种方式的优先级，即
style>id>class来为对象应用样式。上述例子中，div中的文字会显示为16px大小。
转自：
『小破孩』博客
分享到：
相关推荐
在探讨如何使用JavaScript获取标签ID并改变其style属性之前，我们需要了解几个关键的Web开发知识点，包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念，并结合给定的代码...
这样可以在CSS中为同一元素应用多个样式规则，例如`<p class="a b">`。这使得样式更加灵活，方便组合使用。 3. **明确单位**：在CSS中，除非值为0，否则应始终为尺寸属性（如宽度、高度）提供明确的单位，如像素...
其中一种常用的方式是使用`<style>`标签来定义样式规则，这些规则将应用于整个文档或文档中的特定元素。 ##### 示例代码: ```html <style type="text/css"> /* 具体CSS语句 */ .mm { background-color: red; } /*...
然后，我们可以在CSS中为这个`div`添加样式： ```css .login-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ddd; padding...
2. **添加选择符注释**：在CSS中为选择符添加注释，有助于后期维护和理解代码，但也要避免过度复杂化。 3. **背景颜色备用**：当设置深色背景图片和浅色文本时，同时设置深色背景颜色，以防图片丢失导致文本不可读...
类别选择符是CSS中一种基础但至关重要的选择器类型，它允许我们对网页上的特定元素应用样式。在HTML中，每个标签都可以有一个或多个类属性（class attribute），类名就是类别选择符的值。通过在CSS中定义类选择符，...
其次，CSS（Cascading Style Sheets）用于控制网页的样式和布局。有了这个插件，开发者在编写CSS规则时，可以快速获取各种选择器、属性和值的建议。例如，输入`.myClass`后，插件会给出可用的CSS属性，如`color`、`...
2. **设置初始样式**：在CSS中为图标设定默认样式，如颜色、大小、边框等。 3. **应用`:hover`伪类**：为`:hover`伪类添加不同的样式，例如改变背景色、增加阴影或旋转元素。 4. **添加过渡效果**：使用`transition`...
学员会学习如何使用`class`和`id`选择器来指定特定元素的样式，以及如何应用内联样式、内部样式表和外部样式表。理解CSS的选择器机制和层叠原则是提升网页设计灵活性的关键。 Chapter03着重于页面布局，包括流体...
首先，CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，相较于前两个版本，它引入了许多新的选择器、属性和功能，如过渡（transition）、动画（animation）、阴影（box-shadow）、圆角（border-radius）等...
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义网页元素样式的重要技术，它使得我们可以轻松地控制页面布局、颜色、字体等视觉表现。本案例中的“图片边框变换CSS Hover状态效果”是一种常见的交互设计...
17. 设置DOM样式的方法有内联样式、内部样式表、外部样式表、使用JavaScript修改style属性。 18. CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器、后代选择器、子元素选择器...
CSS通过选择器（如元素选择器、类选择器、ID选择器等）来定位HTML元素，并通过声明（如属性和值）来定义样式。在这个案例中，我们的目标是找到一种方法在鼠标悬停时显示图片，而不是默认的文字提示。 以下是一种...
`这行代码将id为secondDiv的div元素的class属性设置为"bg"，从而应用了在<style>标签内定义好的bg类的样式，即背景色变为蓝色。需要注意的是，在JavaScript中为元素添加class时，无需在class前面加点号。 4. 事件...
在这个例子中，如果没有在`style.css`中为`article p`和`aside p`定义任何样式，浏览器将以默认样式显示这两个`p`元素。但是，如果我们为这两个选择器添加样式，比如颜色或字体大小，那么每个`p`元素将会根据其所在...
此外，别忘了在`.css`文件中为列表样式进行适当的定制，确保滑动效果的美观和流畅： ```css <style scoped> .container { display: flex; flex-direction: column; } .list { width: 100%; white-space: ...
CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS控制了网页元素的布局、颜色、字体等视觉表现。在幻灯片的制作中，CSS用于定义每个幻灯片的...
同时，在CSS中为`.active`类添加动画样式： ```css .active { animation-play-state: running; } ``` 以上就是实现CSS3 SVG点击爱心散开动画特效的主要步骤。通过结合SVG的矢量图形特性和CSS3的动画功能，我们...
- **实现**: 直接在`<style>`标签中定义样式或者使用外部CSS文件。 - **示例**: `<style>.table-row { color: red; }</style>` **5.7 在名字上添加连接** - **实现**: 使用`<tapestry:link>`标签为表格中的单元格...
- **定义**：SCSS（Sassy CSS）是一种 CSS 预处理器，允许开发者使用变量、嵌套规则、混合器、函数等功能来增强 CSS 的表达能力。 - **特点**： - 变量支持。 - 嵌套选择器。 - 混合器（mixins）用于重用 CSS ...