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

時間 2019-12-12

標籤 WEB基礎 html css 基礎入門邊框背景欄目 HTML 简体版

原文原文鏈接

前面（HTML圖片）

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

以前，先了解一下HTML中的圖片元素，由於圖片標籤的使用很是簡單，因此就插在這裏說明一下。html

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

寫法格式：<img src="圖像源文件的路徑"/>ui

主要屬性：url

說明：圖片<img/>標籤跟段落<p></p>標籤不太同樣，<img/>是一個自閉合標籤，不是成對出現的。另外，src屬性指明的圖片文件路徑能夠爲相對路徑也能夠爲絕對路徑。spa

相對路徑：以當前網頁文件所在的文件夾爲基準定位，如當前網頁所在的文件夾裏面有個images文件夾，該文件夾裏有一張圖片「風景1.jpg」，那麼，這張圖片的相對路徑就是：「images/風景1.jpg」設計

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

另外，咱們能夠在CSS中使用width和height來定義圖片的大小。這樣，無論圖片的實際大小是多少，咱們均可以按照網頁的實際需求來定義圖片的顯示大小。code

一個例子：xml

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。