三、CSS

最新推荐文章于 2023-12-19 14:29:48 发布
最新推荐文章于 2023-12-19 14:29:48 发布
阅读量167 收藏 3
点赞数
分类专栏： 软件测试笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxf666/article/details/114259088
版权

3.1CSS基本介绍

在这里插入图片描述

3.2CSS基本使用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- style标签是HTML当中准备好的专门用来存放CSS代码块的 -->
		<style type="text/css">
			/* 用来书写CSS代码 */
		</style>
	</head>
	<body>
	</body>
</html>

3.3体验CSS

在这里插入图片描述

3.4CSS选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体验CSS</title>
		<style type="text/css">
			/*CSS设置的语法是：
			
			选择器{
				在这个大括号里书写具体的CSS样式设置
			}
			
			需求：给p元素设置 宽度200px, 高度200px, 背景颜色为绿色
			*/
		   p{
			   width: 200px;
			   height: 200px;
			   background-color: green;
		   }
		   
		</style>
		
	</head>
	<body>
		<p>我是P标签</p>
		
		
	</body>
</html>

3.5类名选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类名选择器</title>
		<!-- 需求将h4与p标签样式设置成一样，100px,100px,背景绿色，字体白色 -->
		
		<style>
			/* h4{
				width: 100px;
				height: 100px;
				background-color: cadetblue;
				color: white;
			}
			p{
				width: 100px;
				height: 100px;
				background-color: cadetblue;
				color: white;
			} */
			.a{
				width: 100px;
				height: 100px;
				background-color: cadetblue;
				color: white;
			}
		</style>
	</head>
	<body>
		
		<h4 class="a">111</h4>
		<p class="a">222</p>
		<a href="#">333</a>
	</body>
</html>

3.6id选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#a{
				width: 100px;
				height: 100px;
				background-color: salmon;
				color: white;
			}
		</style>
	</head>
	<body>
		
		<p>第一个p标签</p>
		<p>第二个p标签</p>
		<p id="a">第三个p标签</p>
		
	</body>
</html>

3.7简单选择器总结

在这里插入图片描述

3.8id名与类名命名规则

1.名称不能是数字或者以数字开头，但经常以数字结尾
2.名称不能是中文（虽然有效果但是不能用）
3.名称不能以特殊字符或者以特殊字符开头~！@#￥%……&*（）
4.名称尽可能见名知意

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* 
			以下的规则同时适用于类名与id名
			1.名称不能是数字或者以数字开头，但经常以数字结尾
			2.名称不能是中文（虽然有效果但是不能用）
			3.名称不能以特殊字符或者以特殊字符开头~！@#￥%……&*（）
			4.名称尽可能见名知意
			 */
			
			.a_1{
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		
		
		<p class="a_1">一会吃饭</p>
	</body>
</html>

3.9元素默认展示类型

在这里插入图片描述

3.10布局标签补充

  • div是在网页布局中经常使用的一个标签（双标签），从某种感觉上来讲是HTML里面体积最大的一个标签（里面可以放很多其他标签）
  • span标签也是网页布局中经常使用的一个标签（双标签），它里面一般用来放是文字，我们会认为它非常小。
  • 段落标签不能包含标题，浏览器不能正常解析。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.a{
				color: #FFFFFF;
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
	
		<h4 class="a">标题</h4>
		<p class="a">段落1</p>
		<p class="a">段落2</p>
		<a href="" class="a">标签1</a>
		<a href="" class="a">标签2</a>
		
		
	
		<!-- div是在网页布局中经常使用的一个标签，从某种感觉上来讲是HTML里面体积最大的一个标签
		（理面可以放很多其他标签）
		
		 span标签也是网页布局中经常使用的一个标签，它里面一般用来放是文字，我们会认为它非常小。
		 
		标题  段落
		 -->
		<div>我是div我是一个大盒子</div>
		
		<span></span>
		
		<h4><p>我是p标签</p></h4>
		
		<!-- <p><h4>我是p标签</h4></p> (错的)-->
		
	</body>
</html>

3.11元素展示类型转换

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素类型转换</title>
		<style>
			/* 我们把span这个行内元素强行变成块元素 ，为了实现这个需求，css里面本身就了一个叫display的属性
			它里面有几个常用的值
			block 块
			inline-block 行内块
			inline 行内
			*/
			span{
				color: #FFFFFF;
				width: 300px;
				height: 100px;
				background-color: #ff0000;
				
				display: block;
			}
		</style>
	</head>
	<body>
				
		<div>我是div1</div>
		<div>我是div2</div>
		
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

3.12简单选择器权重

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单选择器权重</title>
		<style type="text/css">
			#box{
				background-color: #0055ff;
			}
			.box{
				background-color: #ffff00;
				
			}
			
			div{
				width: 100px;
				height: 100px;
				background-color: #FA8072;					
			}
			
			/* div{				
				background-color: #55aa00;					
			} */
			
		</style>
	</head>
	<body>
					
		<div class="box" id="box">我是div标签</div>
		
	</body>
</html>

3.13CSS特性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>覆盖性</title>
		<style type="text/css">
	
			div{
				width: 100px;
				height: 100px;
				background-color: #FA8072;					
			}
			
			div{	
				width: 200px;
				background-color: #55aa00;					
			}
			
		</style>
	</head>
	<body>
					
		<div class="box" id="box">我是div标签</div>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承性</title>
		<style type="text/css">
			div{
				
				width: 200px;
				height: 200px;
				background-color: #FA8072;									
			}
			p{
				background-color: #5555ff;				
			}
			span{
				background-color: #ff55ff;						
			}
		</style>
	</head>
	<body>
		
		<div>
			<p>我是p标签</p>
			<span>我是span标签</span>
		</div>
			
	</body>
</html>

3.14复合选择器

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复合选择器-后代选择器</title>
		<style>
			div span{
				color: #FF0000;
			}
			
			/* div p span{
				color: #ff00ff;
			} */
		</style>
				
	</head>
	<body>
		<div>
			<p>
				<span>我是孙子辈span</span>
			</p>
			<span>我是儿子辈span</span>
		</div>
	
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复合选择器-并列选择器</title>
		<style>
			
			/* h4,p{				
				width: 200px;
				height: 200px;
				background-color: #FA8072;	
			} */
			/* .a,p{
				width: 200px;
				height: 200px;
				background-color: #FA8072;	
			} */
			h4 span,p{
				width: 200px;
				height: 200px;
				background-color: #FA8072;	
			}
		</style>
	</head>
	<body>
		
		<h4 class="a">
			<span></span>
		</h4>
		<p></p>
		<a href=""></a>
	</body>
</html>

3.15选择器权重总结

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器权重总结</title>
		<style>
			
			/* #span1{
				color: #00ff00;
			} */
			div span{
				color: #FFFF00;
			}
			p span{
				color: #FA8072;/* 覆盖 */
			}
			
			/* .box span{
				color: #FFFF00;
			}
			p span{
				color: #FA8072;/*类名选择器>元素 */
			} */
		</style>
	</head>
	<body>
		
		<div class="box">
			<p><span id="span1">第一个span</span></p>
			<span>第二个span</span>
		</div>
		
	</body>
</html>

3.16CSS文件存放位置

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外链CSS</title>
		<!-- 如果使用外链CSS写法，那么在当前的HTML里面要引用具体的CSS文件，用link单标签引入
		rel属性及它的值不要省略，声明它是一个样式表。
		-->	
		<link rel="stylesheet" href="24.css">
	</head>
	<body>
				
		<div></div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内CSS</title>
	</head>
	<body>
		<!-- 写在标签身上，把style当做div的属性使用 -->
		<div style="color: #55AA00;width: 100px;height: 100px;background-color: #FFFF00;">我是div标签</div>
	</body>
</html>

在这里插入图片描述

粉皮皮
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css *{}的标准写法
易天海
03-07 1606
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, heade...
css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果
12-13
复制代码代码如下: <style>... /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/
css中的*{ }
qq_41606334的博客
10-11 4324
css中的*{ } 参考wen 是一个通配符，也是一个选择器------通用选择器，它的作用是匹配html中所有标签元素，包括html标签、body标签等等，所有标签都会继承里面的属性，除非子标签属性重新被设置。一般写在css最开始的位置，来做全局声明。 *{ border: 0; margin: 0; padding: 0; } css 通配符*可以消除浏览器的默认属性...
css中.号、#号、*号都是什么意思，通俗易懂系统讲解
我真的睡不够
12-19 1509
号是标签都遵循的统一样式，这个不难理解。下面总结#和.的区别和用法，通俗易懂的说，#对应id，.对应class不加对应html 标签，id优先大于class。Class与ID的区别一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线， 你可以通过CSS，Javascript等来使用这个类。
CSS中#号、.号、*号详解
m0_46848664的博客
07-16 6851
代码】CSS中#号、.号、*号详解。
css中*的用法
似水流年，举重若轻
04-11 1998
*是代表所有html中的标签例.写了一个*{box-sizing:border-box}.span-class{width:80px;padding:20px;}结果，span标签的内容宽度是80px,并不是40px;，证明box-sizing设定的属性没有应用到span标签上。所以，用*要小心。...
css绘制透明三角形
09-24
主要教大家使用css绘制透明三角形，css绘制三角形很简单，如何绘制透明的三角形，本文为大家解决这个问题，感兴趣的小伙伴们可以参考一下
itcss-boilerplate:遵循 ITCSS（倒三角形 CSS）方法的 Sass 项目样板
07-01
itcss-样板遵循 ITCSS（倒三角形 CSS）方法的 Sass 项目样板它是什么？ 在我们在 Sass 项目中使用 ITCSS 结构已经有一段时间了。 如果您有兴趣了解有关 ITCSS 的更多信息，可以。 对于我设置的每个新项目，我不断...
css写的三角形欣赏
09-25
今天闲着蛋疼 随便修几个三角形
css border三角形
11-25
css border三角形
DIV+CSS星号（*）选择器
xyjikl
07-18 5035
CSS DIV+CSS星号（*）选择器 星号（*）选择器也称为通用选择器、通配符选择符等，星号（*）表示通配符。通配符选择符用于对页面所有元素（HTML中所有标签）应用样式。例如： *{margin:0;padding:0;font-family:宋体;} 将网页HTML中所有标签的padding设置为0、margin设置0,字体设置为宋体。 特殊情况下，可以对特定元素的所有后
css中的*代表什么
开心每天，水滴石穿。
08-24 4917
*：通配符，意思是所有的标签都有的属性。 一般在很多网上都能看到第一句CSS是 这个*{ margin:0; padding:0;} 这样 可以很好的避免标签的默认内外补丁所产生的差异。
xgboost4j-2.12-1.7.6.jar
最新发布
07-08
xgboost4j-2.12-1.7.6.jar
048N06L-VB TO263一款N-Channel沟道TO263的MOSFET晶体管参数介绍与应用说明
07-08
048N06L-VB TO263；Package：TO263；Configuration：Single-N-Channel；VDS：60V；VGS：20（±V）；Vth：3V；RDS(ON)=4mΩ@VGS=10V；ID：150A；Technology：Trench；
基于Arduino的LED亮度控制系统与ESP32开发板控制舵机.docx
07-07
工作原理解释 ledcSetup()函数：ESP32的ledcSetup()函数用于配置LED PWM通道的参数，包括PWM信号的频率和分辨率。 ledcAttachPin()函数：将PWM通道与指定的引脚（这里是舵机的信号线引脚）关联起来。 rotateServo()函数：该函数接受一个角度参数，并通过ledcWrite()函数将映射后的PWM占空比写入PWM通道，从而控制舵机旋转到指定角度。
ChatGPT Resources.pdf
07-08
### 内容概要 这份全面的ChatGPT资源合集是为那些渴望利用人工智能提升工作效率和创造力的人士准备的宝藏。它汇集了从基础教程、商业应用、生产力提升、内容创作到特定场景下的工具使用等一系列资源链接和指导。此外，还包含了针对不同社交媒体平台如Twitter的内容优化技巧，以及如何通过ChatGPT进行SEO、设计、销售、编程等多方面的实践指导。 ### 适用人群 这份资源合集适用于企业家、内容创作者、营销专家、设计师、程序员、产品经理以及任何希望在日常工作或特定项目中利用AI技术提高效率和产出质量的专业人士。 ### 使用场景及目标 1. **学习与提升**：新手可以通过基础教程快速了解ChatGPT的使用方法，而经验丰富的用户则可以通过高级指南进一步挖掘其潜力。 2. **商业应用**：企业家和商业分析师可以探索如何将ChatGPT集成到商业策略中，实现自动化和增强决策。 3. **生产力增强**：忙碌的专业人士可以通过生产力工具和提示，找到节省时间、提高工作流程效率的方法。 4. **内容创作**：作家、博主和社交媒体经理可以利用ChatGPT生成创意内容，提升内容营销的效果
《A股十倍股群像》(1).pdf
07-08
《A股十倍股群像》(1)
融合注意力机制的CNN-G...力系统短期负荷混合预测模型_王玉林.pdf
07-08
融合注意力机制的CNN-G...力系统短期负荷混合预测模型_王玉林.pdf
通信开关电源的EMI／EMC设计.doc
07-08
通信开关电源的EMI／EMC设计.doc通信开关电源的EMI／EMC设计.doc通信开关电源的EMI／EMC设计.doc
使用::after画一个红色三角形css
06-13
```css .element::after { content: ""; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid red; } ``` 在这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值