HTML5 & CSS3初學者指南(2) – 樣式化第一個網頁

時間  2019-12-12 標籤 html5 html css3 css 初學者 指南 樣式 第一個 網頁

介紹

咱們已經使用基本的 HTML 編寫了一個網頁。可是，寫出來的 HTML 代碼的網頁看起來很平淡，沒有吸引力。css

如何改善這種很平淡的頁面呢？html

讓咱們開始使用網頁的基本樣式來改善頁面效果，咱們將會使用到 CSS 的功能。前端

正式開始 CSS 是層疊樣式表的縮寫，它是爲網頁添加樣式的通用語言，在全部瀏覽器中都支持。最新的標準是 CSS3，這與早期版本徹底向後兼容。CSS3 的規範是由 W3C 開發的，目前仍處於開發階段，其最新的版本是 CSS Snapshot 2010。瀏覽器

 

打開你的文本編輯器，鍵入下圖上半部分中顯示的 HTML 代碼。完成時，保存成 .htm 或 .html 文件，並將其拖入到瀏覽器中，你將會在網頁中看到下圖的下半部分。app

若是說，你的客戶看到了網頁，要求最大標題設爲藍色，而且放置在網頁的中心，你能夠作到嗎？單獨使用 HTML，毫無疑問是作不到的。彆着急！添加如下 CSS 代碼（下圖中藍色的部分）到 HTML 代碼中，就能知足客戶的需求。編輯器

基本的CSS語法

剛纔，咱們已經添加了一個 CSS 樣式到咱們的網頁中。讓咱們來看看基本的 CSS 語法。ide

步驟1 -在 head 部分，添加開始標籤 <style> 和結束標籤 </style>。這部分區域將用來設計 CSS 樣式規則。工具

<style>
    /* Add CSS rule set here */
</style>

須要注意的是，/ *和* /用於封裝 CSS 中的註釋。註釋是用來解釋代碼的，瀏覽器會將其忽略。學習

 

第2步 -選擇咱們想要添加樣式的 HTML 元素。這個例子中是 <h1> 標籤，在 CSS 的專業術語中，咱們將h1稱爲選擇器。h1 後面的 {  }，用於將 h1 的樣式聲明括起來。開發工具

<style>
    h1 /* This is the selector */
    {
       /* Add style declarations here */
    }
</style>

 

第3步-添加2個樣式聲明，一個用於將 <h1> 的內容設置爲 blue ，另外一個設置爲居中顯示。

<style>
    h1
    {
         color:blue;        /* This is a declaration */
         text-align:center; /* This is another declaration */
    }
</style>

每一個聲明包含一個屬性和一個值，用冒號分隔（：），並以分號結束（;）。在咱們的例子，color 是屬性，blue 是值。

介紹完 CSS 的基本語法。讓咱們一塊兒來看看：

<style> /* Start of CSS block */
    h1  /* This is the selector */
    {
         color:blue;        /* This is a declaration */
         text-align:center; /* This is another declaration */
    }
</style> /* End of CSS block */

要添加樣式到一個 HTML 元素中，好比 <p>，簡單的爲選擇器 p 添加樣式聲明，其後的 h1 也是。順序並不重要。

<style>
    h1
    {
         color:blue;
         text-align:center;
    }
    p
    {
         color:green;
         text-align:right;
    }
</style>

看到你完成的很好，你的客戶又有了新的需求：須要將第二行字設爲紅色、左對齊。

CSS選擇器

CSS 選擇器可以幫助咱們查找，選擇，聲明 HTML 元素的樣式描述。

 

元素選擇器

在前面的例子中，咱們已經經過 HTM L標籤使用了 CSS 選擇器，就像對 h1，h3 和 p 元素應用相應的樣式。請記住，一個網頁能夠包含不少這樣的標籤，尤爲是 <p> 標籤。P 選擇器會將相同的樣式應用到整個網頁中的全部 <p> 標籤中，無一例外。這意味着，全部的 <p> 標籤將是綠色和右對齊的。這種地毯式的樣式應用將會讓單獨段落的定製化樣式沒法實現，由於全部的段落都受 p 選擇器的影響。

（將下面的代碼添加到 HTML 文檔的描述部分。）

爲了克服這種侷限性，咱們將引入另外2種選擇器- ID選擇器和類選擇器。

 

ID選擇器

每一個 HTML 標籤都有一個 id 屬性，具備和其它不同的命名。例如，HTML 文檔中有2個 <p> 標籤，咱們能夠將它們中的一個命名爲「para1」，而另外一個命名爲「 para2」。要在 CSS 代碼中選擇它們，須要在 ID 名稱以前添加「＃」。命名爲「para1」和「 para2」的選擇器，將會經過「 #para1」和「 #para2」進行區分。咱們能夠經過 ID 名稱做爲選擇器，來爲它們應用不用的 CSS 樣式。

你可能已經注意到具備 ID 名稱 para1 和 para2 的兩個段落保持居中屬性，即便在各自的選擇器中並未設置居中屬性。在這種狀況下，他們都繼承了父級元素的 text-align 屬性。


注意如下關於 id 選擇器的幾點：你可能已經注意到具備 ID 名稱 para1 和 para2 的兩個段落保持居中屬性，即便在各自的選擇器中並未設置居中屬性。在這種狀況下，他們都繼承了父級元素的 text-align 屬性。

  • 不要以數字開頭一個 ID 名稱

  • ID 名稱應該是一個頁面內惟一的

  • 若是想要對頁面中的單個元素使用樣式時，可使用 ID 選擇器

 

類選擇器

相似地，每一個 HTML 標籤都有一個class屬性，具備和其它不同的命名。例如，若是 HTML 文檔中有4個 <p> 標籤，咱們將其中的兩個命名爲「group1」。要在 CSS 代碼中選擇它們，須要在其類名以前添加一個點字符（.）。咱們能夠經過類選擇器名將一組 CSS 樣式共享給相同類名的一組 HTML 元素。

類名不要以數字開頭注意如下關於類選擇器的幾點：

  • 類名不要以數字開頭

  • 當你想要選擇網頁中的一組元素時，請使用類

 

選擇器的連接

若是一些元素須要設置爲相同的樣式，咱們能夠經過最少許的代碼將它們一塊兒設置。

 

CSS的位置
目前，咱們都是將 CSS 樣式放置在 HTML 文檔的頭部，這種樣式被稱爲內部樣式。實際上還有另外2种放置 CSS 樣式表的方式- 外部樣式和內聯樣式。

 

內部樣式表

咱們已經很熟悉了內部樣式表。當一個 HTML 文檔具備獨特的風格時，可使用內部樣式。然而，當許多 HTML 文檔共享同一個樣式的狀況時，這種方式是很是低效的。爲此，咱們應該去使用外部樣式表。

 

外部樣式表

顧名思義，外部樣式表放置在全部 HTML 文檔的外部。每一個文檔都會經過頭部的 <link> 標籤連接到外部樣式表。下面，讓咱們一塊兒看看是如何實現的。

咱們會將 HTML 文件中 <style> 和 </style> 標籤之間的代碼剪切並粘貼到一個文本編輯器中。將這個文件命名爲「mystyle.css」並保存在 HTML 文檔的同一文件夾中。請注意，.css 是外部樣式表的文件擴展名。

h1,h2,p
{
   color:red;
   text-align:right;
}

CSS 樣式已經從 HTML 文件中轉移出來了。要在 HTML 文件中添加「mystyle.css」連接，須要在 HTML 文檔的頭部添加以下的代碼：

<link rel="stylesheet" type="text/css" href="mystyle.css">

將 HTML 文件拖入瀏覽器中，將會看到和以前相同的網頁。

當咱們想要在站點的多個網頁中應用相同的樣式時，使用外部樣式表是很理想的。咱們能夠在外部樣式表中作一個改動，就能改變整個站點的外觀和感受。這大大有助於網站的維護。

 

內聯樣式表

內聯樣式是經過如下代碼中 HTML 標籤的屬性來聲明樣式的：

<p style="color:red;text-align=center;">Inline Style Sheet</p>

然而，這種在 HTML 標籤中內嵌 CSS 也致使了內容呈現的混亂，不利於 CSS 的引進。因此，應該儘量避免使用內聯樣式表。

 

樣式表的優先級

不難想象，一個 HTML 元素具備內聯、內部和外部樣式這三種樣式的情形。在這種狀況下，其風格應該是混亂的。

下面是起做用的優先級順序（從高到低）：

  • 內嵌樣式表（內部 HTML 元素）

  • 內部樣式表（內部 head 部分）

  • 外部樣式表（外部的 .css 文件）

  • 瀏覽器默認的（沒有指定任何樣式表）

請記得個人這個經驗法則-「 最接近元素的樣式，優先級最高 」。

CSS屬性

在前面的例子中，咱們已經使用了「color」和「 text-align" 屬性。它們只是衆多 CSS 屬性中的2個。CSS 屬性的名稱是至關直觀的，也就是說，它們會起到它們名稱的做用。

下面，咱們討論如下的三種屬性（背景/文本/字體）。

CSS背景

能夠經過如下的 CSS 背景屬性設置網頁的背景：

  • 背景顏色

咱們使用 backgrounf-color 屬性來設置任何 HTML 元素的背景顏色，包括 <body> 標籤。

  • 背景圖

咱們使用 backgroung-image 屬性將背景圖像嵌入到任何 HTML 元素，添加如下代碼片斷到 HTML 文件中，修改 url 參數使其指向一個圖像文件：

body{background-image:url("logo250x135.gif");}

背景顯示在瀏覽器中，整個網頁的背景是圖像的平鋪效果。

  • 背景重複

須要背景圖像水平重複的，使用 background-repeat:repeat-x。

body
{
    background-image:url("logo250x135.gif");
    background-repeat:repeat-x;
}

須要背景圖像垂直重複的，使用 background-repeat 屬性repeat-y。

background-repeat:repeat-y;

若是不須要左上角的 backgroung-image 有任何重複，改變背景重複屬性值爲 no-repeat。

background-repeat:repeat-y;

 

背景位置

須要固定背景圖像到屏幕的某些位置上，設置 backgroung-position屬性爲「top right」。

body
{
    background-image:url("logo250x135.gif");
    background-repeat:no-repeat;
    background-position:top right;
}

 

CSS文本

網頁上的任何文本效果，均可以經過如下的 CSS 屬性來設置：

  • 顏色

color屬性用於設置任何 HTML 元素的文本顏色。

  • 文本對齊

text-align 屬性用於設置文本的水平對齊方式。能夠採用如下的四個值的一個：center、left、right、或 justified。

  • 文字修飾

text-decoration 屬性用於設置或者取消任何 HTML 內容元素的裝飾。能夠採用如下的四個值的一個：overline、line-through、underline、none.

<!DOCTYPE html>
<html>
<head>
<style>
    #overline{text-decoration:overline;}
    #strikethrough{text-decoration:line-through;}
    #underline{text-decoration:underline;}
</style>
</head>
<body>
    <p id="overline">Under one roof</p>
    <p id="strikethrough">Cancel an appointment</p>
    <p id="underline">On solid footing</p>
</body>
</html>
  • 文本轉換

none 值用於移除超連接的默認下劃線。

text-transform 用於將任何 HTML 元素的文本內容轉換爲大寫，小寫，或根據值設置是否大寫。

  • 文本縮進 

text-index 屬性是用於指定文本的首行縮進量。

CSS字體
文本的字體效果能夠經過如下的 CSS 屬性來設置：

 

字體系列

font-family 屬性用於 HTML 文檔中的文本的字體。有兩種類型的font-family：

    • 指定的系列名稱，如Times New Roman、 Verdana、arial等。

    • 一般字體系列名稱，如sans-serif、Serif、fantasy、monospace等。

如下是常見的幾種 font-family 屬性的風格名稱。字體列表用逗號分隔。對於名稱中有空格的字體，使用引號將其括起來，如"Times New Roman"：

font-family:"Times New Roman",Cambria,Serif;

若是瀏覽器不支持第一個字體，則會嘗試下一個。經驗法則是，你應該老是以你想要的字體風格名稱開始，並以一般字體系列結尾。這將容許瀏覽器在全部字體不可用的狀況，選擇近似的字體集合。

試試下面的例子，並在瀏覽器上查看結果。

 

字體樣式

font-style 屬性能夠採用如下三個值中的一個- normal，italic 或 oblique。將如下 CSS 代碼添加到以前的例子中查看各自的效果。

.serif
{
    font-family:"Times New Roman",Georgia,serif;
    font-style:normal;
}
.sansserif
{
    font-family:Arial,"Century Gothic",sans-serif;
    font-style:italic;
}
.monospace
{
    font-family:"Courier New",Monaco,monospace;
    font-style:oblique;
}

 

字體大小
咱們可使用 font-size 屬性並經過如下三個不一樣的測量單位來設置文本的大小：pixel、em 或 percentage。

讓咱們一塊兒檢查一下瀏覽器的輸出。第一段是100%的字體大小，默認使用 CSS 中的 body 選擇器。相比較，第二段爲50％的字體大小。對於第3段和第4段，他們的字體大小相同。查看他們各自的 CSS 聲明，它們被設置爲 16px 和 1em。換句話說，1em 等同於 16px。

注意事項

讓咱們一塊兒回顧一下今天的學習要點：

  • CSS 不區分大小寫

  • 選擇器名稱不能以數字開頭

  • 儘量避免使用內嵌樣式表

第二次的學習就到這裏。

學習了HTML5的一些新特性，會讓咱們更清楚的瞭解HTML5。目前前端開發漸成熱潮，在進行前端開發時，還能夠藉助一些前端開發工具。如Wijmo，這是一款大而全面的前端 HTML5 / JavaScript UI控件集，能爲企業應用提供更加靈活的操做體驗，現已全面支持Angular 2。

原文連接：https://www.codeproject.com/Articles/756614/Beginners-Guide-to-HTML-CSS-Styling-Your-First-W

联系我们 沪ICP备13005482号-10