css層疊樣式表簡介


css層疊樣式表簡介

小菜最近整理了一下有關於四種css的樣式。


<html>
<head>
<title></title>
</head>
<body>

<!--
css(Cascading Style Sheets
層疊樣式表)
彌補了HTML中的樣式不足,HTML的不足包括
-》維護困難
-》標記不足
-》頁面過胖
-》定位困難
css的作用:為網頁設置外觀,相當於華麗的外套
1、css的集中設置方式
有四種方式可以將樣式表加入到HTML文檔中,每種凡是都有自己的優點和缺點。
a:內聯樣式表(inline style sheets)
b:嵌入樣式表(cmbedded style sheets)
c:外部樣式表(linked style sheets)
d:輸入樣式表(imported stryle sheets)

-->

<!--
a:內聯樣式:
內聯樣式可以也稱作為行內樣式
直接設置HTML正文標簽的style 屬性的方法稱為內聯樣式表,在本章開始部分就是通過這種方式來幫助讀者理解什么是樣式表的。
<p style="color:#FFFFFF;font-style:normal;">行內樣式</p>
分析總結:行內樣式是最為簡單的css使用方式,但由於需要為每一個標記設置style屬性,后期維護成本依然很高,而且頁面文件容易過大,因此不推薦使用
-->


<!--
b:嵌入式演示表
嵌入式樣式表就是將css寫在<head>與</head>之間,並且用<style>和</style>標記進行聲明。
<html>
<head>
<title>頁面標題</title>
<style type="text/css">
p{
color:#FFFFFF;
text-decoration:underline;
font-weight:normal;
font-size:normal
}
</head>
<body>
<p>嵌入式樣式表</p>
</body>
</html>
-->

<!--
c:鏈接式樣式表
鏈接式CSS樣式表是使用頻率最高,也是最為實用的方法。它將HTML頁面本身與CSS樣式風格分離為兩個或者多個文件,實現了頁面框架HTML代碼與美工CSS代碼的完全分離,使得前期制作和后期維護都十分方便,網站后台的技術人員與美工設計都也可以很好的分工合作。而且對於同一個CSS文件可以鏈接到多個HTML文件中,甚至可以鏈接到整個網站的所有頁面中,使得網站整體風格統一協調,並且后期維護的工作量也大大減少

示例如下:
一、HTML文件如下:
<html>
<head>
<title>頁面標題</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>鏈接式樣式表h1</h1>
<p>鏈接式樣式表p</p>
</body>
</html>

二、CSS文件如下:
h1{
  color:#FFFFFF;
}
p{
  color:#FF00FF;
  text-decoration:underline;
  font-weight:bold;
  font-size:24px;
}


分析總結:鏈接式樣式表的最大優勢在於CSS代碼與HTML代碼完全分離,並且同一個CSS文件可以被不同的HTML所鏈接使用。因此在設計整個網站時,可以將所有頁面都鏈接到同一個CSS文件,使用相同的樣式風格。如果整個網站需要進行樣式上的修改,就僅僅只需要修改這一個CSS文件即可。
-->



<!--
d:輸入樣式表
可以使用css的@import聲明將一個外部樣式表文件(css文件)輸入到的css文件的一部分。也可以使用@import聲明將一個css文件輸入到網頁文件的<style></style>標簽中,被輸入的css文件中的樣式規則定義語句就成了<style></style>標簽中的語句。
-->

</body>

</html>

表述可能有些不全~不足之處請補充~


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com