標籤：cli UI line att type class 百分比 方式 顯示
一、CSS常用選取器/*CSS注釋*//*CSS修改頁面中的所有標籤必須藉助選取器選中。選取器中可以寫多對CSS屬性:每個屬性名稱與屬性值之間用:分隔，多對屬性之間，必須用;分隔選取器{屬性1:屬性值;屬性2:屬性值; 必須用英文英文！！！！！} 頁面中，所有的css代碼，需要寫到<style></style>標籤中，style標籤的type屬性應該選擇text/css，但是type屬性可以省略【css常用選取器】1.標籤選取器 1寫法：HTML標籤名{作用：可以選中頁面中所有與選取器同名的HTML標籤。}2.類別選取器 10寫法：.class名{}調用：在需要的調用選取器樣式的標籤上，使用class="class名"調用選取器。class的優先順序大於標籤選取器如果需要連個類名用空格分隔3.ID選取器 100寫法：#ID名{}調用：需要調用樣式的標籤，起一個id="id名"同時存在時優先順序ID選取器大於class選取器id選取器整個頁面中不能出現同名ID class選取器與id選取器區別①寫法不同，前者用 . 後者用 #②優先順序不同③作用範圍不同，class可以選擇多個，而id選取器只能使用一次。 【選取器的命名規範】只能由字母數字底線減號組成開頭不能是數字，也不能是只有一個減號一般起名要求有語義使用英語單詞與數位組合 4.通用選取器*{}* 作用：可以選中頁面中的所有標籤，但是優先順序最低5.並集選取器寫法：選取器1.選取器2，，選取器n{}左右：多個選取器取並集，只要標籤滿足其中任意一個選取器，樣式即刻生效。6.交集選取器寫法：兩個選取器之間沒有任何東西作用：多個選取器取交集，到必須滿足所有選取器的要求才會生效。7.後代選取器和子代選取器後代選取器寫法：div span{}只要滿足前一個選取器是後一個的後代，即刻生效子代選取器寫法：div>span必須滿足後一個選取器是後一個選取器的直系子代，才會生效，中間不能有任何標籤。8.偽類別選取器寫法：在選取器後面用冒號分隔緊接偽類狀態eg：.a:link{}超連結的偽類狀態：：link未訪問狀態：visited已訪問狀態：hover 滑鼠指上狀態（最常用）：active啟用選定狀態當超連結多種偽類狀態同時存在時，必須按照link、visited、hover、active順序 input的偽類狀態：：hover ：focus 獲得焦點狀態：active注意input的多種狀態同時存在，必須按照上面的順序。其他標籤必須按照上面的順序。 【優先順序權重問題】1.CSS生效的第一原則是，近者優先。那個選取器作用於最裡層標籤，則這個選擇起生效。2.當選擇其作用於同一層時。可以根據優先順序權重，進行累加計算，id選取器100class選取器10標籤選取器1並集選取器相當於多個選取器拆開寫，所以並集選取器的優先順序不能累加3.當選取器作用於同一層且優先順序權重相等時，則寫在最後的選取器生效（離代碼近）。 【引入CSS的三種方式】1.行內樣式表：直接在HTML標籤中，使用style的方式引用；<div style="height:100px"></div>優點，使用靈活，優先順序權重最高。缺點：不符合w3c關於內容跟表現分離的要求；不利於樣式複用。2.內部樣式表：在<head></head>標籤中，使用<style></style>標籤包裹CSS代碼特點：一定程度的實現了HTML與css的分離，但是分離不夠徹底，沒有辦法多頁面公用樣式。3.外部樣式表：將css單獨寫入CSS檔案中，並於html檔案關聯。優點能夠實現HTML與css的分離，符合w3c規範，有利於多頁面重複使用統一樣式。【引用css樣式表】：rel：選擇stylesheettype：選擇text/css，可以省略href：表示連結的css檔案路徑匯入css檔案的兩種方式，①在<head></head>標籤中使用link標籤②在style標籤中使用@import匯入 兩種匯入方式的區別（面試的時候容易問）①link屬於標準的HTML標籤，而@import不是標準標籤②link可以相容所有低版本瀏覽器，而後者則不行③link是將連個檔案串連起來起橋樑作用，而@import相當於將css檔案複製到HTML檔案中。④linkhuizaihtml檔案邊載入的過程中邊連結css檔案而@import會在html檔案全部載入完以後在匯入css檔案。 綜上所述，我們使用link串連的方式載入css檔案。 【css中顏色表示方式】 ①直接使用顏色單詞表示：red、blue②使用顏色的16進位數表示：#ffffff 前兩位倆倆一組（最常用的）③用RGB表示rgb（255.0.0）三位元分別表示紅綠藍的對比。rgba第四位元表示透明度。 【css常用文字屬性】1.字型、字型大小類：①font-weight：字型粗細 bold（加粗） normal（正常） ligher（細體）也可以使用100-400數值，400表示normal；700是bold②font-style：字型樣式，italic-傾斜，normal-正常 200%表示 瀏覽器預設大小的的兩倍③font-family：字型系列；可以直接寫字型名，也可以寫字型系列名常用字型系列：serif——襯線體 sans-serif——非襯線體fontfamil可以接受多個值，用“,”分隔表示優先使用第一個，如果沒有這個字型一次向後使用，通常最後一個值放字型系列值font縮寫形式：①順序必須是：font-weight font-style font-size/line-height font-family font——size/line-height必須一組，用/分隔font-family多個字型之間，用逗號分隔2.字型顏色①color：可以是單詞、16進位、rbg等②opacity：透明度，可選值0-1opacity和rgba得到區別rgba本身可以設定顏色，而opacity必須配合其他顏色屬性來用rgba僅僅是讓使用中色彩設定的透明，而opacity會讓當前元素裡面的所選文字背景，子項目都透明3.行距對齊類①line-height：可以寫像素單、百分比、數字（表示預設行距的幾倍）行高重要作用，單行文字子在div中垂直置中，設定行高=div的高度即可讓行文字垂直置中②text-align：設定地區內的行級元素水平對齊：left、center、right③letter-space：字元間距，字元與字元之間的距離。④text-decoration：文本修飾 underline底線、overline-上劃線、 line-though刪除線、none去掉超連結的底線⑤over-follow：設定超出地區的文字顯示方式overfollow：hidden ：超出地區的文字隱藏不顯示。overfollow：scroll：無論多少文字，都會顯示水平垂直捲軸***overfollow：auto；文字多顯示捲軸，文字少不顯示捲軸***可以使用 overfollow-x：scroll；overfollow-y；hidden單獨修改兩個方向的捲軸⑥text-overflow：設定行末多餘文字的顯示方式clip：多餘文字裁剪掉ellipsis：顯示省略符號，需要配合white-space：nowrap使用white-space：nowrap;設定中文行末，不斷行顯示。 *******重點：設定行末顯示省略符號的*********overflow: hidden;text-overflow: ellipsis;white-space: nowrap這三個條件缺一不可 ⑦webkit-text-stroke：0.5px blue：文字描邊。webkit表示只有webkit核心瀏覽器 才生效：蘋果和Google⑧text-shadow: 2px 2px 2px blue 文字陰影有四個屬性值，空格分隔水平陰影距離，正數表示右移，負數左移，第二個數垂直陰影距離，正數上移，負數下移，第三個數值，陰影模糊距離，0表示一點不模糊。⑨text-indent：首行縮排css入門基礎知識
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
