CSS+DIV-初探CSS

1-1.html

< html >
< head >
   < title >页面标题 </title>
     </head>
< body >
   < h2 >CSS标记 </h2>
   < p >CSS标记的正文内容从这里开始 </p>
</body>
</html>

1-2.html

< html >
< head >
   < title >页面标题 </title>
     </head>
< body >
   < h2 > < font color ="#0000FF" face ="黑体" >CSS标记1 </font> </h2>
   < p >CSS标记的正文内容1 </p>
   < h2 > < font color ="#0000FF" face ="黑体" >CSS标记2 </font> </h2>
   < p >CSS标记的正文内容2 </p>
   < h2 > < font color ="#0000FF" face ="黑体" >CSS标记3 </font> </h2>
   < p >CSS标记的正文内容3 </p>
   < h2 > < font color ="#0000FF" face ="黑体" >CSS标记4 </font> </h2>
   < p >CSS标记的正文内容4 </p>
</body>
</html>

1-3.html

< html >
< head >
< title >页面标题 </title>
< style >
<!--
h2{
  font-family:幼圆;
  color:red;
}
-->
</style>
     </head>
< body >
   < h2 >CSS标记1 </h2>
   < p >CSS标记的正文内容1 </p>
   < h2 >CSS标记2 </h2>
   < p >CSS标记的正文内容2 </p>
   < h2 >CSS标记3 </h2>
   < p >CSS标记的正文内容3 </p>
   < h2 >CSS标记4 </h2>
   < p >CSS标记的正文内容4 </p>
</body>
</html>

1-4.html

< html >
< head >
< title >页面标题 </title>
< style >
<!--
ul{
  list-style-type:none;
  display:inline;
}
-->
</style>
     </head>
< body >
   < ul >
     < li >list1 </li>
     < li >list2 </li>
   </ul>
</body>
</html>

1-5.html

< html >
< head >
< title >页面标题 </title>
     </head>
< body >
   < p style ="color:#FF0000; font-size:20px; text-decoration:underline;" >正文内容1 </p>
   < p style ="color:#000000; font-style:italic;" >正文内容2 </p>
   < p style ="color:#FF00FF; font-size:25px; font-weight:bold;" >正文内容3 </p>
</body>
</html>

1-6.html

< html >
< head >
< title >页面标题 </title>
< style type ="text/css" >
<!--
p{
  color:#FF00FF;
  text-decoration:underline;
  font-weight:bold;
  font-size:25px;
}
-->
</style>
     </head>
< body >
   < p >紫色、粗体、下划线、25px的效果1 </p>
   < p >紫色、粗体、下划线、25px的效果2 </p>
   < p >紫色、粗体、下划线、25px的效果3 </p>
</body>
</html>

1-7.html

< html >
< head >
< title >页面标题 </title>
< link href ="1.css" type ="text/css" rel ="stylesheet" >
     </head>
< body >
   < h2 >CSS标题1 </h2>
   < p >紫色、粗体、下划线、25px的效果1 </p>
   < h2 >CSS标题2 </h2>
   < p >紫色、粗体、下划线、25px的效果2 </p>
</body>
</html>

1-8.html

< html >
< head >
< title >页面标题 </title>
< style type ="text/css" >
<!--
@import url(1.css);
-->
</style>
     </head>
< body >
   < h2 >CSS标题1 </h2>
   < p >紫色、粗体、下划线、25px的效果1 </p>
   < h2 >CSS标题2 </h2>
   < p >紫色、粗体、下划线、25px的效果2 </p>
   < h3 >CSS标题3 </h3>
   < p >紫色、粗体、下划线、25px的效果3 </p>
</body>
</html>

1-9.html

< html >
< head >
< title >页面标题 </title>
< style type ="text/css" >
<!--
@import url(1.css);
@import url(2.css);
-->
</style>
     </head>
< body >
   < h2 >CSS标题1 </h2>
   < p >紫色、粗体、下划线、25px的效果1 </p>
   < h2 >CSS标题2 </h2>
   < p >紫色、粗体、下划线、25px的效果2 </p>
   < h3 >CSS标题3 </h3>
   < p >紫色、粗体、下划线、25px的效果3 </p>
</body>
</html>

1-10.html

< html >
< head >
< title >样式优先级问题 </title>
< style type ="text/css" >
<!--
@import url(2.css);
h3{
  background-color:#000000;
    color:#FF0000;
}
-->
</style>
< link href ="3.css" type ="text/css" rel ="stylesheet" >
     </head>
< body >
   < h3 style ="text-decoration:underline;" >CSS标题测试 </h3>
</body>
</html>

1-11.html

< html >
< head >
< title >体验CSS </title>
< style type ="text/css" >
<!--
/* 上一行避免老式浏览器不支持CSS */
body{
  padding:0px;
  margin:0px;
  background-color:#FFFF99;  /* 设置背景颜色*/
}
#title{
  font-size:19px;        /* 字号 */
  font-weight:bold;      /* 粗体 */
  text-align:center;      /* 居中 */
  padding:15px;        /* 间距 */
  background-color:#FFFFCC;  /* 背景色 */
  border:1px solid #FFFF00;  /* 边框 */
}
#content{
  padding:6px;        /* 间距 */
  font-size:13px;        /* 字号 */
  line-height:130%;      /* 行间距 */
}
img{
  float:left;          /* 图文混排 */
  filter: alpha(opacity=100,finishopacity=0,style=2);  /* 渐变效果 */
}
-->
</style>
     </head>

< body >
   < div id ="title" >CSS简介 </div>
   < div id ="content" >
   < img src ="bike.jpg" border ="0" >
  CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并容许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核经过，而且推荐使用的。简单的说CSS的引入就是为了使得HTML可以更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、总体排版等等，而且网页设计者能够针对各类可视化浏览器设置不一样的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引起了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。 </div>
</body>
</html>

1.css

h2{
  color: #0000FF;
}
p{
  color: #FF00FF;
  text-decoration: underline;
  font-weight: bold;
  font-size: 20px;
}

2.css

h3{
  color: #00FFFF;
  font-style: italic;
  font-size: 40px;
}

3.css

h3{
  padding-top: 50px; /* 顶端间隔50px */
}

来源：《精通CSS+DIV网页样式与布局 》