簡(jiǎn)介

這次主要介紹一些css常用屬性

內(nèi)容

1. 顏色屬性：
** color**

• HEX（十六進(jìn)制色：color: #FFFF00 --> 縮寫：#FF0）
• RGB（紅綠藍(lán)，使用方式：color:rgb(255,255,0)或者 color:rgb(100%,100%,0%)）
• RGBA（紅綠藍(lán)透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
• HSL（CSS3有效,H表示色調(diào)，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
  HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）
  ** transparent**
  全透明，使用方式：color: transparent;
  ** opacity**
  元素的透明度，語(yǔ)法：opacity: 0.5;
  屬性值在0.0到1.0范圍內(nèi)，0表示透明，1表示不透明。
  示例:

-css: .colorHEX {
            color: #B0F566;
        }
        
        .colorRGB {
            color: RGB(74, 242, 161);
        }
        
        .colorRGBA {
            color: RGBA(74, 242, 161, .5);
        }
        
        .colorHSL {
            color: HSL(200, 86%, 63%);
        }
        
        .colorHSLA {
            color: hsla(200, 86%, 63%, .5);
        }
-html:
<div class="colorHEX">color: #B0F566</div>
<div class="colorRGB"> color: RGB(74, 242, 161)</div>
<div class="colorRGBA"> color: RGBA(74, 242, 161, .5) </div>
<div class="colorHSL">color: HSL(200, 86%, 63%);</div>
<div class="colorHSLA"> color:HSLA(200, 86%, 63%, .5)</div>

color.png

2. 字體屬性:
** font-style: 用于規(guī)定斜體文本**

• normal 文本正常顯示
• italic 文本斜體顯示
• oblique 文本傾斜顯示
  示例:

-css:
   .normal {
            font-style: normal;
        }
        
        .italic {
            font-style: italic;
            color: HSL(200, 86%, 63%);
        }
        
        .oblique {
            font-style: oblique;
            color: RGB(74, 242, 161);
        }
-html:
        <div class="normal"> font-style: normal</div>
        <div class="italic"> font-style: italic</div>
        <div class="oblique"> font-style: oblique</div>

font-style.png

font-weight: 設(shè)置文本的粗細(xì)

• normal（默認(rèn)）
• bold（加粗）
• bolder（相當(dāng)于<strong>和<b>標(biāo)簽）
• lighter （常規(guī)）
• 100 ~ 900 整百（400=normal，700=bold）
  示例:

-css:
 .bold {
            font-weight: bold;
            color: HSL(200, 86%, 63%);
        }
        
        .bolder {
            font-weight: bolder;
            color: HSL(200, 86%, 63%);
        }
        
        .lighter {
            font-weight: lighter;
            color: HSL(200, 86%, 63%);
        }
        
        ._100 {
            font-weight: 100;
            color: HSL(200, 86%, 63%);
        }
        
        ._600 {
            font-weight: 600;
            color: HSL(200, 86%, 63%);
        }
-html:
 <div class="">font-weight:normal</div>
 <div class="bold">font-weight:bold</div>
 <div class="bolder">font-weight:bolder</div>
 <div class="lighter">font-weight:lighter</div>
<div class="_600">font-weight:600</div>
 <div class="_100">font-weight:100</div>

font-weight.png

font-size: 設(shè)置字體的大小

• 默認(rèn)值：medium
• <absolute-size>可選參數(shù)值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
• <relative-size>相對(duì)于父標(biāo)簽中字體的尺寸進(jìn)行調(diào)節(jié)。可選參數(shù)值：smaller、 larger
• <percentage>百分比指定文字大小。
• <length>用長(zhǎng)度值指定文字大小，不允許負(fù)值。
  示例:

-css:
 .xx-small {
            font-size: xx-small;
        }
        
        .xx-large {
            font-size: xx-large;
        }
        
        ._200 {
            font-size: 200%;
        }
        
        .length_30px {
            font-size: 20px;
        }
-html:
    <div class="">font-size: medium</div>
    <div class="xx-large">font-size: xx-large</div>
    <div class="xx-small">font-size: xx-small</div>
    <div class="_200">font-size: 200%</div>
    <div class="length_30px">font-size: 20px</div>

font-size.png

3. 文本屬性:
white-space: 設(shè)置元素中空白的處理方式

• normal：默認(rèn)處理方式。
• pre：保留空格，當(dāng)文字超出邊界時(shí)不換行
• nowrap：不保留空格，強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者碰到br標(biāo)簽
• pre-wrap：保留空格，當(dāng)文字碰到邊界時(shí)換行
• pre-line：不保留空格，保留文字的換行，當(dāng)文字碰到邊界時(shí)換行
  示例:

-css:
 .pre {
            white-space: pre;
        }
        
        .nowrap {
            white-space: nowrap;
        }
        
        .pre-wrap {
            white-space: pre-wrap;
        }
        
        .pre-line {
            white-space: pre-line;
        }
     -html:
    <div class="box  "> white-space: normal; 任何值得做的，就把它做好。</div>
    <div class="box pre"> white-space: pre; 任何值得做的，就把它做好。</div>
    <div class="box nowrap"> white-space: nowrap;任何值得做的，就把它做好。</div>
    <div class="box pre-wrap"> white-space: pre-wrap; 任何值得做的，就 把 它 做 好。</div>
    <div class="box pre-line"> white-space: pre-line; 任何值得做的， 就 把 它 做 好。</div>

white-space.png

text-align: **文本的水平對(duì)齊方式 **

• left
• center
• right

 -css:
       .text-left {
            text-align: left
        }
        .text-center {
            text-align: center
        }
        .text-right {
            text-align: right
        }
-html:
    <div class="box text-left">text-left</div>
    <div class="box text-center">text-center</div>
    <div class="box text-right">text-right</div>

text-align.png

vertical-align: **文本的垂直對(duì)齊方式 **
可詳見web開發(fā)筆記之vertical-align

結(jié)束