CSS

CSS： 1、什麼是CSS？ 修飾頁面、管理頁面顯示樣式 2、3種樣式： 1、內聯樣式（只能作用於自己） 2、內部樣式（寫起來不精簡） 3、外部樣式（用起來麻煩，看起來清晰，一個CSS文件可以被多次使用） 3、CSS特點： 1、繼承性，p標籤繼承了body的CSS樣式 2、重疊性，p標籤的樣式來源於父標籤和自己 3、優先級 就近原則：如果沒有父子標籤嵌套，則是位置上的近，否則按照子類的 4、選擇器：重要係數（☆☆☆☆） a、元素選擇器：元素名 b、類選擇器：元素具有class屬性 . className c、元素名. className：class名爲className的XX元素 d、id選擇器：元素具有id屬性  #id e、選擇器組，分組選擇器：h1，p，#id，.class f、派生選擇器：h1  span -->  h1 裏面的所有span元素 h1 > span  -->  h1裏面的所有span子元素 g、僞類選擇器：由於瀏覽器兼容問題，很少使用 常用：  :hover  :focus   5、CSS樣式： 樣式屬性：color（字體顏色）、font-size（字體大小）、background-color（背景顏色）、 width、height、text-decoration（去掉超鏈接的下劃線） a{ /*清除超鏈接默認樣式*/ text-decoration:none; } Border《邊框：border:2px solid red;》、font-family（字體）、 float（浮動）  /*去除列表前面的標記*/list-style-type:none; 樣式屬性: 值 邊框： 寬高溢出：overflow：visible（默認值）：內容不會被剪切， 超出部分會繼續向下顯示（會顯示在邊框外）； hidden:多餘部分會被剪切，並隱藏顯示； scroll：會自動給元素添加滾動條，以顯示多餘部分；   門戶網站政府網站--校園網 電商網站社交網站 視頻網站招聘網站 ---> 模塊，用哪些標籤 盒子模型： margin：外邊距 Border：邊框 Padding：內邊距 Content：內容 佔地寬度： content：width+padding-left+padding-right+margin-left+margin-right+border*2   導航欄： float:left;  左對齊  align=”center”不起作用。   背景圖片： /*設置背景圖片*/ background-p_w_picpath:url('286111.jpg'); /*如果圖片較小，則會默認圖片會重複*/ background-repeat:no-repeat; /*設置圖片固定*/ background-p_w_upload:fixed; /*用一條屬性設置背景圖片分量*/ background:url('286123.jpg') no-repeat fixed; background-position:center; 文本： /*縮進兩個字符*/   text-indent:2em; /*1.6倍行間距*/   line-height:1.6em; Text-decoration  文本修飾   浮動： div  塊元素 如果元素可以排滿一行，則順序排列，如果一行排不下，則移到下面 正常：所有元素順序排列 但是：如果一行無法容納所有元素，則移到下一行，但是有可能被“卡住”（前面元素太高）   /*設置鼠標樣式*/  cursor:wait;   display: /*把元素變成塊元素*/   display:block; /*隱藏元素*/   display:none; /*把元素變成行內元素*/   display:inline;   列表樣式： list-style-type:none; list-style-p_w_picpath:url('add.png');給列表前加圖標   定位： 相對定位：如果對一個元素進行相對定位，它將出現在它所在的位置上。 然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。 絕對定位：絕對定位的元素的位置相對於最近的已定位祖先元素， 如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。 /*設置透明度*/   opacity:0.6;//CSS3特性 /*立體空間位置,大的在上面；值越大，離屏幕越近*/   z-index:150;深度 固定定位：position:fixed;   常用CSS屬性、樣式： 背景：圖片、顏色 大小：寬、高 文本：縮進、行間距、字體大小 定位：相對、絕對、固定 浮動：float 列表：list-style-type    /    list-style-p_w_picpath 盒子：邊框、外邊距、內邊距 字體：font-family 顯示：塊元素(div/li/p/hn)、行內元素(span/img/a)、隱藏顯示（display）