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

来源:https://www.cnblogs.com/songboriceboy/archive/2020/07/28/13389093.html

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視頻教程 免費配套視頻教程 教程配套源碼資源 教程配套源碼資源 字體樣式 屬性名 含義 舉例 font-family 設置字體類型 font-family:"隸書"; font-size 設置字體大小 font-size:12px; font- ...


本教程案例線上演示

有路網PC端
有路網移動端

免費配套視頻教程

免費配套視頻教程

教程配套源碼資源

教程配套源碼資源

字體樣式

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

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

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

字體的粗細

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 被設計為用於行內元素(我們喜歡用更簡短的標簽,它的語義更加精準)。

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>

您的分享是我們最大的動力!

更多相關文章
  • 現在的社交類App,聊天都是標配,此外在聊天的基礎上還衍生出了很多功能,如表情包,背景,氣泡等。 某一天測試給我提了一個bug,說,軟鍵盤彈起收攏的時候聊天背景圖會抖動。要解決下。我很納悶,這塊用的不是ImageView來實現的麽,Android的效果是咋樣,就是咋樣啊。我咋知道怎麼改呢? 向測試小 ...
  • WEB開發約定 文件命名 【√】小寫的英文字母、數字和下劃線的組合 【!】不得含漢字、空格和特殊字元 命名規範好處 ①方便團隊理解代碼開發的文件含義 ②使用“按名稱排例”的命令時,同類文件能夠排列在一起 以便查找、修改、替換、計算負載量等操作 (一)HTML的命名原則 |文件類型 |命名舉例(小寫) ...
  • jQuery操作數組主要有兩種方式: 普通數組 $.each(array,function(k,v){ //... }); 關聯數組,{"id":10,"name":"tom"} 索引數組,[1,2,3,4,5,6,7,8,9] k:如果是關聯是鍵名,如果是索引是下標(從0開始; vo:是元素值; ...
  • MVC 與 Vue 本文寫於 2020 年 7 月 27 日 首先有個問題:Vue 是 MVC 還是 MVVM 框架? 維基百科告訴我們:MVVM 是 PM 的變種,而 PM 又是 MVC 的變種。 所以一定程度上來說,三者的思想方向是一樣的。所以不管 Vue 是 MVC 還是 MVVM 或者都不是 ...
  • 如果父組件監聽到子組件掛載mounted做一些邏輯處理 1、使用on和emit 子組件emit觸發一個事件,父組件emit觸發一個事件,父組件on監聽相應事件。 // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() ...
  • 動態規劃整體思路是用遞歸問題求解,然後對遞歸過程中存在的大量重疊子問題進行優化, 自頂向下的求解的思路為記憶化搜索,自底向上的解決問題的思想就是動態規劃,自頂向下的求解通常更好理解,我們理解後在改成自底向上的動態規劃求解; 劍指 Offer 10- I. 斐波那契數列寫一個函數,輸入 n ,求斐波那 ...
  • 實現在父組件中促發子組件裡面的方法 子組件: <template> <div> 我是子組件 </div> </template> <script> export default { name: "child", methods: { parentHandleclick(e) { console.lo ...
  • 在實現客服系統的過程中,需要有新消息的時候標題欄閃爍提示 因為聊天框是被iframe框進去的頁面,所以在聊天框中收到websocket消息以後要把消息發送給父集頁面,在父頁面中閃爍標題 測試頁面地址: https://gofly.sopans.com/ 子頁面發送到父頁面的實現是,在父頁面增加消息監 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...