开始使用CSS

Download css eBook

备注

样式可以通过多种方式创作,在源HTML文档中指定时允许不同程度的重用和范围。 外部样式表可以在HTML文档中重复使用。 嵌入式样式表适用于指定它们的整个文档。 内联样式仅适用于指定它们的单个HTML元素。

版本

发布日期
1 1996年12月17日
2 1998年5月12日
3 2015年10月13日

使用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属性更简单。

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
 

如果您需要更改多个样式规则:

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
 

jQuery包含两种方法来更改其中带有连字符的css规则(即font-size )。您可以将它们放在引号或驼峰式样式规则名称中。

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
 

也可以看看

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文件中:

   <style>
    @import url('/css/styles.css');
   </style>
 

也可以导入外部CSS。常见的用例是字体文件。

   <style>
    @import url('/css/styles.css');
   </style>
 

@import 规则的可选第二个参数是媒体查询列表:

   <style>
    @import url('/css/styles.css');
   </style>
 

外部样式表

通过在每个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文件

<!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>
 

确保在href中包含CSS文件的正确路径。如果CSS文件与HTML文件位于同一文件夹中,则不需要路径(如上例所示),但如果将其保存在文件夹中,则将其指定为href="foldername/style.css"

<!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>
 

外部样式表被认为是处理CSS的最佳方式。这有一个非常简单的原因:当您管理一个100页的网站时,所有网站都由一个样式表控制,并且您希望将链接颜色从蓝色更改为绿色,这样可以更容易地进行更改在你的CSS文件中,让所有100个页面中的更改“级联”,而不是进入100个单独的页面并进行相同的更改100次。同样,如果您想彻底改变网站的外观,您只需要更新这个文件。

您可以根据需要在HTML页面中加载任意数量的CSS文件。

<!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>
 

CSS规则适用于一些基本规则,顺序很重要。例如,如果您有一个main.css文件,其中包含一些代码:

<!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>
 

所有带有“green”类的段落都将以浅绿色写入,但您可以使用另一个.css文件覆盖它,只需将其包含 main.css 之后即可 。你可以使用以下代码的override.css跟随main.css,例如:

<!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>
 

现在所有带有“绿色”类的段落都将以深绿色而不是浅绿色写入。

其他原则适用,例如'!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-typelist-style-imagelist-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-type: square;
}
 

list-style-position 属性定义列表项标记的位置,并接受以下两个值之一:“inside”或“outside”。

li {
    list-style-type: square;
}
 

Stats

2076 Contributors: 38
Friday, July 7, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书