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

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

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

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

复制代码

代码如下:

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

  

例如:

  

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

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

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

复制代码

代码如下:

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

  

例如:

  

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

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:04:20
下一篇 2025年12月24日 01:04:42

相关推荐

  • css实现鼠标移入移出动态效果

    这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 知识点:transform-origin 兼容性:IE10以上 p { position: absolute; width: 200px; height: 60px; text-ali…

    好文分享 2025年12月24日
    000
  • CSS实现精灵图与字体图标

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

    2025年12月24日 好文分享
    000
  • CSS文字

    如果说只是单纯的一个html页面是没有任何色彩的,我们通常需要添加一些css,js样式来增加页面的色彩感,下面我们来说一下有关css文字方面的样式。 字体 body{font-family:”宋体”;} 颜色 body{color:#666} 大小 body{font-size:12px;}body…

    好文分享 2025年12月24日
    000
  • css实现背景半透明文字不透明的效果示例

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

    2025年12月24日
    000
  • css3实现求婚小动画

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

    2025年12月24日
    000
  • CSS和CSS3实现画出三角形元素

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

    好文分享 2025年12月24日
    000
  • CSS布局自适应高度终极方法

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

    好文分享 2025年12月24日
    000
  • CSS实现多重边框的5种方式

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

    2025年12月24日 好文分享
    000
  • 让div撑满整个屏幕的方法(css)

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

    好文分享 2025年12月24日
    000
  • CSS实现鼠标放上去改变文字内容

    这篇文章主要介绍了纯css实现鼠标放上去改变文字内容,需要的朋友可以参考下。 代码如下: 鼠标经过变换文字#Menu { width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden;}#Menu ul { margin:…

    好文分享 2025年12月24日
    000
  • css 编写表单效果

    本篇文章主要介绍如何使用p+css实现表单效果,纯p+css实现,大家可以参考下。 代码如下: by 阿会楠 2008-12-4 //js辅助 window.onload = function(){ var initleft = 200;// 初始化第一个定位 var lis = document.…

    2025年12月24日
    000
  • css页面滑动穿透的两种解决办法

    这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 问题描述: 移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是著名的滚动穿透问题。 示例demo: 样式: .box{width: 100%;…

    2025年12月24日 好文分享
    000
  • CSS如何实现外边距的合并

    这篇文章主要介绍了CSS如何实现外边距的合并,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 外边距合并指的是:当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并的情况 情况1 当一个元素出现在另一个…

    2025年12月24日 好文分享
    000
  • 关于CSS页面布局的方案大全

    前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1)使用inline-block+text-align(1)原理、用法 原理:先将子框由块级元素改变为行内块元素,再…

    2025年12月24日 好文分享
    000
  • css模拟行星

    这篇文章介绍的内容是css模拟行星 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 .solarsys{ width: 800px; height: 800px;; position: relative; margin: 0 auto; background-color: #0000…

    好文分享 2025年12月24日
    000
  • CSS简单学习的要点

    这篇文章介绍的内容是CSS简单学习的要点 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 参考:http://www.w3school.com.cn/css CSS就是让HTML元素显示的更规范的一种东西,可以写在标签里,文件头,文件外,浏览器缺省设置(级别由高到低),可以统一规范。…

    好文分享 2025年12月24日
    000
  • CSS中可继承的属性

    这篇文章介绍的内容是CSS中可继承的属性 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了。可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承。这么来记很…

    好文分享 2025年12月24日
    000
  • 使用CSS给图片添加阴影的方法

    一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以采取“视觉欺骗大法”——定义渐变边框来实现: [code] on_all”> 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以采取“视觉欺骗大法”——定义渐变…

    好文分享 2025年12月24日
    000
  • css的语法内容

    这篇文章主要介绍了关于css的语法内容,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1.css简介 可以控制网页的效果,包括字体大小,颜色,字体,行间距,字间距,背景图片、定位、背景颜色 2.css书写样式方法 1)行内样式 默认效果文字变为红色 注:行内样式直接将CSS样式属性书…

    好文分享 2025年12月24日
    000
  • CSS样式的处理

    这篇文章主要介绍了关于CSS样式的处理 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 4/23/2018 8:23:35 AM CSS 晨测: 1. 标准的一个html文件的结构2. 指定颜色和资源位置的方式3. 常用标签 设置各级标题: 设置段落: 设置文本格式: 超链接: 图片…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信