css指層疊樣式表 (Cascading Style Sheets),樣式定義如何顯示 HTML 元素,樣式通常存儲在樣式表中
css常用屬性
背景:
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-p_w_picpath : url(/p_w_picpath/bg.gif); /*背景圖片*/
background-repeat : repeat; /*重複排列-網頁默認*/
background-repeat : no-repeat; /*不重複排列*/
background-repeat : repeat-x; /*在x軸重複排列*/
background-repeat : repeat-y; /*在y軸重複排列*/
背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
文本: text、word、direction(文本操作:通過文本屬性,您可以改變文本的顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進,等等。)
text-indent(縮進文本) text-indent: 5em;
text-align(水平對齊) text-align:center
word-spacing(字間隔) word-spacing: 30px;
text-decoration(文本裝飾)text-decoration: none
direction(文本方向) direction:rtl;
框模型:背景應用於由內容和內邊距、邊框組成的區域。
padding(內邊距)
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
margin(外邊距)
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
border(邊框)可設置值:寬度,樣式,顏色
框線位置
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
CSS文字屬性:
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
文字對齊
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
定位:
position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow 設置當元素的內容溢出其區域時發生的事情。
clip 設置元素的形狀。元素被剪入這個形狀之中,然後顯示出來。
vertical-align 設置元素的垂直對齊方式。
z-index 設置元素的堆疊順序。
相對定位:注意,在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
絕對定位:絕對定位使元素的位置與文檔流無關,因此不佔據空間。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
選擇器
元素選擇器
爲某個 HTML 元素,比如 p、h1、em、a設置樣式
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
選擇器分組
h2 元素和段落都有灰色。
h2, p {color:gray;}
類選擇器
類選擇器允許以一種獨立於文檔元素的方式來指定樣式。
該選擇器可以單獨使用,也可以與其他元素結合使用。
.important {color:red;}
只有段落顯示爲紅色文本:
p.important {color:red;}
假設 class 爲 important 的所有元素都是粗體,而 class 爲 warning 的所有元素爲斜體,class 中同時包含 important 和
warning 的所有元素還有一個銀色的背景 。就可以寫作:
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
ID選擇器
與類不同,在一個 HTML 文檔中,ID 選擇器會使用一次,而且僅一次。
#intro {font-weight:bold;}
屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
a[href] {color:red;}
a[href][title] {color:red;}
後代選擇器
後代選擇器來創建一些規則,使這些規則在某些文檔結構中起作用,而在另外一些結構中不起作用。
h1 em {color:red;}
子元素選擇器
選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器
h1 > strong {color:red;}
相鄰選擇器
增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p {margin-top:50px;}