第三次网页前端培训（CSS选择器）-CSDN博客

本文链接：https://blog.csdn.net/zjygzzk/article/details/122797015

一，CSS的基本使用

1，CSS定义

选择起名{

属性名：属性值；

……

}

注意点：

1，声明需要使用{}括起来，每个声明以分号；结尾

2，一行建议一个声明

3，如果样式的属性值有多个单词组成，则用引号引起来，如"arial black"

2，CSS的注释

/*注释内容*/

3，CSS三种使用方式

（1），行内样式：

直接写在标签上的样式，在标签上通过style属性定义的样式。

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

（2），内部样式

定义在style标签中的样式，style标签一般设在head标签中。

   <style>
		/*设置搜有的h2标签的文本为红色*/
		h2{
			color: red;
			font-family:"arial black";
		}
		</style>
	</head>
	<body>
		<h2 >Hello World</h2>
		<h2 style="color:red;font-family:楷体;">Hello World</h2>
		<h2 >Hello World</h2>

（3），外部样式

定义在外部的CSS文件中，通过link标签引入

style.css:

h2{
	font-size: 20px;
}

<link rel="stylesheet" type="text/css" herf="css/style.css" />
</head>

二，CSS选择器

1，基本选择器

（1）,通用选择器

属性名:属性值；

……

}

   <style type="text/css">
		/*通用选择器*/
		*{
			color:#00FFFF;
		}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div>这是一个div2</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br>
		<font>这是一个font</font>

（2），元素选择器

元素名/标签名

{

属性名：属性值；

……

}

/*元素选择器*/
		div{
			font-size:30px;
		}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div>这是一个div2</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br>
		<font>这是一个font</font>

（ 3），ID选择器#

#id属性值{

属性名：属性值；

……

}

/*id选择器*/
		#p1{
			background-color:#FAEBD7;
		}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span>这是一个span</span>
		<br>
		<font>这是一个font</font>

(4)，类选择器.

.class属性值

{

属性名：属性值；

……

}

/*类选择器*/
		.cls1{
			font-family:楷体;
		}
		</style>
	</head>
	<body>
		<div class="cls1">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>

( 5)，分组选择器

选择器1，选择器2，选择器3……{

属性名：属性值；

……

}

/*分组选择器*/
		#p1,.cls1,font{
			text-decoration:line-through;
		}
		</style>
	</head>
	<body>
		<div class="cls1">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br>
		<font>这是一个font</font>

css样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联选择器：1000

2,组合选择器

（1）后代选择器

选择指定元素的所有指定后代元素，以空格隔开

选择器指定元素{

属性名：属性值；

……

}

/*后代选择器*/
		.food li{
			border: #9ACD32 solid 1px;
		}
		</style>
	</head>
	<body>
		<!--  获取class属性值是food的元素的所有对应li列表项-->
		<ul class="food">
			<li>水果
			    <ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</li>
		</ul>

（2），子代选择器

选择指定元素的第一代子元素，以大于号>隔开

选择器>指定元素{

属性名：属性值；

……

}

/*子代选择器*/
		#food2>li{
			border: #1A4481 dotted 1px;
		}
		</style>
	</head>
	<body>
<ul id="food2">
			<li>水果
			    <ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
			</li>
		</ul>

（3），相邻兄弟选择器

选择指定元素的下一个指定元素（只会找一个），两者有相同的父元素，以加号隔开

选择器+指定元素{

属性名：属性值；

……

}

/*相邻兄弟选择器*/
		#mydiv + div{
			background-color:#808080;
		}
		</style>
	</head>
	<body>
        <div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
	</body>
</html>

（ 4），普通兄弟选择器

选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开

选择器～指定元素{

属性名：属性值；

……

}

/*普通兄弟选择器*/
		#mydiv2～div{
			background-color:#FA8072;
		}
		</style>
	</head>
	<body>
        <div>普通兄弟选择器1</div>
		<div id="mydiv2">相邻兄弟选择器2</div>
		<div>普通兄弟选择器3</div>
		<div>普通兄弟选择器4</div>
	</body>
</html>

三，CSS常用属性设置

1,背景：

背景颜色

背景图片

是否重复

<style type="text/css">
		#div1 {
			width:1700px;
			height:800px;
			/*背景颜色*/
			background-color:#EEE8AA;
			/*背景图片*/
			background-image: url(img/dd.png);
			/*是否重复*/
			background-repeat: no-repeat;
		}
		</style>
	</head>
	<body>
		<div id="div1">
			Hello
		</div>

2,字体

#div2 {
			/*字体颜色*/
			color:#0000FF;
			/*对齐方式 left center right*/
			text-align: left;
			/*文本修饰*/
			text-decoration: line-through overline underline;
			/*首行缩进*/
			text-indent: 2em;
		}
		a {
			/*去除文本下划线（去除超链接的下划线）*/
			text-decoration:none;
		}
		</style>
	</head>
	<body>
<div id="div2">
			Hello World
		</div>
		<a href="">百度</a>
	</body>
</html>

3，对齐方式（left center right justify)

#p1 {
			/*对齐方式*/
			text-align: justify;
		}
		</style>
	</head>
	<body>
<p id="p1">
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
			选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
		</p>
	</body>
</html>

4,display属性

h2{
			/*display属性 none隐藏元素 block显示元素*/
			display:none;
		}

5，浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用属性</title>
		<style type="text/css">
	/*浮动*/
		#d1 {
			width: 100px;
			height: 100px;
			background-color: #DA70D6;
			/*浮动 左浮动*/
			float: left;
		}
		#d2 {
			width: 100px;
			height: 100px;
			background-color: indianred;
			/*浮动 左浮动*/
			float: left;
		}
		</style>
	</head>
	<body>
	<div id="d1"></div>
		<div id="d2">
			
		</div>
	</body>
</html>