CSS樣式----CSS屬性：字體屬性和文本屬性（圖文詳解）

時間 2019-11-20

標籤 css 樣式屬性字體文本圖文詳解欄目 CSS 简体版

原文原文鏈接

本文最初於2015-10-04發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。css

如下是正文。html

本文重要內容

CSS的單位
字體屬性
文本屬性
定位屬性：position、float、overflow等

CSS的單位

html中的單位只有一種，那就是像素px，因此單位是能夠省略的，可是在CSS中不同。
CSS中的單位是必需要寫的，由於它沒有默認單位。前端

絕對單位：

1 in=2.54cm=25.4mm=72pt=6pc。git

各類單位的含義：github

in：英寸Inches (1 英寸 = 2.54 釐米)
cm：釐米Centimeters
mm：毫米Millimeters
pt：點Points，或者叫英鎊 (1點 = 1/72英寸)
pc：皮卡Picas (1 皮卡 = 12 點)api
相對單位：
px：像素
em：印刷單位至關於12個點
%：百分比，相對周圍的文字的大小瀏覽器

爲何說像素px是一個相對單位呢，這也很好理解。好比說，電腦屏幕的的尺寸是不變的，可是咱們可讓其顯示不一樣的分辨率，在不一樣的分辨率下，單個像素的長度確定是不同的啦。微信

百分比%這個相對單位要怎麼用呢？這裏也舉個例子：ssh

字體屬性

行高

CSS中，全部的行，都有行高。盒子模型的padding，絕對不是直接做用在文字上的，而是做用在「行」上的。學習

以下圖所示：

上圖中，咱們設置行高爲30px，30px * 5 = 150px，經過查看審查元素，這個p標籤的高度果真爲150px。並且咱們發現，咱們並無給這個p標籤設置高度，顯然是內容將其撐高的。

垂直方向來看，文字在本身的行裏是居中的。好比，文字是14px，行高是24px，那麼padding就是5px：

爲了嚴格保證字在行裏面居中，咱們的工程師有一個約定： 行高、字號，通常都是偶數。這樣能夠保證，它們的差必定偶數，就可以被2整除。

如何讓單行文本垂直居中

小技巧：若是一段文本只有一行，若是此時設置行高 = 盒子高，就能夠保證單行文本垂直居中。這個很好理解。

上面這個小技巧，只適用於單行文本垂直居中，不適用於多行。若是想讓多行文本垂直居中，還須要計算盒子的padding。計算方式以下：

font字體屬性

css樣式中，字體屬性有如下幾種：

p{
    font-size:50px;         /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family:幼圓,黑體;  /*字體類型：若是沒有幼圓就顯示黑體，沒有黑體就顯示默認*/
    font-style:italic ;     /*斜體*/
    font-weight:bold;   /*粗體：屬性值寫成bolder也能夠*/
    font-variant:small-caps;  /*小寫變大寫*/
}

上面這些屬性中，字號、行高、字體這三個屬性是最多見的。咱們繼續看。

一、字號、行高、字體三大屬性：

（1）字號：

font-size:14px;

（2）行高：

line-height:24px;

（3）字體：（font-family就是「字體」，family是「家庭」的意思）

font-family:"宋體";

上面這三個屬性，咱們可使用一行代碼來實現：（字號 font-size、行高 line-height、字體 font-family）

font: 14px/24px 「宋體」;

二、字體屬性的說明：

（1）網頁中不是全部字體都能用，由於這個字體要看用戶的電腦裏面裝沒裝，好比你設置：

font-family: "華文彩雲";

上方代碼中，若是用戶電腦裏面沒有這個字體，那麼就會變成宋體。

頁面中，中文咱們只使用：微軟雅黑、宋體、黑體。英文使用：Arial、Times New Roman。頁面中若是須要其餘的字體，就須要切圖。

（2）爲了防止用戶電腦裏，沒有微軟雅黑這個字體。就要用英語的逗號，隔開備選字體。以下：（能夠備選多個）

font-family: "微軟雅黑","宋體";

上方代碼表示：若是用戶電腦裏沒有安裝微軟雅黑字體，那麼就是宋體。

（3）咱們須將英語字體放在最前面，這樣全部的中文，就不能匹配英語字體，就自動的變爲後面的中文字體：

font-family: "Times New Roman","微軟雅黑","宋體";

上方代碼的意思是，英文會採用Times New Roman字體，而中文會採用微軟雅黑字體（由於美國人設計的Times New Roman字體並不針對中文，因此中文會採用後面的微軟雅黑）。好比說，對於smyhvae哈哈哈這段文字，smyhvae會採用Times New Roman字體，而哈哈哈會採用微軟雅黑字體。

但是，若是咱們把中文字體寫在前面：(錯誤寫法)

font-family: "微軟雅黑","Times New Roman","宋體";

上方代碼會致使，中文和英文都會採用微軟雅黑字體。

（4）全部的中文字體，都有英語別名。

微軟雅黑的英語別名：

font-family: "Microsoft YaHei";

宋體的英語別名：

font-family: "SimSun";

因而，當咱們把字號、行高、字體這三個屬性合二爲一時，也能夠寫成：

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

（5）行高能夠用百分比，表示字號的百分之多少。

通常來講，百分比都是大於100%的，由於行高必定要大於字號。

好比說， font:12px/200% 「宋體」等價於font:12px/24px 「宋體」。200%能夠理解成word裏面的2倍行高。

反過來， font:16px/48px 「宋體」;等價於font:16px/300% 「宋體」。

文本屬性

CSS樣式中，常見的文本屬性有如下幾種：

letter-spacing: 0.5cm ; 單個字母之間的間距
word-spacing: 1cm; 單詞之間的間距
text-decoration: underline; 字體修飾：underline下劃線、line-through中劃線、overline上劃線
text-transform: lowercase; 單詞字體大小寫。uppercase大寫、lowercase小寫
color:red; 字體顏色
text-align: center; 在當前容器中的對齊方式。屬性值能夠是：left、right、center（在當前容器的中間）、justify
text-transform: lowercase; 單詞的字體大小寫。屬性值能夠是：uppercase（單詞大寫）、lowercase（單詞小寫）、capitalize（每一個單詞的首字母大寫）

這裏來一張表格的圖片吧，一覽無遺：

列表屬性

ul li{
    list-style-image:url(images/2.gif) ;  /*列表項前設置爲圖片*/
    margin-left:80px;  /*公有屬性*/
}

另外還有一個簡寫屬性叫作list-style，它的做用是：將上面的多個屬性寫在一個聲明中。

咱們來看一下list-style-image屬性的效果：

給列表前面的圖片加個邊距吧，否則顯示不完整：

這裏來一張表格的圖片吧，一覽無遺：

定位屬性(position,float,overflow,z-index)

這一段涉及到浮動的知識，咱們在浮動這篇文章中會專門講解。本段只作簡單介紹。

一、pisition屬性：

定位屬性position的屬性值能夠是absolute、relative。

position定位分爲絕對定位和相對定位：

position:absolute; 絕對定位：定義橫縱座標，原點在父容器的左上角。脫離了自己的順序流。橫座標用left表示，縱座標用top表示。

絕對定位的舉例：

<style type="text/css">
        div{
                position: absolute;/*絕對定位*/
                    left: 10px;/*橫座標*/
                    top: 20px;/*縱座標*/
        }
    </style>

position:relative; 相對定位：相對於本身原來的位置。

相對定位的舉例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

    <style type="text/css">

        body{
            margin: 0px;
        }

        #div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        #div2{
            position: relative;/*相對定位：相對於本身原來的位置*/
                left: 50px;/*橫座標：正值表示向右偏移，負值表示向左偏移*/
                top: 50px;/*縱座標：正值表示向下偏移，負值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
 </head>

 <body>

    <div id="div1">有生之年</div>
    <div id="div2">狹路相逢</div>

 </body>

</html>

效果：

二、float屬性：浮動

float屬性會讓元素脫離原來的順序流，它的屬性值能夠是：

none：默認值，對象不漂浮
left：文本流向對象的右邊
right：文本流向對象的左邊

舉例：

咱們知道，在默認狀況下，兩個div標籤是上下進行排列的。如今因爲float屬性讓上圖中的兩個<div>標籤出現了浮動，因而這裏兩個標籤在另一個層面上水平排列了。而<p>標籤還在本身的層面上聽從順序流進行排列。

三、clear屬性：禁止浮動

clear屬性的屬性值能夠是：

none：默認值，容許兩邊均可以有浮動對象
left：不容許左邊有浮動對象
right：不容許右邊有浮動對象
both：不容許有浮動對象

四、overflow屬性：超出範圍的內容要怎麼處理

overflow屬性的屬性值能夠是：

auto：瀏覽器本身解決。在必需時裁切對象多餘的內容或顯示滾動條。通常採用這個屬性值。
visible：默認值。多餘的內容不剪切也不添加滾動條，會所有顯示出來。
hidden：不顯示超過對象尺寸的內容。
對象將以包含對象的 window 或 frame 的尺寸進行裁切，而且 clip 屬性設置將失效。
scroll：老是顯示滾動條。

針對上面的不一樣的屬性值，咱們來看一下效果：
舉例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

    <style type="text/css">

        div{
            width: 100px;
            height: 100px;
            background-color: #00cc66;
            margin-right: 100px;
            float: left;
        }

        #div1{
            overflow:auto;/*超出的部分讓瀏覽器自行解決*/
        }
        #div2{
            overflow:visible;/*超出的部分會顯示出來*/
        }

        #div3{
            overflow:hidden;/*超出的部分將剪切掉*/
        }

    </style>

 </head>

 <body>

    <div id="div1">其實很簡單 其實很天然 兩我的的愛由兩人分擔 其實並不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你爲難 你再也不須要給我個答案</div>
    <div id="div2">其實很簡單 其實很天然 兩我的的愛由兩人分擔 其實並不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你爲難 你再也不須要給我個答案</div>
    <div id="div3">其實很簡單 其實很天然 兩我的的愛由兩人分擔 其實並不難 是你太悲觀 隔着一道牆不跟誰分享 不想讓你爲難 你再也不須要給我個答案</div>
 </body>

</html>

效果：

五、z-index屬性：屬性值大的位於上層，屬性值小的位於下層

這句話可能比較難理解。咱們來看例子吧。

這是默認狀況下的例子：（div2在上層，div1在下層）

如今加一個z-index屬性，要求效果以下：

鼠標的屬性cursor

鼠標的屬性cursor有如下幾個屬性值：

auto：默認值。瀏覽器根據當前狀況自動肯定鼠標光標類型。
pointer：IE6.0，豎起一隻手指的手形光標。就像一般用戶將光標移到超連接上時那樣。
hand：和pointer的做用同樣：豎起一隻手指的手形光標。就像一般用戶將光標移到超連接上時那樣。

好比說，我想讓鼠標放在那個標籤上時，光標顯示手狀，代碼以下：

p:hover{
    cursor: pointer;
}

另外還有如下的屬性：（不用記，須要的時候查一下就好了）

all-scroll :　 IE6.0 有上下左右四個箭頭，中間有一個圓點的光標。用於標示頁面能夠向上下左右任何方向滾動。
col-resize :　 IE6.0 有左右兩個箭頭，中間由豎線分隔開的光標。用於標示項目或標題欄能夠被水平改變尺寸。
crosshair :　簡單的十字線光標。
default :　客戶端平臺的默認光標。一般是一個箭頭。
hand :　豎起一隻手指的手形光標。就像一般用戶將光標移到超連接上時那樣。
move :　十字箭頭光標。用於標示對象可被移動。
help :　帶有問號標記的箭頭。用於標示有幫助信息存在。
no-drop :　 IE6.0 帶有一個被斜線貫穿的圓圈的手形光標。用於標示被拖起的對象不容許在光標的當前位置被放下。
not-allowed :　 IE6.0 禁止標記(一個被斜線貫穿的圓圈)光標。用於標示請求的操做不容許被執行。
progress :　 IE6.0 帶有沙漏標記的箭頭光標。用於標示一個進程正在後臺運行。
row-resize :　 IE6.0 有上下兩個箭頭，中間由橫線分隔開的光標。用於標示項目或標題欄能夠被垂直改變尺寸。
text :　用於標示可編輯的水平文本的光標。一般是大寫字母 I 的形狀。
vertical-text :　 IE6.0 用於標示可編輯的垂直文本的光標。一般是大寫字母 I 旋轉90度的形狀。
wait :　用於標示程序忙用戶須要等待的光標。一般是沙漏或手錶的形狀。
*-resize :　用於標示對象可被改變尺寸方向的箭頭光標。

w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) :　 IE6.0 用戶自定義光標。使用絕對或相對 url 地址指定光標文件(後綴爲 .cur 或者 .ani )。

濾鏡

這裏只舉一個濾鏡的例子吧。好比說讓圖片變成灰度圖的效果，能夠這樣設置濾鏡：

<img src="3.jpg" style="filter:gray()">

舉例代碼：

<body>
    <table>
        <tr>
            <td>原始圖片</td>
            <td>圖片加入黑白效果</td>
        </tr>
    <tr>
        <td><img src="3.jpg"></td>
        <td><img src="3.jpg" style="filter:gray()"></td> /*濾鏡：設置圖片爲灰白效果*/
    </tr>
    </table>
 </body>

效果以下：（IE有效果，google瀏覽器無效果）

延伸：
濾鏡自己是平面設計中的知識。若是你懂一點PS的話···打開PS看看吧：

爆料一下，表示博主有兩年多的平面設計經驗，我作設計的時間其實比寫代碼的時間要長，嘿嘿···

導航欄的製做（本段內容請忽略）

如今，咱們利用float浮動屬性來把無序列表作成一個簡單的導航欄吧，效果以下：

代碼：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

    <style type="text/css">
        ul{
            list-style: none;/*去掉列表前面的圓點*/
            width: 420px;
            height: 60px;
            background-color: black;/*設置整個導航欄的背景爲灰色*/
        }

        li{
            float: left;/*平鋪*/
            margin-right: 30px;
            margin-top: 16px;
        }

        a{
            text-decoration: none;/*去掉超鏈的下劃線*/
            font-size: 20px;
            color: #BBBBBB;/*設置超鏈的字體爲黑色*/
            font-family:微軟雅黑;
        }

    </style>

 </head>
 <body>
    <ul>
        <li><a href="">博客園</a></li>
        <li><a href="">新隨筆</a></li>
        <li><a href="">聯繫</a></li>
        <li><a href="">訂閱</a></li>
        <li><a href="">管理</a></li>

    </ul>
 </body>
</html>

實現效果以下：

國慶這四天，連續寫了四天的博客，白天和黑夜，從未停歇，只交替沒交換，爲的就是這每日一發。之後會不斷更新的。