整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文重要內容
html中的單位只有一種，那就是像素px，所以單位是可以省略的，但是在CSS中不一樣。 CSS中的單位是必須要寫的，因為它沒有默認單位。
1 in=2.54cm=25.4mm=72pt=6pc。
各種單位的含義：
px：像素 em：印刷單位相當于12個點 %：百分比，相對周圍的文字的大小
為什么說像素px是一個相對單位呢，這也很好理解。比如說，電腦屏幕的的尺寸是不變的，但是我們可以讓其顯示不同的分辨率，在不同的分辨率下，單個像素的長度肯定是不一樣的啦。
百分比%這個相對單位要怎么用呢？這里也舉個例子：
CSS中，有很多非布局樣式（與布局無關），包括：字體、行高、顏色、大小、背景、邊框、滾動、換行、裝飾性屬性（粗體、斜體、下劃線）等。
這一段，我們先來講一下字體屬性。
css樣式中，常見的字體屬性有以下幾種：
p{
font-size: 50px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: 幼圓,黑體; /*字體類型：如果沒有幼圓就顯示黑體，沒有黑體就顯示默認*/
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; /*指定行內元素（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）網頁中不是所有字體都能用，因為這個字體要看用戶的電腦里面裝沒裝，比如你設置：
font-family: "華文彩云";
上方代碼中，如果用戶的 Windows 電腦里面沒有這個字體，那么就會變成宋體。
頁面中，中文我們一般使用：微軟雅黑、宋體、黑體。英文使用：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% “宋體”。
.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樣式中，常見的文本屬性有以下幾種：
這里來一張表格的圖片吧，一覽無遺：
ul li{
list-style-image:url(images/2.gif) ; /*列表項前設置為圖片*/
margin-left:80px; /*公有屬性*/
}
另外還有一個簡寫屬性叫做list-style，它的作用是：將上面的多個屬性寫在一個聲明中。
我們來看一下list-style-image屬性的效果：
給列表前面的圖片加個邊距吧，不然顯示不完整：
這里來一張表格的圖片吧，一覽無遺：
overflow屬性的屬性值可以是：
針對上面的不同的屬性值，我們來看一下效果： 舉例：
<!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>
效果：
鼠標的屬性cursor有以下幾個屬性值：
比如說，我想讓鼠標放在那個標簽上時，光標顯示手狀，代碼如下：
p:hover{
cursor: pointer;
}
另外還有以下的屬性：（不用記，需要的時候查一下就行了）
這里只舉一個濾鏡的例子吧。比如說讓圖片變成灰度圖的效果，可以這樣設置濾鏡：
<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>
實現效果如下：
國慶這四天，連續寫了四天的博客，白天和黑夜，從未停歇，只交替沒交換，為的就是這每日一發。以后會不斷更新的。
、 設置字體樣式的基本標簽是<font></font>，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，<font></font>容易被多重嵌套，如<font 屬性1=值1><font 屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位，如<font><p>文本</font></p>。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。
2、設置文字的顏色 color 是標簽的屬性之一，用于設置文字顏色。color是<font></font>標簽的屬性之一，用于設置文字顏色。例子如：淺紅色文字：<font color="#dd0000">51UM博客即湯湯個人博客網站，是一個和草根站長們一起學習分享網站SEO優化技術、web前端開發為主的個人博客網站。</font>
3、設置文字的尺寸 size 也是標簽的屬性，用于設置文字大小。size 的值為1-7， 默認為3。我們可以 size 屬性值之前加上“+”“-”字符，來指定相對于字 、 號初始值的增量或減量。例子如： size為1：<font size="-2">HTML學習</font>
4、使文字傾斜，用雙標簽<i></i>可使被作用文字傾斜，達到特殊的效果，例如文章的日期。<em></em>被稱為強調標簽，也是斜體，目前使用比<i></i>標簽更頻繁，其編寫方法如下：
<i>這是斜體文字</i>
<em>這也是斜體文字</em>
5、 使文字加粗，用雙標簽<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。<strong></strong>被稱為特別強調標簽，也是文字加粗，目前使用比<b></b>標簽更頻繁，其編寫方法如下：
<b>這是粗體文字</b>
<strong>這也是粗體文字</strong>
除注明外的文章,均為來源：湯久生博客(QQ:1917843637),轉載請保留本文地址，謝謝！
體
1、使用CSS屬性指定和改變字體外觀，常見的屬性有：
font-style: italic; 定義字體的風格
font-weight: bold; 定義字體粗細
font-size: 20px; 定義字體大小
line-height: 30px; 定義一段文字的行高
還可以使用簡寫形式，把所有屬性值放到font屬性中，如：
p {
font: italic bold 20px/30px 微軟黑體;
}2、Font-family 屬性可以設置文字字體樣式，比如常用的中文字體有：微軟雅黑，黑體，宋體等；常用的英文字體有：Verdana，arial，Times New Roman等。Font-family 后面可以定義一個字體，也可以定義一個字體列表。為什么需要使用字體列表呢？因為我們無法控制用戶計算機上安裝什么字體，不僅如此，往往操作系統也不一樣，比如在蘋果的Mac電腦上有的字體，在微軟的Windows上就不一定有，所以最好為字體指定一個可選的字體列表。字體列表實際上就是一個字體有限列表，如下，第一個微軟雅黑是我希望使用的，瀏覽器會盡力加載這個字體，如果用戶電腦上沒有這個字體就使用第二個備用字體，依次類推，字體列表最后面應該制定一個通用字體系列。
p{
font-family: 微軟雅黑, 黑體, Arial, Helvetica, sans-serif;
}3、什么是通用字體系列？在CSS中定義了5個通用字體系列：
· Sans-serif字體系列：無襯線字體，筆畫粗細一致，在計算機屏幕上更容易閱讀
· Serif字體系列：有襯線字體，筆畫末端有裝飾性的線條或凸起，報紙正文中使用的字體
· Monospace字體系列：等寬字體，每個字母寬度一致，用于顯示軟件代碼示例
· Cursive字體系列：手寫體
· Fantasy字體系列：裝飾性字體，設計感較強
所以，候選字體列表中的字體通常來自于同一個字體系列，這樣當瀏覽器找不到優先定義的字體使用備用字體時，頁面展示的效果不會有太大的變化。如果前面指定的特定字體都沒有找到，瀏覽器就從sans-serif字體系列中找一個默認的字體。
4、font-size 調整字體大小的方法有三種：
1）使用像素px，如：
字體大小
注意：20和單位px之間不能有空格，文字的大小就是文字的最低部分和最高部分之間時20像素
2）使用%定義字體大小就是相對于父元素的字體大小，如：p標簽時body的子標簽，body定義的字體大小是20px，所以子標簽p的字體大小是父標簽的150%即30px。
字體大小
3）使用em調整字體大小，類似于百分數，也是一個相對的度量單位，使用em的時候要指定一個比例因子，p標簽是父標簽字體大小的1.2倍即24px。
字體大小
5、font-weight 屬性可以改變字體的粗細，bold為粗體，normal為去掉粗體的樣式。
字體粗細
字體的粗細還有lighter為稍細，bolder稍粗，或者使用數字100、200-900，但是這些都沒有得到字體和瀏覽器的廣泛支持，通常并不適用，了解即可。
6、font-style為字體增加風格
字體風格
有三個可能的值：normal（正常），italic（斜體字符），oblique（傾斜文本）；其中italic是專門為正常字體設計的斜體字符，oblique沒有專門的斜體字符，由瀏覽器負責把正常的字體傾斜顯示，因為不是所有的字體定義了斜體字符，所以使用italic定義字體風格時，瀏覽器找不到這個字體的斜體字符，就通過oblique把正常的字體傾斜顯示，有時候看著是一樣的，有時候則不同，除非非要區分斜體和傾斜文本，不然可以選擇一種使用。
7、line-height 調整行高，定義一個盒子內每一行文字之間的距離。
字體行高
每天進步一點點，跟著教頭學開發。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
