css文字樣式及盒模型

標籤：tab   寬度   weight   sim   ott   man   劃線   12px   置中   

一、文字樣式3.1 color

文字顏色：

屬性值：三種色值標記法都可以使用

 

1 color: #B30000;  //十六進位標記法 2 color: rgb(255,0,0); //rgb() 3 color: red;      //單詞標記法

 

3.2 font-style

設定文字是否傾斜

預設值：normal（正常）

傾斜： oblique(普通傾斜)

傾斜： italic(使用，將有傾斜字型的英文進行替換)

1 .ob { 2  font-style: oblique; 3 } 4 .it { 5  font-style: italic; 6 }

 

 

 

3.3 font-weight

設定文字是否加粗

預設值： normal(正常) 500

加粗： bold   700

屬性值：100-900（沒有單位）

1 .f700 { 2  font-weight: 700; 3 }

 

3.4 font-size

字型大小：單位是px

工作中讀取設計師標註

現在需要自己手動測量。

粗略的測量：直接測量文字高度。

 

 

 

瀏覽器有最小字型大小，超過最小字型大小，預設顯示最小字型大小。（chrome最小字型大小12px）

 

 

3.5 line-height

行高：一行文字實際佔有的高度。

特點：文字在行高內垂直置中。

單位是px;

1 line-height: 200px;

 

 

 

 

單行文本垂直置中：盒子的高度和行高相同。

1 div.box1 { 2  width: 300px; 3  height: 100px; 4  font-size: 30px; 5  line-height: 100px; 6  7 }

 

 

百分數表示：%(表示和字型大小比值)

1 .box2 { 2  width: 400px; 3  height: 100px; 4  border: 1px solid #000; 5  font-size: 20px; 6  /*line-height: 100px;*/ 7  /*line-height是相對字型大小比值： 20 * 500% = 100px*/ 8  line-height: 500%; 9 }

 

3.6 font-family

字型。

一般我們使用字型，使用電腦預設內建字型，特殊的字型，計算上沒有，那麼不能正常渲染。

英文字型： Arial

中文： Microsoft Yahei,備用字型SimSun;

1 /*字型 先書寫英文字型，在書寫中文字型*/ 2 font-family: "Arial","Microsoft Yahei","SimSun";

 

font:是一個複合屬性，可以書寫複合寫法。每一個屬性用空格隔開。

屬性值可以省略，表示預設值，至少要書寫字型大小，字型。

1 font: 是否傾斜 是否加粗 字型大小/行高 字型;  2 font: italic bold 30px/100px "Arial","Microsoft Yahei";

 

文本控制屬性：

3.7 text-indent

設定文本首行縮排。

單位是em。2em表示首行縮排2漢字

1 text-indent: 2em;

 

 

單位：百分數（相對父盒子寬度的比值）

1 ext-indent: 20%;

 

單位： px

1 text-indent: 100px;

 

3.8 text-align

設定文本水平左右置中。

屬性值：

預設值： left(靠左)

靠右（right）

置中（center）

1 text-align: center;

 

 

img:插入圖片（文本）

text-align: center; 設定文本置中（單行，多行）

1

 

 

3.9 text-decoration

文本是否設定底線

預設值（除了a標籤）：

沒有底線： none

底線： underline

1 text-decoration: none; 2 text-decoration: underline;

 

 

二、盒模型4.1 概述

width: 盒子內容寬度

height: 盒子內容高度

border: 邊框

padding: 內邊距

margin: 外邊距

 

內容地區： 

內容寬 = width

內容高 = height

 

實際佔有地區： 

實際佔有寬度 = width + padding * 2 + border * 2

實際佔有高度 = height + padding * 2 + border * 2

 

計算：

實際寬 = 500 + 50 * 2 + 10 * 2 = 620px

實際高 = 300 + 50 * 2 + 10 * 2 = 420px

 

一般經常給出的是盒子佔有寬高，需要我們計算出盒子的內容寬和高。

盒子內容寬 width  = 盒子實際寬度 - Padding * 2 - border * 2

盒子內容高 height  = 盒子實際高度 - Padding * 2 - border * 2

 

盒子寬度是500px,盒子高度是 300px，內邊距是50px，邊框是20px，計算盒子內容寬和高度

width = 500 - 50 * 2 - 20 * 2 = 360px

height = 300- 50* 2 - 20 *2 = 160px

 

 

背景（背景色和背景圖）渲染地區：邊框以內（padding地區可以渲染背景）

 

1 background-image: url(images/star.gif);

 

 

4.2 padding

內邊距： 內容到內邊框之間的距離。

1

 

 

padding:也是複合屬性，可以按照方向進行拆分

padding-left

padding-right

padding-top

padding-bottom

 

 

可以書寫複合寫法：

四值法：上 右 下 左；

1 padding: 30px 40px 50px 60px;

 

三值法： 上 右（左） 下；

1 padding: 30px 50px 60px;

 

二值法： 上（下） 右（左）；

1 padding: 30px 50px;

 

單值法： 四個方向都相同;

1 padding: 30px;

 

一般在使用時我們習慣先書寫單值法，特殊方向用單一屬性層疊掉。

1 padding: 30px; 2 padding-left: 100px;

 

 

4.3 margin

外邊距： 盒子之間的距離

用法和padding 一樣

 

margin也是複合屬性可以按照方向拆分

1 margin-left 2 margin-right 3 margin-top 4 margin-bottom

 

可以書寫複合寫法：

四值法： 上 右 下 左；（三值法，二值法，單值法）

1 margin: 20px 30px 40px 50px;css

css文字樣式及盒模型