CSS 引入 HTML 的三种方式

CSS 引入 HTML 的三种方式

  在 html 文档中引入 CSS 样式表有三种引入方法:

  1. 内部样式表(嵌入式)
  2. 行内样式表(行内式)
  3. 外部样式表(链接式)

一、内部样式表

  内部样式表(内嵌样式表)是写到 html 页面内部。是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中。

内部样式表
  • 注意

    1.<style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的 <head> 标签中。

    2.通过此种方式,可以方便控制当前整个页面中的元素样式设置。

    3.代码结构清晰,但是并没有实现结构与样式完全分离。

    4.使用内部样式表设定 CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式。

二、行内样式表

  行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

行内样式表
  • 注意

    1.style 其实就是标签的属性。

    2.在双引号中间,写法要符合 CSS 规范。

    3.只可控制当前的标签设置样式。

    4.简单样式可以用,复杂的不推荐用。

    5.使用行内样式表设定 CSS ,通常也别称为行内式引入

三、外部样式表

  实际开发都是用外部样式表。适合于样式比较多的情况。核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用。

  • 引入外部样式表分为两步:

    1.新建一个后缀名为 .css 的样式文件,文件中没有 <style> 标签,直接写样式把所有 CSS 代码都放入此文件中。

    2.在 HTML 页面的 <head>中,使用<link> 标签引入这个文件。

    <link rel="stylesheet" href="css文件路径">
    
  • 10
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ItDaChuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值