Blogger Information
Blog 2
fans 0
comment 0
visits 1048
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础知识之标签+CSS选择器的应用
阿茂的博客
Original
467 people have browsed it

实例

<!DOCTYPE html> <!-- 文档申明 html5 --> 
<html>
<head>
 <title>这是第一节课的标题</title>  <!--  标题 -->

 <meta charset="utf-8"><!-- 编码格式 -->
 <link rel="stylesheet" type="text/css" href=""> <!--  外部样式 -->
 <!--   rel 定义当前文档跟链接文档的关系  --> 
 <!--  type - 引入样式类型 -->
 <!--  href - 引入文件地址 -->
  <link rel="shortcut icon" type="image/x-icon" href="http://www.iqiyipic.com/common/images/logo.ico">  <!-- 引入图标 -->

  
   <!--   内部样式 -->
   <style type="text/css">
    
    
/*   命名类型  tag标签名  id名  class名 属性选择器*/  
  
  body{width: 500px; height: 500px; background:  blue;} /*标签选择器*/

  .box{width: 500px; height: 500px; background:  red;} /*类选择器*/

  #box { width: 500px; height: 500px; background: green; } /*ID选择器 */
  
  a[href="http://www.baidu.com"]{width: 500px; height: 500px; background: yellow;}  /*属性选择器*/

  .box a{ width: 500px; height: 500px; background: pink;  } /*子父级选择器 PS 表示选择 box类下面的所有a标签元素样式*/

</style>
  <!--  <单标签 开头无结尾   双标签 开头加结尾 > -->

</head>


<body style="background: pink;">  <!--内联样式-->  <!--基本顺序 外部<内部<内联-->


<!--  选择器的应用  -->
<div id="box">
 
 <a href="http://www.baidu.com">百度</a>

 

</div>


<div class="box">
 
 <a href="http://www.php.cn">中文网</a>

</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post