前端基础知识——CSS

程序员文章站 2024-03-17 11:29:22

...

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>

代码演示结果
前端基础知识——CSS
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>

代码演示结果：
前端基础知识——CSS

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>

代码演示结果：
前端基础知识——CSS

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>

代码演示结果：
前端基础知识——CSS

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>

代码演示结果：
前端基础知识——CSS

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>

代码演示结果：
前端基础知识——CSS

前端基础知识——CSS

Day07–CSS

前端基础知识——CSS

Web前端入门基础知识（HTML+CSS+JS）

前端和java后台的数据交互

交互-前端js页面调用原生的方法

前端基础知识点

js获取、设置元素css属性值

html基础知识点列表

web前端——4 JavaScript代码画图（菱形）

前端CSS基础知识

web前端基础知识，html+css