样式可以通过多种方式创作,在源HTML文档中指定时允许不同程度的重用和范围。 外部样式表可以在HTML文档中重复使用。 嵌入式样式表适用于指定它们的整个文档。 内联样式仅适用于指定它们的单个HTML元素。
可以通过元素的style
属性使用JavaScript添加,删除或更改CSS属性值。
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
请注意,样式属性以较低的驼峰案例样式命名。在示例中,您会看到css属性font-family
在javascript中变为fontFamily
。
作为直接处理元素的替代方法,您可以在JavaScript中创建<style>
或<link>
元素,并将其附加到HTML文档的<body>
或<head>
。
使用jQuery修改CSS属性更简单。
$('#element').css('margin', '5px');
如果您需要更改多个样式规则:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery包含两种方法来更改其中带有连字符的css规则(即font-size
)。您可以将它们放在引号或驼峰式样式规则名称中。
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
@import CSS at-rule用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,但@charset规则除外;因为它不是嵌套语句,所以@import不能在条件组at-rules中使用。 @import
。
您可以通过以下方式使用@import规则:
A.带内部样式标签
<style>
@import url('/css/styles.css');
</style>
B.使用外部样式表
以下行将根目录additional-styles.css
名为additional-styles.css
的CSS文件导入到出现的CSS文件中:
@import '/additional-styles.css';
也可以导入外部CSS。常见的用例是字体文件。
@import 'https://fonts.googleapis.com/css?family=Lato';
@import
规则的可选第二个参数是媒体查询列表:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
通过在每个HTML文档中放置<link>
元素,可以将外部CSS样式表应用于任意数量的HTML文档。
<link>
标记的属性rel
必须设置为"stylesheet"
, href
属性设置为"stylesheet"
的相对或绝对路径。虽然使用相对URL路径通常被认为是良好的做法,但也可以使用绝对路径。在HTML5中, 可以省略 type
属性。
建议将<link>
标记放在HTML文件的<head>
标记中,以便在样式元素之前加载样式。否则, 用户将看到一些无格式的内容 。
你好,world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css文件
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
确保在href中包含CSS文件的正确路径。如果CSS文件与HTML文件位于同一文件夹中,则不需要路径(如上例所示),但如果将其保存在文件夹中,则将其指定为href="foldername/style.css"
。
<link rel="stylesheet" type="text/css" href="foldername/style.css">
外部样式表被认为是处理CSS的最佳方式。这有一个非常简单的原因:当您管理一个100页的网站时,所有网站都由一个样式表控制,并且您希望将链接颜色从蓝色更改为绿色,这样可以更容易地进行更改在你的CSS文件中,让所有100个页面中的更改“级联”,而不是进入100个单独的页面并进行相同的更改100次。同样,如果您想彻底改变网站的外观,您只需要更新这个文件。
您可以根据需要在HTML页面中加载任意数量的CSS文件。
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
CSS规则适用于一些基本规则,顺序很重要。例如,如果您有一个main.css文件,其中包含一些代码:
p.green { color: #00FF00; }
所有带有“green”类的段落都将以浅绿色写入,但您可以使用另一个.css文件覆盖它,只需将其包含在 main.css 之后即可 。你可以使用以下代码的override.css跟随main.css,例如:
p.green { color: #006600; }
现在所有带有“绿色”类的段落都将以深绿色而不是浅绿色写入。
其他原则适用,例如'!important'规则,特异性和继承。
当有人第一次访问您的网站时,他们的浏览器会下载当前页面的HTML以及链接的CSS文件。然后当他们导航到另一个页面时,他们的浏览器只需要下载该页面的HTML; CSS文件已缓存,因此无需再次下载。由于浏览器缓存外部样式表,因此页面加载速度更快。
使用内联样式将样式应用于特定元素。请注意,这不是最佳选择。鼓励在<style>
标记或外部CSS文件中放置样式规则,以便在内容和表示之间保持区别。
内联样式会覆盖<style>
标记或外部样式表中的任何CSS。虽然这在某些情况下很有用,但这个事实往往会降低项目的可维护性。
以下示例中的样式直接应用于它们所附加的元素。
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
内联样式通常是确保在各种电子邮件客户端,程序和设备之间呈现兼容性的最安全方式,但编写起来既费时又有点难以管理。
包含在HTML文档中的<style></style>
标记中的CSS的功能类似于外部样式表,除了它存在于其样式的HTML文档中而不是单独的文件中,因此只能应用于其中的文档住。请注意,此元素必须位于<head>
元素内以进行HTML验证(尽管它可以在所有当前浏览器中使用,如果放在body
)。
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
样式列表项有三种不同的属性: list-style-type
, list-style-image
和list-style-position
,它们应按该顺序声明。默认值分别为disc,outside和none。每个属性都可以单独声明,也可以使用list-style
简写属性声明。
list-style-type
定义用于每个列表项的项目符号点的形状或类型。
list-style-type
一些可接受的值:
(有关详尽列表,请参阅W3C规范wiki )
例如,要为每个列表项使用方形项目符号,您将使用以下属性 - 值对:
li {
list-style-type: square;
}
list-style-image
属性确定列表项图标是否设置了图像,并接受值none
或指向图像的URL。
li {
list-style-image: url(images/bullet.png);
}
list-style-position
属性定义列表项标记的位置,并接受以下两个值之一:“inside”或“outside”。
li {
list-style-position: inside;
}