CSS文字段落排版常用設置


.firstp {
    /* 文字排版:顏色、字號、字體、粗體、斜體、下划線、刪除線 */
    color: #666;  /*顏色*/
    font-size: 30px; /*字號*/
    font-family: "宋體"; /*字體*/
    font-weight: bold; /*粗體*/
    font-style: italic; /*斜體*/
    text-decoration: underline; /*下划線  刪除線用:line-through*/

    /* 段落排版:縮進、行高、文字距離、單詞間距、對齊 */
    text-indent: 2em; /* 縮進 */
    line-height: 1.5em; /* 行高 */
    letter-spacing: 5px; /* 中文字距離 || 字母間距 */
    word-spacing: 50px; /* 單詞間距 */
    text-align: center; /* 對齊:居中:center、左對齊:left、右對齊:right */

    /* 背景設置:背景色、背景圖片、背景平鋪模式、背景定位 */
    background-color: #333; /* 背景色*/
    background-image: url(img/bg.png); /* 背景圖片 */
    background-repeat: no-repeat; /* 背景平鋪模式: 不重復 */
    background-position: 30% 20px; /* 背景定位 */
}

CSS中設置顏色的方法有多種

  1. 顏色的英文單詞
.cont {color: red}
  1. RGB配色:由R(red)、G(green)、B(blue)三種顏色的比例來配色
.cont {color: rgb(51, 102, 102)}

這三個值也可以用0%~100%之間的值來設置

.cont {color: rgb(10%, 30%, 66%)}
  1. 十六進制顏色:00-ff
.cont {color: #0033ff}

CSS的顏色值當使用16進制的色彩值時,若每兩位的值相同,可以縮寫一半

.cont {color: #333333}

可以縮寫成:

.cont {color: #333}

.cont {color: #aa3366}

可以縮寫成:

.cont {color: #a36}

字體樣式可以進行縮寫

.cont {font: bold italic small-caps 18px/1.5em "宋體"}

上面的縮寫順序為:

.con {
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 18px;
    line-height: 1.5em;
    font-family: "宋體";
}

該縮寫順序的先后為:

  1. 先聲明:font-weight、font-style、font-variant。這三個樣式不分先后
  2. 然后是 font-size(通常設置字體的時候可以一起設置行高:字體/行高 如:18px/1.5em)
  3. 最后是 font-family

背景樣式可以縮寫成

.con {background: #333 url(img/bg.png) no-repeat 30% 20px;}

該縮寫順序為:

.con {
    background-color: #333; /* 背景色*/
    background-image: url(img/bg.png); /* 背景圖片 */
    background-repeat: no-repeat; /* 背景平鋪模式: 不重復 */
    background-position: 30% 20px; /* 背景定位 */
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM