欢迎光临
我们一直在努力

将CSS样式代码应用到HTML页面的几种方式

大家好!今天跟大家聊一聊将CSS样式应用到网页的几种方式。

将CSS样式代码应用到HTML页面的几种方式

 


CSS的代码须应用到HTML页面中才能达到样式设定的目的。应用方法一般有三种:行内式、内嵌式和链接式。其中,行内样式表和内嵌样式表不需新建专用CSS文件,但链接式样式表需建立一个专用的CSS文件。

1、行内样式表

行内样式表是在HTML标签内部,通过style属性的值来庙宇CSS样式,格式如下图:

将CSS样式代码应用到HTML页面的几种方式

 

例如,为一段文本设置行内样式表,样式分别为文字颜色、文字下划线、文字大小和加粗,其代码和效果如下图:

将CSS样式代码应用到HTML页面的几种方式

 

这种方式的样式表应用,其缺点是样式代码不能重复使用,所以一般不建议使用。

2、内嵌样式表

内嵌样式表是在头部区域,利用<style></style>标签书写CSS样式代码,格式如下图:

将CSS样式代码应用到HTML页面的几种方式

 

其中,"选择器"可以是HTML的标签,也可是CSS的类。type="text/css"用来定义文件的类型为样式表文本文件。例如,设置一个div标签的样式,那么文档中所以用<div>和</div>框住的内容就应用该样式,如下图:

将CSS样式代码应用到HTML页面的几种方式

 

又如,定义一个样式类,引用该类,代码及效果如下图:

将CSS样式代码应用到HTML页面的几种方式

 

内嵌式样式表是可以被重复引用的,但是却不能跨页使用。

3、链接样式表

这是最常用的样式表,也叫外部样式表。它是在页面的头部区域,使用<link>标签链接一个外部的CSS文件来实现,代码格式如下:

将CSS样式代码应用到HTML页面的几种方式

 

其中,rel="stylesheet"是定义链接的文件和HTML之间的关系,href用于指定链接的CSS文件的路径。需要注意的是,这里的CSS文件是指扩展名为.css的文件,不是普通的html文件。例如,创建一个名为css_ex.css的外部样式表,其样式代码为:

将CSS样式代码应用到HTML页面的几种方式

 

在文本所在的页面导入该CSS文档,代码如下:

将CSS样式代码应用到HTML页面的几种方式

 

当href中设定了CSS文件路径后,在<p>标签中设置class时就会出现之前在CSS文档中写好的类。引用后的效果如下图:

将CSS样式代码应用到HTML页面的几种方式

 

外部样式表可以实现CSS代码在多个页面之间跨页引用,有效地简化了代码,也让网站中的页面存在统一的风格,是最常用的CSS文档引用方法。


以上就是这次要分享的内容,如果喜欢或有用,欢迎点赞、转发、关注哦^_^

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:英协网 » 将CSS样式代码应用到HTML页面的几种方式

分享到: 生成海报
avatar

热门文章

  • 评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    登录

    忘记密码 ?

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活