CSS

CSS-->层叠样式表就是给HTML标签修改样式

一、语法结构：

选择器{
属性名1:属性值1
属性名:属性值2
}

二、注释语法

/*注释内容*/

三、引入样式

1、style内部直接编写css内容-->平时学习，练习的时候推荐使用
2、link标签外引入外部css文件-->正式工作，实际生产环境推荐使用
3、标签内直接书写-->一般情况下不推荐使用
⚠️：单独开设的css文件内代码也是非常多的，可以借助于注释管理
/导航条样式/或者是/侧边栏样式/

四、基本选择器

1、标签选择器-->通过标签名直接查找
/\*查找所有的p标签\*/
p {
  color：red；
}
2、类选择器（关键符号为句点符.）-->通过class值查找标签
/\*查找所有含有c1样式类的标签\*/
.c1 {
  color：red；    
}
3、id选择器（关键符号为井号#）-->通过id值查找标签
/\*查找所有id为d1标签\*/
#d1 {
  color：red；
}
4、通用选择器（关键符号为*）
/\*选择器内所有的标签\*/
\* {
  color：red；
}

五、组合选择器

1、后代选择器（符号为空格）
/\*查找div内所有的后代span\*/
div span {
color：red；
}
2、儿子选择器（符号为>）
/\*查找div内部所有儿子span\*/
div>span {
color：green；
}
3、毗邻选择器（符号为+）
/\*查找同级别下面紧挨着的第一个span\*/
div + span {
color：pink；
}
4、弟弟选择器（符号为～）
/\*查找同一级别下所有的span（不需要紧挨着）\*/
div ～ span {
color：pink；
}

六、属性选择器-->标签可以有默认的属性也可以有自定义属性

（符号为[]）

<p> id="d1" class="c1" name="judy" pwd="123</p>  
1、/\*查找含有的pwd属性的标签\*/
[pwd] {
color：pink;
}
2、/\*查找含有的pwd属性并且值为judy的标签\*/
[pwd="123"] {
color：red；
}
3、/\*查找含有的pwd属性并且值为judy的p标签\*/
p[pwd="123"] {
color：red；
}

七、分组和嵌套

1、多个相同的选择器并列使用
div，span，p {
/\*查找div或span或p标签\*/
}
2、多个不同选择器并列使用
div，#d1，.c1 {
/\*标签查找div，id查找d1，类查找c1\*/
}
3、不并列同样可以使用组合选择器
.c1 p{
/\*查找class为c1的后代标签p标签\*/
}
4、直接筛选
div#d1 {
/\*查找id为d1的div标签\*/
}

八、伪类选择器

1、/\*鼠标悬浮在上面\*/
a：hover {
color:orange;
}
a标签默认颜色是会发生变化的，第一次是蓝色，后面是紫色
2、/\*input框foucs状态的颜色\*/
input：foucs{
background-color:red;
}

-->我们将input狂被用户点击的即将录入数据的过程看成是foucs状态。

九、伪元素选择器

1、首字调整-->也是一种文档布局的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习css</title>
	<style>
		p:first-letter # 调整首字{
			font-size: 48px; #这是自提大小
			color: pink; #这是自提颜色
	}

	</style>
</head>
<body>
<p>这是一个很厉害的网页</p>
</body>
</html>

2、在文本的前面通过css动态渲染文本-->特殊文本

   <style>
	p:before{
		content: "hey judy";
		color: blanchedalmond;
	}

	</style>

3、在文本的后面通过css动态添加，上面代码before改成after就可以了

十、选择器的优先级

1、相同选择器不同倒入方式：选择器遵循就近原则从上往下谁离标签更近就采用哪个选择器
2、不同选择器的优先级是根据精确度而来的：
行内选择器>id选择器>类选择器>标签选择器

十一、字体相关

1、宽和高
只有块儿级标签可以设置，行内标签无法设置

	<style>
   p{
	   height: 100px;
	   width: 100px;
   }
	</style>

2、字体大小

 <style>
   p{
	   font-size: 50px;
   }
	</style>

3、字体粗细

   <style>
   p{
	   font-weight: bolder;
	   /*font-weight: lighter ;*/
   }
	</style>

4、文本颜色

	<style>
   p{
	   color: darkred; /*第一种*/
	   /*color: #b02929; /*第二种*/
	   /*color: rgb(176,41,41);*/ /*第三种*/
	   /*color: rgba(176,41,41,0.2);*/ /*最后一个参数调整透明度（0-1）*/
   }
	</style>

5、文字对齐

 p{
	  text-align: center; /*居中展示*/
   }
	</style>

6、文字装饰

	<style>
   p{
	  text-align: center; /*居中展示*/
   }
   a{
	   text-decoration: none; /*主要用于去a标签的下划线*/
   }
	</style>
</head>
<body>
<p>这是一个很厉害的网页</p>
<a href="https://www.baidu.com">我是百度</a>
</body>

7、首行缩进

	<style>
		p{
			text-indent: 30px;
		}
	</style>

十二、背景属性

	<style>
	   body{
		   /*background-color: blanchedalmond;*/
		   /*background-image: url("图片地址");*/
		   /*background-repeat: no-repeat; */ /*是否铺满*/
		   /*background-position: left;*/
		   /*多个属性名前缀相同的话，那么是可以简写的*/
		   /*background: orangered url(""); !*一个个编写即可*!*/
	   }
	</style>

⚠️ 如何实时修改图片的位置
-->浏览器找到标签的css代码，然后方向键上下按住即可动态调整

十三边框属性

	<style>
	p{
		/*border-left-color: darkred;*/
		/*border-left-style: solid;*/
		/*border-left-width: 4px;*/
		/*多个属性有相同前缀的时候，一般可以简写*/
		/*border-left: 4px darkred solid*/ /*是没有顺序的哦*/
		/*border-bottom-color: orangered;*/
		/*border-bottom-style: dashed;*/
		/*border-bottom-width: thin;*/
		/*border-bottom: thin orangered dashed*/ /*是没有顺序的哦*/
		/*其他两边也是一样的*/
	}
	div{
		/*height: 500px;*/
		/*width: 500px;*/
		/*border: 5px solid orangered;*/
		/*画圈-->要注意的是长和高必须是一样的不然没办法画出正圆*/
		/*border-radius: 50%;*/
	}
	</style>

十三、display属性

display属性属于定义建立布局时元素生成的现实狂类型，inline是行内元素，block是块元素，display属性可以定义显示狂是行内元素还是块元素

🌼 第一个例子块元素显示成行内元素

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小练习</title>
	<style>
	p{
		display: inline; /*将p这个块标签变成了行内标签*/
	}
	</style>
</head>
<body>
<p>本例子是把块元素变成行内元素</p>
<p>我本来应该在下一行显示但是我在上一行显示了</p>
</body>
</html>

🌹 结果

🌼 第二个例子-->把行内元素变成块状元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小练习</title>
	<style>
	span{
		border: orangered solid 1px;
		display: inline; /*将span这个行内标签变成了块标签*/
	}
	</style>
</head>
<body>
<p>本例子是把行内元素变成块状元素</p>
<span>我在第一行</span>
<span>本来我应该在第一行，我却在第二行</span>
</body>
</html>

🌹 结果

🌼 第三个例子-->隐藏标签：页面上看不见也不再占用页面位置，但是通过浏览器查找标签是可以看到的

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>小练习</title>-->
<!--    <style>-->
<!--    p{-->
<!--        display: none;-->
<!--    }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<p>行内块状标签就是我</p>-->
<!--</body>-->
<!--</html>-->

🌼 第四个例子-->行内块状元素

<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>小练习</title>-->
<!--    <style>-->
<!--    span{-->
<!--        display: inline-block;-->
<!--        height: 100px;-->
<!--        width: 100px;-->
<!--        font-size: 36px;-->
<!--        text-align: center;-->
<!--        color: goldenrod;-->

<!--    }-->
<!--    #s1{-->
<!--        background: orange;-->
<!--    }-->
<!--    #s2{-->
<!--        background: orangered;-->
<!--    }-->
<!--    #s3{-->
<!--        background: darkred;-->
<!--    }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<span id="s1">新</span>-->
<!--<span id="s2">年</span>-->
<!--<span id="s3">好</span>-->
<!--</body>-->
<!--</html>