css的引入方式有哪些

css引入方式有:1、使用HTML标签的style属性引入;2、将样式代码写在页面的“”标签对中;3、使用link标签,引入外部CSS文件;4、使用“@import”规则,引入外部CSS文件。

css的引入方式有哪些

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、使用HTML标签的style属性(行内式)

将style属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式。

这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高。使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果。

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

2、使用style标签(内嵌式)

将样式代码写在页面...标签之中

…标签结构可以位于页面标签中的任何位置,也可以多次出现。通常是将整个…结构写在页面的

…部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性,一个页面内部便于复用和维护,但多个页面之间的CSS代码复用仍然不够。

 bdoy{font-size:14px;}

3、使用link标签,引入外部CSS文件(链接式)

将css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件,注意这些CSS代码的相互影响,通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的,可以在站个网站范围内进行CSS代码的规划,方便复用和维护,但这样将代码高度集中,代码量可能过大,维护不当的话又容易出现混乱。


4、使用@import引入CSS文件(导入式)

使用@import引入CSS文件有两种方式,一种可以放在页面中的… 中,用法如下:

@import url(index2.css);

另外也可以放在CSS文件中使用,用法如下:

@import "sub.css";

使用@import引入CSS可以很方便的引入外部文件的CSS代码,方便维护和规划。但是每多引入一个CSS文件,就会对服务器增加一次连接请求,当访问量较大时,需在维护性和性能上进行权衡。(学习视频分享:css视频教程)

链接式和导入式的区别

1、属于XHTML
2、优先加载CSS文件到页面

@import

1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如:

行内样式和内部样式比较优先级:

    行内样式和内部样式表的优先级          p{      color: blue;    }            

我是p段落

浏览器运行效果:

css的引入方式有哪些

结论:行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级:

a、内部样式表在外部样式表上面

    内部样式表和外部样式表的优先级          p{      color: blue;    }            

我是p段落

我是p

  1. 1111
  2. 2222

浏览器运行效果:

css的引入方式有哪些

b、外部样式表在内部样式表上面

    内部样式表和外部样式表的优先级                 p{      color: blue;    }       

我是p段落

我是p

  1. 1111
  2. 2222

浏览器运行效果:

css的引入方式有哪些

结论:内部样式表和外部样式表使用就近原则,即谁写在下面以谁为准。

注意:导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级:ID选择器>类选择器>标签选择器

    选择器的优先级      #a{      color: green;    }    .b{      color: yellow;    }    h2{      color: red;    }       

111

222

333

浏览器运行效果:

css的引入方式有哪些

更多编程相关知识,请访问:编程入门!!

以上就是css的引入方式有哪些的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 06:50:45
下一篇 2025年12月24日 06:51:03

相关推荐

  • css超出显示滚动条的方法有哪些

    css超出显示滚动条的方法:1、计算滚动条宽度并隐藏起来;2、使用三个容器包围起来,不需要计算滚动条的宽度;3、自定义滚动条的伪对象选择器【::webkit-scrollbar】。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css超出显示滚动条的方法: 方法1:计算滚动…

    2025年12月24日
    000
  • css如何改变鼠标样式

    在css中,可以使用cursor属性来改变鼠标的样式,该属性可以指定鼠标指针放在一个元素边界范围内时所用的光标形状;例如当属性值为“url(..)”可自定义鼠标样式,“crosshair”设置十字线样式,“pointer”设置小手样式。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日 好文分享
    000
  • css图片大小如何设置

    css图片大小的设置方法:1、通过img标签引入的图片大小设置,语法为【img{width:150px;height:60px}】;2、使用【background-size】属性规定背景图像的尺寸。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css图片大小的设置方法: …

    2025年12月24日
    000
  • css如何改字体

    css改字体的方法:1、可以使用【font-family】更改字体样式;2、使用【font-weight】属性更改字体粗细;3、使用color属性更改字体颜色。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css改字体的方法: font-family 规定元素的字体系列。…

    2025年12月24日
    000
  • css怎么占位隐藏元素

    css占位隐藏元素的方法:1、使用visibility属性,给元素设置“visibility: hidden;”样式即可,元素虽隐藏了,但仍占据其本来的空间;2、使用opacity属性,元素设置“opacity:0;”样式即可。 本教程操作环境:windows7系统、CSS3&&HT…

    2025年12月24日
    000
  • css怎么禁止选中文字

    在css中,可以使用user-select属性来禁止选中文字,只需要给文本文字元素添加“user-select:none;”样式即可。user-select属性可以设置或检索是否允许用户选中文本,当值为“none”时表示文本不能被选择。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日
    000
  • css如何设置字体样式

    css设置字体样式的方法:1、使用【font-family】设置字体类型;2、使用【font-size】设置字体大小;3、使用【font-variant】设置字母是否转大写。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css设置字体样式的方法: font-family …

    2025年12月24日
    000
  • css有哪些属性不继承父级的

    css不继承父级的有:1、文本属性;2、盒子模型的属性;3、背景属性;4、定位属性;5、生成内容属性;6、轮廓样式属性;7、页面样式属性;8、声音样式属性。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css不继承父级的有: 1、display:规定元素应该生成的框的类型…

    2025年12月24日
    000
  • css如何禁止滚动条

    css禁止滚动条的方法:1、完全隐藏,代码为【】;2、在不需要时隐藏,代码为【】;3、样式表方法。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 1、完全隐藏 在里加入scroll=”no”,可隐藏滚动条;   立即学习“前端免费学习笔记(深入)”;…

    2025年12月24日
    000
  • css中哪个属性表示径向渐变

    css中表示径向渐变的属性为“radial-gradient()”;径向渐变由中心点定义,为了创建径向渐变必须设置两个终止色,语法“radial-gradient(shape size at position,起始颜色,..,终止颜色)”。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日 好文分享
    000
  • css 什么语言

    CSS是一种用来表现HTML或XML等文件样式的计算机语言,是能够真正做到网页表现与内容分离的一种样式设计语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 本教程操作环境:windows7系统、CSS3版、Dell G3电脑。 CSS是什么语言? CSS是一种…

    2025年12月24日
    000
  • css怎么设置最小宽度

    css中,可以使用min-width属性来设置最小宽度,只需给元素添加“min-width:length|%;”样式即可。值“length”表示带长度单位的数值,可定义固定大小的最小宽度;“%”可定义基于包含元素的块级对象的百分比最小宽度。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css的span是什么意思

    在css中,span的意思是范围,用于对文档中的行内元素进行组合,语法“文本”。span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 在行内定义一个区域,也就是一行内可以被划分成好几…

    2025年12月24日
    000
  • css如何实现水平居中

    css实现水平居中的方法:1、使用margin和text-align属性;2、通过“display:flex”;3、通过“display:table-cell”和margin-left;4、通过绝对定位;5、通过transform属性。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日 好文分享
    000
  • css如何设置checkbox大小

    在css中,可以使用width属性和height属性设置checkbox的大小,只需要给checkbox元素设置“height:数值”和“width:数值”样式即可。width属性定义复选框的宽度,height属性定义复选框的高度。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css如何设置链接颜色

    在css中,可以使用“:link”伪类选择器来设置链接颜色,只需要给a元素设置“a:link{颜色:颜色值;}”即可。“:link”选择器用于选取未访问的链接,然后给该链接添加所需样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 :link…

    2025年12月24日
    000
  • css中before的用法是什么

    在css中,before的用法是在元素内容之前插入新内容,只需要给元素设置“元素:before{属性:属性值;}”即可。“:before”选择器必须使用content属性来指定要插入的内容。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 定义和…

    2025年12月24日
    000
  • css怎么自定义字体

    css自定义字体的方法:1、下载字体文件;2、使用“@font-face”规则和font-family、src属性来引入字体文件即可,语法“@font-face{font-family: ‘字体名称’;src:url(‘文件地址’);}”。 本教程操作…

    2025年12月24日
    000
  • css如何让a标签不可点击

    css让a标签不可点击的方法:首先使用“color:gray”语句设置颜色为灰色;然后使用“pointer-events:none”语句停用事件响应;最后使用“cursor:default”语句设置鼠标样式为默认样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年12月24日
    000
  • css如何设置字体平滑

    在css中,可以使用“-webkit-font-smoothing”属性来设置字体平滑,语法“-webkit-font-smoothing:subpixel-antialiased”;该属性可以使页面上的字体抗锯齿,看起来会更清晰舒服。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信