edu平台Web实训 CSS3选择器——基础选择器

最新推荐文章于 2021-12-17 09:52:01 发布

Aime__

最新推荐文章于 2021-12-17 09:52:01 发布

阅读量564

点赞数

分类专栏： edu平台——Web实训CSS3 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/Aime__/article/details/121915902

版权

edu平台——Web实训CSS3 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

第1关CSS基础选择器相关概念

DCB

第2关通用选择器

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>
   <!--------- Begin-------->
   <style type="test/css">
      *{ font-size:100px;
         font-color:#D33E2A;
      }

   
   </style>
   <!--------- End-------->
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>

第3关标签选择器

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>  
   <!--------- Begin-------->
   <style>
    strong{
      font-size:100px;
      font-color:#D33E2A;
    }
   </style>
   <!--------- End-------->
   
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>

第4关文字Google结构设计

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
</head>
<body>
<!--------- Begin-------->
 <strong class="blue">G</strong>
 <strong class="red">o</strong>
 <strong id="orange">o</strong>
 <strong class="blue">g</strong>
 <strong id="green">l</strong>
 <strong class="red">e</strong>

 
 
 
 <!--------- End-------->
</body>
</html>

第5关文字Google样式设计

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>

<style type="text/css">
<!--------- Begin-------->
strong{ font-size:100px;}
.blue{
    font-color:#2B75F5;
}
.red{
    font-color:#D33E2A;
}
#orange{
    font-color:#FFC609;
}
#green{
    font-color:#00A45D;
}

  


  
<!--------- End-------->
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>