嵌套【CSS】的三种方式

最新推荐文章于 2022-12-04 22:08:00 发布
最新推荐文章于 2022-12-04 22:08:00 发布
阅读量7.2k 收藏 5
点赞数 4
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48947478/article/details/123994933
版权

CSS

Cascading Style Sheet 层叠样式表单

HTML页面中嵌套CSS的三种方式

  • 内联定义式：在标签内部使用style属性来设置
    <标签 style="样式名:样式值;样式名:样式值;..."></标签>
<form style="bgcolor:pink;"></form>
  • 样式块方式：在head标签中使用style块
    <head>
	<style type="text/css">
		选择器 {
			样式名:样式值;
			样式名:样式值;
			...
		}
		选择器{
		}
		...
	</style>
</head>
  • 链入外部样式表文件：将样式写到一个独立文件中.css文件
<!--引入css文件-->
<link rel="stylesheet" type="text/css" href="css/1.css">

示例

  • 内联定义式
<div style="width: 200px; height: 300px; background-color: #CCFFFF;
	border: 1px solid black;"></div>
  • 选择器
    id选择器、标签选择器、类名选择器
<head>
	<style type="text/css">
		#id{ /*id选择器： #开头*/
		}
		标签 {/*标签选择器*/
		}
		.类名{/*类选择器：.开头 */
		}
	</style>
</head>

定位

#div1{
	background-color: pink;
	border:1px black solid;
	width: 300px;
	height: 300px;
	position: absolute; /*绝对定位*/
	left: 100px;
	top: 100px;
}
十＆九
关注
CSS 分组和嵌套
xyq2024的博客
09-10 326
CSS（层叠样式表）是网页设计中不可或缺的一部分，它用于控制网页元素的布局和外观。在编写CSS时，为了提高代码的可维护性和效率，我们常常会使用分组和嵌套的技巧。本文将详细介绍CSS中的分组和嵌套，以及它们如何帮助开发者编写更清晰、更高效的代码。
CSS的嵌套方法
weixin_30940783的博客
11-02 365
1、行内嵌套：在行业中不常用，主要用来调试样式 2、头部嵌套： <style type="text/css“> { } </style> 3、外部嵌套： 转载于:https://www.cnblogs.com/feiyu1111111111/p/4930501.html...
简单学习css组合与CSS嵌套的写法
12-03
简单学习css组合与CSS嵌套的写法. CSS组合 　　你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 　　比如，你有如下的代码： h2 { color: red; }.jb51 { color: red; }.jb51com { color: red; } 　　则你可以这样写： h2,.jb51,.jb51com { color: red; } 　　使用组合，你可以一次定义多个CSS，为你节省很多字节和时间。 CSS嵌套 　　CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。（或者更好的说法，上下文选择符–译者著）
CSS样式嵌套
左直拳的马桶_日用桶
09-18 6308
CSS样式嵌套左直拳 如果在一个、里包含有一个链接，如：td class="tdCSS" >a href="penis.htm">长洲宾客人数多a>td>其中TD制订的CSS样式tdCSS对这个链接A是不起作用的。比如说，明明定好了这个TD内的文字多大，什么颜色，现在加了一个〈A〉后，就一切都变了样。亲爱的，要怎么样你才能起作用？一切尽在掌握。写CSS的时候可以这样写：
CSS中级教程 组合与嵌套
网页标准学习文档
10-08 1000
组合你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。比如，你有如下的代码：h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } 则你可以这样写：h2, .thisOtherClass, .yetAnot
CSS基础-嵌套规范（拓展）,居中方法，CSS 特性
weixin_48370579的博客
12-04 523
CSS基础-嵌套规范(拓展),居中方法，CSS 特性 拓展1：HTML嵌套规范注意点 1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…… ➢ 但是：p标签中不要嵌套div、p、h等块级元素 2. a标签内部可以嵌套任意元素 ➢ 但是：a标签不能嵌套a标签 拓展2：居中方法总结 css特性 目标：能够认识 CSS 的 继承 和 层叠 特性 1. 继承性...
CSS代码组合和嵌套
12-03
CSS的组合和嵌套 CSS组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 比如，你有如下的代码： h2 { color: red; }.thisOtherClass { color: red; }.yetAnotherClass { color: ...
postcss-nested-ancestors::family_woman_girl_boy: PostCSS 插件，用于引用嵌套 CSS 中的任何父级选择器
07-24
PostCSS 嵌套祖先 插件来引用嵌套 CSS 中的任何父祖先选择器。 获取祖先选择器 在编写模块化嵌套 CSS 时， &当前父选择器通常是不够的。 PostCSS 嵌套祖先引入了^&选择器，它使您可以通过简单且可自定义的界面引用...
CSS 嵌套DIV布局(position属性)
01-21
嵌套DIV布局，会牵扯到CSS的position属性 如果内层DIV将position属性设置为absolute，并设置left，和top等属性，还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和
嵌套CSS规则
JEFF_xieyuzhi的博客
06-05 1934
嵌套CSS规则2. 嵌套CSS规则2-1. 父选择器的标识符&2-2. 群组选择器的嵌套2-3. 子组合选择器和同层组合选择器： >、+和 ~2-4. 嵌套属性 2. 嵌套CSS规则 2-1. 父选择器的标识符& 伪元素 : hover <article> Lorem ipsum dolor sit amet <a href="https://www.sass.hk/guide">了解：父选择器的标识符&&lt
如何用css嵌套做网页,网页样式CSS的选择符组合和嵌套的应用_css
weixin_30315143的博客
08-03 199
进阶学习网页样式css的选择符的组合和嵌套组合你不必重复有相同属性的多个选择符，你只要用英文逗号(,)隔开选择符就可以了。比如，你有如下的代码：h2 {color: red;}.thisOtherClass {color: red;}.yetAnotherClass {color: red;}则你可以这样写：h2, .thisOtherClass, .yetAnotherClass {color:...
CSS进阶篇——分组和嵌套
老梁的专栏
09-28 563
分组和嵌套可以让代码更易于维护，无论是 HTML 代码还是 CSS 代码。
css 样式嵌套_使用CSS样式简单的嵌套注释
Web design 教程小屋
07-08 917
今天，我们将看一下嵌套的注释。 我们将对它们进行样式设置，以使其具有树状结构（例如您将在Webdesigntuts +上找到的结构），并研究几种处理事物的方法。 观看截屏 或者， 下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！ 其他资源 了解 CSS技巧上的边框图像 W3C上的CSS背景和边框模块3级 翻译自: https://w...
uniapp样式嵌套写法
最新发布
09-19
在UniApp中，样式嵌套的写法可以通过两种方式实现：内联样式和外部样式表。 1. 内联样式：可以直接在标签的属性中使用样式属性来设置元素的样式，这种写法适合于少量样式的情况。例如： ``` <view style="width: 200rpx; height: 200rpx; background-color: red;"> <text style="font-size: 32rpx; color: white;">这是一段文本</text> </view> ``` 上述代码中，view标签使用了内联样式来设置宽度、高度和背景色，text标签也使用了内联样式来设置字体大小和字体颜色。 2. 外部样式表：UniApp也支持通过引入外部样式表来设置元素的样式，这种写法适合于大量样式的情况，并且可以在多个页面之间共享样式。首先需要在根目录的App.vue文件或页面的vue文件中，使用<style>标签来引入外部样式表，如： ``` <style> @import "../common/style.css"; </style> ``` 然后在common文件夹下创建style.css文件，并在其中书写样式规则，例如： ``` .view-class { width: 200rpx; height: 200rpx; background-color: red; } .text-class { font-size: 32rpx; color: white; } ``` 最后，在页面的标签中使用class属性来引用样式类： ``` <view class="view-class"> <text class="text-class">这是一段文本</text> </view> ``` 通过外部样式表，可以更好地管理和复用样式，并提高代码的可维护性。 以上是UniApp中样式嵌套的两种写法，开发者可以根据具体需求选择合适的方式来设置元素的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值