CSS学习——02

已于 2024-04-15 22:27:35 修改
阅读量999 收藏 14
点赞数 16
分类专栏： 前段 文章标签： css 学习 前端
于 2024-03-27 21:30:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyl_java/article/details/136943247
版权

CSS学习

CSS复合选择器

后代选择器

  后代选择器：又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在
后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
			元素1 元素2 { 
				属性：属性值
			}
		 */
		ul li {
			color: red;
		}
		
		</style>
	</head>
	<body>
		<ul>
			<li>后代选择器1</li>
			<li>后代选择器2</li>
			<li>后代选择器3</li>
		</ul>
	</body>
</html>

子类选择器

 子类选择器： 子类选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
			元素1 > 元素2 {
				属性：属性值
			}
		 */
		ul > a {
			color: red;
		}
		
		</style>
	</head>
	<body>
		<!-- 只有第一个<a>标签会发生改变 -->
		<ul>
			<a href="#">子类选择器</a>
			<li><a href="#">子类选择器</a></li>
		</ul>
	</body>
</html>

并集选择器

 并集选择器： 可以选择多组标签，同事定义他们的样式 。标签中间用 “,” 隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
			元素1 , 元素2 {
				属性：属性值
			}
		 */
		h1, h2 {
			color: red;
		}
		
		</style>
	</head>
	<body>
		<!-- <h1> <h2> 都会发生改变 -->
		<h1>并集选择器1</h1>
		<h2>并集选择器2</h2>
		<h3>并集选择器3</h3>
	</body>
</html>

链接伪类选择器

 链接伪类选择器： 主要用于修改<a>标签的一些行为

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠按下未弹起的链接)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link {
				color: black;
			}
			a:visited {
				color: red;
			}
			a:hover {
				color: blue;
			}
			a:active {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="#">链接伪类选择器</a>
	</body>
</html>

focus伪类选择器

 伪类选择器： 用于获得焦点的表达元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 表单元素:focus {
				 属性：属性值
			 }
			 */
			input:focus {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 当标签获取焦点时，背景变为红色 -->
		<input type="text"/>
	</body>
</html>

CSS元素分类

  根据元素的显示方式对元素进行分类，例如：<div>标签独占一行，被分为块元素。<span>一行可以放多个，被分为行元素

块元素

特点：
 独占一行,下一个元素会另起一行
 可以设置高度、宽度、外边距和内边距
 宽度默认是容器（父级宽度）得100%

行内元素

特点：
 相邻行内元素在一行上，一行可以显示多个
 高度、宽度设置无效
 默认宽度是他本事内容的宽度
 行内元素只能容纳文本或其他行内元素

行内块元素

 行内块元素： 在行内元素中有几个特殊的标签：<img/> <input/> <td>，它们同时具有块元素和行内元素的特点。

特点
 和相邻行内元素（行内块元素）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内块压损）
 默认宽度就是它本身的宽度
 高度、宽度、行高、外边距和内边距都是可以控制的

元素显示模式转换

 元素显示模式转换： 在开发过程中可能会遇到将行内元素转缓存块元素，这时就需要进行类型转换。例如：在使用<a/>标签时，<a/>标签默认的高度并不是我们理想的高度（行内元素不能修改宽高），这时就可以将<a/>转行为快元素为其设置高度。

属性：display 可以修改元素类型
 block: 块元素
 inline: 行内元素
 inline-block: 行内块元素

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.balld {
				width: 200px;
				height: 100px;
				border: 1px solid red;
				/* 将行内元素转行为快元素   block:块元素*/
				display: block;
			}
			div {
				width: 200px;
				height: 100px;
				border: 1px solid red;
				/* 将块元素转换为行内元素    inline:行内元素*/
				display: inline;
			}
			span {
				width: 200px;
				height: 100px;
				border: 1px solid red;
				/* 将行内元素转行为行内块元素  inline-block：行内块元素*/
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<a class="balld">元素类型转换1 设置宽高后生效</a>
		<div>元素类型转换2  设置的宽高未生效</div>
		<span>行内块元素  设置的宽高生效 并且一行可以放多个1</span>
		<span>行内块元素  设置的宽高生效 并且一行可以放多个2</span>
	</body>
</html>

CSS背景

 CSS背景常用属性： 背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

属性作用常用属性值备注
background-color定义标签背景色red
#FF0000
rgb(255,0,0)		预定义的颜色值：red
十六进制：#FF0000
RGB代码：rgb(255,0,0)
默认值：transparent 背景颜色为透明
background-image为标签添加背景图片url地址地址可以为项目指定目录下的图片
地址也可以为网络地址
background-repeat背景平铺repeat（平铺）
no-repeat（不平铺）
repeat-x（沿X轴平铺）
repeat-y（沿Y轴平铺）		background-image和ackground-repeat
一起使用
background-position背景图片位置background-position: x y
x和y代表 x坐标和y坐标
可以使用方位名词或者精确单位		精确单位：百分数 或 px值
方位名称：top、center、bottom、left、right
background-attachment背景图片固定scroll（背景图片是随对象内容滚动）
fixed（背景图片固定）
background背景属性符合写法顺序：背景颜色 背景图片地址 背景平铺
背景图片固定或滚动 背景图片位置

背景透明色：background : rgba(0,0,0,0.3) 第四位代表透明度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.balld1 {
				width: 200px;
				height: 100px;
				/* 背景颜色 */
				background-color: red;
			}
			.balld2 {
				width: 200px;
				height: 100px;
				/* 背景图片 */
				background-image: url("https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw");
			}
			.balld3 {
				width: 200px;
				height: 100px;
				background-image: url("https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw");
				/* 不平铺
				background-repeat: no-repeat; */
				/* 平铺
				background-repeat: repeat; */
				/* 沿X轴平铺
				background-repeat: repeat-x; */
				background-repeat: repeat-y;
			}
			.balld4 {
				width: 300px;
				height: 300px;
				border: 1px solid red;
				background-image: url("https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw");
				background-repeat: no-repeat;/* 不平铺 */
				/* background-position: right top; 右上方 right top和top right 是等价的 和顺序无关*/
				/* background-position: right;     此时水平靠右，第二个参数省略Y轴 默认是垂直居住*/
				/* background-position: top;  此时一个参数top一定是Y轴 顶部对齐，第二个参数省略x 轴是 水平居中显示的 */
				/* background-position: 50% 50%; 图片在标签正中间 */
				/* background-position: 10px 30px; 根据px值精确定位 */
				/* background-position: right 20px; 混合定位   */
			}
			.balld5 {
				width: 100%;
				height: 300px;
				border: 1px solid red;
				background-image: url("https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw");
				background-repeat: no-repeat;
				background-position: 50% 50%;
				/* 背景图片固定 */
				background-attachment: scroll; /* scroll（背景图片是随对象内容滚动） fixed（背景图片固定）*/
			}
			body {
				background: transparent url("https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw") no-repeat fixed top;
			}
			.balld6 {
				width: 100%;
				height: 300px;
				background: rgba(0,0,0,0.3);
			}
			
		</style>
	</head>
	<body>
		<div class="balld1">背景颜色</div>
		<br />
		<div class="balld2">背景图片</div>
		<br />
		<div class="balld3">背景平铺</div>
		<br />
		<div class="balld4">背景图片位置</div>
		<br />
		<div class="balld5">背景图片固定</div>
		<br />
		<div class="balld6">背景透明度</div>
	</body>
</html>

CSS三大特性

 层叠性
  相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：

  • 样式冲突,遵循原则就是就近原则，哪个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div {
				background-color: red;
			}
			/* 该样式生效 */
			div {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>层叠性</div>
	</body>
</html>

 继承性
   子标签会继承父标签的某些样式，如文本颜色和字号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div {
				color: red;
				font-size: 30px;
				height: 100px;
				border: 1px solid black;
			}
			p {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div>
			<!-- p 标签会继承父标签div的样式，字体会为红色，字号50px 
			但并不是继承所有样式，父标签的高度就没继承
			通常继承的是字体的样式 以及color-->
			<p>继承性</p>
		</div>
	</body>
</html>

 优先级
   当同一个元素指定多个选择器，就会有优先级产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

继承或者 * < 元素选择器 < 类选择器，伪类寻找器 < ID选择器 < 行内样式 < !important重要的

balld
关注
专栏目录
前端学习——CSS布局
qq_42355032的博客
06-30 1292
CSS页面布局技术允许拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。 下面布局技术会覆盖默认的布局行为：在 css 中实现页面布局的主要方法是设定属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。 更改默认显示行为。例如，元素默认为，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为，它们将显示在彼此旁
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 732
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
前端开发学习——CSS定位
2302_80311379的博客
09-04 1101
1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动代码：position:absolute;需配合方位属性实现移动默认相对于浏览器可视区域进行移动在页面中不占位置——脱标应用场景配合绝对定位组CP（子绝父相）/* 绝对定位。
CSS学习——盒子模型
wanglingli95的博客
01-05 2491
学习目标： 能够认识盒子模型的组成 ，能够掌握盒子模型边框、内边距、外边距的设置方法。 学习路径： 盒子模型的介绍 内容区域的宽度和高度 边框（ border ） 内边距（ padding ） 外边距（margin） 一、盒子模型的介绍 1. 盒子的概念 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局。 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。 2. 盒子模型 ➢ CSS 中规定每个盒子分别由：内容区域（c
CSS基础学习——动画
热门推荐
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
HTML+CSS学习——奥运五环代码
ciscosong的博客
06-28 5530
HTML代码： test CSS代码： *{ margin: 0px; padding: 0px; } .plat{ position: absolute; border: 5px solid black; width: 380px; height: 190px; left: 50%; top: 50%; margin-top: -...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
前端开发是一个不断发展的领域，随着浏览器对CSS新特性的支持度提升，开发者需要不断学习和掌握新的技巧，以创建更高效、更美观的网页。无论你是初学者还是有一定经验的开发者，了解并熟练运用这些CSS应用方法都至关...
css的选择器有哪些？权重由大到小是怎么排序的？
BANaanaa的博客
09-10 686
来看看css的选择器与权重比吧
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 316
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2209
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 427
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 239
【代码】css鼠标移动过去变成手的图标。
CSS 笔记 1
waterHBO的博客
09-12 373
限制最大高度 300 像素， flex-grow: 1;让 当前元素 在剩余空间中， 占据尽可能多的高度，确保它能在中间居中。上下填充 20px，左右填充为0。铺满整个浏览器窗口的宽度。占据父元素的 100%
CSS中 nth-child 与 nth-of-type 的区别
qq_62512874的博客
09-11 539
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4581
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
unocss 一直热更新打印[vite] hot updated: /__uno.css
weixin_48230016的博客
09-10 331
client.ts:450 [vite] hot updated: /__uno.css
css父容器溢出隐藏 子容器溢出滚动
最新发布
u010234868的专栏
09-13 193
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
Web基础：JavaScript与CSS详解——函数、变量与DOM操作
"本资源主要介绍了Web基础中的JavaScript和CSS内容，由中软培训中心讲师温春水提供。课程涵盖了以下几个关键知识点： 1. JavaScript的背景：JavaScript最初由Netscape公司开发，目的是增强HTML的基础功能，作为一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值