第七章 CSS文字樣式

時間  2019-11-12
標籤 第七 css 文字 樣式 欄目 CSS 简体版
原文   原文鏈接

對HTML頁面中的文字進行全方位的設置css

一、字體html

在HTML語言中，文字的字體是經過<font face=「字體名稱">來設置的api

在CSS中字體則是經過font-family屬性來控制的，該屬性典型語句：瀏覽器

p{
    font-family:黑體，Arial，宋體，sans-serif；
}

整句代碼告訴瀏覽器首先在瀏覽者的計算機中尋找黑體，若是該用戶計算機中沒有黑體，則接着尋找Arial字體，若是黑體與Arial都沒有，再尋找宋體。若是font-family中所聲明的全部字體都沒有，則使用瀏覽器的默認字體顯示。字體

font- family屬性能夠同時聲明任意中字體，字體之間用逗號分隔開ui

一些字體的名稱中間會出現空格，這須要用雙引號將其引發來，如「Times New Roman」。spa

常見的「sans-serif」和「serif」不是單個字體的名稱，而是一類字體的統稱。按照W3C的規則，在font-family的最後都須要指定一個這樣的字體集，當客戶端沒有指定字體時可使用本機上的默認字體。設計

 一般文章的正文使用的是易讀性較強的serif字體，用戶長時間閱讀下不容易疲勞，而標題和表格則採用較醒目的sans-serif字體，它們須要顯著和醒目，但沒必要長時間盯着這些文字來閱讀。WEB設計及瀏覽器設置中推薦遵循此原則。code

不少設計者喜歡使用各類各樣的字體來給頁面添彩，但這些字體在多數用戶的機器上都沒有安裝，所以必定要設置多個備選字體，避免瀏覽器直接替換成默認的字體。最直接的方式是將使用了生僻字體的部分，用圖形軟件製做成小的圖片，在加載到頁面上。orm

<html>
<head>
<title>文字字體</title>
<style type="text/css">
<!--
h2{
    font-family:黑體，幼圓；
}
p{
    font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
    font-family:楷體_GB2312,"Times New Roman";
}
-->
</style>
</head>
<body>
    <h2>立春</h2>
    <p>自秦代以來，我國就一直以立春做爲春季的開始。立春是從天文上來劃分的，而在天然界、在人們的心目中，春是溫暖，鳥語花香；春是生長，耕耘播種。在氣候學中，春季是指候（5天爲一候）平均氣溫10度至22度的時段。</p>
    <p class="kaiti">做者：isaac</p>
</body>
</html>

二、文字大小

在網頁中經過文字的大小來突出主題是最日常的方法之一，CSS對於文字大小是經過font-size屬性來具體控制的，而該屬性的值能夠是相對大小也能夠是絕對大小。

例中一共設置了5種文字大小，使用的都是絕對單位，在任何分辨率的顯示器下，顯示出來的都是絕對的大小不會發生改變。

絕對單位 說明
in inch，英寸
cm centimeter，釐米
mm millimeter，毫米
pt point，印刷的點數，在通常的顯示器中1pt至關於1/72inch
pc　　　　 Pica，1pc=12pt

 除了利用物理單位設定文字絕對大小的方法，CSS還提供了一些絕對大小的關鍵字，可做爲font-size的值，關鍵字一共有7個。但這種方法在不一樣的瀏覽器中的顯示效果卻不同，所以並不推薦使用。

<html>
<head>
<title>文字大小（絕對）</title>
<style type="text/css">
<!--
    p.inch{ font-size:0.5in;}     /*物理單位*/
    p.cm{ font-size:0.5cm; }
    p.mm{ font-size:4mm;}
    p.pt{ font-size:12pt;}
    p.pc{ font-size:2pc;}
    
    p.one{ font-size:xx-small;}  /*關鍵字*/
    p.two{ font-size:x-small;}
    p.three{ font-size:small;}
    p.four{ font-size:medium;}
    p.five{ font-size:large;}
    p.six{ font-size:x-large;}
    p.seven{ font-size:xx-large;}
    
-->
</style>
</head>
<body>
    <p class="inch">文字大小0.5in</p>
    <p class="cm">文字大小0.5cm</p>
    <p class="mm">文字大小4mm</p>
    <p class="pt">文字大小12pt</p>
    <p class="pc">文字大小2pc</p>
    
    <p class="one">文字大小xx-small</p>
    <p class="two">文字大小x-small</p>
    <p class="three">文字大小small</p>
    <p class="four">文字大小medium</p>
    <p class="five">文字大小large</p>
    <p class="six">文字大小x-large</p>
    <p class="seven">文字大小xx-large</p>    
</body>
</html>

 

相對文字大小不像前面提到的絕對大小那樣固定，絕對大小不隨顯示器和父標記的改變而改變。相對大小的設置比較靈活，所以一直受到不少網頁製做者的青睞。

px：表示具體的像素，所以其顯示大小與顯示器的大小及其分辨率有關。

%或者em：都是相對於父標記而言的比例，若是沒有設定父標記的字體大小，則相對於瀏覽器的默認值。

<html>
<head>
<title>文字大小（相對）</title>
<style type="text/css">
<!--
p.one{ font-size:15px;}    /*像素，所以實際顯示大小與分辨率有關，很經常使用的方式*/
p.one span{ font-size:200%; }    /*在父標記的基礎上乘以200%*/
p.two{ font-size:30px;}
p.two span{ font-size:0.5em;}      /*在父標記的基礎上乘以0.5*/
-->
</style>
</head>
<body>
    <p class="one">文字大小<span>相對值</span>,15px。</p>
    <p class="two">文字大小<span>相對值</span>,30px。</p>
</body>
</html>

 

三、文字顏色

 在CSS種文字顏色是經過color屬性設置的。以下

h3{ color:blue;}
h3{color:#00f;}
h3{color:#0000ff;}
h3{color:rgb(0,0,255);}
h3{color:rgb(0%,0%,100%);}

在設置某一個段落文字的顏色時，一般能夠利用<span>標記，將須要的部分進行單獨標註，而後再設置<span>標記的顏色屬性。

<html>
<head>
<title>文字顏色</title>
<style type="text/css">
<!--
h2{
    color:rgb(%0,0%,80%);
}
p{
    color:#333333;
    font-size:13px;
}
p span{
    color:blue;
}
-->
</style>
</head>
<body>
   <h2> 冬至的由來 </h2>
   <p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有「<span>冬至</span>大如年」之說。這代表古人對<span>冬至</span>十分重視</p>
</body>
</html>

 

四、文字粗細

 在HTML語言中能夠經過添加<p>標記或者<strong>標記將文字設置爲粗體。在CSS中能夠將文字的粗細進行細緻的劃分，更重要的是CSS還能夠將自己是粗體的文字變爲正常粗細。

文字的粗細在CSS中是經過屬性font-weight來設置的

例中涵蓋了全部的文字粗細值，而且在標題處經過設置<span>標記的樣式，使得自己是粗體的「粗」字變成了正常粗細。

 

<html>
<head>
<title>文字粗體</title>
<style type="text/css">
<!-- 
h1 span{ font-weight:lighter;}
span{ font-size:30px;}
span.one{ font-weight:100;}
span.two{ font-weight:200;}
span.three{ font-weight:300;}
span.four{ font-weight:400;}
span.five{ font-weight:500;}
span.six{ font-weight:600;}
span.seven{font-weight:700;}
span.eight{ font-weight:800;}
span.nine{ font-weight:900;}
span.ten{ font-weight:bold;}
span.eleven{ font-weight:normal;}
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>體</h1>
<span class="one">文字粗細:100</span>
<span class="two">文字粗細:200</span>
<span class="threee">文字粗細:300</span>
<span class="four">文字粗細:400</span>
<span class="five">文字粗細:500</span>
<span class="six">文字粗細:600</span>
<span class="seven">文字粗細:700</span>
<span class="eight">文字粗細:800</span>
<span class="nine">文字粗細:900</span>
<span class="ten">文字粗細:bold</span>
<span class="eleven">文字粗細:normal</span>
</body>
</html>

 

 

五、斜體

在CSS中斜體字是經過設置font-style屬性來實現的。

例設置文字的樣式爲斜體，並加入<span>標記，將自己已經變成斜體的文字又設置成了標準風格。

<html>
<head>
<title>文字斜體</title>
<style type="text/css">
<!-- 
h1{ font-style:italic;}
h1 span{ font-style:normal;}
p{ font-size:18px;}
p.one{ font-style:italic;}
p.two{ font-style:oblique;}
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>體</h1>
<p class="one">文字斜體</p>
<p class="two">文字斜體</p>
</body>
</html>

 

六、文字的下劃線、頂劃線和刪除線

給文字加上下劃線、頂劃線和刪除線在文檔編輯中的使用頻率是很高的，在網頁中尤爲的突出。CSS經過設置文字的text-decoration 屬性來實現。

有時候若是但願文字不只有下劃線，同時還有頂劃線或者刪除線，這時能夠將underline 和overline的值同時賦給text-decoration,並用空格分開。

<html>
<head>
<title>文字下劃線、頂劃線、刪除線</title>
<style type="text/css">
<!-- 
p.one{ text-decoration:underline;}       /*下劃線*/
p.two{ text-decoration:overline;}       /*頂劃線*/
p.three{ text-decoration:line-through;}     /*刪除線*/
p.four{ text-decoration:blink;}       /*閃爍*/
p.five{ text-decoration:underline overline line-through;}    /* 同時使用下劃線 頂劃線 刪除線  */
-->
</style>
</head>
<body>
<p class="one">下劃線文字</p>
<p class="two">頂劃線文字</p>
<p class="three">刪除線文字</p>
<p class="four">文字閃爍</p>
<p class="five">正常文字</p>
<p>正常文字對比</p>
</body>
</html>

 

 

七、英文字母大小寫

英文字母大小寫轉換是CSS提供的很實用的功能之一，用戶只須要設定英文段落的text-transform屬性，就能很輕鬆地實現大小寫的轉換。

<html>
<head>
<title>英文字母大小寫</title>
<style type="text/css">
<!-- 
p{ font-size:17px;}  
p.one{ text-transform:capitalize;}        /*單詞首字大寫*/
p.two{ text-transform:uppercase;}       /*所有大寫*/
p.three{ text-transform:lowercase;}       /*所有小寫*/
-->
</style>
</head>
<body>
<p class="one">quick brown fox jumps over the lazy dog.</p>
<p class="two">quick brown fox jumps over the lazy dog.</p>
<p class="three">QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</p>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程