如何链接外部样式表

207人浏览 2024-04-21 22:06:04

6个回答

  • 最佳回答
    淘淘吧
    淘淘吧

    要链接外部样式表,可以按照以下步骤进行:

    1. 创建一个外部样式表文件:在你的项目目录中创建一个新的CSS文件,并将其保存为样式表的名称。你可以将其命名为\"style.css\"。

    2. 编辑外部样式表文件:使用任何文本编辑器打开新创建的样式表文件。在你可以添加和编辑CSS规则来定义你的网页的样式。你可以设置字体、颜色、背景等。请确保你的样式表文件中没有任何HTML标签。

    3. 将样式表文件链接到HTML文档:在你的HTML文件的头部区域(通常是标签之间),使用元素将外部样式表文件与HTML文档相关联。你需要设置链接元素的rel属性为\"stylesheet\",并将href属性设置为指向你的样式表文件的路径。例如:

    4. 保存并加载HTML文档:保存你的HTML文档,并在浏览器中加载它。浏览器会根据你的链接元素加载并应用外部样式表文件中定义的样式规则。

    通过将外部样式表文件链接到HTML文档,你可以轻松地管理和维护你的样式,同时可以在多个网页上重复使用相同的样式规则,提高开发效率并保持一致的外观和感觉。

  • 张小娴
    张小娴

    CSS 的对象映射有好几个方法:1. 标签名映射:(例: 全部

    标签)

    P { ...css code... }2. id 映射:( 例

    ...)

    #myid{ ...css code...}

    语法:井号(\"#\")3. 类 映射:(例:全部包含 clas = \"myclass\"的元素)

    .myclass {...css code...}

    语法:点(\".\")4.节点路径映射(更具体化要加样式的对象)

    例1: body 标签中的 P标签

    body p {...code...}

    例2:

    标签中 标签, 并且类为\"aclass\" 的标签

    p a .aclass{...code...}

    语法:空格(\" \")

    层次越多...对象越具体(2层够用了...)5.复合映射(多种元素用同一个样式)

    例: 用同一个样式

    p,td,li {...code...}

    语法:逗号(\",\")6.附: 选择全部

    例: 选择 下所有元素

    body * {...code...}

    语法:星号(\"*\")以上语法可以混合使用的....希望你再学下优先权的问题,有冲突或重复的样式,会优先最具体的,同段代码, 通常最后的有效(像!important等语法,你以后会学到)

    例:

    p {color:red;}

    p .myclass {color:blue}

    所有p的颜色为红, 但class=\"myclass\" 的p,被更具体化为蓝色.

  • 莱茵19
    莱茵19

    1. link标签是属于xhtml范畴,而@import则是css2.1中特有的。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 2. 加载的顺序的区别,link加载的css时,是一种并行(没有尝试是否是这样)加载CSS方式,而@import则在整个页面加载完成后才加载。3. 兼容性的区别,因@import是CSS2.1才特有的,所以对于不兼容CSS2.1的浏览器来说,无效。4. 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别,此时@import就无能为力了。

  • 燕子
    燕子

    链接样式表的方法基本有三种:

    1、行内样式表:使用【style】属性引入CSS样式。

    2、内部样式表:在【style】标签中书写CSS代码;【style】标签写在【head】标签中。

    3、外部样式表:CSS代码保存在扩展名为【.css】的样式表中;HTML文件引用扩展名为【.css】的样式表,有两种方式:【链接式】和【导入式】。CSS(层叠样式表)介绍:

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    以上内容参考:百度百科-CSS

  • 青木云糅
    青木云糅

    外部CSS样式是一个独立的CSS文件,当在网页中直接创建外部CSS样式时,该样式自动应用到网页中;当在创建空白网页时,通常可以附加已经存在的外部样式表。如果CSS样式文件已经存在,制作网页时可以通过【CSS样式】面板中的【附加样式表】按钮来链接,具体操作如下:

    (1)单击【附加样式表】按钮,在打开【链接外部样式表】对话框(见图1)中选择外部CSS文件后,可以通过“连接”或“导入”方式将其应用到当前网页中。(2)在【添加为】中选择其中的一个选项:

    ◇若要创建当前文档和外部样式表之间的链接,请选择【链接】单击按钮。该选项在HTML代码中创建一个标记,并引用已发布的样式表所在的URL。标记必须放在页面的区域。Internet Explorer和Netscape Navigator都支持此方法。

    ◇如果希望导入而不是链接到外部样式表,请选择【导入】单击按钮。导入外部样式表是指在内部样式表的里导入一个外部样式表,导入时用@import。注意:不能使用 【链接】标记添加从一个外部样式表到另外一个外部样式表的引用。如果要嵌套样式表,必须使用【导入】指令。大多数浏览器还能识别页面中(而不仅仅是样式表中)的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时,不同浏览器解决冲突属性的方式具有细微的差别。

  • 邱小小小二
    邱小小小二

    链接外部样式文件

    外部引入CSS样式文件是通过link标签实现的,它只能位于HTML文档的head标签内,且必须有href属性,该属性用于指定需要引入的CSS文件的路径。写法:link元素中type用于规定链接文档的MIME类型,rel属性用于规定被链接文档与当前文档之间的关系,如alternate用于定义交替出现的链接,appendix定义文档的附加信息等,此外还有一些可选属性,用于做一些除加载CSS文件的其他事情。link元素是XHMTL中的标签,当HTML页面被渲染时,link引用的CSS文件会被同时加载,我们也可以通过JavaScript控制DOM去改变link元素的CSS内容。导入外部样式

    导入外部样式单的功能与链接外部样式的功能差不多,都能实现一样的功能,但是它们之间还是存在一定的差别的,导入外部样式主要通过@import方式导入CSS文件。

    写法:

    @import style.css //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import \"style.css\" //Windows IE4/ NS4, Macintosh IE4/NS4不识别@import url(style.css) //Windows NS4, Macintosh NS4不识别@import url(style.css) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import url(\"style.css\") //Windows NS4, Macintosh NS4不识别由上分析知道,@import url(style.css) 和@import url(\"style.css\")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

    本段摘自:

    添加css的方式:link与@import区别 - Wayne-Zhu - 博客园www.cnblogs.com@import是css2里面提出来的,低版本的浏览器不支持,注意它是css中属性,如果要使用它,可以在style标签中书写。但在CSS文件中再导入CSS文件,会给服务器造成太大的文件请求压力,最好不要这样做。@import url(css/style.css);

    @import是由CSS提供的一种导入样式的方式,当页面被加载时,@import会等到页面全部被加载完成时再加载CSS样式,所以在页面还未加载完成期间,页面还没有CSS样式效果,会导致“屏闪”,通过@import导入的CSS样式是无法用DOM去控制的。

免费获取咨询

今日已有1243人获取咨询

免费咨询

热门服务

更多