前端学习笔记day02--CSS

最新推荐文章于 2024-08-15 23:15:17 发布

m0_38077048

最新推荐文章于 2024-08-15 23:15:17 发布

阅读量263

点赞数

分类专栏：学习自用文章标签： html html5

本文链接：https://blog.csdn.net/m0_38077048/article/details/108851959

版权

学习自用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括CSS的作用、与HTML的结合方式（行内样式、内部样式、外部样式）、样式的优先级。接着，详细阐述了CSS选择器，包括基本选择器（标签、ID、类、全局、并集）及其优先级，以及高级选择器（DOM关系、层次选择器、结构伪类选择器和属性选择器）。通过实例解析了各种选择器的用法和效果，帮助读者深入理解CSS在网页美化和布局中的应用。

摘要由CSDN通过智能技术生成

前端学习笔记day02–CSS

一、CSS知识
CSS（cascading style sheet）：层叠样式表（级联样式表）
作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。

二、CSS和html结合

写法：
				选择器{
					声明；（属性名：属性值；）
				}

1.行内样式
行内样式作用域小，只作用于行内。style属性：style=""

		属性值 == 样式属性名：属性值；样式属性名：属性值；

color:red;字体颜色，font-size:数字px 字体大小。

		<h1 style="color:red;font-size: 4px;">123</h1>

在这里插入图片描述

2.内部样式
作用域在当前页面，实现了内容和样式的初步分离。在head标签内，写style标签。

				选择器{
					属性名：属性值;
					属性名：属性值;
				}

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{
				color:blue;
				font-size:50px;
			}
		</style>
	</head>
	
	<body>
		<h1>1312312</h1>
		<h1>241</h1>
	</body>

在这里插入图片描述

3.外部样式
作用域是所有页面。
首先创建一个.css文件，不用写style标签，直接写选择器：

				h1{
					color:blue;
					font-size: 20px;
				}

然后在.html文件的head中写一个。用href属性配置CSS文件；rel表示连接的文件是什么类型的，默认为rel="stylesheet"，样式表。

		<link rel="stylesheet" href="CSS/test.css" />
		<style>
			@import url("CSS/test.css");
		</style>

在这里插入图片描述
除了link标签，还有另一种调用方式。

		<style>
			@import url("CSS/test.css");
		</style>

两种方式在加载时不同。<link/>先把CSS导入到html中，结构和样式同时显示；@import先加载html，后用CSS渲染。

4.样式的优先级
如果一个页面同时用了多种样式方法，我们需要知道哪个样式会起作用，也就是哪个样式的优先级更高。
行内样式 > 内部样式 > 外部样式
优先级存在就近原则。

三、CSS选择器
1.基本选择器
（1）标签选择器
在head中写，标签中写一个p选择器。该选择器可以在中选中所有p标签。同样的，如果想选中<a>或者<h1>，写相应的选择器即可。

	<style>
		p{
			color:red;
		}
		
		a{
			color:blue;
		}
	</style>
		
	<body>
		<p>
			123
		</p>
		
		<h1>
			456
		</h1>
		
		<a>
			789
		</a>
	</body>

在这里插入图片描述

（2）id选择器
在中需要添加id的元素中添加id，如：<h1 id="title">456</h1> ，然后在head中写<style></style> ，标签中写一个#id格式的选择器，该选择器可以唯一的选择一个元素，注意id不能用数字作开头。

			<style>
				#title{
					color:red;
				}
			</style>
		
			<body>
				<h1 id="title">456</h1>
			</body>

在这里插入图片描述

（3）类选择器
类选择器选中的是带有class属性的元素，同一个class属性可作用在多个元素上。
在选中的元素中添加class属性：class=""，在head中写<style></style> ，标签中写.class属性值的选择器，该选择器会选中带有相同class属性值的所有元素。

			<style>
				.red{
					color:red;
				}
			</style>
		
			<body>
				<h1 class="red">h1标签</h1>
				<p class="red">p标签</p>
			</body>

在这里插入图片描述

（4）全局选择器
在head中写<style></style>，在标签中写一个*选择器。全局选择器可以选中页面内所有的元素，不区分元素类型。

		<style>
			*{
				color:green;
			}
		</style>

		<body>
			<a>a</a>
			<p>p</p>
			<h1>h1</h1>
		</body>

在这里插入图片描述

（5）并集选择器
结合了标签选择器和id选择器的功能，写选择器时将标签和id标签用逗号隔开，可以写多个标签作为选择器。

		<style>
			a,p,#qwe{
				color:gold;
			}
		</style>

		<body>
			<a>a</a>
			<p>p</p>
			<h1 id="qwe">123</h1>
		</body>

在这里插入图片描述

（6）选择器的优先级

							id选择器 > 类选择器 > 标签选择器

		<style>
			/*类选择器*/
			.red{
				color:blue;
			}
			
			/*id选择器*/
			#qwe{
				color:brown;
			}
			
			/*标签选择器*/
			a{
				color:pink;
			}
		</style>

		<body>
			<b><a class="red" id="qwe">123</a></b>
		</body>

2.高级选择器
（1）DOM文档对象模型
我们可以画出一个DOM树状结构，它可以主观地体现出对象之间的层次关系。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
	</body>
</html>

在这里插入图片描述关系：
1）父子关系：如果将html当作父亲，那么head和body就是子代；head当作父亲的话，meta和title就是子代。
2）后代关系：有直接联系的都属于后代关系。如：body下的p、ul、li、li下的p都是body的后代。
3）兄弟关系：同一代，如meta和title。

（2）层次选择器
选择器需要写在head下的style标签中。
1）后代选择器：前代和后代之间有一个空格，空格表示后代关系。

							<style>	
								E F{
									声明；
								}
							</style>

举例：

						<style>	
							ul p{
								background-color: red;
							}
						</style>

由DOM图可知，ul的后代中有三个p，我们设定背景色属性，颜色为红色，实现的效果应该是最后面的3个p变成红色条。
在这里插入图片描述

2）子选择器：前代和后代之间有一个大于号，大于号表示父子关系（不含孙辈）。

		<style>		
			body>p{
				background-color: green;
			}
		</style>

在这里插入图片描述
如果子辈中没有指定的元素，则什么都不会被选中，如ul>p{}。但是可以用body ul p{}来选择孙辈。

		<style>	
			body ul p{
				background-color: yellow;
			}
		</style>

在这里插入图片描述

3)相邻兄弟选择器：该选择器会选中和它相邻的、顺序执行的下一个符合条件的元素。

		<style>	
			.aa+p{
				background-color: red;
			}
		</style>

		<body>
			<p class="aa">1</p>
			<p>2</p>
			<p>3</p>
			
			<ul>
				<li>
					<p>4</p>
				</li>
				
				<li>
					<p>5</p>
				</li>
			
				<li>
					<p>6</p>
				</li>
			</ul>
		</body>

在这里插入图片描述
如果class属性添加的位置在两个符合条件的元素中间，选择器只会选择顺序执行的下一个，而不是同时选择相邻的两个。

	<body>
		<p>1</p>
		<p class="aa">2</p>
		<p>3</p>
	</body>

在这里插入图片描述
注意：该选择器优先判断相邻条件，再判断元素是否和选择器相符。

		<ul>
			<li>
				<p class="aa">4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>

在这里插入图片描述
上边的程序里，class属性添加在两个li元素中间，这个p元素相邻的是li元素，因此选择器无法生效。

4）通用兄弟选择器：该选择器会选中兄弟元素中，所有在它后面顺序执行的符合条件的元素。

						<style>
							E~F{
			  					声明；
							}
						</style>

		<style>	
			.aa~p{
				background-color: red;
			}

			.bb~p{
				background-color: blue;
			}
		</style>

		<body>
			<p class="aa">1</p>
			<p>2</p>
			<p>3</p>
			
			<ul>
				<li>
					<p class="bb">4</p>
				</li>
				
				<li>
					<p>5</p>
				</li>
			
				<li>
					<p>6</p>
				</li>
			</ul>
		</body>

在这里插入图片描述
在以上程序中，值为4、5、6的p元素分属不同的子辈，不是兄弟元素。

（3）结构伪类选择器
1）E:first-child，表示选择父元素下的第一个子元素 p（不是p元素的第一个子元素），可以理解为每一个父亲的长子。

		<style>
			p:first-child{
				background: red;
			}
		</style>

		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>

在这里插入图片描述

测试一下该选择器的判断条件：在值为1的p元素前加一个h1元素。

		<h1>0</h1>
		<p>1</p>
		<p>2</p>
		<p>3</p>

在这里插入图片描述
和相邻兄弟选择器类似，该选择器先判断是不是长子、再看指定元素是否符合条件。

2）E:first-child选择器还可以和后代选择器结合使用：

		<style>	
			li:first-child p{
				background-color: pink;
			}
		</style>
		
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>

在这里插入图片描述

3）E:last-child，表示选择最后一个孩子中符合条件的。

<style>	
			li:last-child p{
				background-color: pink;
			}
		</style>
		
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>

在这里插入图片描述

4)E:nth-child(n)，选择每一代的第n个孩子的符合条件的。

		<style>
			p:nth-child(1){
				background-color: pink;
			}
		</style>

		<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
	</body>

在这里插入图片描述
该选择器也可以选择奇偶数，(odd)或者(even)。

5）E:first-of-type，表示每一代中的第一个指定元素（该元素可以不是长子）。

		<style>
			p:first-of-type{
				background-color: blue;
			}
		</style>

		<h1>0</h1>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>

在这里插入图片描述

6）E:nth-last-of-type(n)，表示选择每一代中的倒数第二个指定元素。

		<style>
			p:nth-last-of-type(2){
				background-color: blue;
			}
		</style>

在这里插入图片描述
该类选择器先看类型再计数。

（4）属性选择器
该选择器多用于表单。
1）E[arr]：选择含有某种属性的标签，与属性值无关。eg：选择id属性，可以配置所有具有了id属性的标签。

			<style>	
				a{
					font-size: 30px;
				}
				a[id]{
					color: red;
				}
			</style>

			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>

在这里插入图片描述 2）E[arr1][arr2]：选择的标签必须同时具备这两种属性。eg：选择id和href属性。

			<style>	
				a{
					font-size: 30px;
				}
				a[id][href]{
					color: gold;
				}
			</style>

			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>

在这里插入图片描述 3）E[arr=value]：属性名=属性值，值区分大小写。

			<style>	
				a{
					font-size: 30px;
				}
				a[id="first"]{
					color: palegreen;
				}
			</style>
			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>

在这里插入图片描述 4）E[arr^=value]：选中属性值以XXX开头的标签。

			<style>	
				a{
					font-size: 30px;
				}
				a[href^=http]{
					color: yellow;
				}
			</style>
			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>

在这里插入图片描述 5）E[arr$=value]：选中属性值以XXX结尾的标签。

			<style>	
				a{
					font-size: 30px;
				}
				a[href$=".html"]{
				color: pink;
				}
			</style>
			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>

在这里插入图片描述 6）E[arr*=value]：选中属性值中包含XXX的标签。

			<style>	
				a{
					font-size: 30px;
				}
				a[hrer*="www"]{
				color: firebrick;
				}
			</style>
			<body>
				<a id="first">111</a>
				<a id="second" href="aaa.html">222</a>
				<a href="bbb.html">333</a>
				<a href="http://www.baidu.com">444</a>
			</body>