自学CSS总结

最新推荐文章于 2024-09-26 17:57:52 发布
最新推荐文章于 2024-09-26 17:57:52 发布
阅读量145 收藏 1
点赞数 1
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiaSheng_Lu/article/details/128827207
版权
本文详细介绍了CSS的三种导入方式：行内样式、内部样式和外部样式，以及它们的优先级。接着，讨论了选择器的种类，包括基本选择器（标签、类、ID）、层次选择器、结构伪类选择器和属性选择器。此外，还涵盖了美化网页元素的技巧，如字体样式、文本样式、背景和阴影效果。文章还讲解了浮动元素、定位（相对、绝对和固定定位）以及解决浮动带来的父级边框塌陷问题的方法。
摘要由CSDN通过智能技术生成

1.CSS的导入方式

1.1 行内样式

<!-- 行内样式: 在标签元素中, 编写一个style属性, 编写样式即可 -->
<h1 style="color: blue;">行内样式</h1>

1.2 内部样式

	<!-- 内部样式 -->
	<style>
		h1 {
			color: yellow;		
        }
	</style>

1.3 外部样式

	<!-- 外部样式 -->
	<link rel="stylesheet" href="css/sheet1.css">
优先级: 外部样式 < 内部样式 < 行内样式 遵循就近原则.
拓展: 外部样式有两种写法:
  • 链接式:
<link rel="stylesheet" href="css/sheet1.css">
  • 导入式: CSS2.1 特有的
<style>
    @import url("css/sheet1.css");
</style>

2.选择器

作用: 选择页面的某一个或者某一类元素

2.1 基本选择器

1.标签选择器: 选择一类标签: {}

/** 标签选择器: 会选到页面上所有的这个标签的元素 */
		h1 {
			color: cadetblue;
			background-color: blue;
			border-radius: 24px;/**圆角的边框*/
		}
		p {
			background-color: aquamarine;
		}
  1. 类选择器class : 选择所有class 属性值一致的标签, 跨标签 .类名{}

作用: 可以多个标签归类是同一个class, 可以复用

		/* 类选择器的样式: .class的名称{}
		 好处: 可以多个标签归类是同一个class, 可以复用*/
		.javaclass{
			color: brown;
		}
		.htmlclass{
			color: cadetblue;
		}
  1. id选择器: 全局唯一 #id名{}
			/* id选择器: id必须保证全局唯一 
			 #id名称{}
			 优先级: 
			 不遵循就近原则, 固定的
			 id选择器 > class 选择器 > 标签选择器
			 */
			#divId {
				background-color: #bdff87;
				border-radius: 32px;
			}
优先级 : id选择器 > class 选择器 > 标签 选择器

2.2 层次选择器

  1. 后代选择器 : 在某元素的后面
/* 后代选择器 */
body p {
	background: blueviolet;
}
	<body>
		<p>p0</p>
		<p class="xinglin">p1</p>
		<p>p2</p>
		<p>p3</p>
  1. 子选择器, 一代 儿子
/* 子选择器 */
body>p{
    background-color: aqua;
}
  1. 相邻兄弟选择器 同辈
/* 相邻选择器 兄弟选择器: 相邻(向下) */
.xinglin + p{
    background-color: chartreuse;
}
  1. 通用选择器 当前选中元素的向下的所有兄弟元素
/* 通用选择器: 当前选中元素的向下的所有兄弟元素 */
.xinglin~p {
    background-color: aqua;
}

2.3 结构伪类选择器

**选择第一个 / 最后子元素 / **

/* ul额第一个子元素 */
ul li:first-child{
    background-color: bisque;
}
/* ul的最后一个子元素 */
ul li:last-child{
    background-color: chartreuse;
}
  1. 选中p1: 定位到父元素 选择当前的第一个元素 选择当前p元素的父元素 --> 选择当前第一个子元素
/* 选中p1: 定位到父元素 选择当前的第一个元素 
选择当前p元素的父元素 --> 选择当前第一个子元素*/
p:nth-child(2){
    background-color: aqua;
}
p:nth-of-type(2){
    background-color: blanchedalmond;
}
		<a href="">asdf asdf </a>
		<h1>h1</h1>
		<p>p0</p>
		<p class="xinglin">p1</p>
		<p>p2</p>
		<p>p3</p>
		
		<ul>
			<li> li1</li>
			<li> li2</li>
			<li> li3</li>
		</ul>

2.4 属性选择器 (常用)

属性名: 属性名 = 属性值 (正则)
	  =  绝对等于
	  *= 包含这个元素
	  ^= 以这个开头
	  $= 以这个结尾

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style>
		.p-class a {
			float: left;/*让图像项左浮动*/
			display: block;/*block块级元素; none不显示元素*/
			height: 60px;
			width: 60px;
			border-radius: 10px;/*圆角边框*/
			/* border: solid;边框样式 */
			/*边框宽度 | 边框样式(dotted点边框)*/
			border: 3px solid;
			background-color: #77fdff;/*背景颜色*/
			text-align: center;/*文本的对齐方式*/
			color: #ff1437;/*颜色*/
            /*没有文本装饰*/ /*underline red:红色下划线  underline wavy red:红色波浪形下划线*/
			text-decoration: none;
			margin-right: 12px;/*设置元素的右边距：*/
			font: bold 30px/53px arial;/*声明的所有字体属性: 黑体 | 字体大小/*/
		}
		
		/* 存在id的元素 */
		a[id]{
			background-color: #005500;
		}
		
		/* id=first的元素 */
		a[id=first]{
			background-color: #ffff00;
		}
		
		/* class中含有links的元素 */
		a[class*=links]{
			background-color: #9bc8b7;
		}
		/* href中以http开头的元素 */
		a[href^=http]{
			background-color: #005500;
		}
		
		/* 选中href中以doc结尾的元素 */
		a[href$=doc]{
			background-color: #ffff00;
		}
		</style>
	</head>
	<body>
		
		
		<div class="divclass" >
			<p class="p-class">
				<a href="http://www.baidu.com" class="links items first" id="first">1</a>
				<a href="" class="links items active" target="_blank" title="bilibili" id="second">2</a>
				<a href="./id选择器.html" class="links items">3</a>
				<a href="http://www.bilibili.com" class="links items">4</a>
				<a href="./选择器/img/1.jpg" class="links items">5</a>
				<a href="asd" class="links items">6</a>
				<a href="asd.doc" class="links items">7</a>
				<a href="asdf.doc" class="links items">8</a>
				<a href="asd.pdf" class="links items">9</a>
				<a href="/asd.pdf" class="links items last" >10</a>
				
			</p>
		</div>
	</body>
</html>

效果
效果

3. 美化网页元素

3.1 美化网页的作用

  1. 有效的传递页面的信息
  2. 美化网页, 页面漂亮, 才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验
    span标签: 重点要突出的字, 使用span陶起来
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<style>
			.span1{
				font-size: 50px;
			}
		</style>
	<body>
		welcome to <span class="span1">China</span>
	</body>
</html>

3.2 字体的样式

  • font-family: 字体
  • font-size: 字体大小
  • color: 字体颜色
  • font-weight: 字体粗细
<style>
	/* font-family: 字体
			font-size: 字体大小
			font-weight: 字体粗细
			color: 字体颜色
			*/
		body{
			font-family: 楷体;
		}
		h1{
			font-size: 50px;
		}
	</style>

3.3 文本样式

  1. color: 颜色
  2. text-align : center; 文本对齐的方式(排版)
  3. text-indent :2em; 首行缩进(两个空格)
  4. line-height: 行高(和块的高度一致就可以上下居中)
  5. text-decoration: underline(下划线)/overline(上划线)/line-through(删除线)/blink(文本闪烁)/none(默认)
  6. vertical-align:middle 文本图像对齐方式(middle:水平)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本样式</title>
		
		<style>
			/* 单词
				RGB 红绿蓝 0~F
				RGBA 透明度
				text-align: 排版: 居中|
				text-indent: 首行缩进
				line-height: 行高
			 */
			/* font-family: 字体
				font-size: 字体大小
				font-weight: 字体粗细
				color: 字体颜色
				*/
			body{
				/* text-align: center; */
				font-family: 楷体;
			}
			.p1{
				text-indent: 2em;
				line-height: 50px;
			}
			h1{
				font-size: 50px;
			}
			.a1{
				text-decoration: underline;/*下划线*/
			}		
			.a2{
				text-decoration: underline wavy red;/*下划线 波浪线 红色*/
			}
			.a3{
				text-decoration: line-through;/*中划线*/
			}
			.a4{
				text-decoration: overline blue;/*上划线*/
			}
				/* 文本图片对齐 */
			img,span{
				vertical-align: middle;
			}
			
		</style>
	</head>
	<body>
		<p class="a1">asdf 阿斯蒂芬给</p>
		<p class="a2">asdf 阿斯蒂芬给</p>
		<p class="a3">asdf 阿斯蒂芬给</p>
		<p class="a4">asdf 阿斯蒂芬给</p>
		<a href="https://www.bilibili.com/">啊啊啊啊</a>
		<h1>《梅花易数》</h1>
		<p class="p1">《梅花易数》是中国古代占卜法之一。现在的梅花心易就是梅花易数的别称。相传为宋代易学家邵雍所著，</p>
		<p>梅花易数起源于汉易，是一部以易学中的数学为基础，结合易学中的"象学"进行占卜的书，相传邵雍运用时每卦必中，屡试不爽。</p>
		<p>梅花易数依先天八卦数理，即乾一，兑二，离三，震四，巽五，坎六，艮七，坤八，随时随地皆可起卦，取卦方式多种多样</p>
		
		<p>
			If you were a teardrop;In my eye,
			For fear of losing you,I would never cry.
			And if the golden sun,Should cease to shine its light,
			Just one smile from you,Would make my whole world bright.
		</p>
		<p>
			<img src="../img/1.png" alt="asd">
			<span>ggg灌灌灌灌灌</span>
		</p>
	</body>
</html>

3.4 文本阴影

  • text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径
			/* 阴影的颜色|水平偏移| 垂直偏移|阴影的半径*/
			#price{
				text-shadow: #33c858 10px 10px 0px;
			}

3.5 超链接伪类

正常情况下使用a:hover{}

			/* 默认的颜色 */
			a{
				text-decoration: none;
				color: #000;
			}
			/* 鼠标悬停的状态(只要记住:hover) */
			a:hover{
				color: blue;
				font-size: 35px;
			}

3.6 列表

列表样式: list-style:disc(无序列表默认实心圆) / circle(空心圆) / decimal(数字) / square(正方形) / none(去掉圆点)

/* ui li */
/* list-style
	none: 去掉远点
	circle: 空心圆
	decimal: 数字
	square: 正方形
	*/
ul{
	background: #80eecf;
}
ul li{
	height: 30px;
	list-style: none;/*去除圆点*/
	text-indent: 1em;
	
}

3.7 背景(background)

背景颜色: background-color 背景图片: background-img

ul li{
	height: 30px;
	list-style: none;/*去除圆点*/
	text-indent: 1em;
	background: #b995ff url("../img/right2.png") 215px -9px no-repeat;
}

background: #b995ff url(“…/img/right2.png”) 215px -9px no-repeat;
background: 颜色 路径 x偏移 y偏移 重复样式(no-repeat:仅一次 repeat-x:水平方向重复 repeat-y:竖直方向重复)

3.8 渐变

渐变的地址

4.盒子模型

在这里插入图片描述
margin:边距
padding:内边距
border:边框

4.1 边框(border)

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
    border: 1px solid red
    border: 粗细 样式 颜色

4.2 内外边距(margin)

margin: 200px auto;
margin: 上 下 左 右

/* id=box 的样式 */
#box{
		width: 300px;
		border: 1px solid red;
              /* margin: 上 下 左 右; */
		margin: 200px auto;
	}

盒子的计算方式: margin + border + padding + 内容宽度

4.3 圆角边框

border-radius: 20px 30px 40px 50px
border-radius: 左上 右上 右下 左下

		<style>
			div{
				width: 200px;
				height: 200px;
				border: 5px solid red;
				/* border-radius: z左上 右上 右下 左下 */
				/* border-radius: 10px 20px 30px 50px; */
				border-radius: 120px;
				background: red;
				margin: 10px auto;
			}
			img{
				border-radius: 120px;
			}
		</style>

4.4 阴影

box-shadow: 10px 10px 100px yellow;
x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色
具体的阴影样式

5.浮动

5.1 标准文档流

  1. 块级元素: 独占一行
    h1~h6 p div 列表(ul ol li)

  2. 行内元素: 不独占一行
    span a img strong …

行内元素可以包含在块级元素之中, 反之 则不行

5.2 dispaly属性

display: black(块元素) | inline(行内元素) | inline-black(是块元素,但可以内联,在一行) | none(无,隐藏)
这个也是一种实现行内元素的方式,但是很多情况都是用float

/* block    块元素
	inline  行内元素
	inline-block 是快元素,但是可以内联,在一行
	none
*/
div{
    width: 100px;
    height: 50px;
    border: 1px solid red;
    display: none;
}
span{
    width: 100px;
    height: 50px;
    border: 1px solid red;
    display: inline-block;
}

5.3 浮动:float属性

左右浮动 float: left(左) | right(右) | none(默认不浮动) | inherit(继承父类的)

div{
	/* 边框: 上 右 下 左 */
	margin: 10px;
	/* 填充: 上 右 下 左*/
	padding: 5px;
}
#father{

	border: 1px #438d48 solid;
}
.layer01{
	/* solid:实线  dashed:虚线 */
	border: 3px #543d8d dashed;
	/* 设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局 */
	/* 形式上，display 属性设置元素的内部和外部的显示类型。 */
	/* 默认值：inline */
	display: inline-block;
	float: right;
}
.layer02{
	border: 3px #798d4f dashed;
	display: inline-block;
	float: right;
}
.layer03{
	border: 3px #86548d dashed;
	display: inline-block;
	float: left;
	/* clear: both; */
}
.layer04{
	/* 设置四个边框样式: 列出的一个，两个或三个值来指定 border 属性，值的顺序无关紧要：*/
	/*  边框宽度 样式 颜色*//* solid:实线  dashed:虚线 */
	border: 2px #c3c617 dashed;
	/* 设置不同的HTML元素的字体大小: 绝对大小值/相对大小值/长度值/百分比/ */
	font-size: 25px;
	/* 设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局 */
	/* 形式上，display 属性设置元素的内部和外部的显示类型。 */
	/* 默认值：inline */
	display: inline-block;
	/* 设置行高 */
	line-height: 25px;
	/* 让图像向指定方向浮动 */
	float: left;
	/* 指定段落的左侧或右侧不允许浮动的元素(left/right/both:全部不允许/none:均允许/inherit:规定应该从父元素继承 clear 属性的值) */
	clear: both;
}

5.4 父级边框塌陷问题

当你用到float时就会发现父级边框会塌陷 无法达到效果

解决方法:
  1. 增加父级元素的高度;(不推荐这种方法)
#father{
	border: 1px #438d48 solid;
	height: 600px;
}
  1. 增加一个空的div标签, 清楚浮动
<div class="clear" ></div>
.clear{
	clear: both;
	margin: 0px;
	padding: 0px;
}
  1. 在父级元素中增加一个overflow: hidden;
//在父级元素中增加一个 overflow:hidden
#father{
	border: 1px #438d48 solid;
	/* 指定如果内容溢出一个元素的框，会发生什么 */
	/* scroll/hidden/auto/visible(默认) */
	overflow: hidden;
}
  1. 父类添加一个伪类(推荐使用)

这种方法虽然有些麻烦，但是没有任何副作用，对文件中的其他元素没有任何影响

#father:after{
	content: '';
	display: block;
	clear: both;
}

小结

  1. 浮动元素后面增加空div 简单, 代码中尽量避免空div.

  2. 设置父级元素的高度. 简单, 元素假设有了固定的高度, 就被限制.

  3. overflow 简单, 下拉的一些场景避免使用.

  4. 父类添加一个伪类: after(推荐) 写法稍微复杂些, 但是没有副作用,推荐使用.

5.5 对比

  • display 方向不可以控制
  • 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题~

6.定位

6.1 相对定位(position:relative;)

相对于原来的位置,进行指定的偏移, 相对定位的话, 他仍然在标准文档流中, 原来的位置会被保留.

top: -20px;/*上**/
bottom: -50px; 下
right: -30px; 右
left: -10px;左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位title</title>
		<!-- 相对定位: 相对于原来的位置进行偏移 -->
		<style>
			div{
				margin: 10px;
				padding: 5px;
				font-size: 12px;
				line-height: 25px;
			}
			#father{
				border: 1px solid #666;
			}
			#first{
				background-color: #5555ff;
				border: 1px dashed #bbb232;
				/* 相对定位: 上下左右 */
				position: relative;
				top: -20px;
				right: -30px;
			}
			#second{
				background-color: #d3ffaf;
				border: 1px dashed #77bbae;
			}
			#third{
				background-color: #ff8fb1;
				border: 1px dashed #989aff;
				position: relative;
				bottom: -50px;
				left: -10px;
			}
		</style>
		
	</head>
	<body>
		
		<div id="father">
			<div id="first">第一个盒子</div>
			<div id="second">第二个盒子</div>
			<div id="third">第三个盒子</div>
			
		</div>
	</body>
</html>

练习: 链接卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#father{
				margin: 0px;
				padding: 10px;
				width: 300px;
				height: 300px;
				border: 2px solid red;
			}
			a{
				width: 100px;
				height: 100px;
				text-decoration: none;
				background-color: #ffc653;
				line-height: 100px;
				text-align: center;
				color: white;
				display: block;
			}
			a:hover{
				background-color: #d7ffb7;
			}
			.a2,.a4{
				position: relative;
				left: 200px;
				top: -100px;
			}
			.a5{
				position: relative;
				left: 100px;
				top: -300px;
				background-color: #61ffe5;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<a href="#" class="a1">链接1</a>
			<a href="#" class="a2">链接2</a>
			<a href="#" class="a3">链接3</a>
			<a href="#" class="a4">链接4</a>
			<a href="#" class="a5">链接5</a>
		</div>
	</body>
</html>

6.2 绝对定位(position:absolute;)

定位: 基于xxx定位, 上下左右

  1. 没有父级元素情况下, 相对于浏览器定位.
  2. 假设父级元素存在定位, 我们通常会相对于父级元素进行偏移.
  3. 在父级元素或者浏览器的位置, 进行指定的偏移, 绝对定位的话, 他不存在标准文档流中, 原来的位置不会被保留
<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		
		<style>
			div{
				margin: 10px;
				padding: 5px;
				font-size: 12px;
				line-height: 25px;
			}
			#father{
				border: 1px solid #666;
				position: relative;
			}
			#first{
				background-color: #5555ff;
				border: 1px dashed #bbb232;
			}
			#second{
				background-color: #d3ffaf;
				border: 1px dashed #77bbae;
				position: absolute;
				left: 30px;
			}
			#third{
				background-color: #ff8fb1;
				border: 1px dashed #989aff;
			}
		</style>
	</head>

6.3 固定定位(position: fixed;)

生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

6.4 x-index

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>x-index Title</title>
				<!-- <link rel="stylesheet" href="css/style.css"> -->
		<style>
			#box{
				width: 229px;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				font-size: 12px;
				line-height: 25px;
				border: 1px #000 solid;
			}
			
			ul,li{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			/* 父级元素相对定位 */
			#box ul{
				position: relative;
			}
			
			.tipText, .tipBg{
				position: absolute;
				width: 229px;
				top: 100px;
			}
			.tipText{
				color: #0000ff;
				z-index: 999;
			}
			
			.tipBg{
				background: #000;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/22.png" alt=""></li>
				<li class="tipText">学习服务找狂神</li>
				<li class="tipBg"></li>
				<li>时间: 2023-1-16 18:10:32</li>
				<li>地点: 月球</li>
			</ul>		
		</div>
	</body>
</html>

7.总结

!在这里插入图片描述

这是我在学习狂神说java中的CSS模块的总结, 希望帮到看到此文章的人!

逻辑删
关注
专栏目录
自学前端总结3（自用）-css选择器
DespairA的博客
07-22 160
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
自学CSS的学习总结
04-16
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越...于是CSS便诞生了。css学习的总结：盒子模型，定位，浮动，选择器，动画，
css总结-----我的css文档
weixin_43473114的博客
11-25 778
自学了快一年的前端，总结出自己的一套css文档，供记不起来的时候查看复习。。。 css的三种形式 内联样式 <h1 style="color: #000";>慕课网<.h1> 内嵌样式 <head> <style> h2 { color: #000; } </style> </head> 外...
前端自学第六天——总结CSS进阶
weixin_45762791的博客
03-25 824
1.
DIV+CSS学习笔记总结篇
2401_84153177的博客
04-19 737
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。]( )textarea高度自适应多行溢出省略Retina屏1px线Flexbugs其他IF IE ENDIF条件判断之IE10Chrome 翻译插件网页retina优化常用meta树状菜单em vs remcss vs jscss解决方案（w3cplus）Textures生成纹理CSSgramCsscss（检查重复声明等）附录四 部分工具资源。
前端css之 浮动 自学日记
tnt4399的博客
03-14 701
css提供了三种传统的布局方式（盒子如何排列） 普通流（标准流） 定义：就是盒子按规定的默认方式排列 1.块级元素会独占一行，比如；div, hr, p, h1-h6, ul, ol; 2.行内元素就会按从左到右的方式排列，比如；span, a, i ,em等 浮动 首先有几个问题。 1.为什么需要浮动？ 很多布局标准流无法完成，浮动可以改变原有默认的位置。典型操作：可以把多个块级元素放在一行排列显示。 网页布局口令：多个块级元素纵向找标准流，横向找浮动。 2。什么是浮动？ 属性flo
前端自学 - CSS 小练习
一只小网虫的博客
10-05 524
CSS 小练习 -- 内联元素之间的距离；网页缩放问题；多行文本省略……
微信小程序常用CSS总结
BHSZZY的博客
03-18 4681
前言 本人之前自学并发版了一个微信小程序（TXT音乐播放器），趁着还没忘，把常用的一些CSS样式总结在下方。微信小程序使用的css文件后缀为wcss，总的来说，与html中的css语法大致相同，但还是有一些特别的地方（有一些特有的语法与一些不太支持的语法）。 正文 1.新建一个微信小程序页面时，可以在最外层写一个view标签（类似div标签），然后设置它的css(wcss)样式为： .mainView{ width: 100%; height: 100%; /*生成绝对定位.
前端自学 - CSS总结篇（二）
一只小网虫的博客
10-04 200
本篇文章的大概内容是： 对齐方式（内联元素的对齐 & 块级元素的居中） 盒子模型（标准盒子模型 & 怪异盒子模型） display （行、块元素的使用 & 物体的显示与隐藏） 浮动 以及 float 的清除（清除浮动的方法）
html文件中css插入方式总结
qq_44665162的博客
07-19 3531
直接将我们创建的CSS-study文件夹拖动到vsCode中即可，可以看到vsCode左侧多了一个文件夹，如下图所示： vsCode中自动生成html代码段模板可以用快捷键 ! + tab。生成效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
12-05 8860
1. CSS 简介 CSS 的主要使用场景就是美化网页，布局页面的 1.1 HTML 的局限性 说起 HTML ，他只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这有一个图片，<a> 表示此处有链接。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表（Cascading Style Sheets）的简称 有时我们也称之为 CSS 样
自学css入门路线及总结，一看就会CSS2.mmap
09-14
自学css入门路线及总结，一看就会，快速入门快速上手
自学视频总结css笔记.md
03-23
css笔记自用，如有需要请自取
CSS快速掌握，自学版
10-08
CSS快速掌握，自学版 本资源摘要信息对应的文件信息为“CSS快速掌握，自学版”，它是一本在线笔记，旨在帮助读者从基础开始学习CSS，并逐步掌握高级技术。下面是该资源中的知识点总结： 第1章：CSS简介 * CSS是...
DIV+CSS自学总结手册
11-25
【DIV+CSS自学总结手册】是一本专门为初学者设计的学习指南，旨在帮助新手掌握网页布局的核心技术——HTML的DIV元素和CSS（层叠样式表）。这个压缩包包含了作者在学习过程中积累的宝贵经验和技巧，是经过实践检验的...
css实现四角边框
freedms的博客
09-24 267
【代码】css实现四角边框。
css-functions伪类选择器系列一
Jinuss的博客
09-23 541
CSS伪类选择器：:is()、:not()、:where()、:has()等等介绍
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
最新发布
jjw_zyfx的博客
09-26 317
css 下拉框展示：当hover的时候展示下拉框
【H2O2|全栈】关于CSS（7）CSS基础（六）
过期的H2O2的博客
09-26 916
本系列博客将分享层叠样式表（CSS）有关的知识点。本期主要分享元素显示隐藏、透明度、溢出属性、滚动条、居中布局以及网页的部分结构的编写方法。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
CSS自学笔记：从基础到高级应用详解
本资源是一份关于CSS学习的笔记总结，主要涵盖了CSS的基础概念、语法、引用方式、选择器、选择器分组、继承以及优先级等内容。以下是对这些知识点的详细解析： 1. **CSS介绍**： CSS全称为层叠样式表（Cascading ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值