您現在的位置是:電腦技術吧?>? 編程技術 ??>??字體設計教程,文字排版設計??>??正文詳情

字體設計教程,文字排版設計

在詩珊2019-11-07 13:02:13 人圍觀
簡介ps字體設計藝術字教程文本鏈接是網頁中最常見的頁面元素默認情況下,文本鏈接的樣式為下劃線,這使得網頁無法突出個性和滿足布局的需要為了使文本鏈接符合頁面的整體效果,可以

文字鏈接是網頁中最常見的頁面元素,在默認狀態下,文字鏈接樣式都是帶下劃線的,這種一陳不變的外觀使網頁無法凸現個性和滿足布局的需要。

為了使文字鏈接符合頁面的整體效果,可以采用 CSS (樣式)來實現多樣的文字鏈接。

  效果說明  將鼠標置于文本上時,文本樣式會發生改變,比如不會出現下劃線,文字會閃動等。

結合其他樣式屬性,還可以實現按鈕式文字鏈接,效果如圖 22-1 所示。

  創作構思  Text-decoration 屬性用來控制超級鏈接,結合 Border-Style 屬性,還可以實現更加復雜的樣式。

  操作步驟  步驟一初級鏈接樣式  在 CSS 樣式定義設置對話框中的類型子選項中有 5 種修飾類型。

點選不同的修飾項,可以輕易設置不同的初級鏈接樣式,如圖 22-2 所示。

下面以無下劃線設置為例進行講解,其他樣式的設置跟本例類似。

  ( 1 )創建一個 CSS 樣式表文件。

按下 Shift F11 鍵打開 CSS 樣式面板,單擊【新建樣式】按鈕,在彈出的【新建 CSS 樣式】對話框中點選【高級( ID ,上下文選擇器等)】選項,然后在選擇器下拉菜單中選擇【 a:link 】,單擊【確定】按鈕,如圖 22-3 所示。

  ( 2 )編輯樣式。

保存樣式表文件(文件名為 css.css )后,開始編輯樣式。

設定默認鏈接樣式為無下劃線,字體為宋體 12pt ,其他色彩等參數都不設置,如圖 22-4 所示。

  ( 3 )新建并設置樣式 .t1 。

再次單擊【新建樣式】按鈕,在【新建 CSS 樣式】對話框中點選【類(可應用于任何標簽)】選項,定義自己的樣式類,然后設置名稱為 .t1 (【名稱】文本框是用來指定類的,用戶可以根據需要任意填寫,其格式是 .* ),最后點選【定義在 css.css 】,一切設置完畢后單擊【確定】。

接下來的設置跟第二步操作一樣,然后單擊【確定】,如圖 22-5 所示。

  ( 4 )在文檔窗口中輸入無下劃線字樣。

選中無下劃線段落,然后打開屬性設置界面,在樣式列表中選擇 t1 ,如圖 22-6 所示。

這樣就將樣式應用到所選網頁元素上,讀者可以保存網頁文件后在瀏覽器中進行預覽,這個時候會發現文字的大小為 12px ,而且超級鏈接的下劃線也不見了。

  步驟二進階樣式鏈接  綜合應用上面介紹的技術,還可以創作出更復雜的文字鏈接樣式。

  ( 1 )平面塊狀文字鏈接。

在 CSS 樣式表面板中雙擊 .t1 ,打開 t1 樣式表,這里要定義其塊狀鏈接樣式。

單擊【背景】選項,首先給鏈接增加一個背景色,這里選擇紅色,如圖 22-7 所示。

在分類欄中選擇邊框,然后在上列表中選擇實線,為文字鏈接的四周增加一個邊框,從而實現平面塊狀文字鏈接,如圖 22-8 所示。

  圖 22-7 設置顏色 圖 22-8 設置 4 個邊框  ( 2 )立體四邊框文字鏈接。

在分類欄中選擇邊框,然后設置寬和高的值為 1px ,這樣可以使鏈接文字與按鈕四周有 1px 的間距,從而使四邊框看起來有立體感,具體設置如圖 22-9 所示。

  ( 3 )定義特效文字鏈接。

CSS 樣式表中還包含了一組特效濾鏡。

這里創建一個使用 Blur 濾鏡的文字鏈接,并且該鏈接還帶有邊框效果。

在【過濾器】下拉菜單中選擇【 Blur ( Add=?,Direction=?,Strength=? )】選項,然后更改濾鏡參數設置為 Blur ( Add=ture,Direction=45,Strength=1 ),如圖 22-10 所示。

  提示: Blur 濾鏡有 3 個參數,分別為 Add 、 Direction 和 Strength 。

  Add 參數有兩個參數值,即 True 和 False ,其作用是設定是否為圖片添加模糊效果。

Direction 參數用來設置模糊的方向。

模糊操作是按照順時針方向進行的,其中 0 代表垂直向上,每 45 一個單位,默認值是向左 270 。

角度和方向的對應關系見表 22-1

  Strength 參數值只能使用整數來指定,它代表有多少像素的寬度將受到模糊影響。

默認值是 5 像素。

  至此,本實例操作完畢,用戶可以根據需要改變 CSS 樣式,以實現不同的文字鏈接特性。

CSS 樣式的應用非常廣泛,通過熟練掌握 CSS 樣式的使用,可以快速的來格式化和控制網頁元素,從而實現美化頁面和提高工作效率的效果。

注:更多精彩教程請關注電腦高手圖文教程 頻道,

版權聲明:本文由 在詩珊 整理編輯。

原標題:文字排版設計技巧,排版設計教程

轉載注明出處:http://www.dn9ww09s.icu/program/11424.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決

    電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決 相關圖片電腦慢卡 怎樣解決雖然計算機的使用過于落后,但計算機運行緩慢的問題是不可避免的,特別是在最關鍵的時候,計算機被卡住了這是一件很麻煩的事情,但是由于錢已經熟悉了舊電腦...

  • 錨記鏈接,網頁錨記鏈接

    錨記鏈接,網頁錨記鏈接 相關圖片錨點鏈接使用命名錨定,可以在文檔中設置標記,這些標記通常放置在文檔中特定主題的頂部然后,您可以創建指向這些命名錨的鏈接,如果網頁中有很多內容并且網頁很長,則可以快...

  • 筆記本關機慢,筆記本關機很慢

    筆記本關機慢,筆記本關機很慢 相關圖片筆記本藍屏怎么關機雖然筆記本電腦是一種很好的電器,但在使用過程中總會出現一些小問題如果我們不能解決這些問題,我們將永遠心煩意亂,所以有必要掌握一些電腦維修的小知識...

  • 交互動效,ui交互動效

    交互動效,ui交互動效 相關圖片ui交互動效必修課首先,我想你會有以下問題:什么是微觀互動來自uxpin(一個在線交互原型工具)的Carrier cosins給出了以下定義:微觀交互是交互設備上單個交互過程的細prd交互動效...

  • 電腦機箱加裝風扇,電腦機箱風扇怎么裝

    電腦機箱加裝風扇,電腦機箱風扇怎么裝 相關圖片機箱風扇一般裝幾個沒關系。現在,小編和你機箱風扇需要裝嗎...

  • css,css寬

    css,css寬 相關圖片css inline隨著智能手機的增多,手機網站也可以更加個性化最近,在自己的手機網站的改版中,我們遇到了網站圖片大小的問題,而且手機屏幕比較小如何讓上傳的不同規則的圖片在手機...

  • 筆記本電腦屏幕亮度,筆記本電腦屏幕不亮

    筆記本電腦屏幕亮度,筆記本電腦屏幕不亮 相關圖片筆記本電腦亮度快捷鍵調整筆記本電腦屏幕使其更柔和可以保護您的眼睛另外,適當調低筆記本電腦屏幕的亮度更節能,特別是在使用筆記本電池時,還可以提高筆記本電腦的續航力如...

  • 空格,如何打空格

    空格,如何打空格 相關圖片空格是什么字符方法1:按住Ctrl Shift 空格鍵方法2:在菜單欄中,編輯--首選參數--常規方法3:切換到代碼嘗試,輸入要鍵入的空格空格符號代碼復制...

  • diy電腦配件,組裝電腦教程

    diy電腦配件,組裝電腦教程 相關圖片diy電腦配件安裝隨著計算機硬件的不斷普及,擁有一臺個人電腦已不再是遙不可及的夢想,特別是對于一些熱衷于組裝自己DIY電腦的資深電腦愛好者來說,這不僅節省了很多不必要的開...

  • 查看電腦系統,怎樣查看電腦系統

    查看電腦系統,怎樣查看電腦系統 相關圖片電腦怎么恢復出廠設置操作系統是用戶與計算機之間的接口,也是計算機硬件與其它軟件之間的接口許多人不知道他們的計算機系統是XP還是win7,win8還是其他系統如何檢查現在,小編帶...

熱評文章

  • 筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪

    筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪 相關圖片筆記本電腦怎么打開無線網絡在無線網絡普及的時代,網絡的使用越來越普遍,無線網卡的功能就像普通的計算機網卡一樣被用來連接局域網有筆記本電腦的用戶問如何打開筆記本電腦...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里在我們的日常生活中,手機中的照片越來越多,不僅占據了手機的存儲空間,而且影響了手機的運行速度因此,經常有必要將手機拍攝的照片轉移到電腦上,以節...

  • background_,background是什么

    background_,background是什么 相關圖片html中background下面是我想使用的背景圖:代碼如下:在HTML頁面中,有162*162個灰色背景div塊和三種不同位置的背景圖片在瀏覽器中看到的效果可以從上圖中看到:當它是背景位background設置...

  • 電腦開機顯示器黑屏,開機顯示器沒反應

    電腦開機顯示器黑屏,開機顯示器沒反應 相關圖片顯示器亮一下就黑屏當電腦開機時,顯示器的黑屏通常是硬件問題很多用戶都想檢查并解決這個問題打開電腦后,小編將分享顯示屏黑屏的解決方案如果你需要知道,你可以看看顯示器...

  • 機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好

    機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好 相關圖片ssd硬盤隨著科學技術的發展,固態硬盤(SSD)應運而生ssd分發已經有很長一段時間了不過,目前主流的安裝方式仍然是選擇傳統的機械硬盤,而大部分的固態硬盤都采用高端配置安ssd固...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功第一期回顧:《有圖有案例!125個提升網頁可用性的優化小技巧(一)》  讓常用功能和重要數據信息更接近用戶  預測用戶的意圖,讓他們盡可能接近目標。  △ 篩選...

  • 筆記本組裝配置清單,臺式機組裝清單

    筆記本組裝配置清單,臺式機組裝清單 相關圖片電腦主機組裝隨著時代的發展,計算機已成為人們生活的必需品筆記本電腦以其輕巧方便贏得了許多年輕人的青睞不過,對于很多只在家里使用或喜歡游戲的朋友來說,臺式電腦是更好...

  • 圓角矩形,如何調整圓角矩形

    圓角矩形,如何調整圓角矩形 相關圖片ai怎么調整矩形的圓角所謂的高級CSS技能實際上是一些基本技能的創造性組合任何手段和技能都是解決問題的方法只要你學會了這種思維方式,你也可以有自己的CSS腳本CSS2無法創建曲線...

  • 筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂

    筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂 相關圖片為什么電腦鍵盤錯亂許多游戲玩家,特別是喜歡玩筆記本電腦游戲的大學生,在連接外部鍵盤后發現筆記本電腦的鍵盤按鍵紊亂另外還有一些情況會導致筆記本鍵盤按鍵紊亂,那么如何...

  • overflow,stackoverflow

    overflow,stackoverflow 相關圖片div overflow溢出有問題嗎沒問題那我們為什么要小心使用呢因為有時會導致一些溢出的問題:Auto,很多人貪圖它方便的書寫,直接用來清除浮點數但是Firefox使用overflooverflow都有哪些值...

關注微信

变脸官网查询