CSS常用標籤

2021-08-21 13:51:19 字數 3942 閱讀 8713

選擇器分為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 標題巢狀的過程中,必須先結束的靠近內容的標題,再按照由內及外的順...