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網頁樣式與佈局 》