css.案例-CSDN博客

本文链接：https://blog.csdn.net/Emotional_gjx/article/details/105619806

这篇博客通过22个章节详细展示了多个CSS的使用案例，包括各种布局、样式和效果的实现，帮助读者理解并掌握CSS在网页设计中的实际应用。

摘要由CSDN通过智能技术生成

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
	P{
		color:red;
	}
	h2{
		color:blue;
	}
	</style>
</head>
<body>
        <p>css从入门到精通</p>
        <h2>主讲</h2>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zzHXxdVa-1587292544193)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_56_17-.png)]

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
	/*内部样式（并没有实现样式与内部的分离）*/
	p{
		color:red;
	}
	</style>
	<!-- 外部样式 link标签链接样式文件-->
	<link rel="stylesheet" type="text/css" href="style/hello.css">
	<!-- 外部样式 @import导入样式文件-->
	<style>
    /* @import "style/hello.css"*/
	</style>
</head>
<body>
     <p>welcome to css</p>
     <p>欢迎来到css课堂</p>

     <h2 style="color:blue">web前段工程师</h2>
     <h2>Java开发工程师</h2>

     <div>哈哈</div>
      <div>嘿嘿</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8o1zFNgt-1587292544196)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_57_26-Document - 2345加速浏览器 10.7.png)]

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
     /*标签选择器*/
     p{
     	color:red;
     	font-size:20px;
     }
     h2{
     	color:yellow;
     }
     .hello{
     	background: #cccccc;
     }
     .world{
     	font-weight:bold;
     }
     #heihei{
     	color:blue;
     }
	</style>
</head>
<body>
      <!-- 给p标签中的内容设置样式-->
      <p>welcome to css</p>
      <p>hello world</p>
      <h2>web前端开发</h2>
      <h3>java开发</h3>
      <hr>
      <!-- 只改第一个p标签-->
      <p class="hello">welcome to css</p>
      <p>hello world</p>
      <h2>web前端开发</h2>
      <h3>java开发</h3>
      <!-- 只要应用了hello这个类选择器就生效 与标签无关-->
      <div class="hello">主讲</div>
      <div class="hello world">主讲</div>
      <span class="world">css入门到精通</span>
      <hr>
     <h1 id="heihei">嘿嘿</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvC573FU-1587292544199)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-24 20_57_59-Document - 2345加速浏览器 10.7.png)]

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
	/* 标签选择器与类选择器结合起来*/
	     h1.aaa{
            color:red;
	     }
   /* 标签选择器与id选择器结合起来*/
	     p#bbb{
	     	color:blue;
	     }
	/* 组合选择器*/
	h1,p,div,span,.ccc{
		font-size:30px;

	}
	div{
		background:#cccccc;
	}
	
	.ccc{
         font-size:30px;
        font-weight:bold;
	}
	/*嵌套选择器*/
	div>p{
		color: green;
		text-decoration: underline;
	}
	/* 对div内部类选择器修饰*/
	
	div h3{
         
	}
	</style>
</head>
<body>
        <!-- 需求 修改class为aaa的h1-->
       <h1 class="aaa">welcome</h1>
       <h4 class="aaa">csss</h4>
       <h1>hello</h1>
       <hr>
       <!-- 修改id为bbb的p标签-->
       <p id="bbb">world</p>
       <p>html</p>
       <h2 id="bbb">web开发</h2>
       <hr>
       <h1>hello</h1>
       <p>html</p>
       <div>web</div>
       <span class="ccc">java</span>
       <div>
       	  <p>内部的p</p>
       	  <h3>内部的h3</h3>
       </div>
       <hr>
       <div>
       	  <h2>
       	     <p> 内部的p</p>
       	  </h2>
       </div>
       <hr>
       <div>
       	  <p>内部的p标签</p>
       	  <h3 class="ddd">内部h3标签</h3>
       	  <p class="ddd">pppp</p>
       </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DEy7u4fe-1587292544201)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_48_59-Document - 2345加速浏览器 10.7.png)]

5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
      /*  a:link{
        	font-size:12px;
        	color:black;
        	text-decoration:none;
        }
        a:visited{
        	font-size:15px;
        	color:red;
        	
        }
        a:hover{
        	font-size:20px;
        	color:blue;
        	
        }
         a:active{
        	font-size:40px;
        	color:green;
        	
        }  */
        a:link,a:visited{
        	font-size:13px;
        	color:#666666;
        	text-decoration:none;
        }
        a:hover,a:active{
        	
        	color:#ff7300;
        	text-decoration:underline;
        }
        p:hover{
        	color:red;
        }
        P:active{
           color:;
        }
	</style>
</head>
<body>
        <a href="1.html" title="">IT教育,高职培训</a>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwkn5Efi-1587292544203)(C:\Users\lenovo\Desktop\作业\html\2\2020-03-28 20_53_24-Document - 2345加速浏览器 10.7.png)]

6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
	   p:first-letter{
	   	    color:red;
	   	    font-size:30px;
	   }
	   p:first-letter{
	   	    background:yellow;
	   }
	   p:before{
	   	   content:"嘿嘿";
	   }
	   p:after{
	   	   content:"哈哈";
	   }
	</style>