网页前端第三次培训

---

本文章为记录寒假通过b站学习HTML所得收获   

---

一、学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
 

---

二、了解css的基本使用，知晓基本选择器，组合选择器等几大类别，并跟随视频讲解可以做出建议的颜色修改，也知晓了HTML是css的基本，css在其中主要起到了修饰作用

---

三、

1.css定义

<!--
			css的定义
				1.选择器名：{
					属性名：属性值；
					属性名：属性值；
					...
				}
				注意点：
					1.声明需要使用花括号括起来，每个声明以分号；结尾
					2.一行建议一格声明
					3.如果样式的属性值由多个单词组成，则用引号括起来
				2.css的注释
				/* 注释内容 */
			一、css的三种使用方式
				1.行内样式
					直接写在标签上的样式，在标签上通过上腾娱乐属性定义的样式
				2.内部样式
					定义在style标签中的样式，style标签一般设置在head标签中
				3.外部样式
					定义在外部的cs文件中，通过link标签引入
					<link rel="stylesheet"type="text/css"href="css文件名的路径"/>
				注：当有多重样式时，越精准越优先（就近原则）
		-->

---

---

1.（例句）

<style>
			/* 设置所有的h2标签的文本为红色 */
			h2 {
				color: red;
				font-family: "arial black";
			}
</style>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	    
        <h2>hello world</h2>
		<h2 style="color:red;font-family: 楷体;">hello world</h2>
		<h2>hello world</h2>

2.css基本选择器

<!--
		
		css基本选择器
			1.通用选择器 *
				*{
					属性名：属性值；
					...
				}
			2.元素选择器
			元素名/标签名{
				属性名：属性值；
				...
				}
			3.id选择器 #
				#id属性值{
					属性名：属性值；
					...
				}
			4.类选择器 .
				.class属性值{
					属性名：属性值；
					...
				}
			5.分组选择器
				选择器1,选择器2,选择器3...{
					属性名：属性值；
					...
				}
			css的优先级，是模拟选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级就越高
				元素选择器：1
				类选择器：10
				id选择器：100
				内联选择器：1000
		-->

---

2.(例句)

<style type="text/css">
			/*  通用选择器 *  */
			* {
				color: #00FFFF;
			}

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

			/* id选择器 # */
			#p1{
				background-color: #FAEBD7;
				color:gray;
			}
			
			/* 类选择器 . */
			.cls1{
				font-family: 楷体;
			}
			
			/* 分组选择器 */
			#p1,.cls1,font,span{
				text-decoration: line-through;
			}
		</style>

        <div class="cls1">这是一个div1</div>
		<div>这是一个div1</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>

---

3.组合选择器

<!--
			组合选择器
				后代选择器
					选择指定元素的所有指定后代元素，以空格隔开
					选择器	指定元素{
						属性名：属性值；
						...
					}
			子代选择器
				选择指定元素的第一代元素，以大于号隔开
				选择器>指定元素{
					属性名:属性值；
					...
				}
			相邻兄弟选择器（只会找一个）
				选择指定元素的下一个指定元素，两者有相同的父元素以加号隔开
				选择器+指定元素{
					属性名:属性值；
					...
				}
			普通兄弟选择器
				选择指定元素后面的所有指定元素，波浪号隔开
				选择器~指定元素{
					属性名:属性值；
					...
				}
				
		-->

---

3.（例句）

<style type="text/css">
			/*	后代选择器	*/
			.food li {
				border: #9ACD32 slateblue 1px;
			}

			/*	子代选择器	*/
			#food2> li {
				border: palegoldenrod dotted 1px;
			}
			
			/*	相邻兄弟选择器	*/
			#mydiv+div{
				background-color: #808080;
			}
			
			/*	普通兄弟选择器	*/
			#mydiv2  ~	div{
				background-color: #aa55ff;
			}
			
		</style>

<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 id='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>
		<p>Test</p>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
		
		<hr>
		<div>普通兄弟选择器1</div>
		<div id="mydiv2">普通兄弟选择器2</div>
		<p>Test</p>
		<div>普通兄弟选择器3</div>
		<div>普通兄弟选择器4</div>

---