css基本语法

最新推荐文章于 2024-08-12 23:09:57 发布

lvyuan30276

最新推荐文章于 2024-08-12 23:09:57 发布

阅读量358

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lvyuan30276/article/details/52492900

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

选择器：

1.标签选择器 p{} div{}

2.通配符选择器

3..ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01书写CSS的案例</title>
	<!--内嵌的CSS样式-->
	<style type="text/css">
	     /*标签选择器*/
         p { 
         	 color: green; /*设置前景色，也就是字体的颜色*/
         	 background-color: silver;
         }

         ul {
            background-color: red;
         }
	     /*ID选择器*/
         #p1 {
	         font-size: 20px;
	     }

	     #p2 {
	     	font-size: 30px;
	     }
        /*通配符选择器*/
	     * {
         	font-size: 16px;
         }


	</style>

	<!-- 外联CSS样式-->
	<link rel="stylesheet" href="CSS/main.css">



</head>
<body>
   <p id="p1">我是一个段落标签p1</p>
   <h1 style="color:red; font-size:12px;">传智播客-前端与移动开发学院的CSS基础视频教程</h1>
   <p id="p1">这是一个段落标签</p>
   <ul>
   	  <li><a href="#">上海</a></li>
   	  <li><a href="#">北京</a></li>
   	  <li><a href="#">广州</a></li>
   </ul>

   <p id="p2">我是一个段落标签p2</p>
</body>
</html>

4.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04类选择器案例</title>
	<style>
       .web {
       	  color: green;
       }
	</style>
</head>
<body>
    <h1>歌手</h1>
    <p class="web">周杰伦</p>
    <p>陈亦迅</p>

    <div class="web">
    	歌唱的好听呀
    </div> 
 
    <ul>
    	<li class="web">北京</li>
    	<li class="web">上海</li>
    	<li>广州</li>
    	<li>深圳</li>
    	<li>郑州</li>
    	<li>南京</li>
    </ul>

	
</body>
</html>

5.ID选择器和类选择器的区别

1.相同的class属性值，可以在HTML中出现多次，但ID属性值只能出现一次

2.一个class属性可以有多个值，也就是说一个标签可以有多个class

尽量使用类选择器