外联样式表添加到html中,CSS联样式表之内联式、外联式和嵌入式

CSS 全称级联样式表 (Cascading Style Sheets),在实际应用中,一般有以下三种级联方式。

1. 外联式

外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 标记或者 @import 语句来引入。示例代码如下:   //link 链接

@import url("style.css"); //@import 导入

和 @import 的异同可参考此文:CSS 外部引用中 link 与 @import 的区别。

2. 内联式

门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用

内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

3. 嵌入式

最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。示例代码如下:

青山

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。  总体而言,外联和内联各有优点,可综合实际情况选择适合的级联方式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值