在html中加入外部css样式,如何引入CSS样式表?

在html中加入外部css样式,如何引入CSS样式表?CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。1.行内式行内式也称内联样式,是通过标记的Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>上述语法中,style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。属性和属性值的书写…

大家好,又见面了,我是你们的朋友全栈君。

CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。

e701c7178d69d11a6431318fc9b94db8.png

1.行内式

行内式也称内联样式,是通过标记的 Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>

上述语法中,style是标记的属性,实际上任何HTML标记都拥有 style属性,用来设置行内式。属性和属性值的书写规范与Cs样式规则一样,行内式只对其所在的标记及嵌套在其中的子标记起作用。

通常CSS的书写位置是在

头部标记中,行内式却是写在根标记中,例如下面的示例代码,即为行内式CS样式的写法。

使用CSS行内式修饰一级标题的字体大小和颜色

在上述代码中,使用

标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。

071567679c2a2d14c184ebe90f898fcc.png

需要注意的是,行内式是通过标记的属性来控制样式的,这样并没有做到结构与样式分离,所以一般很少使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的

头部标记中,并且用< style>标记定义,其基本语法格式如下:

选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

/style>

上述语法中,

3.外链式

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<1ink href=”css文件的路径” type=”text/css” re1=”stylesheet”  />

上述语法中, 标记需要放在

头部标记中,并且必须指定标记的个属性,具体介绍如下。

●href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

●type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CS样式表。

●rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

外链式是使用频率最高是最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。

1577370495235_%E5%AD%A6IT%E5%B0%B1%E5%88%B0%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98.gif

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159255.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 陈述python中运算符的优先级_numpy逻辑运算符

    陈述python中运算符的优先级_numpy逻辑运算符python逻辑运算符1.成员andornot优先级:()>not>and>or2.and逻辑运算符and,aandb,如果a和b都为True,则返回True,如果其中一个为False,返回False,简言之:一假则假,全真则真3.or逻辑运算符or,aorb,如果a和b有一个为True,则返回True,如果全为False,返回False,简言之:一真则真…

    2022年10月23日
  • 动态规划-背包问题

    动态规划-背包问题背包问题是一种组合优化的NP完全问题。有N个物品和容量为W的背包,每个物品都有自己的体积w和价值v,求拿哪些物品可以使得背包所装下的物品的总价值最大。如果限定每种物品只能选择0个或1个,则问题称为0-1背包问题;如果不限定wu’pi…

  • java 自定义的类加载器_Java如何自定义类加载器[通俗易懂]

    java 自定义的类加载器_Java如何自定义类加载器[通俗易懂]我们可以编写自己的用于特殊目的的类加载器,这使得我们可以在向虚拟机传递字节码之前执行定制的检查。如何自定义类加载器如果想要编写自己的类加载器,只需要两步:继承ClassLoader类覆盖findClass(StringclassName)方法ClassLoader超类的loadClass方法用于将类的加载操作委托给其父类加载器去进行,只有当该类尚未加载并且父类加载器也无法加载该类时,才调用fin…

  • Linux系统负载LoadAverage详解

    Linux系统负载LoadAverage详解运维工程师在日常运维中经常使用w、top、uptime等命令来查看系统当前运行的负载情况。那么作为运维工程师是如何通过以上命令来判断系统当前负载是否已经达到极限了呢?为此笔者总结了一下如何通过loadaverage返回的数据来判断系统运行情况。什么是Load?什么是LoadAverage?Load用最通俗的语言说就是当前cpu需要干的工作量的多少。简单的说是进程队列的长度。

  • AOP:使用命令模式实现AOP

    AOP:使用命令模式实现AOP

  • spring整合log4j_spring整合log4j

    spring整合log4j_spring整合log4j常用日志框架log4j、log4j2(log4j的升级版,最常用的)、logback(spring boot默认)、Jboss-logging…等slf4 是日志接口规范,代码对接slf4,实现和具体日志框架解耦,无需修改编码即可切换日志框架。修改pom依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-st

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号