6_CSS樣式_顏色_字體_文本

關于顏色的小知識

顏色是通過對紅、綠和藍光的組合來顯示的。早期的電腦只支持最多 256 種顏色時,但是現在大多數電腦都能顯示數百萬種顏色。
  1. 顏色名稱

    • 優點:方便快捷而且特定顏色比較準確
    • 缺點:表示顏色數量有限,英文不好的不容易記住,不支持透明度的表示
  2. 十六進制方式

    • 優點:表示顏色種類多,使用較方便
    • 缺點:不支持透明顏色。
  3. RGB方式 三原色配色方式

    • 優點:表示顏色種類多,使用較方便
    • 缺點:不支持透明顏色。
    • 每個參數 (red、green 以及 blue) 定義顏色的強度,可以是介于 0 與 255 之間的整數,或者是百分比值(從 0% 到 100%)。
CSS3新增的顏色表示方法
  1. RGBA方式三原色配色方式

    • 在RGB模式上新增了Alpha透明度。

    rgba(255, 0, 0, 0.5)

  2. HSL模式

    • 語法:HSL(H,S,L),HSL分別表示色調,飽和度,亮度
    • H:0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360
    • S:(飽和度)。取值為:0.0% - 100.0%
    • L:(亮度)。取值為:0.0% - 100.0%

    hsl(120, 50%, 50%)

  3. HSLA模式

    • HSL模式上新增了Alpha透明度。

    hsla(240, 50%, 50%, 0.5)

顏色值查詢方法:
  1. 百度查詢,很多網站有提供
  2. 下載相關手冊等需要時查表
  3. 運用繪圖工具中的拾色器

CSS中常用的字體屬性設置

  1. font-size 規定文本的字體尺寸

    • 通常使用px,百分比,em來設置字體的大小
      • em是css中的相對單位,是相對于當前對象內的字體尺寸,若沒有制定文字大小尺寸,則為瀏覽器默認字體大小
    #div1{font-size: 50px}
    #div2{font-size: 50%}
    #div3{font-size: 5em}
    
    • xx-small、x-small、small、medium、large、x-large、xx-large把字體的尺寸設置為不同的尺寸,默認值:medium。
    {font-size: xx-small}
    
    • smaller 把 font-size 設置為比父元素更小的尺寸。
    • arger 把 font-size 設置為比父元素更大的尺寸。
  2. font-variant:規定是否以小型大寫字母的字體顯示文本。

    • normal 默認值。瀏覽器會顯示一個標準的字體。
    • small-caps 瀏覽器會顯示小型大寫字母的字體。
  3. font-style:規定文本的字體樣式。

    • normal 默認值。瀏覽器會顯示一個標準的字體。
    • italic 瀏覽器會顯示一個斜體的字體樣式。
    • oblique 瀏覽器會顯示一個傾斜的字體樣式。暫時不作講解,了解即可
  4. font-weight:規定字體的粗細。

    • normal 默認值。定義標準的字符。
    • bold 定義粗體字符。
    • bolder 定義更粗的字符。lighter 定義更細的字符。
    • 100-900;定義由粗到細的字符。400 等同于 normal,而 700 等同于 bold。
  5. font-family:規定文本的字體系列。

    #div5{font:italic bold small-caps   60px 楷體;}
    
  6. font:在一個聲明中設置所有字體屬性。

    • 這個簡寫屬性用于一次設置元素字體的兩個或更多方面。
    • 至少要指定字體大小和字體系列
    • 可以按順序設置如下屬性:font-style/font-variant/font-weight/font-size/font-family
  7. @font-face:嵌入字體

  8. 注:字體的設置還有其他幾個很少的用到的屬性,比如font-size-adjust為元素規定 aspect 值;font-stretch 收縮或拉伸當前的字體系列。都很少用到或者多數瀏覽器不支持,

    #div1{font-size: 5em}
    #div2{font-variant: small-caps}
    #div3{font-style: italic}
    #div4{font-weight: bold}
    #div5{font:italic bold small-caps   60px 楷體;}
    #div6{font:italic small-caps 40px 宋體}

    @font-face {
      font-family: "abc";
      src: url('./telefono.ttf');
    }
    p{font-family: abc;font-size: 50px}
font.png

CSS中常用的文本屬性設置

掌握

  1. color 設置文本顏色

    color: rgb(46, 172, 185);

  2. text-align 規定元素中的文本的水平對齊方式。

    • left 默認值/right/center/justify兩端對齊
    • CSS3中新增了start和end屬性值,在通常情況下,start相當于left,end相當于right

    text-align: justify;
    text-align: end;

  3. line-height 設置行高。

    • normal/數字/百分比/px/em

    line-height: 2em;

  4. text-indent 設置文本的首行縮進

    • 常用單位像素/百分比/em

    text-indent: 50px

  5. text-decoration 向文本添加修飾。

    • none 默認值。顯示標準的文本。
    • underline 定義文本下劃線。
    • overline 定義文本上劃線。
    • line-through 定義穿過文本下的一條線。
    • blink 定義閃爍的文本。
    • CSS3中還有一些新增加的屬性值但是目前瀏覽器多不支持,不再介紹

    text-decoration: underline;

  6. letter-spacing 設置字符間距。

    • 定義字符間的固定空間
    • normal 默認。/像素:(允許使用負值)

    letter-spacing: 20px;

  7. word-spacing 設置字/單詞間距。

    • 增加或減少單詞間的空白
    • normal 就等同于設置為 0。/如果指定為長度值,會調整字之間的通常間隔;(允許使用負值)。

    word-spacing: 2em;

  8. text-transform 設置對象中的文本的大小寫

    • none默認。標準的文本。/capitalize每個單詞以大寫字母開頭。/uppercase轉換為大寫字母。/lowercase轉換為小寫字母

    text-transform: capitalize;

  9. text-shadow 向文本添加陰影。

    text-shadow: 10px 10px 5px rgb(203, 130, 32), 15px 15px 5px rgb(80, 6, 187)(設置兩個陰影)

熟悉

  1. white-space 設置元素中空白的處理方式。

    • normal 默認。空白會被瀏覽器忽略
    • pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的pre標簽。
    • nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到br標簽為止。
    • pre-wrap 保留空白符,但是正常地進行換行。
    • pre-line 合并空白符,但是正常地進行換行。

    white-space: pre-line;

  2. direction 設置文本方向

    • ltr默認。文本方向從左到右。/rtl 文本方向從右到左。

    direction: ltr;

  3. word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。

    • normal默認值/break-word:在長單詞或 URL 地址進行換行。

    word-wrap: break-word;

  4. word-break 規定非中日韓文本的換行規則。

    • normal默認值/break-all:允許在單詞內換行。/keep-all只能在半角空格或連字符處換行。

    word-break: break-all;

  5. text-fill-color 文本填充顏色,指定文字填充部分的顏色.目前多數瀏覽器不支持

  6. text-stroke 文本邊框顏色,指定文字描邊部分的顏色。目前多數瀏覽器不支持

    • text-stroke-width文字的描邊寬度
    • text-stroke-color文字的描邊顏色
    • 備注:使用該屬性需要使用瀏覽器私有前綴
  7. text-overflow 設置是否使用一個省略標記(...)標示對象內文本的溢出

    • clip: 默認值當對象內文本溢出時不顯示省略標記(...),而是將溢出的部分裁切掉。
    • ellipsis:當對象內文本溢出時顯示省略標記(...)。
    • 溫馨提示:該屬性需要和over-flow:hidden屬性、white-space:nowrap配合使用

了解

  1. text-outline 規定文本的輪廓

  2. text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。

  3. text-align-last 設置如何對齊最后一行或緊挨著強制換行符之前的行。

  4. text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。

  5. unicode-bidi 用于同一個頁面里存在從不同方向讀進的文本顯示。與direction屬性一起使用

    • normal/embed/bidi-override
    • 不常用,了解即可
    direction: rtl;;
    unicode-bidi: bidi-override;
    
  6. hanging-punctuation 規定標點字符是否位于線框之外。

  7. punctuation-trim 規定是否對標點字符進行修剪。

  8. tab-size:設定一個tab在頁面中的顯示長度

  9. text-wrap 規定文本的換行規則。注釋:目前主流瀏覽器都不支持 text-wrap 屬性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,050評論 1 4
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,101評論 0 1
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,342評論 0 11
  • 這段時間,有位朋友要移民,于是我也開始認真思考這個問題。 學生時代連出國留學都沒有想過,大概是認為像我這樣一般家庭...
    貳貳得肆閱讀 629評論 0 0