首页 > 其他分享> 文章详细

前端基础知识——CSS

2021-10-06 18:59:08 阅读：135 来源： 互联网

标签：权重 color 背景前端基础知识 background div CSS

Day07–CSS

一、内容补充

因为只有文字组成段落，所以在p标签中不能再放块级元素。同理还有h标签。
链接不能再放链接
a标签中可以放块级元素

二、CSS三大特性
1、层叠性

特点：
（1）样式冲突时，遵循的原则是就近原则，挨着结构近的执行；
（2）样式不冲突时，不会层叠。

2、继承性

孩子可以继承父类的属性：
（1）以font-开头的（font-size font-family font-style font-weight）
（2）以text-开头的（color text-align text-decoration text-indent）
（3）以line-开头的（line-height）

3、优先级

用一个四位的数表示，更像四个级别，值从左到右，左面最大，一级大于一级，数位之间没有进制，级别之间不可超越

（1）标签选择器的权重值 0,0，0,1
（2）类选择器的权重值 0,0，1,0
（3）id选择器的权重值 0,1，0,0
（4）行内样式的权重值 1,0，0,0
（5）继承或者*的权重值 0,0，0,0
（6）！important的权重值无穷大
（7）权重是可以叠加的，比如0001+0001=0002
（8）继承的权重是0

注意：
（1）当权重相同时，采用就近原则
（2）当权重不同时，需要看权重

三、CSS背景

背景颜色 background-color
背景图片 background-image
背景平铺 background-repeat

repeat：背景图像在纵向和横向上平铺。默认的。
no-repeat：图像背景不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺

背景位置 background-position

（1）当属性值写方位名词时，写两个，他们之间是没有顺序的。
（2）当属性值写方位名词时，如果只写一个方位名词，另一个默认居中。
（3）当属性值写具体的值px，必须先写x轴，后写y轴，不能颠倒顺序。

背景附着 background-attachment

（1）属性值 scroll fixed

背景连写 background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景透明 background：rgba（0,0，0,0.3）

0.3代表的是透明度
alpha取值范围 0—1

1、CSS优先级第1题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第1题</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 id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

代码演示结果
在这里插入图片描述
2、CSS优先级第2题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第2题</title>
		<style type="text/css">
			#father{
				color:red;
			}
			p{
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

代码演示结果：
在这里插入图片描述

3、CSS优先级第3题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第3题</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>
</html>

代码演示结果：
在这里插入图片描述

4、CSS优先级第4题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第4题</title>
		<style type="text/css">
			div div{ 
				color:blue;
			}
			div{
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

代码演示结果：
在这里插入图片描述

5、CSS优先级第5题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</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>
</html>

代码演示结果：
在这里插入图片描述

6、CSS优先级第6题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</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>
</html>

代码演示结果：
在这里插入图片描述

标签：权重,color,背景,前端,基础知识,background,div,CSS
来源： https://blog.csdn.net/m0_47224321/article/details/120627667

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端基础知识——CSS

Day07–CSS