選擇器分為class選擇器和id選擇器 id選擇器編寫樣式以#id名稱,class選擇器則為.class名稱
插入樣式表的方法有三種:
外部樣式表(external style sheet)
內部樣式表(internal style sheet)
內聯樣式(inline style)
style=" css樣式 "
css 屬性定義背景效果:
background-color 背景色
background-image 背景
background-repeat 背景水平或者垂直平鋪
background-attachment 定義背景
隨滾動軸的移動方式
background-position 定位位置
文字:
text-align文字對齊方式
text-decoration 刪除鏈結的下劃線
uppercase 文字轉換為大寫
lowercase文字轉換為小寫
capitalize 首字母大寫
text-indent 文字縮排
color : #999999; 文字顏色
font-family : 宋體,sans-serif; 文字字型
font-size : 9pt; 文字大小
font-style:itelic; 文字斜體
font-variant:small-caps; 小字型
letter-spacing : 1pt; 字間距離
line-height : 200%; 設定行高
font-weight:bold; 文字粗體
vertical-align:sub; 下標字
vertical-align:super; 上標字
text-decoration:line-through; 加刪除線
text-decoration:overline; 加頂線
text-decoration:underline; 加下劃線
text-decoration:none; 刪除鏈結下劃線
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; 文字垂直向下對齊
鏈結
a 所有超連結
a:link 超連結文字格式
a:visited 瀏覽過的鏈結文字格式
a:active 按下鏈結的格式
a:hover 滑鼠轉到鏈結
列表:
st-style-type屬性
list-style-type:none; 不編號
list-style-type:decimal; 阿拉伯數字
list-style-type:lower-roman; 小寫羅馬數字
list-style-type:upper-roman; 大寫羅馬數字
list-style-type:lower-alpha; 小寫英文本母
list-style-type:upper-alpha; 大寫英文本母
list-style-type:disc; 實心圓形符號
list-style-type:circle; 空心圓形符號
list-style-type:square; 實心方形符號
list-style-image:url(/dot.gif); 式符號
list-style-position:outside; 凸排
list-style-position:inside; 縮排
table屬性:
text-align **文字對齊(水平)
vertical-align **文字垂直對齊
border-collapse: collapse; 相鄰邊被合併
background-color: #fff; 設定**背景色
border-top: 1px solid #fff; 設定**上邊框顏色
border-left: 1px solid #fff; 設定**左邊框顏色
border-right: 1px solid #fff; 設定**右邊框顏色
border-bottom: 1px solid #fff 設定**下邊框顏色
盒子模型
margin(外邊距) - 清除邊框外的區域,外邊距是透明的。(上右下左)
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。(上右下左)
content(內容) - 盒子的內容,顯示文字和影象。
邊框:
border-top : 1px solid #6699cc; 上框線
border-bottom : 1px solid #6699cc; 下框線
border-left : 1px solid #6699cc; 左框線
border-right : 1px solid #6699cc; 右框線
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color : #369 設定上框線top顏色
border-top-width :1px 設定上框線top寬度
border-top-style : solid設定上框線top樣式
其他框線樣式
solid 實線框
dotted 虛線框
double 雙線框
groove 立體內凸框
ridge 立體浮雕框
inset 凹框
outset 凸框
隱藏元素:
隱藏元素 - display:none或visibility:hidden
改變乙個元素顯示 display:
display:inline 改為內聯元素
display:block 改為塊級元素
定位:
position: (配合著定位座標來使用)定位座標:left:10px 距左邊, top距上邊, right 距右邊, bottom 距底邊
static 靜態,不定位
fixed
固定, 脫離正常的文件流,比普通元素層級要高。相對於瀏覽器視窗進行定位。不會隨頁面的滾動而移動。
relative
相對定位。(相對於自己原來的位置,霸道的相對,定位之後任然霸佔著原來的位置)
absolute
絕對定位,相對於最近的具有定位屬性的元素進行定位。
浮動:
float:left 左浮動
float:right 右浮動
clear:both 清除浮動
對齊:
margin: auto;元素居中對齊
text-align: center; 文字居中對齊
css常用標籤
color 99999 文字顏色 font family 宋體,sans serif 字型顏色 font size 9pt 字型大小 line height 100 設定行高 font weight bold 文字粗體 vertical align sub 下標字 vertical align su...
css常用標籤
1.css背景樣式 background color 背景色 background image 背景圖 url 背景圖位址 預設 會水平垂直都鋪滿背景圖 background repeat 平鋪方式 repeat x x軸平鋪 repeat y y軸平鋪 repeat x,y都進行平鋪,預設值 no...
HTML和CSS常用標籤
背景圖 background image 邊框的樣式 批量建立 父元素 子元素 屬性 span標籤 在行內定義乙個區域,也就是一行內可以被劃分成好幾個區域,從而實現某種特定效果。本身沒有任何屬性。例子logo標籤 g o o g le 標題巢狀的過程中,必須先結束的靠近內容的標題,再按照由內及外的順...