5.21 CSS样式表练习

Posted 岁月静好123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5.21 CSS样式表练习相关的知识,希望对你有一定的参考价值。

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> 
 
 <link href="Untitled-4.css" rel="stylesheet" type="text/css" />
</head>

<body><br />
<a href="http://www.baidu.com/">百度官网
</a>
<br />

<p>春来了,草绿了</p>
<p>春天花会开</p>
<div style="background-color:#0F0">654321</div>
<div class="aa" id="a1">a1</div>
<div class="aa" id="a2"><p>a2</p></div>
<div class="aa" id="a3">a3</div>
<div class="aa" id="a4">a4</div>


</body>
</html>


CSS
@charset "utf-8";
/* CSS Document */
p/*针对所有P标签*/
 { 
 font-size:18px;/*规定字体大小*/
  color:#F00;/*规定文字颜色*/
   background-color:#FF0;/*规定背景颜色*/
 }
 .aa
 { width:300px;
 height:200px;
 border:1px solid #900;
}
.aa p
{ font-size:36px; color:#F06;    
}
#a1
{ background-color:#0C6;    
}
#a2
{ background-color: #309;    
}    
#a3
{ background-color: #3FF;
}
#a4
{ background-color: #90C;    
}
a
{font-size:24px;
}
a:link
{ text-decoration: none; color:black;
}
a:visited
{ text-decoration: none; color:black;
}
a:hover
{ text-decoration: underline; color:orange;
}
a:active
{ text-decoration: underline; color:black;
}

 

以上是关于5.21 CSS样式表练习的主要内容,如果未能解决你的问题,请参考以下文章

web前端篇:CSS使用,样式表特征,选择器

5.21上机练习

样式表练习

外部样式表不会覆盖引导程序

十二周上机练习(5.21)

JS对于导航栏下拉菜单以及选项卡的切换操作大图轮播(主要练习对于样式表的操作)