一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來設(shè)置文字的顏色。

顏色是通過CSS最經(jīng)常的指定：

十六進(jìn)制值 - 如"＃FF0000"。
一個(gè)RGB值 - "RGB（255,0,0）"。
顏色的名稱 - 如"紅"。

一個(gè)網(wǎng)頁的文本顏色是指在主體內(nèi)的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：對于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對齊方式

文本排列屬性是用來設(shè)置文本的水平對齊方式。

文本可居中或?qū)R到左或右,兩端對齊。

當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報(bào)紙）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 號</p>
        <p class="main">　從前有個(gè)書生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起。　　這時(shí)，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個(gè)坑，小心翼翼把尸體掩埋了?！　∩私忉尩?， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修飾

text-decoration 屬性用來設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原來的樣子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下劃線</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以這樣裝飾文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶。

3. text-transform文本轉(zhuǎn)換

text-transform文本轉(zhuǎn)換屬性是用來指定在一個(gè)文本中的大寫和小寫字母。

uppercase:轉(zhuǎn)換為全部大寫。
lowercase：轉(zhuǎn)換為全部小寫。
capitalize ：每個(gè)單詞的首字母大寫。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本縮進(jìn)

text-indent文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。

p {text-indent:50px;}

5. letter-spacing 設(shè)置字符間距

增加或減少字符之間的空間。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height設(shè)置行高

指定在一個(gè)段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 設(shè)置字間距

增加一個(gè)段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 設(shè)置元垂直居中

設(shè)置文本的垂直對齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 設(shè)置文本陰影

設(shè)置文本陰影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、總結(jié)

本文主要介紹了CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何去操作，通過講解文本中對應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。

程序員HTML5培訓(xùn)教程-html和css的使用方法以及樣式，很好的基礎(chǔ)知識系列，內(nèi)容都是干貨知識點(diǎn)，適合收藏下來！

布局步驟

第一步：清除默認(rèn)樣式

第二步：劃分模塊

第三步：設(shè)置模塊的大小以及位置

第四步：劃分下一級模塊

html和css

引入網(wǎng)頁頭像

css樣式表的引入方式

1、外鏈?zhǔn)?/p>

2、嵌入式

3、行內(nèi)樣式

@import url('')

文件命名以及變量命名

命名規(guī)范

1、嚴(yán)格區(qū)分大小寫

2、可以采用字母數(shù)字下劃線$,數(shù)字不開頭

3、命名語義化

4、可以采用駝峰命名法

清除默認(rèn)樣式

清楚邊距

margin: 0;

padding: 0;

list-style: none;

}

a標(biāo)簽清楚下劃線和顏色

color: black;

text-decoration: none;

}

css中顏色的表示方式

css中顏色的表示方式：

1.預(yù)定義的顏色【關(guān)鍵字顏色】 red pink blue yellow

2.#6位數(shù)的色值 #00-00-00 紅綠藍(lán)

3.rgb（紅，綠，藍(lán)）：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度）：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的標(biāo)簽和屬性

html：

標(biāo)簽：

按照語法分類：

1.單標(biāo)簽：只有開始標(biāo)簽

meta img a

2.雙標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽

3.屬性的語法

語法：

屬性名 = "屬性值"

屬性名 = "屬性值1 屬性值2"

注意:

1、標(biāo)簽名和屬性名之間要有空格

2、多個(gè)屬性之間要有空格

3、多個(gè)屬性值之間要有空格

4.開始標(biāo)簽標(biāo)簽名后有空格

按照標(biāo)簽在頁面中的呈現(xiàn)效果分類：

1、行內(nèi)元素

行內(nèi)元素定義:在一行內(nèi)顯示，只能設(shè)置左右間距，不可以設(shè)置上下間距。

舉例：span del i em b strong a(title="鼠標(biāo)移入時(shí)顯示的文字";target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開) ...

2、塊元素

塊元素定義：可以設(shè)置寬高，獨(dú)占一行。

舉例：div 標(biāo)題標(biāo)簽列表標(biāo)簽段落標(biāo)簽 ...

3、行內(nèi)塊元素

行內(nèi)塊元素定義：可以設(shè)置寬高，在一行顯示。

舉例：img 【title="鼠標(biāo)移入時(shí)顯示的文字" 】表單控件

元素的轉(zhuǎn)換

塊元素： display:block;

行內(nèi)塊元素：display:inline-block;

行內(nèi)元素： display:inline;

元素的級別

塊元素 > 行內(nèi)塊元素 > 行內(nèi)元素

元素嵌套規(guī)范

1、同一級別可以相互嵌套

2、級別高的元素可以嵌套級別低的元素

3、段落標(biāo)簽只能嵌套行內(nèi)元素

4、a標(biāo)簽不可以嵌套a標(biāo)簽；p不能嵌套p

盒子模型及其問題

四部構(gòu)成：

1、margin 外間距盒子與盒子之間的距離

2、border 邊框

3、padding 內(nèi)填充（內(nèi)間距）邊框與內(nèi)容之間的距離。

4、content 內(nèi)容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自動

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上邊框的寬度

padding:設(shè)置方法同margin

content: ;

width : 數(shù)值百分比 auto

height: 數(shù)值百分比 auto

盒子模型的問題：

1.大部分元素的margin和padding默認(rèn)為0，但有一部分的margin和padding不為0，例如body 標(biāo)題標(biāo)簽（h1-h6）（ul ol il等列表標(biāo)簽）段落標(biāo)簽

2.想領(lǐng)的兩個(gè)塊元素的margin會重合，值會取最大值

3.margin可以為[負(fù)數(shù)] ，padding不可以設(shè)置[負(fù)數(shù)]。

4.行內(nèi)元素margin只有左右，沒有上下

5.如果（1）發(fā)生嵌套關(guān)系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內(nèi)容，此時(shí)子元素margin-top就會作用到父元素身上

margin-top的解決方式：

1.用父元素的padding-top代替子元素的margin-top；

2.給父元素添加overflow：hidden；

寬高的設(shè)置和計(jì)算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；參照與父元素

width：auto；參照與內(nèi)容

box-sizing：border-box；將邊框算入盒子內(nèi)；

一個(gè)元素實(shí)際的寬高

實(shí)際寬度 = border-left + padding-left + width +paddint-right + border-right;

實(shí)際高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮動

作用：讓塊元素橫排排列

樣式： float：left；從左往右排列

float：right；從右往左排列

原理：讓元素脫離文檔流，讓元素從文檔層浮動到浮動層。

引發(fā)的問題：父元素不設(shè)置高度，子元素都浮動，浮動的子元素?fù)尾婚_父元素。（浮動的元素脫離文檔流）

*解決方式一：給父元素添加 overflow：hidden；（超出部分隱藏）

*解決方式二：在父元素內(nèi)容最后添加擁有清除浮動屬性的元素。

clear：right/left/both ；別的浮動對它的影響清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解決方式三：父元素能設(shè)置高度的盡量設(shè)置高度

浮動之后的塊元素參照內(nèi)容：屬性值 auto

定位

定位的元素脫離文檔層，到達(dá)定位層

定位的元素會多出5個(gè)樣式：

top right bottom left z-index：999

上右下左層級（層級越高，離用戶越近）【只能在有定位屬性的元素上才能用】

層級：

z-index：整數(shù)；

定位的幾種方式：

1.相對定位：

相對于自身來定位，在文檔層中保留原來的位置

用法：

position：relative；

2.絕對定位：

相對于最近的定位的祖先元素來定位，完全脫離文檔流（其他頂替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相對于瀏覽器的四條邊，完全脫離文檔流

用法：

position：fixed；

top與bottom同時(shí)定義，那個(gè)樣式會作用到元素身上的判斷關(guān)系：

top的權(quán)重比bottom的權(quán)重大

left的權(quán)重比right的權(quán)重大

元素作用時(shí)：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身長度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身長度的一半；

3.絕對居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身長度的一半；

margin-top：-自身長度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D屬性：

1.平移樣式

transform:translate(x,y); 向上為負(fù)，向下為正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）轉(zhuǎn)一圈

平移 transform:translate（）例子：translate（x，y） translateX（）

旋轉(zhuǎn) transform:rotate（）例子rotate（180deg）順時(shí)針 -180deg 逆時(shí)針

transform：rotate（）空格translate（）；

transform-origin:px px;變換的中心點(diǎn)；

left center；

縮放 transform:scale（）例子：scale（2）放大為原來的2倍 scale（0.n）縮小為原來的0.n scale（m，n） x軸m，y軸n

斜切 transform:skew（）例子：skew（45peg）左拉伸45° skew（45peg，m）

過渡transition
transition：all 0.5s；

全部時(shí)間

3.過渡的屬性樣式： transition-property: ， ;

可以為：屬性的全部樣式

4.過度的總時(shí)間： transition-duration：；

5.過渡的時(shí)間函數(shù)： transition-timing-function：；

linear（勻速） ease（開頭結(jié)尾慢，中間快）

cubic-bezier（1，0.07，0.54，0.21）貝塞爾曲線

6.延遲 transition-delay：；

3d效果：和2d的一樣transition，transform；

prespective：給父元素加prespective（滅點(diǎn)的值）

prespective-origin：x y；滅點(diǎn)的位置調(diào)整觀察的角度（大多數(shù)情況不設(shè)置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

動畫

動畫規(guī)則：

@keyframes 動畫名（隨便給）{

（動畫規(guī)則）

from{}

to{}

}

@keyframes 動畫名（隨便給）{

（動畫規(guī)則）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

掛載動畫:將動畫加到元素身上

.元素{

animation：animation1 時(shí)間步數(shù) 時(shí)間函數(shù) 延遲時(shí)間次數(shù) ；

}

掛載多個(gè)動畫：

.元素{

animation：animation1 時(shí)間,animation2 時(shí)間,animation1 時(shí)間；

其他動畫的相同的可以附件通過animation屬性；

}

animation的樣式

動畫名：animation-name

時(shí)間： animation-duration

步數(shù)：animation-steps：8；

時(shí)間函數(shù)：animation-timing-function

延遲： animation-delay

動畫次數(shù)： animation-iteration-count：infinite（無限次）/2；

指定下一次動畫是否逆向：animation-direction：alternate（逆向）/ normal（常規(guī)）；

最后的狀態(tài)：animation-fill-mode：backwards（默認(rèn)（保持一開始的狀態(tài)））/forwards（保持當(dāng)前的狀態(tài)）；

狀態(tài)即指定動畫是否運(yùn)動： animation-play-state: running（運(yùn)行）/paused（靜止）;

元素分類

按照在頁面中的呈現(xiàn)效果：

1.行內(nèi)元素：在一行內(nèi)顯示，不可以設(shè)置寬高：（存放文字）

span a b i strong del

2.行內(nèi)塊元素：在一行內(nèi)顯示，可以設(shè)置寬高：（有縫隙不常用）

img 表單控件

3.塊元素：可以設(shè)置寬高，獨(dú)占一行

div 標(biāo)題標(biāo)簽（h1-h6）列表標(biāo)簽（ul-li ol-li dl>dt+dd 段落標(biāo)簽（p pre））

元素嵌套規(guī)范：

1.同一級別可以相互嵌套

2.級別高的可以嵌套級別低的元素

3.p標(biāo)簽只能嵌套行內(nèi)元素

4.a鏈接不能相互嵌套

元素的轉(zhuǎn)換：

1.塊元素：display：block；

2.行內(nèi)塊元素：display：inline-block；

3.行內(nèi)元素：display：inline；

背景圖片以及瀏覽器內(nèi)核

背景圖

先設(shè)大小，在引background；

background: url('路徑') no-repeat left bottom/contain；

//圖片位置禁止重復(fù) 位置（top bottom left right）

路徑：background-image：url（“”），url（“”）；加載多張背景圖
背景圖大?。?background-size：100px auto，100px auto；會重復(fù)
背景的圖重復(fù)：

4. background-repeat：no-repeat，repeat；（無重復(fù)）

5. background-repeat：repeat-x（x方向重復(fù)）

background-repeat：repeat-y（y方向重復(fù)）

背景圖的位置：

background-position：x y；（數(shù)值方位值（top/bottom left/rightcenter（可以省略）））

背景開始渲染的位置： background-origin: ;

8. padding-box；（默認(rèn)）從padding位置開始渲染

9. border-box；從邊框的位置開始渲染

content-box；從內(nèi)容的位置開始渲染

圖片結(jié)束渲染的位置：background-clip: ;

11. padding-box；（默認(rèn)）從padding位置結(jié)束渲染

12. border-box；從邊框的位置結(jié)束渲染

content-box；從內(nèi)容的位置結(jié)束渲染

使得背景圖加載到瀏覽器中
background-attachment: fixed;

8.可以簡寫：

background：空格隔開；

背景圖漸變
background: linear-gradiend(top，顏色1，顏色2，顏色n)

//漸變開始的方向（默認(rèn)top）類似25deg（25度）

10.瀏覽器內(nèi)核//背景色漸變

1. /* 標(biāo)準(zhǔn)語法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌內(nèi)核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐內(nèi)核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 歐鵬內(nèi)核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE內(nèi)核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的讀取方法路徑

絕對路徑：從盤符開始的一條完整路徑

相對路徑：兩個(gè)文件的位置關(guān)系

邊框的相關(guān)屬性【圓角，邊框形狀】

border-radius：邊框的半徑設(shè)置圓角 n%或者num像素

border-style:dotted solid double dashed;

上邊框是點(diǎn)狀

右邊框是實(shí)線

下邊框是雙線

左邊框是虛線

透明度

透明性的選擇：（整個(gè)容器都變）

opacity：；0-1之間的值；

字體

font-family =“ 字體” //字體樣式可以被繼承

鼠標(biāo)移入樣式

span標(biāo)簽

cursor：pointer；鼠標(biāo)樣式：手型

陰影

box-shadow：x軸偏移量 y軸偏移量陰影的模糊程度陰影的大?。?和本身一樣大?。?陰影的顏色；

引入字符圖標(biāo)

引入字符圖標(biāo)：

行內(nèi)元素隨意

span class=“iconfont 圖標(biāo)類名”

可調(diào)節(jié)樣式：同文字

文檔流

文檔流：

標(biāo)準(zhǔn)情況下，頁面元素從左往右從上往下依次排列

flex布局(規(guī)范的設(shè)計(jì)稿)-彈性布局

容器（父元素）的屬性：【display:flex;】

*flex-direction: 決定主軸方向。

row 主軸在水平方向，從左向右（默認(rèn)）。

row-reverse 主軸在水平方向，從右向左

column 主軸在垂直方向，從上到下

column-reverse 主軸在垂直方向，從下到上

*flex-wrap: 決定項(xiàng)目換行

wrap: 項(xiàng)目換行

nowrap: 項(xiàng)目不換行（默認(rèn)值）

wrap-reverse：項(xiàng)目換行且反轉(zhuǎn)

*justify-content: 決定項(xiàng)目在主軸的對齊方式

flex-start;主軸的起點(diǎn)

flex-end;主軸的終點(diǎn)

center;主軸的中心

space-between;兩端對齊

space-around;項(xiàng)目兩側(cè)距離相等

*align-items：項(xiàng)目在交叉軸上的對齊方式（適用于一根軸線與多跟軸線）

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

baseline：基線對齊（文本底部）

*align-content:定義項(xiàng)目在交叉軸上的對齊方式（僅適用于多根軸線）

flex-start;交叉軸的起點(diǎn)

flex-end;交叉軸的終點(diǎn)

center;交叉軸的中心

space-between;兩端對齊

space-around;兩側(cè)距離相等

子元素（項(xiàng)目）的屬性：

*order：定義項(xiàng)目的排列順序，數(shù)值越小，越靠前，默認(rèn)值為0（可以取負(fù)值）。

*flex-grow:定義項(xiàng)目的放大比例。默認(rèn)值為0，即使存在剩余空間，也不放大。

*flex-shrik：定義項(xiàng)目的縮小比例，默認(rèn)值為1，空間不足，項(xiàng)目縮小;值為0時(shí),空間不足,項(xiàng)目也不縮小.

*flex-basis: 定義項(xiàng)目占據(jù)的主軸空間.默認(rèn)auto或者自己添加像素;

*align-self:定義單個(gè)項(xiàng)目在交叉軸的對齊方式.

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

滾動條

overflow-x：auto；超出部分在x軸的表現(xiàn)形式。

auto：自動；（如果超出，就自動以滾動條的形式顯示）

去滾動條：加在具有overflow屬性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述測試

visible 不裁剪內(nèi)容，可能會顯示在內(nèi)容框之外。測試

hidden 裁剪內(nèi)容 - 不提供滾動機(jī)制。測試

scroll 裁剪內(nèi)容 - 提供滾動機(jī)制。測試

auto 如果溢出框，則應(yīng)該提供滾動機(jī)制。測試

no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框。測試

no-content 如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容。測試

輪播圖

swiper(.js).com

表格

[行] [列]

table身上的屬性

table身上的屬性：

border：表格邊框 cellspacing：單元格間的間距

cellpadding：單元格的內(nèi)容與其邊框的內(nèi)邊距

bgcolor：表格的背景顏色 background：表格的背景圖片

width：表格寬度 height：表格高度

border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框?qū)挾鹊扔?前兩個(gè)邊框?qū)挾戎?/p>

caption：表格標(biāo)題

background:表格背景圖

cellspacing:單元格之間的間隙寬度

align:表格的水平對齊方式，通常是left，center，right

表格的標(biāo)題

單元格【tr】【td】

width：單元格寬度height：單元格高度

align：單元格內(nèi)文本的對齊方式,通常是左，中，右 left，center，right

valign：單元格內(nèi)文本的對齊方式,通常是上，中，下 top，middle，bottom

nowrap：在為設(shè)置單元格寬度時(shí)，當(dāng)文本長度寬于單元格寬度，將要換行時(shí)，該標(biāo)簽會使其不換行

</tr>

表格的跨行與跨列【td】

rowspan：跨行標(biāo)簽，表示跨了多少行

colspan：跨列標(biāo)簽，表示跨了多少列

表格標(biāo)簽拓展及其屬性

thead：定義表格的表頭。

tbody：定義表格主體（正文）。

tfoot：定義表格的頁腳（腳注或表注）。

colgroup：標(biāo)簽用于對表格中的列進(jìn)行組合，以便對其進(jìn)行格式化。

注意：不管thead、tbody、tfoot的代碼先后順序如何，html顯示時(shí)，始終是先顯示thead，再顯示tbody，最后顯示tfoot。

1、<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！

2、<tfoot> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

3、<tbody> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

4、必須在 table 元素內(nèi)部使用這些標(biāo)簽。

5、當(dāng)不同行間的單元格合并時(shí)各單元格所在的行不要加tbody標(biāo)簽。

標(biāo)題欄

《tr》<th></th>《/tr》用法和td相似知識自動將單元格內(nèi)容以粗體顯示

表單控件表單標(biāo)簽

action:表單信息提交的位置；

method：提交的方式

get：地址欄，信息量少，安全性低

post：信息量多，比較安全

1.輸入文本【輸入框】：

用戶名：<input type="text" placeholder="請輸入用戶名" maxlength="10" value=" " name="username" class="">

placeholder：默認(rèn)提示文本;

maxlength:規(guī)定輸入的最大字符數(shù)

name:本文本框的名字，與后臺進(jìn)行數(shù)據(jù)交互用

class:定義本文本框的樣式，相當(dāng)于盒子

placeholder下的縮進(jìn)

text-indent：2em；縮進(jìn)

2.輸入密碼【密碼框】：

密碼：<input type="password" placeholder="請輸入密碼" maxlength="10" value=" " name="psw" class="">

3.單選按鈕[name的值必須相同]：

請選擇你的性別：

<label for="man"> [label實(shí)現(xiàn)點(diǎn)什么就選中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默認(rèn)選項(xiàng)

</label>

女：<input type="radio" name="sex" id="woman">

</label>

4.多選按鈕[name的值必須相同]：

請選擇你喜歡的音樂：

搖滾：<input type="checkbox" checked>

5.下拉列表【下拉框】：

選擇你的學(xué)歷：

</select>

6.上傳文件：

選擇你的照片：

7.留言文本空間：

</textarea>

8.用戶是否允許重新設(shè)置textarea大小css屬性：

resize: none/both/vertical/horizontal;不允許/上下允許拖動/只能在垂直方向拖動/只能在水平方向拖動

9.重置按鈕：

10.提交按鈕：

11.自定義按鈕：

12.顏色：

13.時(shí)間日期：

年月：<input type="month">

年周：<input type="week">

時(shí)分：<input type="time">

年月日：<input type="date">

年月時(shí)分：<input type="datetime-local">

14.驗(yàn)證

<input type="email"> 郵箱驗(yàn)證

<input type="tel" autofocus> 電話

15. autofocus 自動獲取焦點(diǎn)

</form>

文本模型

文本換行

使非中日韓文本換行

word-break: break-all ;

文本禁止換行

white-space:nowrap;

單行文本溢出部分以省略號顯示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定為彈性盒子
display: -webkit-box;
在彈性盒模型中指定元素的排列順序
-webkit-box-orient: vertical;
指定文本顯示（溢出）的行數(shù);
-webkit-line-clamp: 3;
height要是line-height的倍數(shù)
line-height: 70px;
overflow：hidden；

音頻視頻標(biāo)簽

音頻標(biāo)簽

controls 空間向用戶顯示：

loop 循環(huán)播放

autoplay當(dāng)前頁面加載完自動播放

視頻標(biāo)簽

H5語義化標(biāo)簽

<section>頁面中的某一部分</section>

meta標(biāo)記【簽】

name="關(guān)鍵字" cantent="內(nèi)容"

<mate http-equiv="Refresh" content="10";url="跳轉(zhuǎn)路徑"> //每10s刷新一次并且跳轉(zhuǎn)到跳轉(zhuǎn)路徑知識的文件

bgsound標(biāo)簽

body屬性

bgcolor:背景顏色
background：背景圖片
text：文檔中文字的顏色
link：超鏈接的顏色
alink：正在訪問的超鏈接的顏色
vlink：已訪問過的超鏈接的顏色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下邊距的像素值

對文字操作的標(biāo)簽

<p></p>開始一個(gè)新段落，可單可雙
換行標(biāo)簽，單獨(dú)標(biāo)記
<pre></pre>預(yù)格式化【敲什么樣式，顯示什么樣式】
<font></font> 用來設(shè)置文字的字體大小顏色粗細(xì)等
文字樣式標(biāo)記[均成對出現(xiàn)]
b 粗體 i 斜體 u 下劃線 tt 等寬
sup 上標(biāo)體 sub 下表體 strike 刪除線 big 大號字樣
small 小號字樣 blink 閃爍字樣 em強(qiáng)調(diào)字樣 strong著重字樣 cite引用字樣

列表標(biāo)簽

符號列表
<ul type="circlr(空心圓點(diǎn))/disc（實(shí)心圓點(diǎn)）【默認(rèn)】/square（實(shí)心方塊）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(數(shù)字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a標(biāo)簽

<a href="路徑 " title="鼠標(biāo)移入時(shí)顯示的文字" target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開；_parent:在當(dāng)前窗口的父窗口打開鏈接；_top:在整個(gè)瀏覽器窗口打開) ...

[字符實(shí)體]常用的轉(zhuǎn)義字符

顯示結(jié)果描述實(shí)體名稱

空格

< 小于號

大于號

& 和號

" 引號

' 撇號 (IE不支持)

￠分（cent）

￡鎊（pound）

￥元（yen）

€ 歐元（euro）

§ 小節(jié)

? 版權(quán)（copyright）

? 注冊商標(biāo)

? 商標(biāo)

× 乘號

÷ 除號

選擇器

分類

css選擇器

1.通用選擇器：

*｛｝//選擇所有的標(biāo)簽

2.群組選擇器：

E1,E2,E3..｛｝//選擇E1 E2 E3

3.標(biāo)簽選擇器

標(biāo)簽名｛｝

4.類名選擇器：

.類名｛｝

5.后代選擇器

.E1 .E2｛｝ //選擇E1 的后代E2

6.交叉選擇器

標(biāo)簽名.類名｛｝

7.id選擇器

例如創(chuàng)建id

#id名｛｝ //選擇頁面中id為**的標(biāo)簽

8.偽類選擇器：

鼠標(biāo)移入狀態(tài)

E：hover{ } E元素選擇鼠標(biāo)移入狀態(tài)

E：hover .子類{ } 選擇e元素下鼠標(biāo)移入時(shí)子類的變化

獲取焦點(diǎn)，用于表單的輸入

E: focus{

outline: none;

}

9.偽結(jié)構(gòu)選擇器：

E：first-child｛｝作為子元素的第一個(gè)孩子的E標(biāo)簽

E：last-child｛｝作為子元素的最后第一個(gè)孩子的E標(biāo)簽

E: nth-child(n){} //作為子元素的第n個(gè)孩子的E標(biāo)簽

E: nth-last-child(n) 作為子元素的倒數(shù)第n個(gè)孩子的E標(biāo)簽

E：first-of-type｛｝作為子元素的同類型的第一元素

E：last-of-type｛｝作為子元素的同類型中的最后一個(gè)元素

E: nth-of-type（n）作為子元素的同類型中的第n個(gè)元素

E: nth-last-of-type(n) 作為子元素的同類型中的倒數(shù)第n個(gè)元素

（n）n可以以為num/even（偶數(shù)）/odd(奇數(shù))/3n（3的倍數(shù)）

例子：5.15/偽結(jié)構(gòu)選擇器

10.偽元素選擇器：

::after{} 在元素之后加入一個(gè)

::before{

content：“內(nèi)容之前”；

color：；

} 在元素之前

屬于行內(nèi)元素

::after{} ::before{}偽元素 content：""；樣式必須寫

11.子類選擇器

相鄰兄弟選擇器

E1+E2｛｝選擇E1的下一個(gè)兄弟元素E2（不能選中上一個(gè)兄弟元素）

div.box>a+img a和img統(tǒng)計(jì)

子類選擇器

E1>E2{} 選擇E1的子類元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.屬性選擇器

[屬性名]{} 選擇所有擁有屬性為屬性名的元素

[屬性名=“value”]｛｝選擇擁有屬性名的屬性且屬性值為value

E[屬性名=“value”]{} 選擇擁有屬性名的屬性且屬性值為value的E元素

E[屬性名~=“value”]{} 選擇擁有屬性名的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值為value的E元素

E[value^=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值以 1 開頭的E元素

E[value$=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值以 1 結(jié)尾的E元素

E[value*=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值包含 1 的E元素

例子：屬性選擇器

選擇器的優(yōu)先級

宗旨：越具體的優(yōu)先級越高

id (100 ) > class( 10 )> 標(biāo)簽名( 1)

.box .son{ } 10+10=20

abcde優(yōu)先級（e為個(gè)位）：

a:行內(nèi)樣式

b:id選擇器

c:類名選擇器偽類選擇器（：hover）屬性選擇器

d:標(biāo)簽選擇器偽元素選擇器（：：after）

e:通用選擇器有一個(gè)

選擇有中有一個(gè)abcde在其位置+1

移動端布局步驟

修改視口
<meta name="viewport" content="width=device-width">

視口：視覺視口，布局視口，理想視口

em:當(dāng)前字體的倍率 100px=10em

rem：html字體的倍率

移動端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路徑"></script>
修改rem.js中設(shè)計(jì)稿的寬度
100px=1rem

未完待續(xù)，感謝關(guān)注好程序員前端教程分享！

知道大家有沒有注意到設(shè)計(jì)有一些原則是共通的，不管是產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、還是服裝設(shè)計(jì)，設(shè)計(jì)的形式美法則都是通用的。前面跟大家也分享了一些對比、統(tǒng)一、留白在網(wǎng)頁當(dāng)中的運(yùn)用，網(wǎng)慧天下科技今天跟大家分享對齊原則在網(wǎng)頁當(dāng)中的運(yùn)用。

對齊，是很重要卻很容易被遺忘的一點(diǎn)。對齊一般有三種方式：左對齊、居中對齊、右對齊。

在網(wǎng)頁當(dāng)中運(yùn)用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現(xiàn)的頻率不高，小部分的出現(xiàn)還是有的。不管是哪種方式的對齊，網(wǎng)頁中對齊后的文本一定要考慮可讀性的問題，千萬不要本末倒置。

對齊在網(wǎng)頁中的運(yùn)用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區(qū)塊布局的對齊。

1、元素對齊

元素的對齊指的是網(wǎng)頁中的一些按鈕、圖標(biāo)、搜索框等網(wǎng)頁中的元素統(tǒng)一采用一種對齊方式對齊。

用主頁來舉例，可以看到圖標(biāo)部分都是居左對齊的，元素上的對齊分布讓整個(gè)界面看起來整齊簡潔，內(nèi)容劃分也變得比較明確，可讀性強(qiáng)，方便瀏覽者瀏覽。

一個(gè)網(wǎng)頁當(dāng)中，會有很多元素，而元素的對齊可以讓整個(gè)界面變得井然有序，元素過于隨意擺放沒有規(guī)律，會讓界面雜亂無章。

2、文字的對齊

文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現(xiàn)在文章詳情的標(biāo)題部分，右對齊文字出現(xiàn)的頻率小一點(diǎn)，不會以大篇幅出現(xiàn)，大部分在登陸注冊或是產(chǎn)品詳情界面中常見。

左對齊的方式適合人們的閱讀習(xí)慣，在網(wǎng)頁中也比較常見，這里不多講了。

居中對齊是進(jìn)幾年隨著html5流行起來，越來越多設(shè)計(jì)師用居中對齊作為一些區(qū)塊內(nèi)容展示的方式。

3、圖片的對齊

圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要根據(jù)網(wǎng)頁想表達(dá)的內(nèi)容去做對齊，以達(dá)到好的視覺展示效果。所以在不同的情況下，可以采用不同的對齊方式。

在當(dāng)當(dāng)?shù)膱D書展示頁中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側(cè)。

在大圖展示方式下，可以看到產(chǎn)品圖是居中展示的。所以就算是同一個(gè)網(wǎng)站也不會只用一種對齊方式，對齊比較靈活，就算是同個(gè)頁面，也可能為了視覺效果而采用兩種或三種對齊方式，這個(gè)根據(jù)整個(gè)界面的效果而定。

4、區(qū)塊布局的對齊

上面講的小元素對齊重要，那大的區(qū)塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應(yīng)的內(nèi)容。小元素不對齊會顯得亂，大區(qū)塊不對齊會讓整個(gè)界面沒有秩序感。

說到區(qū)塊的對齊，不得不提的柵格系統(tǒng)，柵格系統(tǒng)可以讓一個(gè)網(wǎng)站看起來有秩序感。很多人不喜歡柵格系統(tǒng)，覺得限制他們自己的創(chuàng)意。

事實(shí)上，柵格的運(yùn)用可以很靈活，分多少欄全看設(shè)計(jì)師的設(shè)計(jì)。

對齊相比較其他設(shè)計(jì)原則來說，會比較簡單也好理解，但是在具體的實(shí)踐過程中，還需要設(shè)計(jì)師們?nèi)ニ伎己驮O(shè)計(jì)。對齊，不僅可以在信息層級上一致，而且會更有氣勢。

總之，網(wǎng)慧天下科技小編認(rèn)為，在做網(wǎng)站時(shí)候要以內(nèi)容為主旨，界面設(shè)計(jì)一定是要方便用戶快速找到他們想要的。其次要使用正確的對齊方式，讓界面更為整齊，信息更為明確。

在線咨詢

上一篇：非常實(shí)用的CSS小技巧
下一篇：JS｜動態(tài)設(shè)置頁面背景顏色、字體顏色、大小

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

一、文本顏色Color

二、屬性

1. text-align 文本的對齊方式

2. text-decoration文本修飾

3. text-transform文本轉(zhuǎn)換

4. text-indent文本縮進(jìn)

5. letter-spacing 設(shè)置字符間距

6. line-height設(shè)置行高

7. word-spacing 設(shè)置字間距

8. vertical-align 設(shè)置元垂直居中

9. text-shadow 設(shè)置文本陰影

三、總結(jié)

您的項(xiàng)目需求

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

三、總結(jié)