css基本语法

选择器:

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

  尽量使用类选择器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值