HTML第三课——css盒子
生活随笔
收集整理的這篇文章主要介紹了
HTML第三课——css盒子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
請關注公眾號：自動化測試實戰
css常用屬性
-
width
?寬 -
height
?高 -
color
?字體顏色 -
border
?邊框 -
background
?背景
?
lesson3.html
<!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.css
/*px:意為像素; */div#div{
? ?color:red; ? ?
? ?width: 100px; ? ?
? ?height: 100px; ? ?
? ?background: pink;
}
上面代碼大家會發現我們只定位到`div`層，但是下面的`span`標簽也有相同的樣式，這就是`css具有繼承性`。
現在我們精確到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;
}
明天繼續……
轉載于:https://www.cnblogs.com/captainmeng/p/8983987.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的HTML第三课——css盒子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洛谷 P1897电梯里的爱情 题解
- 下一篇： shop--10.店铺列表（前端）