html:(24):内联式css和嵌入式css

内联式css样式,直接写在现有的HTML标签中

CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里,下面这种写法是错误的:

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:

<p style="color:red;font-size:12px">这里文字是红色。</p>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{color:red;
}
</style>
</head>
<body><p>歌谣<span style="color:blue">超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

运行结果

嵌入式css样式,写在当前的文件中

现在有一任务,把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签加入sytle="font-size:18px"语句),本小节讲解一种新的方法嵌入式css样式来实现这个任务。

嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:

<style type="text/css">
span{
color:red;
}
</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{color:blue;
}
</style>
</head>
<body><p>歌谣,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

运行结果

外部式css样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

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

注意:

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><p>歌谣,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

style.css

span{color:red;font-size:20px;
}

运行结果

三种方法的优先级

有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况

1、使用内联式CSS设置“超酷的互联网”文字为粉色

2、然后使用嵌入式CSS来设置文字为红色

3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

 

 

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

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

相关文章

[剑指offer][JAVA]面试题第[10-1]题[斐波那契数列][动态规划][记忆化递归]

【问题描述】[中等] 写一个函数&#xff0c;输入 n &#xff0c;求斐波那契&#xff08;Fibonacci&#xff09;数列的第 n 项。斐波那契数列的定义如下&#xff1a;F(0) 0, F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 斐波那契数列由 0 和 1 开始&#xff0c;之后的…

js生成的cookie在yii2中获取不到的解决办法

在js中创建的cookie&#xff0c;默认用yii2中自带的方法Yii::$app->request->cookies->get(abc)获取不到&#xff0c;而用$_COOKIE[abc]又是能获取到&#xff0c;则是以下原因照成的。 查看E:\myYiiDemo\vendor\yiisoft\yii2\web\Request.php中的1218行不难看出&#…

html:(25):选择器定义和标签选择器

什么是选择器&#xff1f; 每一条css样式声明&#xff08;定义&#xff09;由两部分组成&#xff0c;形式如下&#xff1a; 选择器{样式; } 在{}之前的部分就是“选择器”&#xff0c;“选择器”指明了{}中的“样式”的作用对象&#xff0c;也就是“样式”作用于网页中的哪些…

[剑指offer][JAVA]面试题第[64]题[求1+2+…+n][逻辑运算符]

【问题描述】[中等] 求 12...n &#xff0c;要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句&#xff08;A?B:C&#xff09;。输入: n 3 输出: 6【解答思路】 1. 递归&#xff08;不合符题意&#xff09; 时间复杂度&#xff1a;O(N^2) 空间…

Celery工具

什么是Celery Celery的功能 Celery是基于python实现的第三方组件&#xff0c;可以实现定时任务、周期任务等。 Celery的组成 Celery的角色 - 任务,创建或发布任务。 - 使用redis/rabbitMQ进行任务记录(broker)和任务返回结果&#xff08;backend)的缓存。 - worker&#xff0c;…

POJ-3061 尺取

题意就是 在P张书页中 其中有重复元素 选取最小连续区间内包括了这期间的所有不同的数 求符合条件的最小区间长度 本题可以用尺取法所谓尺取 就是选取两个下标 s e 分别指向当前扫面区间的首尾开始赋值都是1 然后分析数串 把e向后移 找到一种符合条件的区间后再把s向后移不断判…

html:(26):类选择器和id选择器

类选择器 类选择器在css样式编码中是最常用到的&#xff0c;如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。 语法&#xff1a; .类选器名称{css样式代码;} 注意&#xff1a; 1、英文圆点开头 2、其中类选器名称可以任意起名&#xff08;但不…

[剑指offer][JAVA]面试题第[10-2]题[青蛙跳台阶问题][动态规划][递归]

【问题描述】[中等] 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。【解答思路…

SpringCloud(三)之Feign实现负载均衡的使用

一 点睛 Feign是Netflix开发的声明式、模板化的HTTP客户端&#xff0c; Feign可以帮助我们更快捷、优雅地调用HTTP API。 在Spring Cloud中&#xff0c;使用Feign非常简单——创建一个接口&#xff0c;并在接口上添加一些注解&#xff0c;代码就完成了。Feign支持多种注解&…

Bound Found POJ - 2566 (尺取+前缀和)

题意 就是给一串序列 在给一个t 求一段区间的加和绝对值与t最小的值与区间左右端点是多少 思路 这道题一开始不知道如何去做 用尺取法求区间但是因为区间中存在负数没有单调性 没有特殊的特征 若对区间求一下前缀和 就使整个区间有了单调性 由于绝对值情况下 没有前后 所以…

[剑指offer][JAVA]面试题第[11]题[旋转数组的最小数字][二分法][分治]

【问题描述】[简单] 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。输入一个递增排序的数组的一个旋转&#xff0c;输出旋转数组的最小元素。例如&#xff0c;数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转&#xff0c;该数组的最小值为1。 示…

html:(27):类和ID选择器的区别和子选择器

类和ID选择器的区别 学习了类选择器和ID选择器&#xff0c;我们会发现他们之间有很多的相似处&#xff0c;是不是两者可以通用呢&#xff1f;我们不要着急先来总结一下他们的相同点和不同点&#xff1a; 相同点&#xff1a;可以应用于任何元素不同点&#xff1a; 1、ID选择器…

对象的释放Dispose和Close对比

C#内存释放的几个方法对比&#xff1a; 而Close与Dispose这两种方法的区别在于&#xff0c;调用完了对象的Close方法后&#xff0c;此对象有可能被重新进行使用&#xff1b;而Dispose方法来说&#xff0c;此对象所占有的资源需要被标记为无用了&#xff0c;也就是此对象被销毁了…

html:(28):后代选择器和通用选择器

包含(后代)选择器 包含选择器&#xff0c;即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码&#xff1a; .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。 请注意这个选择器与子选择器的区别&#xff0c;子…

ZOJ -3203 三分+数学

题意&#xff1a;给出光的高度&#xff0c;人的高度&#xff0c;还有屋子的宽度本题就是要求人站在什么地方影长最长 输出最长的影长数学题可以把这道题的分段公式推出来然后分类讨论x在不同的范围获得不同的大小或者把影长公式推出来发现是凸函数 可以求极值点 然后三分求 三…

Java异常面试题

Java异常架构与异常关键字Java异常简介Java异常架构1. Throwable2. Error&#xff08;错误&#xff09;3. Exception&#xff08;异常&#xff09;运行时异常编译时异常4. 受检异常与非受检异常受检异常非受检异常Java异常关键字Java异常处理声明异常抛出异常捕获异常如何选择异…

html:(29):伪选择符和分组选择符

伪类选择符 更有趣的是伪类选择符&#xff0c;为什么叫做伪类选择符&#xff0c;它允许给html不存在的标签&#xff08;标签的某种状态&#xff09;设置样式&#xff0c;比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色&#xff1a; a:hover{color:red;} 上面…

[Leedcode][JAVA][第837题][新21点][动态规划][数学]

【问题描述】[中等] 爱丽丝参与一个大致基于纸牌游戏 “21点” 规则的游戏&#xff0c;描述如下&#xff1a;爱丽丝以 0 分开始&#xff0c;并在她的得分少于 K 分时抽取数字。 抽取时&#xff0c;她从 [1, W] 的范围中随机获得一个整数作为分数进行累计&#xff0c;其中 W 是…

Java学习笔记1(零碎笔记)——基础

目录命名流程控制方法OOP异常其它命名 变量、方法&#xff1a;驼峰命名 类&#xff1a;首字母大写&#xff0b;驼峰命名 流程控制 增强型for循环&#xff1a; for(数据类型 名称 : 数组){&#xff08;操作&#xff09; }&#xff08;意思是遍历数组&#xff0c;从数组的0号…

扩展欧几里得算法 POJ 1061

根据此题 整理下 扩展欧几里得 扩展欧几里得是用来判断并求 ax by c 是否有解及其解的数学算法 首先列出定理 1、ax by gcd(a,b) 2、gcd(a,b) gcd(b, a%b); 本题 题意是 判断两个同向的青蛙 在初始位置(x,y)&#xff0c;速度不同(m,n)的情况下能否在一个球形路线(周长为…