HTML第三次学习（css)

css的基本使用

一、css的定义

选择器名{
属性名:属性值；
属性名:属性值；
…
}
注意：
1.声明需要使用"{}“括起来，每个声明以分号”;"结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成，则用引号引起来

二、css的三种使用样式

1.行内样式

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

标题为例）

<h2 style="color: blue;font-family: 楷体">hello world</h2>

2.内部样式

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

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

3外部样式

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

<link rel="stylesheet" type="text/css" href="css文件路径"/>

三、css的注释

		/*注释内容*/

注：当多种样式越精准越优先（就近原则）

css选择器

一、基本选择器

1.通用选择器

*{
属性名:属性值;
…
}

2.元素选择器

元素名/标签名{
属性名:属性值;
…
}

3.ID选择器 “#”

#id属性值{
属性名:属性值;
…
}

4.类选择器“.”

.class属性值{
属性名:属性值；
…
}

5.分组选择器

选择器1,选择器2,选择器3,…{
属性值:属性名;
}
…

<style type="text/css">
		/*通用选择器*/
			*{
				color: blue;
			}
		/*元素选择器*/
			div{
				font-size: 30px;
			}
			/*ID选择器*/
			#p1{
				background-color: brown;
			}
			/*类选择器*/
			.cls1{
				font-family: 楷体;
			}
			/*分组选择器*/
			#p1,.cls1,font{
				text-decoration: line-through;
			}
		</style>

===================================================
		<div class="cls1">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span>
		<br />
		<font>这是一个font</font>

二、组合选择器

后代选择器

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

子代选择器

选择指定元素的第一代子元素，以>隔开
#选择器>指定元素{
属性名:属性值;
…
}

相邻兄弟选择器

选择指定元素的下一个指定元素(只会找一个)，以+隔开
#选择器+指定元素{
属性名:属性值;
…
}

普通兄弟选择器

选择指定元素后面的所有指定元素，两者有相同的父元素，以~隔开
#选择器+指定元素{
属性名:属性值;
…
}

<style type="text/css">
			/*后代选择器*/
			.food li{
				border: chartreuse solid 1px;
			}
			/*子代选择器*/
			#food2 > li {
				border: black solid 1px;
			}
			/*相邻兄弟选择器*/
			#mydiv + div {
				background-color: #808080;
			}
			/*普通兄弟选择器*/
			#mydiv2~div{
				background-color: aqua;
			}
		</style>
		=======================================================
		<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>
	<div>相邻兄弟选择器5</div>
	<hr />
	<div>普通兄弟选择器1</div>
	<div id="mydiv2">相邻兄弟选择器2</div>
	<div>普通兄弟选择器3</div>
	<div>普通兄弟选择器4</div>
	<div>普通兄弟选择器5</div>