03CSS

最新推荐文章于 2024-07-21 19:13:42 发布

怎么不睡觉

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量26

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_62970331/article/details/134167165

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

<!--
css(层叠样式表，简称样式表)负责网页内容的样式和布局。

	1. css代码写在哪儿(了解)
	内联样式：将css代码写在标签的style属性中
	内部样式：将css代码写在style标签中
	外部样式：将css代码写在css文件中

2.css代码怎么写
语法：
选择器{属性1:属性值1;属性2:属性值2;...}

说明：
选择器 -  选中需要设置样式的标签
{}    -   固定写法
属性   -  css中的属性

css中常见的属性：color(设置文字颜色)、font-size(设置字体大小)、background-color(设置背景颜色)

3.选择器
1) 元素选择器（标签选择器）  -  直接将标签名作为选择器，选中所有指定标签
p{}     -   选中所有p标签
a{}     -   选中所有的a标签
div{}  -   选中所有的div标签

2) id选择器  -  在标签的id属性值前面加#作为一个选择器，选中id属性值为指定值的标签
注意：html中一个网页中同一个id属性值对应的标签是唯一
#p1{}    -   选中id属性值为p的标签

3) c1ass选择器   -  在标签的class属性值前面加.作为一个选择器，选中class属性值为指定值的所有标签
注意：同一个网页中c1ass属性值为指定值的标签可能有多个；同一个标签可能同时拥有多个不同的class,属性值
.p1{}    -   选中class属性值为p1的所有标签
.a1{}    -   选中class属性值为a1的所有标签
a.c1{}     -   选中class,属性值为c1的a标签
div.c2{}   -   选中class.属性值为c2的div标签
.c1.c2{}   -   选中class属性值同时为c1和c2的标签

4)子代选择器   -   多个独立的选择器用>符号连接作为一个选择器
div>p>a{}
div>.c1{}
c1>p>a{}
#p1>.c1>p{}

5)后代选择器   -   多个独立的选择器用空格连接作为一个选择器
div p a{}
div .c1{}
.c1 p a{}
#p1 .c1 p{}

4.选择器中加参数：
div>p:nth-child(x){}    -  div里面第x个p标签
div>p:nth-last-child(x){}    -   div里面倒数第x个p标签
div>p:nth-child(x) a{}    -  div里面第x个p标签中的a标签

<!--练习：-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <!----------------------1.元素选择器案例----------------------->
		 <p>我是段落1</p>
		 <a href="">我是超链接1</a>
		 <p>我是段落2</p>
		 <span>我是span1</span>
		 <span>我是span2</span>
		 <p>我是段落3</p>
		 <a href="">我是超链接2</a>
		 <style>
			 p{
				color: green;
			 }
		 </style>
      <!----------------------2.id选择器案例----------------------->
        <p>我是段落1</p>
		<a href="">我是超链接1</a>
		<p id="p1">我是段落2</p>
		<span>我是span1</span>
		<span>我是span2</span>
		<p>我是段落3</p>
		<a href="">我是超链接2</a>
	    <style>
			#p1{
				color: red;
			}
		</style>
        <!----------------------3.class选择器案例-------------------->
        <p class="c1 c2">我是段落1</p>
		<a href="" class="c2">我是超链接1</a>
		<p>我是段落2</p>
		<span class="c1">我是span1</span>
		<span>我是span2</span>
		<p class="c1">我是段落3</p>
		<a href="">我是超链接2</a>
	    <style>
			.c1{
				color: red;
			}
			.c2{
				font-size: 50px;
			}
			p.c1{
				color: red;
			}
			.c1.c2{
				text-decoration: underline;
			}
		</style>
        <!----------------------4.子,后代选择器案例-------------------->
        <div>
			<p>我是段落1
			<p>我是段落2</p>
			</p>
			<span>我是段落3</span>
		</div>
	    <p>
			<a href="">我是超链接1</a>
		</p>
	   <style>
		   div p p{
			   color: green;
		   }
		   div>p{
			   color: red;
		   }
	   </style>
       <!-- --------------4. 选择器加参数案例------------------ -->
		<div>
			<p>我是段落1</p>
			<p>我是段落2</p>
			<p>我是段落3</p>
			<p>我是段落4</p>
		</div>
		<p>我是段落5</p>

		<ul>
			<li>
				<p>我是段落11</p>
			</li>
			<li>
				<p>我是段落22</p>
			</li>
			<li>
				<p>我是段落33</p>
			</li>
		</ul>

		<div id="box">
			<p>我是段落111</p>
			<a>连接111</a>
		</div>

		<style>
			/* 找div里面的第三个p标签 */
			div>p:nth-child(3){
				color: red;
			}

			/* 找div里面的倒数第一个p标签 */
			div>p:nth-last-child(1){
				background-color: yellow;
			}

			/* 找ul中第2个li标签中的p标签 */
			ul>li:nth-child(2) p{
				font-size: 40px;
			}

			/* #box>*:nth-child(1){
				background-color: lawngreen;
			} */
		</style>
</body>
</html>
-->