vito的Web前端学习 Day4（CSS）

最新推荐文章于 2024-07-25 08:14:42 发布

vitocool

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量346

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/vitocool/article/details/122520505

版权

2022年1月17日，学习Emmet语法、CSS的复合选择器、CSS的元素显示模式、CSS的背景。

今日主要学习内容：

1 Emmet语法

1.1 快速生产HTML结构语法

    <!-- div*3 tab -->
	<div></div>
	<div></div>
	<div></div>
	<!-- ul>li tab -->
	<ul>
		<li></li>
	</ul>
	<!-- div+p tab -->
	<div></div>
	<p></p>
	<!-- p.nav tab -->
	<p class="nav"></p>
	<!-- div#nav tab -->
	<div id="nav"></div>
	<!-- ul>li.nav tab-->
	<ul>
		<li class="nav"></li>
	</ul>
	<!-- .demo$*5 tab -->
	<div class="demo1"></div>
	<div class="demo2"></div>
	<div class="demo3"></div>
	<div class="demo4"></div>
	<div class="demo5"></div>
	<!-- div{在标签内部写内容}  tab-->
	<div>在标签内部写内容</div>
	<!-- div{$}*5 tab -->
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

1.2 快速生成CSS样式语法

<head>    
    <style type="text/css">
		/*emmet语法快速生成CSS*/
		.one {
			/*tac tab*/
			text-align: center;
			/*ti2em tab*/
			text-indent: 2em;
			/*w100 tab*/
			width: 100px;
			/*h100 tab*/
			height: 100px;
			/*lh26px tab*/
			line-height: 26px;
			/*tdn tab*/
			text-decoration: none;
		}
	</style>
</head>

2 CSS的复合选择器

2.1 后代选择器

<head>
    <style>
        /*父元素 后代元素 {样式声明}*/
		ol li {
			color: orangered;
		}
        ul li a{
			text-decoration: none;
		}
        .nav li{
			color: yellow;
		}
	</style>
</head>
<body>
    <ol>
		<li>只改变 ol 中的 li</li>
	</ol>
	<ul>
		<li>不改变 ul 中的 li</li>
		<li><a href="#">改变 ul 中的 li 中的 a</a></li>
	</ul>
	<ul class="nav">
		<li>改变 .nav 中的 li</li>
	</ul>
</body>

2.2 子代选择器

<head>
    <style>
        /*父元素>子元素 {样式声明}*/
		.nav1>a {
			color: indianred;
		}
	</style>
</head>
<body>
    <div class="nav1">
		<a href="">只改变最近一级子元素</a>
		<div>
			<a href="">其他级不改变</a>
		</div>
	</div>
</body>

2.3 并集选择器

<head>
    <style>
        /*元素1， 元素2 {样式声明}*/
		th, td ,.div1{
			color: red;
		}
	</style>
</head>
<body>
    <h4>并集选择器可以选择多组标签，同时为他们定义相同的样式，用于集体声明。</h4>
	<table>
		<tr>
			<th>
				th变红
			</th>
		</tr>
		<tr>
			<td>
				td也变红
			</td>
		</tr>
	</table>
	<div class="div1">.div1 也变红</div>
</body>

id选择器不可以用并集选择器

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。

2.4.1 链接伪类选择器

<head>
    <style>
    a:link {
			color: red;
			text-decoration: none;
		}
		a:visited {
			color: black;
		}
        /*常用*/
		a:hover {
			color: orange;
		}
		a:active {
			color: blue;
		}
	</style>
</head>
<body>
    <a href="">链接伪类选择器</a>
</body>

2.4.2 focus伪类选择器

<head>
    <style>        
    input:focus {
			background-color: black;
		}
	</style>
</head>
<body>    
    <a href="">链接伪类选择器</a>
	<br>
	<!-- focus伪类选择器 -->
	<input type="text">
	<input type="text" value="focus用于选取获得光标的表单元素，再更改其样式" style="width: 300px">
	<input type="text" value="未获光标不改变，主要针对 input 元素" style="width: 300px">
</body>

2.5 复合选择器总结

3 CSS的元素显示模式

元素显示模式就是元素以什么方式进行显示

3.1 块元素

3.2 行内元素

3.3 行内块元素

3.4 元素显示模式总结

3.5 显示模式的转换display

<head>
	<style type="text/css">
        a {
			width: 100px;
			height: 50px;
			background-color: yellow;
			/*转换为块元素 重要*/
			display: block;	
		}
		div {
			background-color: orangered;
			/*转换为行内元素*/
			display: inline;
		}	
		span {
			width: 100px;
			height: 50px;
			background-color: greenyellow;
			/*转换为行内块元素 重要*/
			display: inline-block;
		}
	</style>
</head>
<body>
    <a href="">a 是行内元素</a>
	<a href="">将其转换为块元素</a>
	<div>div 是块元素</div>
	<div>将其转换为行内元素</div>
	<span>是行内元素</span>
	<span>转换为行内块元素</span>
</body>

4 文字垂直居中

<head>
    <style>
        p {
            background-color:rgb(85, 88, 90);
            width: 230px;
		    height: 40px;
		    text-align: center;
		    line-height: 40px;
        }
    </style>
<head>
<body>
    <p>文字垂直居中</p>
</body>

5 CSS的背景

5.1 背景颜色background-color

<head>
    <style>    
    .p1 {
			display: block;
			/*背景颜色*/
			background-color: pink;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
    <p class="p1"></p>
</body>

5.2 背景图片background-image: url()

<head>
    <style> 
        p2 {
			display: block;
			/*背景图片*/
			background-image: url(images/pic.jpeg);
			width: 600px;
			height: 500px;
		}
	</style>
</head>
<body>   
    <p class="p2"></p>
</body>

背景图片会压住背景颜色

5.3 背景平铺background-repeat

<head>
    <style> 
        .p3 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*默认状态下，背景图片平铺*/
			background-repeat: repeat;
			width: 1000px;
			height: 1000px;
		}
		.p4 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片不平铺*/
			background-repeat: no-repeat;
			width: 1000px;
			height: 1000px;
		}
		.p5 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片沿x轴平铺*/
			background-repeat: repeat-x;
			width: 1000px;
			height: 1000px;
		}
		.p6 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片沿y轴平铺*/
			background-repeat: repeat-y;
			width: 1000px;
			height: 1000px;
		}
	</style>
</head>

5.4 背景位置backgroun-position

<head>
    <style> 
        /*background-position: x y;*/
		.p7 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置-方位名词*/
			background-position: center top;
			width: 1000px;
			height: 1000px;
		}
		.p8 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置-精确单位*/
			background-position: 25% 25%;
			width: 1000px;
			height: 1000px;
		}
		.p9 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置-精确单位*/
			background-position: 25px 25px;
			width: 1000px;
			height: 1000px;
		}
        .p10 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置-混合单位*/
			background-position: 25px center;
			width: 1000px;
			height: 1000px;
	</style>
</head>

5.5 背景固定background-attachment

<head>
    <style>     
        .p11 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			background-position: top center;
			width: 1000px;
			height: 1000px;
			/*背景图像随对象内容滚动*/
			background-attachment: scroll;
		}
		.p12 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			background-position: top center;
			width: 1000px;
			height: 1000px;
			/*背景图像固定*/
			background-attachment: fixed;
		}
	</style>
</head>

5.6 背景属性复合写法background

<head>
    <style>          
        .p13 {
			display: block;
			width: 1000px;
			height: 1000px;
			background: black url(images/pic.jpeg) no-repeat fixed center top;
		}
	</style>
</head>

5.7 背景颜色半透明rgba()

<head>
    <style>
        /*背景色半透明*/
		.p14 {
			display: block;
			width: 1000px;
			height: 1000px;
			background: rgba(0, 0, 0, 0.5) url(images/pic.jpeg) no-repeat fixed center top;
		}
	</style>
</head>

5.8 背景总结

6 总结

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*emmet语法快速生成CSS*/
		.one{
			/*tac tab*/
			text-align: center;
			/*ti2em tab*/
			text-indent: 2em;
			/*w100 tab*/
			width: 100px;
			/*h100 tab*/
			height: 100px;
			/*lh26px tab*/
			line-height: 26px;
			/*tdn tab*/
			text-decoration: none;
		}
		/*后代选 择器*/
		/*父元素 后代元素 {样式声明}*/
		ol li {
			color: orangered;
		}
		ul li a{
			text-decoration: none;
		}
		.nav li{
			color: yellow;
		}
		/*子选择器*/
		/*父元素>子元素 {样式声明}*/
		.nav1>a {
			color: indianred;
		}
		/*并集选择器*/
		/*元素1， 元素2 {样式声明}*/
		th, td ,.div1{
			color: red;
		}
		/*伪类选择器*/
		/*链接伪类选择器*/
		a:link {
			color: red;
			text-decoration: none;
		}
		a:visited {
			color: black;
		}
		/*常用*/
		a:hover {
			color: orange;
		}
		a:active {
			color: blue;
		}
		/*focus伪类选择器*/
		input:focus {
			background-color: black;
		}
		/*元素显示模式转换*/
		a {
			width: 100px;
			height: 50px;
			background-color: yellow;
			/*转换为块元素 重要*/
			display: block;	
		}
		div {
			background-color: orangered;
			/*转换为行内元素*/
			display: inline;
		}	
		span {
			width: 100px;
			height: 50px;
			background-color: greenyellow;
			/*转换为行内块元素 重要*/
			display: inline-block;
		}
		.p1 {
			display: block;
			/*背景颜色*/
			background-color: pink;
			width: 100px;
			height: 100px;
		}
		.p2 {
			display: block;
			/*背景图片*/
			background-image: url(images/pic.jpeg);
			width: 600px;
			height: 500px;
		}
		.p3 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*默认状态下，背景图片平铺*/
			background-repeat: repeat;
			width: 1000px;
			height: 1000px;
		}
		.p4 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片不平铺*/
			background-repeat: no-repeat;
			width: 1000px;
			height: 1000px;
		}
		.p5 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片沿x轴平铺*/
			background-repeat: repeat-x;
			width: 1000px;
			height: 1000px;
		}
		.p6 {
			display: block;
			background-image: url(images/pic.jpeg);
			/*背景图片沿y轴平铺*/
			background-repeat: repeat-y;
			width: 1000px;
			height: 1000px;
		}
		/*background-position: x y;*/
		.p7 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置*/
			background-position: center top;
			width: 1000px;
			height: 1000px;
		}
		.p8 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置*/
			background-position: 25% 25%;
			width: 1000px;
			height: 1000px;
		}
		.p9 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置*/
			background-position: 25px 25px;
			width: 1000px;
			height: 1000px;
		}
		.p10 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			/*背景图片位置，混合单位*/
			background-position: 25px center;
			width: 1000px;
			height: 1000px;
		}
		/*背景固定*/
		.p11 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			background-position: top center;
			width: 1000px;
			height: 1000px;
			/*背景图像随对象内容滚动*/
			background-attachment: scroll;
		}
		.p12 {
			display: block;
			background-image: url(images/pic.jpeg);
			background-color: black;
			background-repeat: no-repeat;
			background-position: top center;
			width: 1000px;
			height: 1000px;
			/*背景图像固定*/
			background-attachment: fixed;
		}
		/*背景属性复合写法*/
		.p13 {
			display: block;
			width: 1000px;
			height: 1000px;
			background: black url(images/pic.jpeg) no-repeat fixed center top;
		}
		/*背景色半透明*/
		.p14 {
			display: block;
			width: 1000px;
			height: 1000px;
			background: rgba(0, 0, 0, 0.5) url(images/pic.jpeg) no-repeat fixed center top;
		}
	</style>
</head>
<body>
	<!-- emmet语法快速生成HTML -->
	<!-- div*3 tab -->
	<div></div>
	<div></div>
	<div></div>
	<!-- ul>li tab -->
	<ul>
		<li></li>
	</ul>
	<!-- div+p tab -->
	<div></div>
	<p></p>
	<!-- p.nav tab -->
	<p class="nav"></p>
	<!-- div#nav tab -->
	<div id="nav"></div>
	<!-- ul>li.nav tab-->
	<ul>
		<li class="nav"></li>
	</ul>
	<!-- .demo$*5 tab -->
	<div class="demo1"></div>
	<div class="demo2"></div>
	<div class="demo3"></div>
	<div class="demo4"></div>
	<div class="demo5"></div>
	<!-- div{在标签内部写内容}  tab-->
	<div>在标签内部写内容</div>
	<!-- div{$}*5 tab -->
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

	<!-- 复合选择器 -->
	<!-- 后代选择器 -->
	<ol>
		<li>只改变 ol 中的 li</li>
	</ol>
	<ul>
		<li>不改变 ul 中的 li</li>
		<li><a href="#">改变 ul 中的 li 中的 a</a></li>
	</ul>
	<ul class="nav">
		<li>改变 .nav 中的 li</li>
	</ul>

	<!-- 子选择器 -->
	<div class="nav1">
		<a href="">只改变最近一级子元素</a>
		<div>
			<a href="">其他级不改变</a>
		</div>
	</div>

	<!-- 并集选择器 -->
	<h4>并集选择器可以选择多组标签，同时为他们定义相同的样式，用于集体声明。</h4>
	<table>
		<tr>
			<th>
				th变红
			</th>
		</tr>
		<tr>
			<td>
				td也变红
			</td>
		</tr>
	</table>
	<div class="div1">.div1 也变红</div>

	<!-- 伪类选择器 -->
	<!-- 链接伪类选择器 -->
	<a href="">链接伪类选择器</a>
	<br>
	<!-- focus伪类选择器 -->
	<input type="text">
	<input type="text" value="focus用于选取获得光标的表单元素，再更改其样式" style="width: 300px">
	<input type="text" value="未获光标不改变，主要针对 input 元素" style="width: 300px">

	<!-- 元素显示模式转换 -->
	<a href="">a 是行内元素</a>
	<a href="">将其转换为块元素</a>
	<div>div 是块元素</div>
	<div>将其转换为行内元素</div>
	<span>是行内元素</span>
	<span>转换为行内块元素</span>

	<!-- 背景 -->
	<!-- 背景颜色 -->
	<p class="p1"></p>
	<!-- 背景图片 -->
	<p class="p2"></p>
	<!-- 背景平铺 -->
	<p class="p3"></p>
	<!-- 背景不平铺 -->
	<p class="p4"></p>
	<!-- 背景沿x轴平铺 -->
	<p class="p5"></p>
	<!-- 背景沿y轴平铺 -->
	<p class="p6"></p>
	<!-- 背景位置 -->
	<p class="p7"></p>
	<p class="p8"></p>
	<p class="p9"></p>
	<p class="p10"></p>
	<!-- 背景固定 -->
	<p class="p11"></p>
	<p class="p12"></p>
	<!-- 背景属性复合写法 -->
	<p class="p13"></p>
	<!-- 背景色半透明 -->
	<p class="p14"></p>
</body>
</html>