第三次前端培训笔记（CSS 基本使用，基础选择器，组合选择器）

荔子子

已于 2022-02-05 17:22:59 修改

阅读量497

点赞数

文章标签：前端 css html

于 2022-02-05 17:18:57 首次发布

本文链接：https://blog.csdn.net/weixin_58155375/article/details/122790480

版权

一、CSS的概述

Css层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）我XML(标准通用标记语言的一个子集)等文件样式的计算机语言

Css目前最新版本为Css3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，Css能够对网页中的对象的位置排版进行像素级的精确控制，支撑几乎所有的字体字号样式，拥有对网页对象和模型是编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言，Css能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群有较强的易读性。

Css是用来美化网页用的没有网页则Css毫无用处，所以Css需要依赖HTML展示其功能。

二、Css的基本使用

1.Css的定义

1Css的基本语法

Css样式有选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个css属性和属性值。

注意：Css声明要以分号结束，声明以{}起来，每个声明以分号结尾。

建议一行写一个属性

若只为若干单词，则要给值加引号如：font-family："agnecy fb"。

2.Css的三种使用方法：

1.行内样式
直接写在标签上的样式，在标签上通过style属性定义的样式

<h2 style="color:red;font-family:楷体">Hello Word</h2>

2.内部样式
定义在style标签中的样式，style标签一般设在在head标签中

<head>
<style>
		   /*设置所有的h2标签的文本为红色*/
		   h2 {
			   color:red;
		   }
		</style>
</head>
<body>
		
		<h2>Hello Word</h2>
		
	</body>

3..外部样式
定义在外部的Css文件中，通过link标签引入
<link rel="styesheet" type="text/css" href="css文件路径"/>

head>
		<meta charset="utf-8" />
		<title>Css的基本使用</title>
		<link rel="stylesheet" type="text/css" href="js/外部样式.css"/>
	</head>
<body>
		<h2>Hello Word</h2>
	</body>

/*css文件里*/
h2 {
	font-size:40px;
}

注：当多重样式时，越精准越优先（就近原则）
三、基础选择器

1.通用选择器 *
*{
属性名：属性值；
......
}

2.元素选择器
元素名{
属性名：属性值；
.......
}

3.ID选择器 #
   #id属性值{
属性名：属性值；
                       . ......
                   }
  4.类选择器 .
         .class属性值{
                   属性名：属性值；
                   . ......
               }
5.分组选择器
         选择器1，选择器2，选择器3，{
属性名：属性值；
                   . ......
}

<head>
		<meta charset="utf-8" />
		<title>Css的基本使用</title>
		
		<style type="text/css">
		   /*通用选择则器*/
		   *{
			   color:#00FFFF;
		    }
		   /*元素选择则器*/
		   div{
		   	font-size:30px;
			  }
			 /*ID选择器*/
			 #p1{
				 background-color:#FAEBD7;
			    }
		   /*  类选择器  */
		   .cls1{
			       font-family:楷体;
		        }
			 /*  分组合选择器  */
			 #p1,.cls1,font{
				 text-decoration:line-through;
			 }
		</style>
		 
		<link rel="stylesheet" type="text/css" href="js/外部样式.css"/>
	</head>
	<body>
		
		<div class="cls1">只是一个div1</div>
		<div>只是一个div2</div>
		<p id="p1">只是一个p</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>
	</body>

四、组合选择器

Css组合选择器说明了两个选择器直接关系。Css组合选择符号包括各种简单选择符的组合方式。

在Css中包含了四种组合方式：后代选择器（以空格分隔），子元素选择器（以大于号分隔），相邻兄弟选择器（以加号分割），普通兄弟选择器（以波浪线分割）。

1. 后代选择器

选择指定元素的所有指定后代元素，以空格隔开
                       选择器指定元素{
                           属性名：属性值；
               ......

}

2.子代选择器

选择指定元素的第一代子元素。以大于号>隔开
                   选择器 > 指定元素{
                       属性名：属性值；
                       ......
                   }

3.相邻兄弟选择器

选择指定元素的下一个元素只会找一个，两者有相同的父元素。以加号+隔开
                   选择器 + 指定元素{
                       属性名：属性值；
                       ......
                   }

4.普通兄弟选择器

选择指定元素的后面的所有Y元素，两者有相同的父元素。以波浪号~隔开
                   选择器 ~ 指定元素{
                       属性名：属性值；
                       ......
                   }

<head>
		<meta charset="utf-8" />
		<title>Css的基本使用</title>
		
		 <style>
		      /*   后代选择器*/
			  .food li{
				  border:#9ACD32 dotted 1px;
			  }
			  /*   子代选择器*/
			  #food2 > li{
			  				 border:palegoldenrod solid 1px;
			  }
			  /*   相邻兄弟选择器*/
			  #mydiv + div{
			  				 background-color:#9ACD32;
			  }
			  /*   普通兄弟选择器*/
			  #mydiv2 ~ div{
			  				 background-color:#9ACD32;
			  }
		 </style>
		<link rel="stylesheet" type="text/css" href="js/外部样式.css"/>
	</head>
	<body>
		
		<!-- 获取class属性值时food的元素的所有列表项   -->
		<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>
		<div>相邻兄弟选择武器3</div>
		<div>相邻兄弟选择武器4</div>
		<hr>
		<div>相邻兄弟选择武器1</div>
		<div id="mydiv2">相邻兄弟选择武器2</div>
		<div>相邻兄弟选择武器3</div>
		<div>相邻兄弟选择武器4</div>
	</body>