网页添加CSS样式表的四种方法

网页添加css样式表的四种方法,大家可以根据需要选择自己喜欢的方式。

一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。
例如:

这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签: 将样式规则写在…标签之中。

复制代码

代码如下:

立即学习“前端免费学习笔记(深入)”;

  

登录后复制

例如:

  

登录后复制

通常是将整个的 …结构写在网页的

部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入

即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入: 跟LINK用法很像,但必 放在… 中。

复制代码

代码如下:

立即学习“前端免费学习笔记(深入)”;

  

登录后复制

例如:

  

登录后复制

要注意的是,行末的分号是绝对不可少的!这种方式也可以把
@import url(http://yourweb/ example.css);
加到其它样式内调用。

以上就是网页添加CSS样式表的四种方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2897695.html

(0)
上一篇 2025年3月10日 23:26:44
下一篇 2025年3月10日 23:26:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CSS实现精灵图与字体图标

    这篇文章主要介绍了css实现精灵图与字体图标的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源。 为…

    2025年3月10日 编程技术
    200
  • CSS文字

    如果说只是单纯的一个html页面是没有任何色彩的,我们通常需要添加一些css,js样式来增加页面的色彩感,下面我们来说一下有关css文字方面的样式。 字体 body{font-family:”宋体”;} 登录后复制 颜色 body{colo…

    编程技术 2025年3月10日
    200
  • css实现背景半透明文字不透明的效果示例

    这篇文章主要介绍了关于css实现背景半透明文字不透明的效果示例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 本文介绍了css实现背景半透明文字不透明的效果示例,分享给大家,具体如下: 效果如下: nbsp;html>…

    2025年3月10日
    200
  • css3实现求婚小动画

    这篇文章主要介绍了关于css3实现求婚小动画,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 昨天在微信公众号中看到这一篇文章,瞬间觉得css太强大了,只要你想做,everything is possible! 首先放张效果图…

    2025年3月10日
    200
  • CSS和CSS3实现画出三角形元素

    这篇文章主要介绍了关于CSS和CSS3实现画出三角形元素,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 前端页面偶尔需要有三角形图标或者三角形样式,现在图标的三角形大多用字体图标去实现了,但是有些大的三角形模块还是需要前端运…

    编程技术 2025年3月10日
    200
  • CSS布局自适应高度终极方法

    这篇文章主要介绍了关于CSS布局自适应高度终极方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 我们排版的最终目的是让程序员能快速绑定,最终的真实数据能和效果图一样,但是我们经常在国字型页面里面碰到左右两列的高度不确定,这…

    编程技术 2025年3月10日
    200
  • CSS实现多重边框的5种方式

    这篇文章主要介绍了关于CSS实现多重边框的5种方式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方…

    2025年3月10日 编程技术
    200
  • 让div撑满整个屏幕的方法(css)

    这篇文章主要介绍了关于让div撑满整个屏幕的方法(css),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 在body只有一个p的时候,可以通过这样的方式让p撑满整个屏幕。 1.给p设置定位。   复习一下——   css中p…

    编程技术 2025年3月10日
    200
  • CSS实现鼠标放上去改变文字内容

    这篇文章主要介绍了纯css实现鼠标放上去改变文字内容,需要的朋友可以参考下。 代码如下: nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.or…

    编程技术 2025年3月10日
    200
  • css 编写表单效果

    本篇文章主要介绍如何使用p+css实现表单效果,纯p+css实现,大家可以参考下。 代码如下: nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3…

    编程技术 2025年3月10日
    200

发表回复

登录后才能评论