CSS开始使用CSS
备注
样式可以通过多种方式创作，在源HTML文档中指定时允许不同程度的重用和范围。 外部样式表可以在HTML文档中重复使用。 嵌入式样式表适用于指定它们的整个文档。 内联样式仅适用于指定它们的单个HTML元素。
版本
使用JavaScript更改CSS
纯JavaScript
可以通过元素的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的
使用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"
});
也可以看看
CSS @import规则（CSS规则之一）
@import CSS at-rule用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，但@charset规则除外;因为它不是嵌套语句，所以@import不能在条件组at-rules中使用。 @import 。
如何使用@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>
使用CSS设置列表
样式列表项有三种不同的属性： 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;
}
