Num.04-CSS基础

最新推荐文章于 2023-03-20 15:46:53 发布

原创最新推荐文章于 2023-03-20 15:46:53 发布 · 255 阅读

CC 4.0 BY-SA版权

CSS基础

背景

属性	作用
background-color	设置背景颜色
background-image	设置背景图片（默认横向纵向平铺）
background-repeat	设置平铺，no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向平铺，round图片自动缩放适应填满整个容器，space图片以相同的间距平铺填满整个容器

背景位置

如果背景不设置平铺，可能就会有多余的空间，这个时候可以设置背景图片的位置
设置背景图片位置的属性：background-position
值：（默认左上角）

利用方位名词
左left、右right、上top、下bottom、中center、左上left top、右上right top、左下left bottom、右下right bottom、左中left center、中中center center、右中right center、上中top center、下中bottom center (如果方位名词只写一个，另外一个默认为center)
精确单位第一个值为x坐标，第二个值为y坐标，0 0点在左上角，往右为x轴，往下为y轴
混搭
例：
center 10px 水平居中，y为10px
10px center垂直居中，x为10px

背景附着

设置背景附着的属性background-attachment
值：
scroll：背景图像随对象内容滚动（默认值）
fixed：背景图像固定

背景简写

官方并没有强制要求，但是按照可读性可以按一下顺序写
background:背景颜色背景图片地址背景平铺背景附着背景位置

背景透明

背景透明设置:
background: rgba(0,0,0,0.3)

背景图片缩放

设置背景图片的尺寸的属性：background-size
值：

宽度高度（最好只改一个值，防止缩放失真）
百分比
cover：铺满整个容器，溢出部分会被隐藏，好处不会造成图片失真，会造成图片不完整（使用较多）
contain：自动缩放图片尽量铺满容器，保证图片完整，但是会有部分无法覆盖（当高度或宽度有一个与容器一样大，就不再缩放）

多张背景图片

格式：
background: url(图片1路劲) 图片位置，url(图片2路径) 图片位置，。。。url(图片n路径) 图片位置背景颜色

一个元素可以设置多背景图像
每组属性之间使用，分隔
如果多个背景图片之间存在交集，那么前面的图片就会覆盖后面的图片
为避免背景颜色将图片覆盖，背景颜色通常定义在最后一组

凹凸文字效果

通过文字阴影实现

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				background-color: #ccc;
			}
			div {
				color: #ccc;
				font: 700 80px "微软雅黑";
			}
			div:first-child {
				/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
				text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
			}
			div:last-child {
				text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<div>我是凸起文字</div>
		<div>我是凹下文字</div>
	</body>

王者荣耀官网导航栏案例

补充知识：
链接标签a的修饰text-decoration

值	作用
none	没有下划线
underline	下划线(默认)
overline	上划线
line-through	删除线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				background-color: black;
			}
			a {
				display: inline-block;	/*把a行内元素转为行内块元素*/
				width: 200px;
				height: 50px;
				
				text-align: center;		/*文字水平居中*/
				color: white;
				line-height: 50px;		/*技巧，当容器内只有一行文字时，设置文字高度为容器高度就能达到文字垂直居中的效果*/
				text-decoration: none;	/*删除下划线*/
			}
			a:hover {/*鼠标经过*/
				background: orange;		
			}
		</style>
	</head>
	<body>
		<a href="#">专区说明</a>
		<a href="#">申请资格</a>
		<a href="#">奖励兑换</a>
		<a href="#">下载游戏</a>
	</body>
</html>

CSS的三大特性

CSS的层叠性

一般情况下，如果出现样式冲突，则会按照CSS的书写的顺序，以最后的样式为准
例如：

	div {
		color: red;
	}
	div {
		color: pink;
	}

最后显示的颜色为pink

CSS的继承性

书写CSS样式表时，子标签会继承父标签的某些样式，如字体，颜色，字号，行距等
例如：

	<head>
		<style type="text/css">
			div {
				color: pink;
				font-size: 28px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>花花，你好</p>
		</div>
	</body>

在没有给p标签指定样式的情况下，p标签里的内容继承了父标签div的样式

CSS的优先级

选择器	权重
标签选择器	0001
类选择器，伪类选择器	0010
id选择器	0100
行内样式表	1000
！important	∞无穷大

最后一个举例：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				color: red!important;
			}
			div {
				color: pink;
				font-size: 28px;
			}
			
		</style>
	</head>
	<body>
		<div>
			花花，你好
		</div>
	</body>

字为红色，大小28px

权重的叠加

例如：

div ul li	0 0 0 3
.nav ul li	0 0 1 2
a:hover	0 0 1 1
a:hover	0 0 1 1
.nav a	0 0 1 1
#nav a	0 1 0 1

注意：

权重的数位之间是没有进制的，级别之间不可超越，比如0 0 0 5 + 0 0 0 5 = 0 0 0 1 0而不是0 0 1 0，所以不会存在10个标签选择器跟类选择器的权重一样的情况
子类标签继承父类标签的样式，继承过来的权重为0 0 0 0

练一练

第一题：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father #son {
				color: blue;
			}
			#father p.c2 {
				color: black;
			}
			div.c1 p.c2 {
				color: red;
			}
			#father {
				color: green!important;
			}
		</style>
	</head>
	<body>
		<div class="c1" id="father">
			<p class="c2" id="son">试问这行字体是什么颜色</p>
		</div>
	</body>

答案：blue
第二题：

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father {
				color: red;
			}
			p {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色？</p>
		</div>
	</body>

答案：blue
第三题：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div p {
				color: red;
			}
			#father {
				color: red;
			}
			p.c2 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p class="c2">试问这行字体是什么颜色？</p>
		</div>
	</body>

答案：blue
第四题：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div div {
				color: blue;
			}
			div {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>试问这行字体是什么颜色？</div>
			</div>
		</div>
	</body>

答案：blue
第五题：

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div div div div div div div div div div div div {
				color: red;
			}
			.me {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div>
													<div class="me">试问这行字体是什么颜色？</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

答案：blue
第六题：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.c1 .c2 div {
				color: blue;
			}
			div #box3 {
				color: green;
			}
			#box1 div {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box1" class="c1">
			<div id="box2" class="c2">
				<div id="box3" class="c3">文字</div>
			</div>
		</div>
	</body>

答案：yellow