第三次网页前端培训笔记

最新推荐文章于 2024-10-16 11:23:07 发布

wewqeqwwq1

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量59

点赞数

文章标签：前端 html linq

本文链接：https://blog.csdn.net/wewqeqwwq1/article/details/122799846

版权

一、CSS的基本使用

1.CSS定义：选择器名{

属性名:属性值;

........

}

二.CSS的注释
/*注释内容*/

<style>
			h2{
				color: red;
			}
			/* 内部样式 */
		</style>

三.css的基本使用
               css的三种使用方式：
                   1.行内样式
                       直接写在标签上的形式，在标签上通过style属性定义的样式

<h2 style="color: #8A2BE2;">Hello World</h2>

2.内部样式
定义在style标签中的形式，style标签一般设置在head标签中

<style>
			h2{
				color: red;
			}
			/* 内部样式 */
		</style>

3.外部样式
                       定义在外部的css文件中，通过link标签引入

                       注：当有多重样式时，越精确越优先（就近原则）

h2{
	font-size: 20px;
}

<head>
		<meta charset="utf-8">
		<title>css使用</title>
		<!-- 内部样式 -->
		<style>
			h2{
				color: red;
			}
			/* 内部样式 */
		</style>
		<link rel="stylesheet" type="text/css" href="01.css"/>

二、选择器的选择
               1.通用选择器 *
               *{
                   属性名:属性值;
                   .....
               }

/*通用选择器*/
			*{
				color: blueviolet;
			}

2.元素选择器
                   元素名/标签名{
                       属性名:属性值;
                       ....
                   }

/*元素选择器*/
			div{
				font-size: 40px;
			}

3.id选择器
                   #id属性名{
                       属性名:属性值;
                       ....
                   }

/*id选择器*/
			#p1{
				font-size: 50px;
			}

4.类选择器
                   .class属性值{
                       属性名:属性值;
                       ....
                   }

/*类选择器*/
			.cls{
				font-family: 楷体;
			}

5.分组选择器
                   选择器1,选择器2,选择器3,...{

                   }

/* 分组选择器 */
			#p1,.cls,font{
				text-decoration: line-through;
			}

三、css组合选择器

1.后代选择器
                   选择指定元素的所有指定后代元素，以空格隔开
                   选择器指定元素{
                       属性名:属性值;
                       ...
                   }

/* 后代选择器 */
		.food li{
			border: chartreuse solid 1px;
		}

2.子代选择器
                   选择指定元素的第一代元素，以>号隔开
                   选择器 > 指定元素{
                       属性名:属性值;
                       ...
                   }

/* 子代选择器 */
		.food2 > li{
			border: #FF0000 dotted 1px;
		}

3.相邻兄弟选择器
                   选择指定元素后面的的下一个指定元素(只会找一个)，两者有相同父元素，以加号相隔
                   选择器 + 指定元素{
                       属性名:属性值;
                       ...
                   }

/* 相邻兄弟选择器 */
		#mydiv + div{
			background-color: #7FFF00;
		}

4.普通兄弟选择器
                   选择指定元素后面的所有指定元素，两者有相同父元素，以波浪号相隔
                   选择器 ~ 指定元素{
                       属性名:属性值;
                       ...
                   }

/* 普通相邻兄弟选择器 */
		#mydiv2 ~ div{
			background-color: #FF0000;
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组合选择器</title>
		<style type="text/css">
		/* 后代选择器 */
		.food li{
			border: chartreuse solid 1px;
		}
		/* 子代选择器 */
		.food2 > li{
			border: #FF0000 dotted 1px;
		}
		/* 相邻兄弟选择器 */
		#mydiv + div{
			background-color: #7FFF00;
		}
		/* 普通相邻兄弟选择器 */
		#mydiv2 ~ div{
			background-color: #FF0000;
		}
		</style>
	</head>
	<body>
		<!--
			组合选择器
				1.后代选择器
					选择指定元素的所有指定后代元素，以空格隔开
					选择器 指定元素{
						属性名:属性值;
						...
					}
				2.子代选择器
					选择指定元素的第一代元素，以>号隔开
					选择器 > 指定元素{
						属性名:属性值;
						...
					}
				3.相邻兄弟选择器
					选择指定元素后面的的下一个指定元素(只会找一个)，两者有相同父元素，以加号相隔
					选择器 + 指定元素{
						属性名:属性值;
						...
					}
				4.普通兄弟选择器
					选择指定元素后面的所有指定元素，两者有相同父元素，以波浪号相隔
					选择器 ~ 指定元素{
						属性名:属性值;
						...
					}
		 -->
		 <!-- 获取class属性值时food的元素的所有对应li列表项 -->
		<ul class="food">
			<li>水果
				<ul>
					<li>火龙果</li>
					<li>西瓜</li>
					<li>柚子</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>生菜</li>
					<li>西兰花</li>
					<li>橄榄</li>
				</ul>
			</li>
		</ul>
		<hr />
		<ul class="food2">
			<li>水果
				<ul>
					<li>火龙果</li>
					<li>西瓜</li>
					<li>柚子</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>生菜</li>
					<li>西兰花</li>
					<li>橄榄</li>
				</ul>
			</li>
		</ul>
		<hr />
		<div>这是一个相邻兄弟选择器1</div>
		<div id="mydiv">这是一个相邻兄弟选择器2</div>
		<div>这是一个相邻兄弟选择器3</div>
		<div>这是一个相邻兄弟选择器4</div>
		<hr />
		<div>这是一个相邻兄弟选择器1</div>
		<div id="mydiv2">这是一个相邻兄弟选择器2</div>
		<div>这是一个相邻兄弟选择器3</div>
		<div>这是一个相邻兄弟选择器4</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			/*通用选择器*/
			*{
				color: blueviolet;
			}
			/*元素选择器*/
			div{
				font-size: 40px;
			}
			/*id选择器*/
			#p1{
				font-size: 50px;
			}
			/*类选择器*/
			.cls{
				font-family: 楷体;
			}
			/* 分组选择器 */
			#p1,.cls,font{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<!--
			CSS基本选择器
				1.通用选择器 *
				*{
					属性名:属性值;
					.....
				}
				2.元素选择器
					元素名/标签名{
						属性名:属性值;
						....
					}
				3.id选择器
					#id属性名{
						属性名:属性值;
						....
					}
				4.类选择器
					.class属性值{
						属性名:属性值;
						....
					}
				5.分组选择器
					选择器1,选择器2,选择器3,...{
						
					}
				CSS选择器优先级
				元素选择器：1
				类选择器：10
				id选择器：100
				内部样式：1000
				
		-->
		<div class="cls">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls">这是一个span</span>
		<br>
		<font>这是一个font</font>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css使用</title>
		<!-- 内部样式 -->
		<style>
			h2{
				color: red;
			}
			/* 内部样式 */
		</style>
		<link rel="stylesheet" type="text/css" href="01.css"/>
	</head>
	<body>
		<!--
			一.CSS定义
				选择器名{
					属性名:属性值;
					属性名:属性值;
				}
			二.CSS的注释
			/*注释内容*/
			三.css的基本使用
				css的三种使用方式：
					1.行内样式
						直接写在标签上的形式，在标签上通过style属性定义的样式 
					2.内部样式
						定义在style标签中的形式，style标签一般设置在head标签中
					3.外部样式
						定义在外部的css文件中，通过link标签引入
						
						注：当有多重样式时，越精确越优先（就近原则）
		-->
		<h2>Hello World</h2>
		
		<h2 style="color: #8A2BE2;">Hello World</h2>
	</body>
</html>