在HTML文档中包含CSS

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

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

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

内联样式

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

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

内联样式的示例

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

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

嵌入样式/内部样式

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

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

和标记之间,如以下所示:

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

外部样式

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

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

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

链接外部样式表

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

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

部分中,如下例所示:

导入外部样式表

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

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

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

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

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

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

  1. cshtml中引用css_ASP.NET CoreMVC 中的控制器

    Controller in ASP.NET Core MVC 在本节中,我们将讨论 Controller 是什么以及它在 ASP.NET Core MVC 中的作用. Fiddler 需要大家提前装一 ...

  2. 超全计算机的基础知识,网工小白必看(下)

    四.网络层次划分 1.为了使不同计算机厂家生产的计算机能够相互通信,以便在更大的范围内建立计算机网络,国际标准化组织(ISO)在1978年提出了"开放系统互联参考模型",即著名的O ...

  3. 0基础快速入门Python,小白必看

    1. python的基本语法 1.1 变量 1.12 如何定义变量 1.13 输出一个变量 1.14 变量的数据类型 1.15 变量的运算 1.16 变量的输入 1.17 变量的类型转换 1.18 变 ...

  4. JAVA基础之while 循环(小白必看!!!)

    介绍: while 循环是 Java 语言 中比较常用的循环结构之一,先判断循环条件,再执行循环操作语句 . while 是 Java 语言 中的关键字.  循环 条件通常是 具有 boolean 类 ...

  5. 计算机基础cpu知识,CPU基础知识: DIY装机小白必看的CPU知识扫盲

    CPU也就是中央处理器,全拼为Central Processing Unit,在计算机中可以比喻成人的大脑.它是一块超大规模的集成电路,是一台计算机的运算核心和控制核心.它的功能主要是解释计算机指令以 ...

  6. css实例 css中id/class 详解样式表(外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解)[第一天]

    文章目录 css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...

  7. 在html中引用css样式表,怎么引用css样式?

    怎么引用css样式?下面本篇文章给大家介绍一下在HTML中引用css样式的几种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用行内样式表 语法:在标签内部写入一个sty ...

  8. 如何在Web用户控件中引用样式表中的样式

    如何在Web用户控件中引用样式表中的样式 <%@ Control Language="C#" AutoEventWireup="true" CodeFil ...

  9. Java 基础 | Java 中引用与指针的关系

    前言:关键字包含 #指针,java 引用,空指针,地址访问,引用类型,在 Java 编程语言中,程序员不需要担心程序的内存使用.Java 语言的自动垃圾收集器会不时地清理那些变成垃圾的对象. 如果垃圾 ...

最新文章

  1. 复解析蕴含不可延拓性
  2. 运维自动化之基于python语言的文字界面的运维管理软件
  3. 查找前端依赖 jquery css js 时间控件 不要用远程依赖 会变化的 card
  4. vue中检测对象和数组值变化的问题
  5. Android的三种网络联接方式(URL / HttpURLConnection | HttpClient | InetAddress )
  6. synchronized原理_面试必备—Synchronized 关键字使用、底层原理
  7. Kubernetes API的版本控制,分组,对象,访问控制
  8. html 字体图标大小,CSS ICONFONT 基线和大小问题
  9. DotNetBar TreeGx用法
  10. 合并两个有序链表js
  11. Swarm(bzz)节点服务器配置要求
  12. [算法]代码运行时间增长数量级对比 线性级别N vs 线性对数级别 NlgN
  13. 黑客用“勒索病毒”展示肌肉,但你了解什么是“白帽黑客”吗?
  14. INDEX REBUILD和INDEX REORGANIZE和UPDATE STATISTICS是否涉及Sch-M的案例分析
  15. expected scalar type Double but found Float
  16. forward 和 redirect 有什么区别 区别是什么?
  17. 计算机网络密码凭据,网络访问: 不允许存储网络身份验证的密码和凭据
  18. c编程语言外文翻译及原文,面向对象和C语言-外文文献译文-Object-Orientation and C语言编程外文文献及中文翻译...
  19. 全球顶级企业和工程师荣获首届数字工程奖
  20. linux CentOS

热门文章

  1. tms tck_记录合规性–关于TCK,规格和测试
  2. spring 事务 会话_测试Spring的“会话”范围
  3. byteman_使用Byteman和JUnit进行故障注入
  4. neo4j cypher_优化Neo4j Cypher查询
  5. spring jmx_JMX和Spring –第2部分
  6. hornetq_Spring 3 HornetQ 2.1集成教程
  7. 使用@Rule在JUnit中测试文件和目录
  8. 如何处理Java注释
  9. 学习Netflix管理员–第2部分
  10. 在Twitter上使用Apache Mesos和Apache Aurora进行资源调度和任务启动