外部CSS定义和如何链接到一个
当网络浏览器加载网页时,其出现方式取决于级联样式表中的信息。 HTML文件有三种使用样式表的方法:外部,内部和内嵌。
内部和内嵌样式表存储在HTML文件本身内。 他们现在很容易处理,但因为他们没有存储在中心位置,所以不可能一次轻松更改整个网站的样式; 您必须重新输入每个条目并手动更改。
但是,使用外部样式表时,呈现页面的指示信息存储在单个文件中,这使得在整个网站或多个元素上编辑样式非常容易。 该文件使用.CSS文件扩展名,HTML文档中包含该文件位置的链接,以便Web浏览器知道在何处查找样式说明。
一个或多个文档可以链接到同一个CSS文件,并且一个网站可能有许多独特的CSS文件用于样式化不同的页面,表格,图像等。
如何链接到外部样式表
每个想要使用特定外部样式表的网页都需要从部分链接到CSS文件,就像这样:
head>在这个例子中,唯一需要修改以适用于自己的文档的是styles.css文本。 这是你的CSS文件的位置。
如果该文件实际上称为styles.css,并且与链接到该文件的文档位于完全相同的文件夹中,那么它可以保持与上面的完全一样。 然而,很可能你的CSS文件的标题是别的,在这种情况下,你可以将名称从“样式”更改为任何你的名字。
如果CSS文件不在这个文件夹的根目录下,而是在一个子文件夹中,它可能会这样读取:
head>有关外部CSS文件的更多信息
外部样式表的最大好处是它们不受任何特定页面的束缚。 如果样式是内部或内嵌执行的,则网站上的其他页面不能指向这些样式偏好。
然而,使用外部样式,相同的CSS文件可以用于网站上的每一个页面,以便它们都具有统一的外观,并且编辑整个网站的CSS内容非常简单和集中。
你可以看到如何在以下作品...
内部样式需要使用标签,因为它们需要与标签区分:
body {background-color:green; } h1 {color:blue; margin-left:15px; } style> head>但是,由于外部样式表包含在它们自己的文件中,因此可以像这样创建它们,这意味着与上述示例完全相同:
body {background-color:green; } h1 {color:blue; margin-left:15px; }在这些示例中,内联样式仅适用于特定页面,显然它包含在该HTML页面的标题详细信息中。 在第二个例子中,CSS信息是自包含在CSS文件中的,任何页面都可以链接到使用上面的链接到外部样式表部分的代码。