前端入門教程---從0開始經過一個商城實例手把手教你學習PC端和移動端頁面開發第4章CSS文本樣式

時間 2021-01-30

標籤 css html 前端 git ide 學習字體大數據雲計算 spa 欄目無線简体版

原文原文鏈接

本教程案例在線演示

有路網PC端
 有路網移動端css

免費配套視頻教程

免費配套視頻教程html

教程配套源碼資源

教程配套源碼資源前端

字體樣式

屬性名含義舉例
font-family 設置字體類型 font-family:"隸書";git

font-size 設置字體大小 font-size:12px;ide

font-style 設置字體風格 font-style:italic;學習

font-weight 設置字體的粗細 font-weight:bold;字體

font 設置全部字體屬性 font:italic bold 36px "宋體";大數據

font-family屬性

.p1{ font-family: "隸書";}
.p2{font-family: "黑體"; }
.p3{ font-family: "Arial Black"; }

font-size屬性

單位：px（像素）雲計算

.p1{font-size: 10; }

.p2{font-size: 20px;}

.p3{font-size: 30px;}

font-style屬性

normal、italic和oblique
spa

字體的粗細

font-weight屬性

normal 默認值，定義標準的字體。

bold 粗體字體。

font屬性

字體屬性的順序：字體風格→字體粗細→字體大小→字體類型

p span{font:oblique bold 12px "楷體";}

文本樣式文本屬性

屬性含義舉例
color 設置文本顏色 color:#00C;

text-align 設置元素水平對齊方式 text-align:right;

text-indent 設置首行文本的縮進 text-indent:20px;

line-height 設置文本的行高 line-height:25px;

text-decoration 設置文本的裝飾 text-decoration:underline;

文本顏色

color屬性
十六進制方法表示顏色

color:#FFFFFF;

color:#000000;

color:FF0000;

color:#A983D8;

color:#95F141;

color:#339966;---  color:#396;

color:#EEFF66;---  color:#EF6;

6位顏色值相鄰數字兩兩相同時，可兩兩縮寫爲1位

水平對齊方式

text-align屬性

值說明

left 把文本排列到左邊。

right 把文本排列到右邊

center 把文本排列到中間

首行縮進

text-indent：px

行高

line-height：px

文本裝飾

text-decoration屬性

值說明

none 默認值，定義的標準文本。

underline 設置文本的下劃線。

overline 設置文本的上劃線。

line-through 設置文本的刪除線。

垂直對齊方式

vertical-align屬性：middle、top、bottom

實踐-製做總裁致辭頁面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/common.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>總裁致辭</h1>
  <h3>來源：來自東部數據</h3>
  <hr/>
  <p><img src="image/icon.jpg"  alt="總裁致辭" width="176" height="108" />
  9月16日下午，東部控股副總裁、東部數據教育公司總裁張家林老師相繼來到黑龍江外國語學院和哈爾濱學院，
  分別向兩個高校的學子們分享了<strong>「懷揣夢想 創造將來—服務外包人才的成長之路」</strong>以及<strong>「互聯網+時代IT人才的成長之路」</strong>的主題演講。 
  </p>

  <p>演講開始，張家林總裁指出隨着「互聯網+」時代的來臨，信息技術進一步推進服務外包需求變革，
  以<strong>大數據、物聯網、移動互聯網、雲計算</strong>爲表明的新一代信息技術正在加速與傳統產業融合發展，
  基於信息化、互聯化的新興商業模式正在從新構建。
  接下來，張家林總裁提出IT及服務外包產業具備知識性、專業性、實踐性的特色，決定了該產業必然是智力型、應用型人才雲集之地；
  產業國際化亟需兼備技術和語言能力並可以跨文化溝通的人才。
  近年國內畢業生數量持續快速增加，面臨着就業越發困難的窘迫，同時企業和高校也陷入了人才需求和人才輸出的「囚徒困境」中。
  面對嚴峻的就業現實，張家林總裁着重給出了對大學生的建議：「不斷提高本身的軟技能和硬技能，作好職業生涯規劃，從如今開始職涯歷程的起點；
  聚焦IT方向，打好基礎，積累相應的工做經驗，爲就業作好充分準備。」
  </p>
</body>

</html>

僞類

僞類選擇元素基於的是當前元素處於的狀態。因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。

:hover

僞類將應用於有鼠標指針懸停於其上的元素。

語法：

標籤名:僞類名{聲明;}

a:hover 
{

color:#B46210;

text-decoration:underline;

}

僞類應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        color: red;
    }

    p:hover {
        font-size: 20px;
        font-weight: bold;
    }    
</style>
</head>
<body><a href="#">中華培訓</a>

<p>產融教育</p></body>
</html>

網頁背景顏色

background-color

列表樣式

去掉圓點
list-style:none

Web字體

Font Awesome---提供可縮放矢量圖標

官網地址：http://www.fontawesome.com.cn/

使用步驟

1.引入css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2.你能夠經過設置CSS前綴fa和圖標的具體名稱，來把Font Awesome 圖標放在任意位置。

3.Font Awesome 被設計爲用於行內元素（咱們喜歡用更簡短的<i>標籤，它的語義更加精準）。

4.若是您修改了圖標容器的字體大小，圖標大小會隨之改變。一樣也適用於顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <style>
        a{
            font-size: 30px;
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
<p>
    <a href="#"><i class="fa fa-battery-2"></i>首頁</a>
    <a href="#"><i class="fa fa-camera-retro"></i>首頁</a>
</p>
</body>
</html>