【WEB基礎】HTML & CSS 基礎入門（5）邊框與背景

青衫煙雨客發表於2019-05-24
WebHTMLCSS

前面（HTML圖片）

漂亮的網頁肯定少不了邊框與背景的修飾，本篇筆記就是說明如何為網頁上的元素設定邊框或者背景（背景顏色和背景圖片）。

之前，先了解一下HTML中的圖片元素，因為圖片標籤的使用非常簡單，所以就插在這裡說明一下。

HTML中的圖片，我們只需要掌握它的標籤寫法以及它的三個屬性就基本OK了。

寫法格式：<img src="影像原始檔的路徑"/>

主要屬性：

說明：圖片<img/>標籤跟段落<p></p>標籤不太一樣，<img/>是一個自閉合標籤，不是成對出現的。另外，src屬性指明的圖片檔案路徑可以為相對路徑也可以為絕對路徑。

相對路徑：以當前網頁檔案所在的資料夾為基準定位，如當前網頁所在的資料夾裡面有個images資料夾，該資料夾裡有一張圖片“風景1.jpg”，那麼，這張圖片的相對路徑就是：“images/風景1.jpg”

絕對路徑：絕對路徑是指檔案的完整路徑，如：D:/學習/HTML/images/風景1.jpg。

另外，我們可以在CSS中使用width和height來定義圖片的大小。這樣，不管圖片的實際大小是多少，我們都可以按照網頁的實際需求來定義圖片的顯示大小。

一個例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*設定ID為img1的圖片的寬：80px；高：111px*/
        #img1{width:80px;height:111px;}
    </style>
</head>
<body><!--alt:圖片未正常顯示時提示文字，title:當滑鼠移入圖片時提示文字-->
    <img src="images/汽車人1.jpg"  alt="汽車人" title="擎天柱"/>
    <img id="img1" src="images/汽車人1.jpg"  alt="汽車人" title="擎天柱"/>
</body>
</html>

CSS 邊框

我們可以為網頁上的元素設定邊框，比如圖片、表格、文字塊等等。要為某個元素加上邊框，一般只需設定三個屬性即可。

注意：上表中的三個屬性寫起來很麻煩，因此CSS提供了一個簡潔的寫法：

一個例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        img 
        {   /*未採用簡寫方式，邊框為紅色虛線*/
            border-width:2px;
            border-style:dashed;
            border-color:red;
        }
        span
        {   /*採用簡寫方式，邊框為綠色實線*/
            border:2px solid green;
        }
    </style>
</head>
<body>
    <img src="images/汽車人1.jpg" alt="擎天柱"/>
    <span>左邊是擎天柱</span>
</body>
</html>

CSS 背景

背景也是網頁設計中最常用的樣式之一，要想頁面美觀，漂亮的背景是必須的。在CSS中，主要通過背景顏色和背景影像兩種方式來設定背景樣式。

背景顏色 background-color

在CSS中，可以通過 background-color 屬性來定義元素的背景顏色。顏色的取值可以是關鍵字（如：red、blue、green等，基本上都是顏色的英文名稱），也可以是一個16進位制的RGB值。

color 和 background-color：color是前景色（就是元素文字的顏色），background-color是背景色。

例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div 
        {   
            width:180px;
            height:60px;
            background-color:red;
        }
        span
        {   
            color:white; /*文字顏色：白色*/
            background-color:blue; /*背景顏色：藍色*/
        }
    </style>
</head>
<body>
    <div>我是div元素，紅色背景</div>
    <span>我是span元素，藍底白字</span>
</body>
</html>

背景影像

如果背景顏色已經滿足不了需求，那麼就可以使用漂亮的圖片做背景，如果需要設定背景影像，需要掌握以下四個屬性設定：

background-image：設定背景影像的地址路徑，這是個必選屬性。

background-repeat：設定背景的重複方式，屬性取值repeat表示水平垂直方向上都平鋪，repeat-x 和 repeat-y只在水平或垂直方向上重複，no-repeat表示不平鋪。

background-position：定義背景圖片的位置。

background-attachment：當文件比較長，該屬性可定義背景影像是否隨文件滾動。scroll表示背景影像隨物件滾動而滾動，是預設選項；fixed可以固定背景影像。

例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div 
        {/*為所有的DIV元素設定同樣的大小和邊框*/
            width:280px;
            height:150px;
            border:2px solid red;
        }
        #div1
       {
            background-image:url("images/背景.png");
            background-repeat:no-repeat;
            background-position:center;
        }
        #div2
       {
            background-image:url("images/背景.png");
            background-repeat:repeat;
        }
    </style>
</head>
<body>
    <div id="div1">第一個DIV，背景圖片位置居中，不平鋪。</div>
    <div id="div2">第一個DIV，背景圖片重複平鋪。</div>
</body>
</html>

 

相關文章