css 學習筆記

所有標簽都有一個默認樣式,稱為瀏覽器樣式,或者默認樣式

行內樣式:通過在標簽中設置style屬性來達到實現控制標簽的樣式的效果。eg:

    <h1 style="color:red;">這是一個標題</h1>

可以設置多個css屬性

嵌入樣式:在head標簽中嵌套一個style標簽,在style標簽中可以書寫css樣式

外聯樣式:通過link標簽

后代選擇器:空格

并集選擇器:逗號

子元素選擇器:> 只選擇兒子輩的元素

順序不能顛倒

偽類

LVHA原則

 /*未訪問過的鏈接*/
a:link {
    color: red;
}

/*已訪問過的鏈接*/
a:visited { color: gray; }

/*進入*/
a:hover {
    color: green;
}

/*被點擊*/
a:active {
    color: purple;
}

層疊性,繼承性

文字相關的屬性可以繼承,盒子相關不能繼承

一般情況下對body進行字體設置

css優先級

  1. 行內樣式>id選擇器>類選擇器>標簽選擇器

  2. 繼承的樣式優先級 大于 默認的樣式優先級

  3. 通配符選擇器優先級大于 繼承的樣式優先級

  4. 標簽選擇器的優先級大于通配符選擇器優先級

復合選擇器的優先級

行內樣式>id選擇器>類選擇器>標簽選擇器

css單位 與 文字排版

dispaly:控制標簽的顯示模式

  1. none 移除元素
  2. inline 讓元素變成行內元素, 不能設置寬高,只有左右邊距,不獨占行
  3. block 讓元素變成塊級元素, 可以設置寬高,上下左右邊距,獨占行
  4. inline-block 變成行內塊元素, 可以設置寬高,左右邊距,不獨占行

行內元素不能設置寬高,只能通過內容來撐開寬高;

visibility:hide;//隱藏  
display:none;// 移除,不影響頁面布局

css顏色表示

  1. rgb(r,g,b)
  2. rrggbb

r、g、b :0-255 獲取百分比

rr、gg、bb:0-255 的十六進制

css長度單位

一般用相對長度單位:px、em、rem em:當前字體大小,例如:當前元素的字體大小為12px,那么1em=12px;

文字排版

font-size:字號大小,一般頁面12px、14px
font-family: 字體
非襯線體收尾

字體系列

襯線體和非襯線體

字體加粗

設置字體不需要單位

  1. b標簽
  2. font-weight:700; 100-900 :400正常

字體風格

font-style

  1. normal:默認值,標準
  2. italic:使用斜體顯示,如果系統沒有斜體的字體,則正常顯示
  3. oblique:傾斜

字體樣式

font:style weight size family

字間距

letter-spacing:字符與字符之間的空白,默認為normal ,px為單位

 li {
            font-family: "微軟雅黑";
            font-size: 16px;
            font-style: oblique;
            font-weight: 700;
            letter-spacing: normal;
            letter-spacing: 20px; /*字符間距*/
            word-spacing:10px;/*只對字符之間有空格的有影響*/
        }

 a {
            display: inline-block;
            background-color:silver;
            width: 100px;
            height: 50px;
            line-height: 50px;/*文本垂直居中*/
            text-align: center;/*文本水平居中*/
            letter-spacing: 30px;
            text-decoration: none;/*去掉下劃線*/
        }

行高 line-height

文本裝飾

text-decoration
none 默認。定義標準的文本。

underline 定義文本下的一條線。

overline 定義文本上的一條線。

line-through 定義穿過文本下的一條線。

blink 定義閃爍的文本。

inherit 規定應該從父元素繼承 text-decoration 屬性的值。

水平對齊方式 text-align

  1. left: 默認值
  2. right
  3. center

首行縮進

只能設置于塊級標簽

text-indent :值為em的倍數,不同單位的數值,瀏覽器寬度的百分比,允許使用負值,建議用em作為單位

text-indent:-9999px;text-indent:-9999px;/*用于隱藏網站logo的標題,易于seo*/

空白符處理

white-space:normal; 正常顯示,自動折行
white-space: nowrap; 即使超過盒子寬度,文本也不換行顯示
white-space: pre; 寫html的時候什么樣式,顯示就什么樣式

word-break 自動換行

  1. normal 不打斷單詞顯示
  2. break-all 允許單詞打斷換行
  3. keep-all 只能在半角空格或連字符換行,單詞不換行,空格和換行符才換行
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,627評論 32 459
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,884評論 0 6
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 我坐在我的房間 翻看著你的相片 又讓我想到了大理 陽光總那么燦爛 天空是如此湛藍 永遠翠綠的蒼山 我...
    書桐先生閱讀 599評論 0 0
  • AWS EC2 預留實例(Reserved Instance, 下文統一簡稱 RI) 簡單來說就是虛擬機包年, 一...
    haitaoyao閱讀 10,622評論 0 4