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,一经查实,立即删除!

相关文章

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

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

mockito入门_Mockito入门

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

windows7安dns服务器_在Windows 7 上安装DNS服务器bind9方法详解

本文主要介绍在WIN7上利用ntbind部署DNS服务器的方法。ntbind是Bind的Windows版本,1.下载BIND9.11下载地址:http://ftp.isc.org/isc/bind9/9.11.0rc3/。我的系统是window 7 64位需要下载BIND9.11.0rc3.x64.zip,建议下载9.11以上的版本&#x…

腾讯大举退出美团!

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

csr8670 修改key_CSR8670 DFU user guide

DFU使用1)产生DFU keys:dfukeygenerate.exe -o keys或dfukeygenerate.exe -o keys -r random.txt生成keys.private.key和keys.public.key两个文件。2)loader和firmware签名:a)dfukeyinsert.exe -v -o loader_signed -lC:\ADK_CSR867x.WIN4.3.1.5\firmwar…

matchers依赖_Hamcrest Matchers教程

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

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

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

mediumtext和string转换_数据库用varchar和text的差别

数据库用varchar和text的差别发布时间:2018-05-09 20:41,浏览次数:1268, 标签:varchartext最近有几个同学问我varchar和text有啥别吗,这个问题,以前说真的也没太多的整理,以前遇到text在设计中就是尽可能的…

eai app_EAI的Spring集成教程

eai app课程大纲 Spring Integration是用于企业应用程序集成的开源框架。 这是一个轻量级的框架,建立在核心Spring框架之上。 它旨在支持开发事件驱动的体系结构和以消息为中心的体系结构典型的集成解决方案。 Spring Integration扩展了Spring编程模型,…

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

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

java代码防止sql注入_动态Java代码注入

java代码防止sql注入在本文中,我们将研究如何将Java代码动态加载到正在运行的jvm中。 该代码可能是全新的,或者我们可能想更改程序中某些现有代码的功能。 (在开始之前,您可能想知道为什么到底有人会这样做。显而易见的示例是规则…

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

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

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

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

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

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

apache lucene_Apache Lucene基础教程

apache lucene课程大纲 Apache Lucene是一个免费/开源信息检索软件库,它提供基于Java的索引和搜索技术,以及拼写检查,命中突出显示和高级分析/令牌化功能。 Lucene是完全用Java编写的高性能,功能齐全的文本搜索引擎库。 它是一项…

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

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

matchers依赖_定制Hamcrest Matchers

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

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

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

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

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

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

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