iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >CSS中如何实现引入
  • 686
分享到

CSS中如何实现引入

2023-06-08 04:06:06 686人浏览 薄情痞子
摘要

这篇文章主要介绍CSS中如何实现引入,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一:CSS的4种引入方式CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式行内样式最直接最简单的一种,直接对html标签

这篇文章主要介绍CSS中如何实现引入,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

第一:CSS的4种引入方式

CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式

行内样式

最直接最简单的一种,直接对html标签使用style="",例如:

<p style="color:#F00; "></p>

缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。

内嵌样式

内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:

<style type="text/css">body,div,a,img,p{margin:0; padding:0;}</style>

优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。

链接样式

链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link&hellip;/>就可以了,如下:

<link type="text/css" rel="stylesheet" href="style.css" />

优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便

 4.导入样式(不建议使用)

导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。

@import在html中使用,如下:

<style type="text/css">@import url(style.css);</style>

@import在CSS中使用,如下:

@import url(style.css);

第二:四种CSS引入方式的优先级

就近原则

理论上:行内>内嵌>链接>导入

实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高

心得:

如果同一个css定义分布在两个css文件中,那么样式取后引入的css文件。

最好将第三方组件的css放在html靠前位置,自定义的css放到html后面位置。

以上是“CSS中如何实现引入”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!

--结束END--

本文标题: CSS中如何实现引入

本文链接: https://www.lsjlt.com/news/251697.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS中如何实现引入
    这篇文章主要介绍CSS中如何实现引入,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一:CSS的4种引入方式CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式行内样式最直接最简单的一种,直接对HTML标签...
    99+
    2023-06-08
  • 如何实现外部引入css
    这篇文章将为大家详细讲解有关如何实现外部引入css,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。外部引入css的方法:1、使用link来调用外部的css文件,标签定义文档与外部资源的关系;2、使用@imp...
    99+
    2023-06-15
  • html中如何引入css
    html中如何引入css,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 代码如下:<!DOC...
    99+
    2022-10-19
  • aspx中如何引入css
    小编给大家分享一下aspx中如何引入css,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   1、可以直接写在需要样式控制的控...
    99+
    2022-10-19
  • 如何引入css
    这篇文章主要介绍了如何引入css,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.内联式引用:直接用在标签上,但维护成本高style='font-size:16px;...
    99+
    2023-06-08
  • 如何在jsp中引入css
    本篇文章为大家展示了如何在jsp中引入css,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加...
    99+
    2023-06-14
  • HTML如何引入CSS
    这篇文章主要为大家展示了“HTML如何引入CSS”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML如何引入CSS”这篇文章吧。一、嵌入式第一种方法嵌入式指的是使用 HTML 的 <st...
    99+
    2023-06-27
  • css文件如何引入
    小编给大家分享一下css文件如何引入,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!引入css文件的方法:1、行内式方法引入,在标记的style属性中设定CSS样式;2、嵌入式方法引入,将C...
    99+
    2022-10-19
  • css中如何引入外部字体
    这篇文章主要为大家展示了“css中如何引入外部字体”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中如何引入外部字体”这篇文章吧。   &nbs...
    99+
    2022-10-19
  • html如何引入CSS样式
    这篇文章主要为大家展示了“html如何引入CSS样式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html如何引入CSS样式”这篇文章吧。引入CSS样式CSS使...
    99+
    2022-10-19
  • asp如何引入css样式
    本篇内容介绍了“asp如何引入css样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • 如何引入CSS的方式
    小编给大家分享一下如何引入CSS的方式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!(1)内嵌式通过<style>&...
    99+
    2022-10-19
  • 如何引入css样式表
    如何引入css样式表?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。方法:1、在元素标签内的style属性中添加CSS样式;2、在文档head部分的style标签对中添加CS...
    99+
    2023-06-15
  • XHTML中如何引入五大CSS样式
    这篇文章给大家介绍XHTML中如何引入五大CSS样式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。你知道XHTML引入CSS样式有哪些方式吗?这里和大家分享一下,XHTML主要引入了五...
    99+
    2022-10-19
  • 如何在head区域引入css
    本篇内容介绍了“如何在head区域引入css”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • js和css文件如何引入
    小编给大家分享一下js和css文件如何引入,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你...
    99+
    2022-10-19
  • css如何引入本地图片
    这篇“css如何引入本地图片”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“css如何引入本地图片”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具...
    99+
    2023-06-06
  • 如何在HTML5中引入css和选择器
    今天就跟大家聊聊有关如何在HTML5中引入css和选择器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用...
    99+
    2023-06-05
  • css中如何进行引入外部文件
    这篇文章主要介绍了css中如何进行引入外部文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的基本语法是什么css的基本语法是:1、css规则由选择器和一条或多条声明两...
    99+
    2023-06-14
  • js中引入css的方法
    这篇文章主要介绍了js中引入css的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。js中引入css的方法:1、使用“document.write”方式输出引入css的li...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作