HTML第三課——css盒子

時間 2019-12-07

標籤 html 第三 css 盒子欄目 HTML 简体版

原文原文鏈接

請關注公衆號：自動化測試實戰css

css經常使用屬性html

width
寬less
height
高測試
color
字體顏色字體
border
邊框url
background
背景spa

lesson3.htmlcode

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>    <div id="div">        <span>            這是一個span標籤
        </span>    </div>
</body>
</html>

index.csshtm

/*    px:意爲像素; */

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

上面代碼你們會發現咱們只定位到`div`層，可是下面的`span`標籤也有相同的樣式，這就是`css具備繼承性`。blog

如今咱們精確到span層，修改字體顏色爲綠色：

index.css

/*    px:意爲像素; */

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

div#div span{
    color: green;
}

咱們發現字體顏色變爲精確設置的顏色，但樣式仍然是繼承過來的。

邊框，邊框有上下左右四個屬性，若是不須要設置或者四個邊框相同，只須要寫一條border便可：

/*    px:意爲像素; */

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border: 1px solid #0000ff;
}

或

/*    px:意爲像素; */

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border-top: 1px solid #0000ff;    
    border-bottom: 2px solid #000fff;    
    border-left: 3px solid #00000f;    
    border-right: 4px solid #000000;
}

以前咱們的background都是簡單的顏色，若是要用圖片該怎麼辦呢？咱們須要先知道background的幾個寫法

background-color
背景顏色
background-image
背景圖片

background-repeat
若是圖片較小，會將圖片反覆平鋪在頁面上，經過這個屬性可設置圖片效果：

 - background-repeat：repeat-X;
      圖片在水平方向重複
  - background-repeat: repeat-Y;
      圖片在垂直方向重複
  - background-repeat：no-repeat；
      圖片只顯示一次

background-position
圖片位置。
background-positon: center center;居中；第一個
backgroung-position: 0px 0px;第一個值爲水平方向值，第二個值爲垂直方向值；

項目結構：

/*    px:意爲像素; */

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background-image: url("../imgs/pic.png");    
    border: 1px solid #0000ff;
}