CSS核心屬性大全

2021-08-21 21:13:10 字數 2932 閱讀 6651

css:cascading style sheets層疊樣式表

語法:選擇符

外部樣式表鏈結方式

或者 @inport url(路徑名) 不常用,沒那個好 內聯樣式表優先順序最高 * li 去掉無序列表的列表符號 a去掉超連結下劃線,寫導航的時候會用到,所以提前寫 包含選擇器選擇符1 選擇符2 偽類選擇器a:link超連結的初始狀態 a:visited超連結被訪問後的狀態 a:hover滑鼠劃過超連結時的狀態 a:active滑鼠按下時超連結的狀態

元素選擇符權重0001

class選擇符權重0010

id選擇符權重0100

繼承樣式權重0000

包含選擇符權重為包含選擇符權重之和

font屬性簡寫:字型大小/行高 字型

加粗傾斜

文字修飾下劃線/上劃線/刪除線

首行縮排text-indent可以取負值,只對第一行起作用

text-indent:-999px;

color:transparent;

fong-size:0;

三種方法都可以設定文字不顯示/透明

定義列表符號樣式list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none去掉列表符號

使用作為列表符號:list-style-image:url(所使用的路徑及全稱);

定義列表符號位置:list-style-position:outside/inside;

list-style:none;簡寫

border:5px solid #000;現在很常用

dashed虛線 dotted點狀線double雙線none沒有邊框

background: url(路徑) no-repeat right top;

css繼承white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

該屬性用來設定如何處理元素內的空白;

文字溢位:text-overflow:clip/ellipsis

clip:不顯示省略號(…),而是簡單的裁切;

ellipsis:當物件內文字溢位時,顯示省略標記;

前提是:定義

1、容器寬度:width:value;

2、強制文字在一行內顯示:white-space:nowrap;

3、溢位內容為隱藏:overflow:hidden;

4、溢位文字顯示省略號:text-overflow:ellipsis;

元素型別分類:塊狀元素,內聯元素,可變元素

常用的塊狀元素包塊div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等;

預設情況下,塊狀元素都會佔據一行,通俗地說,兩個相鄰塊狀元素不會出現並列顯示的現象;預設情況下,塊狀元素會按順序自上而下排列。

常見的內聯元素如:a,span,i,em,strong,b,del,br,img,input,a,u等

內聯元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,它的最小內容單元也會呈現矩形形狀;

內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin等屬性,但個別屬性不能正確顯示;

display屬性與屬性值 (18個屬性值)

屬性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group/table-cell/table…

1)block塊狀顯示:類似在元素後面新增換行符,也就是說其他元素不能在其後面並列顯示。

2)inline內聯顯示:在元素後面刪除換行符,多個元素可以在一行內並列顯示。

3)當元素設定了float屬性後,就相當於給該元素加了display:block;屬性;

4)inline-block行內塊元素顯示:元素的內容以塊狀顯示,行內的其他元素顯示在同一行。(只有這乙個元素型別支援vertical-align屬性)img,input。

5)none 此元素不會被顯示。

6)list-item:將元素轉換成列表。li的預設型別

大部分塊元素display屬性值預設為block,其中li預設值為list-item。

大部分內聯元素的display屬性值預設為inline,其中img,input,預設為inline-block。

----------定位屬性

position:static /absolute/relative/fixed固定定位

absolute:絕對定位,將物件從文件流中拖離出來,使用left/right/top/bottom等屬性相對其最接近的乙個並有定位設定的祖籍元素進行絕對定位;如果不存在這樣的祖籍物件,則依據瀏覽器視窗,而其層疊通過z-index屬性定義

relative :相對定位,物件不可層疊,將依據right,top,left,bottom(相對定位)的屬性在正常文件流中偏移位置(相對自己原來的位置偏移)。

包含塊

是給絕對定位元素的父元素新增宣告position:relative

透明屬性

ie8以下瀏覽器寫法:filter:alpha(opacity=value);取值範圍 1-100

相容其他瀏覽器寫法:opacity:.value;(value的取值範圍0-1,0.1,0.2,0.3-----0.9)

css3新增寫法:background:rgba(255,0,0,0.5)

錨點的作用:在同一頁面內的不同位置進行跳轉

《標記 id=「命名錨記名」>

CSS 屬性大全

css 屬性 字型樣式 font style 序號中文說明 標記語法 1字型樣式 2字型型別 3字型大小 4字型風格 5字型粗細 6字型顏色 7陰影顏色 8字型行高 9字 間 距 10單詞間距 11字型變形 12英文轉換 13字型變形 14字型 文字樣式 text style 序號中文說明 標記語法...

CSS屬性大全

背景 屬性共有六項 背景顏色 background color 設定背景顏色。背景影象 background image 設定網頁背景影象。重複 background repeat 控制背景影象的平鋪方式,有不重複 no repeat 重複 repeat,沿水平 垂直方向平鋪 橫向重複 repeat...

css核心屬性

語法 font family 字型1,字型2,字型3 eg body 注 語法 font size 數值 單位 eg h1 注 語法 font weight bold 加粗 bolder 加粗 normal 常規字型 100 900 eg h1,h2,h3,h4,h5,h6 注 當設定為數值時,10...