01 css 须知&标签查找

css 须知&标签查找

1. css注释

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

2. css语法结构

# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

3. css三种引入方式

1.style标签内部直接书写(在head标签里面书写)
	<style>
	h1  {
	color: burlywood;
	}
	</style>

2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">

3.行内式(一般不用)
<h1 style="color: green">hello css</h1>

4. css选择器（标签查找）

4.1 基础选择器

4.1.1 id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础选择器-id选择器</title>
		<style>
			/*样式#定义，结构id调用、只能调用一次、被人不可调用*/
			#yellow {
				color: yellow;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id='yellow'>wesley</div>
		<!--linda不可调用yellow选择器-->
		<!--		<div id='yellow'>linda</div>    -->
	</body>
</html>

4.1.2 类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础选择器-类选择器</title>
		<style>
			/*类选择：样式点定义 结构类class调用 一个或多个 开发最常用*/
			/*.类名{属性：值}*/
			.yellow {
				color: yellow;
			}
			.div1 {
				color: pink;
			}
		</style>
	</head>
	<body>
		<p class="yellow">1</p>
		<p>2</p>
		<p>3</p>
		<div class="yellow">4</div>
		<div class="div1">5</div>
		<div>6</div>
	</body>
</html>

4.1.3 元素/标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础选择器-标签选择器</title>
		<style>
			/*标签选择器{属性：值}*/
			p {
				color: green;
			}
			div {
				color: pink;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<div>4</div>
		<div>5</div>
		<div>6</div>
	</body>
</html>

4.1.4 通用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础选择器-通配符选择器</title>
		<style>
			/*下面不需要调用*/
			/* *将html body div span ul 所有的标签都改成红色 */
			* {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>hhh</div>
		<span>ddd</span>
		<ul>
			<li>fsdf</li>
			<li>ffff</li>
		</ul>
	</body>
</html>

4.2 组合选择器

  • 后代选择器(标签内的全部） div span 空格
  • 儿子选择器（第一层第一次嵌套的全部） div>span
  • 毗邻选择器（同级别下的第一个） div+span
  • 弟弟选择器（同级别下的全部） div~span
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		/*后代选择器*/
		div span {
			color: red;
		}
		
		/*儿子选择器*/
		/*div>span {
			color: yellowgreen;
		}*/
		
		/*/*毗邻选择器    同级别紧挨着的下面第一个*/
		/*div+span {
			color: navajowhite;
		}*/*/
		
		/*弟弟选择器    同级别下面所有的span*/
		/*div~span {
			color: royalblue;
		}*/
	</style>
	<body>
		<span>span1</span>
		<span>span2</span>
		<div style="background: yellow;">div
			<p>div p</p>
			<p>div p
				<span>div p span</span>
			</p>
			<span>span</span>
			<span>span</span>
		</div>
		<span>span</span>
		<span>span</span>
		<p>p</p>
		<span>span</span>
	</body>
</html>

4.3 属性选择器

  • []作为标志
  1. 含有某个属性
  2. 含有某个属性并且有某个值
  3. 含有某个属性并且有某个值的某个标签
  4. 越来越精确
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*将所有属性名是username的标签背景色改色*/
			/*[username] {  
				background-color: firebrick;
			}*/
			
			/*[username='wesley'] {
				background-color: firebrick;
			}*/
			
			input[username='wesley'] {
				background-color: firebrick;
			}
		</style>
	</head>
	<body>
		<!--属性选择器
			1. 含有某个属性
			2. 含有某个属性并且有某个值
			3. 含有某个属性并且有某个值的某个标签
			[]作为标志
		-->
		<input type="text" username/>
		<input type="text" username='wesley' />
		<input type="text" username='linda' />
		<p username='leo'>leo</p>
		<div username='lalala'>lalala</div>
		<span username='wesley'>lalalalala</span>
	</body>
</html>

5. 分组与嵌套

  • ,（逗号） 是同级别关系 并列的意思
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*  , 是同级别关系 并列的意思*/
			/*div,p,span {
				color: yellow;
			}*/

			#d1,.c1,span {
				color: hotpink;
			}
		</style>
	</head>
	<body>
		<div id='d1'>div
		<p>div>p</p>
		</div>
		<p class='c1'>p</p>
		<span>span</span>
	</body>
</html>

6. 伪类选择器

  • 点击过后就无效了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>
			a:link {
				color: blueviolet      /*初始*/
			}
			a:hover {
				color: aqua;   /*鼠标悬浮*/
			}
			a:active {
				color: black;   /*鼠标点击不松开*/
			} 
			a:visited {
				color: gray;    /*  点击过后*/
			}

			input:focus {       /*获取焦点 点文本框*/
				background-color: royalblue;
			}
		</style>
	</head>
	<body>
		<a href="https://www.jd.com">百度</a>
		<input type="text" />

	</body>
</html>

7. 伪元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素选择器</title>
		<style>
			/*第一个字调样式*/
			/*p:first-letter {
				font-size: 48px;
				color: orange;
			}*/
			/*通过css在文本前加文本， 鼠标不能选择*/
			/*before和after通常用来除掉浮动带来的影响：父标签塌陷问题*/
			p:before {
				content: '你说得对';
				color: orange;
			}
			/*后面加文本*/
			p:after {
				content: '?';
				color: orange;
			}
		</style>
	</head>
	<body>
		<p>猪bongbongbong</p>
	</body>

</html>

8. 选择器优先级

1.选择器相同 书写顺序不同
	就近原则:谁离标签更近就听谁的
2.选择器不同 ...
	行内 > id选择器  > 类选择器 > 标签选择器
posted @ 2021-08-09 16:35  超暖  阅读(126)  评论(0)    收藏  举报