第三次网页前端培训笔记（css基本语法，css基本、组合选择器）

最新推荐文章于 2024-05-01 12:01:29 发布

我不是刘德华哇

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量192

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Amazing8848/article/details/122801458

版权

一、css的基本使用

1.1.css的定义与注释

<!--
			CSS的基本使用
				css的定义
					选择器名{
						属性名:属性值;
						属性名:属性值;
					}
					注意点：
						1.声明需要使用{}括起来，每个声明以;分号结尾
						2.一行建议一个声明
						3.如果样式的属性值由多个单词组成，则用引号引起来
				css的注释
					/*注释内容*/
		-->
        h2{
            color:read;/*字体颜色为红色*/
            font-family:楷体; /*字体形式为楷体*/
           }

1.2.css的三种使用方式（越精确优先级越高）

/!--
1.行内样式
	直接写在标签的上的样式，在标签上通过style属性定义的样式
--/
<h2 style="color: red; font-family: "agency fb";">Hello World</h2>

效果如图：

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

		<style type="text/css">
			h2{
				color: red;/*字体颜色为红色*/
				font-family: "arial black";/*字体形式为arial black*/
			}
	<h2>Hello World</h2>

效果如图：

/!--
3.外部样式
		定义在外部的css样式中，通过link标签引入
--/

		<link rel="stylesheet" type="text/css" href="css/test.1.css">
         h2{
	        font-size: 100px;/*字体大小为100px*/
	        color: aqua;/*字体颜色为蓝色*/
	        font-family: "arial narrow";/*字体形式为arial narrow*/
           }/!--这一部分要在项目css中--/

效果如图：

二、基础选择器（越精确优先级越高）

2.1.通用选择器

<style type="text/css">
			*{
				color: #00FFFF;/*字体颜色为蓝色*/
			}
		</style>
            <div>这是一个div1</div>
			<div>这是一个div2</div>
			<p>这是一个p</p>
			<span>这是一个span</span>
			<br>
			<font>这是一个font</font>

效果如图

2.2.元素选择器

<style type="text/css">
	
			div{
				font-size: 30px;/*字体大小为30px*/
			}
		</style>
            <div>这是一个div1</div>
			<div>这是一个div2</div>
			<p>这是一个p</p>
			<span>这是一个span</span>
			<br>
			<font>这是一个font</font>

效果如图

2.3. id选择器

 <style type="text/css">
			#p1{
				background-color: #FF0000;/*设置背景颜色*/
			}   
          </style>        
            <div>这是一个div1</div>
			<div>这是一个div2</div>
			<p id=p1>这是一个p</p>
			<span>这是一个span</span>
			<br>
			<font>这是一个font</font>

效果如图

2.4.类选择器

<style type="text/css">
		
			.cls1{
				font-family: "楷体";/*字体为楷体*/
			}
		</style>
            <div class="cls1">这是一个div1</div>
			<div>这是一个div2</div>
			<p>这是一个p</p>
			<span class="cls1">这是一个span</span>
			<br>
			<font>这是一个font</font>

效果如图

2.5.分组选择器

<style type="text/css">
			#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>

效果如图

三、组合选择器

3.1.后代选择器

<style type="text/css">
			.food li{
				border: #00FFFF solid 1px;/*设置边框*/
			}
		</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>
			<ul>
				<li>水果
					<ul>
						<li>香蕉</li>
						<li>苹果</li>
						<li>梨</li>
					</ul>
				</li>
			</ul>

效果如图

3.2.子代选择器

<style type="text/css">
			.food>li{
				border: #00FFFF solid 1px;/*设置边框*/
			}
		</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>
			<ul>
				<li>水果
					<ul>
						<li>香蕉</li>
						<li>苹果</li>
						<li>梨</li>
					</ul>
				</li>
			</ul>

效果如图

3.3.相邻兄弟选择器

<style type="text/css">
			
			#king+ div{
				background-color: #FF0000;
			}
		</style>
            <div>刘德华</div>
			<div id="king">郭富城</div>
			<div>张学友</div>
			<div>黎明</div>

效果如图

还有另一种情况（当相邻div之间插着其他标签时）：

<style type="text/css">
			
			#king+ div{
				background-color: #FF0000;
			}
		</style>
            <div>刘德华</div>
			<div id="king">郭富城</div>
            <p>wyy</p>
			<div>张学友</div>
			<div>黎明</div>

效果如图：（它就没有相邻的元素了）

3.4.普通兄弟选择器

      <style type="text/css">
		
			#man ~ div{
					background-color: blue;
			}
			
		</style>      
            <div>黎明</div>
			<div>刘德华</div>
			<div id="man">郭富城</div>
			
			<div>张学友</div>
			<div>黎明</div>

效果如图