從0開始學CSS（一）
HTML style 屬性 style="style_definition"
<h1 style="color:blue; text-align:center">This is a header</h1>
<p style="color:red">This is a paragraph.</p>
複製代碼
style_definition一個或多個由分號分隔的CSS屬性和值。
HTML <style> 標籤
<html>
<head>
<style type="text/css">
span {color:red}
p {color:blue}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
</body>
</html>
複製代碼
定義和用法
<style>標籤用於爲HTML文檔定義樣式信息。- 在
style中，您能夠規定在瀏覽器中如何呈現 HTML 文檔。 type屬性是必需的，定義style元素的內容。惟一可能的值是"text/css"。style元素位於head部分中。
type 屬性<style type="text/css">
- 目前，惟一可能的值是
"text/css"。
HTML 標籤
<link rel="stylesheet" type="text/css" href="theme.css">
複製代碼
rel 屬性
stylesheet文檔的外部樣式表。
href 屬性<link href="URL">
- URL 超連接的 URL。可能的值：
- 絕對 URL - 指向另外一個站點
- 相對 URL - 指向站點內的某個文件
CSS選擇器
id選擇器class選擇器- 標籤選擇器
- 並列選擇器
- 級聯選擇器
*通用選擇器- 選擇器的優先級
CSS 背景
background-color 屬性
設置元素的背景顏色。css
body{
background-color:yellow;
}
複製代碼
color_name規定顏色值爲顏色名稱的背景顏色（好比red）。hex_number規定顏色值爲十六進制值的背景顏色（好比#ff0000）。rgb_number規定顏色值爲 rgb 代碼的背景顏色（好比rgb(255,0,0)）。transparent默認。背景顏色爲透明。
background-image 屬性
設置背景圖像
元素的背景佔據了元素的所有尺寸，包括內邊距和邊框，但不包括外邊距。
默認地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。 html
body {
background-image: url(bgimage.gif);
background-color: #000000;
}
複製代碼
url('URL')指向圖像的路徑。none默認值。不顯示背景圖像。
background-repeat 屬性
設置是否及如何重複背景圖像。瀏覽器
body {
background-image: url(stars.gif);
background-repeat: repeat-y;
}
複製代碼
repeat默認。背景圖像將在垂直方向和水平方向重複。repeat-x背景圖像將在水平方向重複。repeat-y背景圖像將在垂直方向重複。no-repeat背景圖像將僅顯示一次。
background-position 屬性
設置背景圖像的開始位置。url
body{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
複製代碼
top center right若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。 默認值：0% 0%。x% y%第一個值是水平位置，第二個值是垂直位置。左上角是0% 0%。右下角是 100% 100%。 若是您僅規定了一個值，另外一個值將是 50%。xpos ypos第一個值是水平位置，第二個值是垂直位置。 左上角是0 0。單位是像素(0px 0px)或任何其餘的CSS單位。 若是您僅規定了一個值，另外一個值將是50%。- 能夠混合使用
%和position值。
background-attachment 屬性
設置背景圖像是否固定或者隨着頁面的其他部分滾動。spa
body {
background-image: url(bgimage.gif);
background-attachment: fixed;
}
複製代碼
scroll默認值。背景圖像會隨着頁面其他部分的滾動而移動。fixed當頁面的其他部分滾動時，背景圖像不會移動。
background 屬性
在一個聲明中設置全部的背景屬性。
一般建議使用這個屬性，而不是分別使用單個屬性，由於這個屬性在較老的瀏覽器中可以獲得更好的支持，並且須要鍵入的字母也更少。code
body {
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
複製代碼
相關文章
- 1. 從0開始學CSS（二）
- 2. 從0開始學CSS（三）
- 3. 從0開始學HTML（一）
- 4. 從頭開始學css（一）
- 5. 從0開始學架構
- 6. 學習Flutter從0開始
- 7. 從0開始學Flutter
- 8. 從0開始學HTML（二）
- 9. 從0開始學Kafka（上）
- 10. 從0開始學習Android
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • Kotlin學習（一）基本語法
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 從0開始學CSS（二）
- 2. 從0開始學CSS（三）
- 3. 從0開始學HTML（一）
- 4. 從頭開始學css（一）
- 5. 從0開始學架構
- 6. 學習Flutter從0開始
- 7. 從0開始學Flutter
- 8. 從0開始學HTML（二）
- 9. 從0開始學Kafka（上）
- 10. 從0開始學習Android