2012年10月4日 星期四

如何美化網頁文字(4)-[font-size]設定網頁文字大小繼承問題


當我們在設定網頁文字大小的時候,如果是使用像素大小的用法,就無須考慮繼承的問題,如果是用關鍵字 、百分比(%)和或行長單位(em)就必須考慮繼承的問題,他們受到父類的設定文字大小,進而影響子類的文字大小,以下我們用行長單位(em)來做說明,先來寫段html吧!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<article class="a1">
  <h1>this is my font style</h1>
  <p>The results of a survey <strong>published</strong> Friday showed that 70 percent of local salaried  employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability     as the reasons. 
  </p>
</article>
<article class="a2">
  <h1>this good page</h1>
  <p> Meanwhile, 58 percent of those <strong>polled</strong> said they need at least NT$1 million  (US$33,343.3)   in savings before they will decide to walk down the aisle(3), while 92 percent  said money  can help strengthen their romantic relationships.
  </p>
</article>
</body>
</html>
 橙子設了兩個 類別 a1,a2,兩個類別裡各別有<h1>及<p>及<strong>,a1打算用像素大小表示,a2部份用em的方式表示,這樣好做分別,先來看未改變的狀態吧!
2012-10-04_110740
加入類別a1的css 吧!
<style type="text/css">
.a1 {
    font-size: 8px;
    background-color: #3F0;
}
.a1 h1 {
    font-size: 32px;
}
.a1 p strong {
    font-size: 48px;
}
</style> 
 先看結果:
 2012-10-04_111713  
綠色的部份為a1類別的區塊,而橙先設整個內容為 8px 字體大小,所以未設到的<p>,就會以 8px 表示,而<h1>為32 px ,<strong>為 48px ,此種設定並未有任何依存關係,各別自定一個樣式,互不相干擾,有時對於設計固定版路的網頁,比較方便!
我們再來說明行長(em) 的方式吧!加入a2的css吧!
<style type="text/css">
.a2 {
    font-size: 0.5em;
    background-color: #FC0;
}
.a2 h1 {
    font-size: 3em;
}
.a2 p strong {
    font-size: 8em;
}
</style>
先看看結果吧!
2012-10-04_112735   
橘色的部份為a2 類別的部份,a2 設為 0.5em ,也就是 0.5em x 16px = 8 px ,所未設定的<p>標籤也就以 8px顯示。
而<h1>的部份設定為3em ,此時顯示並非為 3em x 16px = 48px ,這是錯的,而是繼承了a1 類別的屬性0.5em ,所以,真正顯示的為 0.5em x 3em x 16p = 24px
而<strong>的部份,因為<p>沒有設定,所以,他的字體大小為 0.5em x 8em x 16px = 64px
這就是為繼承的意思,表示在你在設定的時候,有時你必須注意你的父類的設定,當父類的設定變更的時候,子類的大小也會隨之改變,百分比和關鍵字也都有同樣的狀況。
而在於使用哪一個,就看個人意思,橙覺得用行長單位的方式,較為活,而用像素方式設定方式,也就是比較死,因為如果在未來修改時,必須一個一個修改,他無法等比變化,但是,在使用em的時候,你在父類設定改變時,子類的文字全亂的狀況,也就是當要使用em 方式,可能要想得比較多一點。

2012年10月2日 星期二

如何美化網頁文字(3)-[font-size]設定網頁文字大小

網頁文字大小,通常也決定網頁在使用者眼中所看到的重點,網頁使用者通常只注意圖片、大文字、影片幾個要件,通常來說文字在網頁的顯示中,是最先出現(因為純文字的讀取的時間快),而使用者在第一次看到你的網頁的耐心,通常是沒有幾秒的,所以,文字的使用,是相當的重要喔!
我們開始來說明文字的大小設定吧!
我們在"如何美化網頁文字(1)-設定網頁文字格式",就有設定了<h1>的文字大小
<style type="text/css">
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
</style>
設定<h1>為18px的大小,文字將會顯示18px的大小的文字,而設定文字的指令就是
[font-size]
我們在設定文字有幾種設置方式
1、設定大小:也就上述所說的方式,單位有px、pt 等 可以用。
2、關鍵字:可使用large、small等方式來表示。
3、百份比:可使用百分比的方式來表示。
4、行長單位:可使用em的方式類同於百分比的方式表示。

以上四項,第一項為自訂文字大小,意思是不管系統(瀏覽器)預設大小,文字的設定亦為你設定的文字大小,並非因為使用者放大縮小,而依存改變。
第二項至第四項將是和系統有著依存關係的,以下做一些說明
橙子還是先做一個範例吧!橙先把之前例子再修改了一下 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>this is my font style</h1>
<p>The results of a survey <strong>published</strong> Friday showed that 70 percent of local salaried employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p>
<p> According to the survey conducted by 360d, a local job bank, the majority of the respondents said their current situations do not allow them to get married. </p>
<p> Of these, 84 percent said they do not have enough savings and salaries, while 49 percent said their jobs are unstable. Another 41 percent answered in the multiple-choice questionnaire said that they have not met the right person. </p>
<h2>this good page</h2>
<p> Meanwhile, 58 percent of those polled said they need at least NT$1 million (US$33,343.3) in savings before they will decide to walk down the aisle(3), while 92 percent said money can help strengthen their romantic relationships. </p>
<p> About 53 percent of the single respondents said they are not ready for relationships now, citing the lack of money, the extra expenses needed when in a relationship and being too busy with work as their reasons. </p>
<h3>Is my life</h3>
<p>Wesley Yang, a manager at the job bank, said that in light of the weak economy, many moonlighters(4) have arranged plans to a little extra cash on Chinese Valentine's Day, which falls on the seventh day of the seventh month on the lunar calendar, or Aug. 23, this year. </p>
<p>These moonlighting jobs include delivering flowers, queuing up for restaurants or buying gifts on behalf of clients, working as housekeepers at hotels and even as professional huggers who provide hugs on the streets to single people on Valentine's Day, Yang said. </p>
<p>The survey collected 2,051 valid samples from July 31-Aug. 13. It had a margin of error of 3 percentage points and a confidence level of 95 percent. </p>
</body>
</html>
我加入<h2>~<h3><strong>的標籤
1、設定大小:我們可以設定該文字的大小,當你設定了大小後,不管瀏覽器不同,文字將會依你所設定的大小固定。
我們再來改css唄!加入css 
<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
</style>
再來看結果:
2012-10-02_132846  

紅色的部份也就是<h1>的地方也就是修改的地方,他的字體為36px,字體有變大了吧!
2、關鍵字: CSS提供有七種keyword,提供你與基準尺寸相對的尺寸:
xx-small,small,medium,large,x-large和xx-large
而他的定義為以瀏覽器預定的大小(16px)為基準,表示他的大小,按照不同的係數來變化大小。
約可這樣比對
xx-small=9px
x-small= 10px
small=13px
large=18px
x-large=24px
xx-large=32px
可以這樣寫:
<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
</style>
 將<h2>設定為x-large;顏色為藍色,看結果:
2012-10-02_133401  
基本上,這個方式只有七種大小可以選擇,在設計上就少了靈活性,建議上還是少用。
所以可以用以下方式使用。

3、百份比:可使用百分比的方式來表示。
百分比的意思就是,他可以比例的方式,來決定字體的大小,意思是說,預設是16px如果是100%的話,所顯示出來的,就是16px的大小,如設定成200%,顯示出來就是32%,簡單吧!也就比例的方式表現!
再來改css吧!將<p>的部份都改成75%吧! 
<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
p {
    font-size: 75%;
    color: #0F0;
}
</style>
 先看結果:
2012-10-02_134342  

綠色的部份為修的地方,而字體也相對的變小了,字體變多少了呢?也就是 16px * 75% =12px ,所以,所出現的字體大小為12px。

4、行長單位:可使用em的方式類同於百分比的方式表示。
em一詞來自於印刷領域(紙面印刷),是指一種特定字體中一個大寫字母M的高度來到WEB的地方,就是用於字體大小使用尺寸了!
其實,這個和百分比的表現方式並無差別,1em = 100% ,.75em = 75%
也就將百份比除以100,就是em 了,這個使用就看各位是要用哪一個了。
最後,還是來改css吧!將<h3>標籤修改成em的方式吧!
<style type="text/css">
h1 {
    font-size: 36px;
    color: #F00;
}
h2 {
    font-size: x-large;
    color: #00F;
}
p {
    font-size: 75%;
    color: #0F0;
}
h3 {
    font-size: 3em;
    color: #C3C;
}
</style>
 我將<h3>改成紫色且大小為3em,也就是300%,也就是48px的大小,看看結果吧!
2012-10-02_135340  
是不是隨之改變了!

結論:
各種字體的大小設定,並無一定要求哪一個比較好,看個人喜好,而在我設計的網頁中,我習慣都設定成一致,不要有些地方是em 有些地方是px,有些地方是pt,這樣會造成未來你在修改網頁設定的困難度,有時也會很難看一致的寫法,會讓你在修改時,會更加順手!!

2012年10月1日 星期一

如何美化網頁文字(2)-[color]設定網頁文字顏色

再來,橙子來說明設定網頁文字的顏色,當然,在設定完文字的格式後我們通常要設定文字的顏色,雖說,我在設定網頁文字的時候通常只使用幾種顏色,黑色、白色、灰色,最常用的是黑色,次之是白色,最後才是灰色,因為文字的使用通常還是用黑色較為顯著,而白色通常是使用在底色為深色時使用,灰色是用於較為不重要內容,但又須說明的地方,用這三種顏色,是個人覺得此三種顏色搭配出來的網頁感覺較為高尚(個人認為啦!),但也是看網頁的配置、配色而定,如果在設計關於小朋友、遊樂園的、電玩的,也可以使用較為豐富的文字顏色,來突顯網頁的活潑性,個人較為少使用,可能也是因為之前都是在設計公司的網頁較為多吧!
我們以上次的資料來說明吧!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>this is my font style</h1>
<p>The results of a survey published Friday showed that 70 percent of local salaried employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p>
<p> According to the survey conducted by 360d, a local job bank, the majority of the respondents said their current situations do not allow them to get married. </p>
<p> Of these, 84 percent said they do not have enough savings and salaries, while 49 percent said their jobs are unstable. Another 41 percent answered in the multiple-choice questionnaire said that they have not met the right person. </p>
<p> Meanwhile, 58 percent of those polled said they need at least NT$1 million (US$33,343.3) in savings before they will decide to walk down the aisle(3), while 92 percent said money can help strengthen their romantic relationships. </p>
<p> About 53 percent of the single respondents said they are not ready for relationships now, citing the lack of money, the extra expenses needed when in a relationship and being too busy with work as their reasons. </p>
<p>Wesley Yang, a manager at the job bank, said that in light of the weak economy, many moonlighters(4) have arranged plans to a little extra cash on Chinese Valentine's Day, which falls on the seventh day of the seventh month on the lunar calendar, or Aug. 23, this year. </p>
<p>These moonlighting jobs include delivering flowers, queuing up for restaurants or buying gifts on behalf of clients, working as housekeepers at hotels and even as professional huggers who provide hugs on the streets to single people on Valentine's Day, Yang said. </p>
<p>The survey collected 2,051 valid samples from July 31-Aug. 13. It had a margin of error of 3 percentage points and a confidence level of 95 percent. </p>
</body>
</html>
 我們來加入顏色!<p>都改成紅色的吧!加入相對應的css吧!
<style type="text/css">
p {
    color: red;
}
</style>
 我們在<p>加入color:red; 表示將 <p>全數改成紅色的,來看看結果吧!
2012-10-01_102519  
是不是全部變成了紅色了!
我們剛剛用了color:red;的方式,用red 的方式,只是其中一樣而以,我們在之前的文章有介紹過而如果要特殊的顏色,也可以使用以下兩種方式設定顏色
1、十六進位:#525252
2、RGB:rgb(55,66,88)
而我們就他們來改變<h1>的顏色吧!加入css
<style type="text/css">
p {
    color: red;
}
h1 {
    color: #00Ff55;
}
</style>
 看看結果吧!
2012-10-01_103151  
有看到標題<h1>顏色改變了吧!再來橙子再使用RGB的方式來改變<h1>吧!修改css
<style type="text/css">
p {
    color: red;
}
h1 {
    color: rgb(0,102,255);
}
</style> 
看看結果吧!
2012-10-01_103536   
可以看到<h1>的標題變成了藍色的了
由以上的方式,可以將文字的顏色改成各式各樣的顏色,不過記得一件事,文字是要給人看清楚的不要設定一種快和底色溶為一體的顏色,這樣整個網頁會看起來亂七八糟的,這樣許多人在看您的網頁時候,就會看不下去而轉台了!

2012年9月30日 星期日

祝大家中秋佳節快樂


在每好的日子裡,又是星期天,是個團聚的好日子,


祝各位中秋佳節快樂!!


快樂!!^^

2012年9月28日 星期五

如何美化網頁文字(1)-[font-family]設定網頁文字格式

現在網頁上充滿了圖片、影片、人們閱讀文字的內容愈來愈少了,但是文字還是在網頁裡是最基本的,可表達你想表達的事,雖然,圖片、影片的轉載,可以讓你少寫很多文字,但,文字的表達可以加強人們對於你的文章的想法和看法,我們來設定最基本的文字吧!!
同樣的!我先找了一篇文章...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>

<body>
<h1>this is my font style</h1>
<p>The results of a survey published Friday showed that 70 percent of local salaried employees are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p>
<p> According to the survey conducted by 360d, a local job bank, the majority of the respondents said their current situations do not allow them to get married. </p>
<p> Of these, 84 percent said they do not have enough savings and salaries, while 49 percent said their jobs are unstable. Another 41 percent answered in the multiple-choice questionnaire said that they have not met the right person. </p>
<p> Meanwhile, 58 percent of those polled said they need at least NT$1 million (US$33,343.3) in savings before they will decide to walk down the aisle(3), while 92 percent said money can help strengthen their romantic relationships. </p>
<p> About 53 percent of the single respondents said they are not ready for relationships now, citing the lack of money, the extra expenses needed when in a relationship and being too busy with work as their reasons. </p>
<p>Wesley Yang, a manager at the job bank, said that in light of the weak economy, many moonlighters(4) have arranged plans to a little extra cash on Chinese Valentine's Day, which falls on the seventh day of the seventh month on the lunar calendar, or Aug. 23, this year. </p>
<p>These moonlighting jobs include delivering flowers, queuing up for restaurants or buying gifts on behalf of clients, working as housekeepers at hotels and even as professional huggers who provide hugs on the streets to single people on Valentine's Day, Yang said. </p>
<p>The survey collected 2,051 valid samples from July 31-Aug. 13. It had a margin of error of 3 percentage points and a confidence level of 95 percent. </p>
</body>
</html>
 文章的內容是找網路的英文文章,內容是什,橙子不做解釋(因為看不懂,也不是重點 呵呵)
先看不加入css之前的樣子吧!
2012-09-28_112659    
<h1>的部份會變成粗體字,是因為本來<h1>標籤預設就是粗體的了,而且字體也會放大。
橙子開始來做基本的文字設定了,在<h1>加入css
<style type="text/css">
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
</style>
我們設定css,"font-family"就是設定網頁文章字體,我設為 arial, Helvetica, sans-serif,他是有順序性的也就是說,如果,「使用者的電腦」沒有arial的字體,就會用Helvetica的字體,如果「使用者的電腦」沒有,就會用sans-serif的字體,而為什要強調「使用者的電腦」,也就是網頁並非給自己使用,而是要提供給他人使用,而如果使用電腦沒有該字體,就無法顯示你要的效果,反而適得其反,所以,在中文中,也就只有建議用標楷體和新細明體二種字體可以使用,如果沒有必要,不要自作聰明,弄了一堆字體,在自家的電腦可以,那純屬自high 用,因為,別人是看不到的,所以這些是要特別注意的。
而真的無法解決這樣的問題嗎?難到我只能用那醜醜的細明體和標楷體嗎?其實不然,你可以用圖片來表示,也可以用javascript,亦可用css3的方式來外掛文字,而這些方式,等之後寫到,也可一一說明,但現在就說最基本的方式吧!
我們來看看結果:
 2012-09-28_113956  
是不是<h1>的文字改變了吧!大家可以試試看喔!

2012年9月26日 星期三

高興!突破1700了!

哈哈!!瀏覽量到1700了,雖然不多,感謝大家播空看我的文章,不知道有沒有幫到各位!感謝大家的支持!