HTML中CSS外部样式表

2024-11-07 13:47:16
推荐回答(5个)
回答1:

1、首先我们我们新建一个记事本,并将记事本的名字改为“引入外部css文件和外部js文件.html”,并回车键确定,以使文件转化为浏览器可以打开的html网页文件。

2、我们编写一个html5的声明标签— , 以使浏览器能认识到我们的文档是一个html5的文件,这样就可以快速的正确解读,以提高浏览的体验。

3、我们写一个的标签,将网页的题目写入进去,让网页的标题显示为“引入外部css文件和外部js文件”。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Ff7246b600c338744a11be8cc5f0fd9f9d62aa0a0%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/f7246b600c338744a11be8cc5f0fd9f9d62aa0a0"></p> <p>4、我们用<meta>标签设置字符的编码格式为:UTF-8,以使浏览器能够正确的显示我们的网页。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F8b13632762d0f703bc66526c06fa513d2797c5ae%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/8b13632762d0f703bc66526c06fa513d2797c5ae"></p> <p>5、我们写一个<body>标签,用来包含网页的主体部分。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F4b90f603738da9773f14409bbe51f8198618e343%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/4b90f603738da9773f14409bbe51f8198618e343"></p> <p>6、我们写几个标签以便在外部css文件样式表中,为其设置样式。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fb7003af33a87e950682135dc1e385343fbf2b448%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/b7003af33a87e950682135dc1e385343fbf2b448"></p> <p>7、我们新建一个css文件,把txt的文件后缀名改为css即可,之后打开就可以写入css代码了。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fc2fdfc039245d688191b7414aac27d1ed21b2461%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/c2fdfc039245d688191b7414aac27d1ed21b2461"></p> <p>8、我们用标签选择器为<p>标签、<div>标签和<span>标签的内容设置样式。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F86d6277f9e2f07083f07ecb0e724b899a901f204%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/86d6277f9e2f07083f07ecb0e724b899a901f204"></p> <p>9、我们使用,<link>标签将我们编写的css文件样式表文件其引入到我们当前的html文件中来。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fcefc1e178a82b90148d305837d8da9773912ef00%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/cefc1e178a82b90148d305837d8da9773912ef00"></p> <p>10、我们鼠标右击在弹出的下拉菜单中,我们选择“在浏览器中打开”这一项。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Ff7246b600c338744a2cbe9cc5f0fd9f9d72aa070%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/f7246b600c338744a2cbe9cc5f0fd9f9d72aa070"></p> <p>11、我们看到我们编写的样式被应用到了标签中文字上,说明我们的css外部样式表文件引入成功。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F4d086e061d950a7b2211887404d162d9f2d3c95e%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/4d086e061d950a7b2211887404d162d9f2d3c95e"></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答2:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>如果有可能的话,请下载Aptana Studio 3,并调试好。<br>在里面新建一个HTML文件,叫做“引入外部样式表.html”。<br>在同级目录下新建一个叫做css的文件夹,里面新建一个css文件,叫做“style.css”。<br>在“引入外部样式表.html”文件里打入这些代码(提示很多,上下键选择你需要的标记,回车键确定)。<br><!DOCTYPE html><br><html><br> <head><br> <meta charset="UTF-8"/><br> <title>引入外部样式表




你好!


备注:注释的写法是:在之间填写你要的文字。标记里的文字可以随机替换。
在“style.css"文件里打入这些代码(提示也很多)。
span{
color:black;
font-size:12px;
font-family:"黑体";
border:0px solid black;
}
如果条件不允许,不能下载Aptana Studio 3的话,也可以像用户“滟丽00”一样新建记事本,后缀改为.html和.css就可以啦!
听懂了吗?求精选!

回答3:

内嵌样式(Inline Style)
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。
这个Style定义里面的文字是20pt字体,字体颜色是红色。

内部样式表(Internal Style Sheet)
内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。

这个标题使用了Style。
这个标题没有使用Style。

内部样式表(Internal Sytle Sheet)要用到Style这个Tag,写法如下:

外部样式表(External Style Sheet)
将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css。文件内容如下:
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一个网页,代码如下:

这个标题使用了Style。
这个标题没有使用Style。

使用外部(Extenal)样式表,相对于内嵌(Inline)和内部式(Internal)的,有以下优点:

样式代码可以复用。一个外部CSS文件,可以被很多网页共用。
便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。
提高网页显示的速度。如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。

回答4:



href为css位置链接

回答5:

新建一个 文本吧后缀改为.css
然后直接在xxx.css里写CSS样式
*{
font-family:"黑体";
font-size:12px;
color:#000000;
border:none;
}
比如我xxx.css在D:/myStyle/下
那么我页面就这么引用

如果你.css放在站点下
你就找到他的位置替换 link 下的href 的path就OK了