style
元素允许您在HTML文档中内联定义CSS样式。
style
元素具有局部属性: type,media,scoped
。
HTML5中添加了 scoped
属性。
以下代码给出了所使用的样式元素的示例。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<a href="http://www..cn">Visit www..cn</a>
</body>
</html>
上面的代码为 a
元素创建了一个新样式。它显示具有灰色背景,白色文本和一些填充的链接。
您可以在整个HTML文档中使用 style
元素,并且单个文档可以包含多个样式元素。
style
元素中的 type
属性可以告诉浏览器你要定义什么样的样式;但是,浏览器支持的唯一的样式机制是CSS,所以值的此属性将始终为text/css。
style
元素中的 media
属性允许您指定应将样式应用于文档的时间。
以下代码提供了如何使用此属性的示例。
<!DOCTYPE HTML>
<html>
<head>
<style media="screen" type="text/css">
a {
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="print">
a{
color:Red;
font-weight:bold;
font-style:italic
}
</style>
</head>
<body>
<p>This is a test.</p>
<a href="http://www..cn">Visit www..cn</a>
</body>
</html>
上面的代码定义了两个具有不同媒体值的 style
元素。
当HTML在屏幕上显示时,浏览器将应用第一个样式,和打印页面时的第二种样式。
您可以为样式创建非常具体的条件。
首先,您可以指定设备。可能的值列在下表中。
设备 | 描述 |
---|---|
all | 将此样式应用于任何设备(这是默认设置)。 |
aural | 将此样式应用于语音合成器。 |
braille | 将此样式应用于盲文设备。 |
handheld | 将此样式应用于手持设备。 |
projection | 将此样式应用于投影机。 |
在打印预览和打印页面时应用此样式。 | |
screen | 当内容显示在计算机屏幕上时应用此样式。 |
tty | 将此样式应用于固定宽度的设备,例如电传。 |
tv | 将此样式应用于电视。 |
使用媒体功能可以使您更具体。
以下代码为 style
元素添加了特殊性。
<!DOCTYPE HTML>
<html>
<head>
<style media="screen AND (max-width:500px)" type="text/css">
a {
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
color:Red;
font-style:italic;
}
</style>
</head>
<body>
<p>This is a test.</p>
<a href="http://www..cn">Visit www..cn</a>
</body>
</html>
上面的代码使用 width
功能来区分两种样式。第一个将在浏览器窗口小于500像素时使用,和第二个窗口宽度大于500像素。
您可以使用 AND
将设备与功能组合。
除了 AND
之外,还可以使用 NOT
或逗号(,)表示OR。这允许您创建复杂和相当具体的条件,以应用样式。
可用功能及其修饰符列在下表中。
除非另有说明,否则可以使用 min-
或 max-
修改这些功能,以创建阈值而不是具体值。
width
指定浏览器窗口的宽度。height
指定浏览器窗口的高度。device-width
指定整个设备的宽度,而不仅仅是浏览器窗口。 device-height
指定整个设备的高度,而不仅仅是浏览器窗口。resolution
指定设备的像素密度。orientation
指定设备的方向。aspect-ratio
指定浏览器窗口设备的像素比率。device-aspect-ratio
指定浏览器窗口或整个设备的像素比率。color monochrome
指定彩色或单色设备每像素的位数。color-index
指定显示可以显示的颜色数。scan
指定电视的扫描模式。支持的值是渐进和交错。grid
指定设备的类型。网格设备使用固定网格显示内容;例如,基于字符的终端和单行寻呼机显示器。HTML资源链接 link 元素在HTML文档和之间创建关系外部资源,CSS样式表或Javascript文件。 link 元素具有局部属性: href,rel,hr...
HTML中如何键入空格一个空格的键入在 html 网页中一个空格,我们可以键入“空格”键即可实现。多个 html 空格字符如果在 html 中...
CSS概述1. Cascading Style Sheets 层叠样式表,它可以控制多重网页的样式和布局;2. 需具备的基础知识:HTML、XHTML;3. 主要实...
响应式 Web 设计 - 网格视图什么是网格视图? 很多网页都是基于网格设计的,这说明网页是按列来布局的。使用网格视图有助于我们设...
我们都知道 HTML 和 CSS 是作用不相同的两种语言,但是它们对一个网页能够同时产生作用,网页(webPage)= 内容(html) + 表现...