css 字體樣式:CSS屬性:字體屬性和文字屬性-字體教程免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 字體教程
  3. CSS屬性:字體屬性和文字屬性

CSS屬性:字體屬性和文字屬性

作者: 道格資源 • • 字體教程 • 瀏覽量 965

本文重要內容

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

CSS的單位

html中的單位只有一種，就是像素px，所以單位是可以省略的，但在CSS中不一樣。 CSS中的單位是必須要寫的，因為它沒有預設單位。

絕對單位

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

各種單位的含義：

  • in：吋Inches (1 吋= 2.54 公分)
  • cm：公分Centimeters
  • mm：毫米Millimeters
  • pt：點Points ，或稱為英鎊(1點= 1/72吋)
  • pc：皮卡Picas (1 皮卡= 12 點)

相對單位

px：像素 em：印刷單位相當於12點 %：百分比，相對周圍的文字的大小

為什麼說像素px是一個相對單位呢，這也很好理解。比如說，電腦螢幕的尺寸是不變的，但是我們可以讓其顯示不同的分辨率，在不同的分辨率下，單一像素的長度肯定是不一樣的啦。

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

font 字型屬性

在 CSS中，有許多非版面樣式（與版面無關），包括：字體、行高、顏色、大小、背景、邊框、滾動、換行、裝飾屬性（粗體、斜體、底線）等。

這一段，我們先來講一下字體屬性。

css樣式中，常見的字體屬性有以下幾種：

p{ font-size: 50px; /*字體大小*/ line-height: 30px; /*行高*/ /*字體類型：如果沒有幼圓就顯示黑體，沒有黑體就顯示默認*/ font-style: italic ; /*italic表示斜體，normal表示不傾斜*/ font-weight: bold; /*粗體*/ font-variant: small-caps; /*小寫變大寫*/}

行高

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

如下圖所示：

上圖中，我們設定行高為30px，30px * 5 = 150px，透過檢視審查元素，這個p標籤的高度果然為150px。而且我們發現，我們並沒有為這個p標籤設定高度，顯然是內容將其撐高的。

垂直方向來看，文字在自己的行裡是居中的。例如，文字是14px，行高是24px，那麼padding就是5px：

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

如何讓單行文字垂直居中

小技巧：如果一段文字只有一行，如果此時設定行高 = 盒子高，就可以保證單行文字垂直居中。這個很好理解。

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

vertical-align: middle; 屬性

vertical-align: middle; /*指定行內元素（inline）或表格單元格（ table-cell）元素的垂直對齊方式。 */

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

（1）字號：

 font-size:14px;

（2）行高：

 line-height:24px;

（3）字體：（font-family是“字體”，family是“家庭”的意思）

 font-family:"宋體";

是否加粗屬性以及上面這三個屬性，我們可以連寫：（是否加粗、字號 font-size、行高 line-height、字體 font-family）

格式：

 font: 加粗 字號/行高/ 字型

舉例：

 font: 400 14px/24px "宋體";

PS：400是nomal，700是bold。

上面這幾個屬性可以連寫，但有一個要求，font屬性連寫至少要有字號和字體，否則連寫是不生效的（相當於沒有這一行程式碼）。

2、字體屬性的說明：

（1）網頁中不是所有字體都能用，因為這個字體要看用戶的電腦裡面裝沒裝，例如你設定：

 "華文彩雲";

上方程式碼中，如果使用者的 Windows 電腦裡面沒有這個字體，那就變成宋體。

頁面中，中文我們一般會使用：微軟雅黑、宋體、黑體。英文使用：Arial、Times New Roman。頁面中如果需要其他的字體，就需要單獨安裝字體，或切圖。

（2）為了防止使用者電腦裡，沒有微軟雅黑這個字體。就要用英語的逗號，提供備選字體。如下：（可以備選多個）

 "微軟雅黑","宋體";

上方代碼表示：如果使用者電腦裡沒有安裝微軟雅黑字體，那就是宋體。

（3）我們須將英文字體放在最前面，這樣所有的中文，就無法搭配英文字體，就自動的變成後面的中文字體：

 "Times New Roman","微軟雅黑","宋體";

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

可是，如果我們把中文字體寫在前面：(錯誤寫法)

 "微軟雅黑","Times New Roman","宋體";

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

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

微軟雅黑的英文別名：

 "Microsoft YaHei";

宋體的英語別名：

 "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% 「宋體」。

字體加粗屬性

.div { font-weight: normal; /*正常*/ font-weight: bold; /*加粗*/ font-weight: 100; font-weight: 200; font-weight: 900;}

在設定字體是否加粗時，屬性值既可以填入normal、bold這樣的加粗字體，也可以直接填入 100至900 這樣的數字。 normal的值相當於400，bold的值相當於700。

文字屬性

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

  • letter-spacing: 0.5cm ; 單字母之間的間距
  • word-spacing: 1cm; 單字之間的間距
  • text-decoration: none;字體修飾：none 去掉底線、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屬性的效果：

給清單前面的圖片加個邊距吧，不然顯示不完整：

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

overflow屬性：超出範圍的內容該怎麼處理

overflow屬性的屬性值可以是：

  • visible：預設值。多餘的內容不剪切也不添加滾動條，會全部顯示出來。
  • hidden：不顯示超過物件尺寸的內容。
  • auto：如果內容不超出，則不顯示捲軸；如果內容超出，則顯示捲軸。
  • scroll：Windows 平台下，無論內容是否超出，總是顯示捲軸。 Mac 平台下，和 auto屬性相同。

針對上面的不同的屬性值，我們來看看效果： 舉例：

<!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: divleft; auto;/*超出的部分讓瀏覽器自行解決*/ } #div2{ overflow: visible;/*超出的部分會顯示出來*/ } #div3{ overflow: hidden;/*超出的部分將剪切掉* / } </style> </head> <body> <div id="div1">其實很簡單其實很自然兩個人的愛由兩人分擔其實並不難是你太悲觀隔著一道牆不跟誰分享不想讓你為難你不再需要給我個答案</div> <div id="div2">其實很簡單其實很自然兩個人的愛由兩人分擔其實並不難是你太悲觀隔著一道牆不跟誰分享不想讓你為難你不再需要給我個答案</div> <div id="div3">其實很簡單其實很自然兩個人的愛由兩人分擔其實並不難是你太悲觀隔著一道牆不跟誰分享不想讓你為難你不再需要給我個答案</div> </body></html>

效果：

滑鼠的屬性 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> <td>圖片加入黑白效果</td> </tr> <td ; <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;/*設定超鏈的字體為黑色*/ } </style> </head> <body> <ul> <li><li>< <body> <ul> <li>< ;a href="">博客花園</a></li> <li><a href="">新隨筆</a></li> <li><li> ;a href="">聯絡</a></li> <li><a href="">訂閱</a></li> <li><a href="">管理</a></li> </ul> </body></html>

實現效果如下：

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

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/CSS-shu-xing-zi-ti-shu-xing-he-wen-ben-shu-xing.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu ︶￣Ｓs°╮ 專欄作者
48 196
single-end

相關推薦