前端学习（三）——CSS的三种写法与优先级

最新推荐文章于 2024-01-02 10:00:00 发布
最新推荐文章于 2024-01-02 10:00:00 发布
阅读量1k 收藏 1
点赞数
分类专栏： 初学者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjq980303/article/details/52479758
版权

    1.style属性中写CSS

  样例：

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>

    2.在<style>标签中写CSS

  样例：

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		p{
			color: green;
			font-size: 50px;
		}
	</style>
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>

    3.link标签外联样式表

  创建文件如下

test.html

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>
test.css 
p{
	color: blue;
	font-size: 10px;
}

。




     三种写法的优先级优先级

   第一种>第二种>第三种

样例

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="./test.css">
	<style type="text/css">
		p{
			color: blue;
			font-size: 50px;
		}
	</style>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>
test.css如上

结果



stcode
关注
专栏目录
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
前端CSS3--三大样式
weixin_45981384的博客
08-24 1290
一、内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中，css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：如下面代码： <p style="color:red;font-size:12px">这里文字是红色。</p> 二、嵌入式css样式 嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。代码如下：
php中怎么添加css样式_html怎么添加css样式？
weixin_32672201的博客
03-08 1757
html添加css样式有三种方法，分别为行内式(使用style属性，在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签，将外部css文件链接到HTML中)。一、行内式使用style属性在特定的HTML标记内设置CSS样式。建议不要使用内联CSS，因为每个HTML标记都需要单独设置样式，如果您只使用内联CSS，管理网站可能会变得十...
《前端》样式冲突，怎么解决--2020年3月30日
BelleDiao的博客
03-30 1449
有时候我引用了bootstrap样式，自己也定义了 样式。但是我看后台应用的是bootstrap包装好的样式。 （很多时候，其实是我愚蠢的总把id选择器，用了“.”，其实应该用“#”） 还有的时候，element.style的样式也阻挡了我自定义的样式。 首先，了解优先级问题。 通常可以将css的优先级由高到低分为六组： 1、第一优先级：无条件优先的属性只需要在属性后面使用！impor...
【前端基础系列】CSS篇-选择器的优先级
Web面试那些事儿的博客
01-02 1402
在前端面试中，经常会遇到CSS选择器的问题三连：说一下CSS的选择器有哪些优先级是怎样的权重计算方式我们在上一篇 【前端基础系列】CSS篇-常用选择器介绍[1] 中已经对问题1进行了详细的解答，今天就来给大家介绍选择器的优先级和权重计算方式。
前端----CSS优先级规则
nO0b
09-23 2865
以某标签颜色为例,菜鸟的我天真的以为只有后边的样式表覆盖前面的样式表，后来才知道CSS的优先级还是比较复杂的，查阅了一些资料感慨世界真复杂！ 先说结论： 通用选择器&lt;元素（类型）选择器&lt;类选择器&lt;属性选择器&lt;伪类&lt;ID 选择器&lt;内联样式 如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。 一般情况下，优先级为： 外部样式&lt...
前端三件套css学习笔记分享
最新发布
02-24
前端三件套css学习笔记分享
前端学习 html,css,js.zip
01-05
前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,...
前端学习html+css+js.zip
01-05
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...
HTML 中使用 CSS 样式的三种方式
lefex的博客
07-18 769
前面的文章我们学习了前端页面主流的布局方式，用到了 CSS 样式，但没详细说明如何使用。这一节我们具体学习在 HTML 中如何使用 CSS。CSS 在 HTML 中的作用就是定义样式和布...
CSS设置style属性的3种方法
韬光养晦
09-14 1万+
CSS：层叠样式表 可以将css样式编写到元素的style属性当中： 1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不推荐使用。 eg： <p style="color:blue;font-size: 50px;">明月几时有，把酒问青天！</p> 2.也可以将CSS样式编写到head中的style...
HTML中css的学习（一）——css三种写法
有问题请发邮箱dengyifanlittle@163.com进行讨论
08-28 1197
css全称是“层叠式表”（cascading style sheets），用于定义HTML内容在浏览器内的显示样式。 css分为：内联式、嵌入式和外部式 内联式：把css代码直接写在现有的html标签中。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&g...
web前端学习笔记--css书写位置
weixin_46493903的博客
08-04 579
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化 css规则：由两个主要的部分组成：选择器、以及一条或多条的声明 p{width：300px;font-size:14px;} 其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成 书写位置： 根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式 内联式(行内式) 书写位置:在
关于css的优先级
weixin_54144126的博客
05-31 5773
关于css优先级以及权重的一些问题
vue中style的三元表达写法
weixin_44090753的博客
04-22 1220
<a :style="{'margin-left':'10px','color':record.status==0?'#76CBC2':'gray','cursor':record.status==0?'':'default'}">发布</a>
id 的选择器为什么要这么写 li#first？
weixin_33819479的博客
05-28 353
一. 一个疑问？ 看到过一篇关于 CSS 的文章，其中说到：对于类似 li#first 这样的选择器，由于使用 id 就已经可以确定元素了，没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。 可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？...
HTML引入CSS样式三种方法及优先级
热门推荐
王文松的博客
12-05 4万+
方法     css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意，样式表放在不同的地方，产生作用的范围不同（以下会说明）。 内联定义    内联定义，即在对象的标记内使用对象的style属性定义适用的样式表属性，格式定义为 :，如下示例 浏览器此时显示内容 链入内部CSS   CSS内链接是由标记对放在中，在中有一个类型属性type，
CSS样式的三种写法以及优先级
不言尘世
07-13 2056
1 CSS是什么 层叠样式表（cascading style sheets） 2 CSS的作用 是一种网页渲染技术，对标签特征属性进行渲染 3CSS的三种写法 1内联样式 <body> <!--写法一内联样式--> <p style="color: sienna; margin-left: 20px"> This is a paragraph ...
CSS三种样式引入方式优先级深度解析与验证
本文将深入探讨CSS控制样式的三种引入方式：外部样式表、内部样式表和内联样式，并重点分析它们之间的优先级对比。CSS，全称为层叠样式表，是一种用于描述HTML或XML（包括SVG）文档的呈现的样式语言。在CSS的样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值