cshtml中引用css_css基础必备-使用样式,前端小白一看就会

在HTML文档中包含CSS

CSS可以作为单独的文档引用,也可以嵌入到HTML文档中。在HTML文档中包含CSS有三种方法:

  • 内联样式 - 使用元素起始标记的style属性指定样式
  • 嵌入样式 - 在文档的head部分使用style标记指定样式
  • 外部样式 - 在文档的head部分使用link标记引用外部CSS文件

注意:内联样式的优先级最高,而外部样式表的优先级最低。这意味着,如果同时使用嵌入样式表和外部样式表为元素指定样式,则嵌入样式的规则将覆盖外部样式表。

内联样式

内联样式通过将CSS规则直接放入开始标记的style属性来将唯一的样式规则应用于该元素。

style属性的值为一系列CSS属性和值对。每个“property:value”对都用分号(;)分隔,与嵌入或外部样式表中的写法一样,但必须全部在一行中,即分号后没有换行符,如下所示:

内联样式的示例

665cf7a6cfb45c00a2fa9756569d3a08.png

通常认为使用内联样式是一种不好的做法。因为样式规则直接嵌入到HTML标记中,这会导致文档格式与文档内容混合;这使得代码很难维护,违背了发明CSS的初衷。

注意:已经无法在内联样式中设置伪元素和伪类规则。因此,避免在代码中使用样式属性。使用外部样式表向HTML文档添加样式是首选方法。

嵌入样式/内部样式

嵌入样式表或内部样式表只影响定义它们的HTML文档。

嵌入样式是使用style标记在HTML文档的head部分定义的。可以在HTML文档中定义任意数量的style元素,但它们必须出现在

和标记之间,如以下所示:
004ce1790ee5d8e4dddedb7702e55a77.png

提示:style和link标记的type属性(即type=“text/css”)定义使用CSS样式语言,但这个属性纯粹是信息性的,你可以忽略它,因为CSS是HTML5中的标准和默认样式表语言。

外部样式

当样式规则要应用于网站的多个页面时,采用外部样式表是理想的。

外部样式表将所有样式规则保存在一个单独的文档中,您可以从站点上的任何HTML文件引用这些文档。外部样式表是最灵活的,因为使用外部样式表,您可以通过只更改一个文件来更改整个网站的外观。

有链接和导入两种方式引用外部样式表。

链接外部样式表

在链接之前,我们需要先创建一个样式表,如下所示:

10e0891a64c72769c464b84fd0ba92f8.png

link标记将外部样式表链接到HTML文档,link标记要位于

部分中,如下例所示:
28a1b5f545129e9f94863b507686dee7.png

导入外部样式表

@import语句是加载外部样式表的另一种方式,在style标记中使用,它指示浏览器加载外部样式表并使用其样式规则。

有两种使用方法,最简单的是在文档head中的嵌入样式引用,注意,其他CSS规则仍然包含在

在嵌入样式中使用@import引用外部样式表:

loading.gif

在外部样式表中使用@import引入别的样式表文件:

loading.gif

注意:所有@import规则必须出现在样式表的开头。样式表本身中定义的任何样式规则都会覆盖与所导入的样式表有冲突的规则。但是,由于性能问题,不建议在另一个样式表中导入其它样式表。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/336997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式软件分层框架设计,举个例子

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删前言为了能够使得产品得到更好的开发速度与以后更好的迭代和移植,框架分层是很有必要的。但如对于中小型项目严格遵循这些原则&#…

腾讯大举退出美团!

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删11月16日,腾讯发布第三季度财报,同时表示将“分红式减持”美团。腾讯分派90.9%美团持股 腾讯系中概股美股盘前多数下跌腾…

matchers依赖_Hamcrest Matchers教程

matchers依赖本文是我们名为“ 用Mockito测试 ”的学院课程的一部分。 在本课程中,您将深入了解Mockito的魔力。 您将了解有关“模拟”,“间谍”和“部分模拟”的信息,以及它们相应的存根行为。 您还将看到使用测试双打和对象匹配器进行验证…

谷歌开源替代 C++ 的编程语言:Carbon

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删谷歌工程师 Chandler Carruth 近日在多伦多举办的 CppNorth 大会上宣布①,正式开源谷歌内部打造的编程语言:Carbon&#…

C语言灵魂拷问:++i为何比i++执行效率高!有何区别?

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删背景相信很多人遇到过这样的问题:printf("%d,%d",i,i);也纠结过这个问题,到底答案是什么。确没有一个参考的资…

指标实现层级_企业如何构建核心指标系统,实现业务运营效率提升90%?

本文为帆软数据生产力大赛获奖案例,未经授权禁止转载。01企业简介西安怡康医药连锁有限责任公司成立于2001年,总部设在西安市大庆路副24号,是一家由零售连锁药店发展起来的大型医药连锁企业,除药品零售外,同时兼营药品批发与器械批…

学生时代,你有遇到过像我这样理解C语言的吗?

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删今天我讲一下我个人对C语言的认识以及自己的理解,若有错误,还望指出,不甚感激。首先是C语言整体的脉络&#…

scrapyd部署_第八章 第一节 scrapyd和scrapy-client

如果觉得文章对您产生帮助的话, 欢迎关注Python开发之路(微信公众号: python-developer), 及时获取更多教程假设有我们做了一个项目是抓取很多网站(每个网站对应一个爬虫), 需要分别部署到不同的服务器上(单台扛不住), scrapy官方也提供了一种部署工具scrapyd。这个工具是用来将…

C++ 首超 Java,与 Python、C语言共角逐年度最佳编程语言奖!

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删最新的 TIOBE 12 月编程语言已发布,先来预测一波今年的年度编程语言大奖究竟会花落谁家吧?C 首超 Java和上个月相比&…

乔安监控云存储能存多长时间_干货 | 监控磁盘阵列知识介绍,不了解还不来看看?...

一、磁盘阵列的概念要定义磁盘阵列的概念,是一个简单的工作,因为这个概念已经形成了共识——磁盘阵列(DiskArray)是由一个硬盘控制器来控制多个硬盘的相互连接,使多个硬盘的读写同步,减少错误,增加效率和可靠度的技术。…

我要是在学习 C 语言之前知道这些就好了!

点击蓝字关注我们因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源于网络,侵删对于我来说,学习 C 语言好难啊。这门语言本身的基础知识并不是很难,但是“用 C 语言编程”需要用到各种知识,…

opencv yuv保存本地_OpenCV-dlib-python3实现人脸戴墨镜和含Y的抖音效果

1 说明:1.1 吸烟有害健康!!纯属娱乐和学习python的相关知识。1.2 虽然是娱乐,但是opencv、dlib和python在人工智能、人脸识别、自动化等有很大作用,目前已经或者未来会有更多的应用,作为一名普通人&#xf…

为什么永远不会有语言取代 C/C++?

关注星标,每天学习C语言新技能因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源:网络数以百计的 C/C 替代品将会出现,但 C/C 将永远与我们同在!每个 CPU 都带有一种称为 ISA(指…

qt 表格中插入一行_在EXCEL表格中,快速插入多行、多列的技巧

在使用Excel过程中,我们会遇到需要插入相同格式的多行或多列,如果一行行或一列列的插入,对于插入的数量较少的情况还是适用的。可是如果需要插入上百的行或列,使用此方法就比较费时费力啦。分享几个小技巧实现快速插入多行或多列.…

amber 口译_口译员设计模式示例

amber 口译本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因,并了解何时以及如何应用模式中的每一个。 在这里查看 &#xff…

别再自己瞎写工具类了,SpringBoot内置工具类应有尽有,建议收藏!!

关注星标,每天学习C语言新技能因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源:网络断言断言是一个逻辑判断,用于检查不应该发生的情况Assert 关键字在 JDK1.4 中引入,可通过 JVM 参数-en…

ad转换器工作原理_AD转换中参考电压的作用

AD转换AD转换就是模数转换。顾名思义,就是把模拟信号转换成数字信号。主要包括积分型、逐次逼近型、并行比较型/串并行型、Σ-Δ调制型、电容阵列逐次比较型及压频变换型。A/D转换器是用来通过一定的电路将模拟量转变为数字量。模拟量可以是电压、电流等电信号&…

面试大全 | C语言高级部分总结

关注星标,每天学习C语言新技能因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享来源:网络一、内存大话题1.0、内存就是程序的立足之地,体现内存重要性。1.1、内存理解:内存物理看是有很多个Ban…

ideal pom文件安装到maven库中_java学习之web基础(14)Maven基础学习

maven介绍Maven 是一个项目管理工具,它包含了一个项目对象模型 (POM: Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Dependency Management System),和用来运…

戴尔集群监控与管理系统_监控与管理

戴尔集群监控与管理系统本文是我们名为“ EAI的Spring集成 ”的学院课程的一部分。 在本课程中,向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来,您将深入研究Spring Integration的基础知识,例如通道&#xff0…