CSS核心屬性

CSS:cascading style sheets層疊樣式表 語法:選擇符{屬性:屬性值;屬性:屬性值;} 外部樣式錶鏈接方式 或者 @inport url(路徑名) 不常用，沒那個好 內聯樣式表優先順序最高 *{margin: 0 ;padding:0;} li{list-style:none;} 去掉無序列表的列表符號 a{text-decoration:none;}去掉超鏈接下劃線，寫導航的時候會用到，所以提前寫 包含選擇器選擇符1 選擇符2{屬性:屬性值;} 偽類選擇器a:link{屬性:屬性值;}超鏈接的初始狀態 a:visited{屬性:屬性值;}超鏈接被訪問後的狀態 a:hover{屬性:屬性值;}滑鼠划過超鏈接時的狀態 a:active{屬性:屬性值;}滑鼠按下時超鏈接的狀態

元素選擇符權重0001 class選擇符權重0010 id選擇符權重0100 繼承樣式權重0000 包含選擇符權重為包含選擇符權重之和

font屬性簡寫:字型大小/行高 字體 加粗{font-weight:bolder/bold/normal/100-900;} 傾斜{font-style:normal/italic/obique;} 文本修飾{text-decoration:none/underline/overline/line-through}下劃線/上劃線/刪除線 首行縮進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繼承 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform. 塊狀元素可繼承：text-indent和text-align。 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。 表格元素可繼承：border-collapse。 ? 版權符號 << >> 溢出（設置滾動條） overflow:visible/hidden/scroll/auto/inherit; visible:默認值，內容不會被修剪，會成現在元素框之外； hidden：內容會被修剪，並且其餘內容是不可見的； scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便查看其餘的內容; auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其他的內容; inherit：規定應該從父元素繼承overflow屬性的值

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等

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=」命名錨記名」>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！