前端學習(十二) CSS排版

2021-09-27 02:38:20 字數 2868 閱讀 8231

本節主要介紹網頁排版中主要格式化元素屬性

幫助開發者把css技術與網頁排版緊密聯絡到一起,來更好的實現網頁設計效果

在日常工作中,我們會用到word來編寫內容,比如可以對我們需要設定的內容設定字型、字型大小、顏色等設定

那麼我們在網頁中使用css樣式時,同樣也能做相關的設定

那我們可以試著為網頁中的文字設定字型為微軟雅黑

body
這裡要注意不要設定不常用的字型,比如你給我來個』菲律賓體』

因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型

換句話說,使用者能不能看到你設定的字型樣式完全取決於使用者本地電腦是否安裝你設定的字型

那如果真的就是沒有微軟雅黑呢?那就需要備選字型!

body
備選字型可以有無數個,那麼瀏覽器在去解析這個**的時候,是從左往右解析的

如果沒有微軟雅黑,再去找宋體,再去找黑體

可以為網頁中的文字設定字型大小,那麼一般瀏覽器的字型大小預設為為16px

最常用的畫素單位是:px,em,rem

設定字型20px

px:畫素是指由影象的小方格組成的,這些小方塊都有乙個明確的位置和被分配的色彩數值,小方格顏色和位置就決定該影象所呈現出來的樣子

剩下那兩個,一會說

顏色分為三原色:紅、綠、藍,三原色之間的不同混合就可以呈現出不同的顏色

比如紅色+綠色 = 黃色

而顏色的表示方式在css中有三種方式:

英文單詞表示法,比如red、green、blue

英文單詞表示法,比如red、green、blue

rgb表示法

rgb表示法

十六進製制表示法

十六進製制表示法

對於rgb表示法和十六進製制表示法,我們可以通過編輯器中輔助工具(顏色取色器)來取到對應的顏色

**中的字型分為了普通字型和斜體字體,我們可以使用font-style屬性來設定對應的字型樣式

這是正常的字型

預設的,文字設定為普通字型

這是正常的字型

這是傾斜的字型

如果當前字型的斜體版本可用,那麼文字設定為斜體版本;如果不可用,那麼會利用 oblique 狀態來模擬 italics

這是傾斜的字型

這是模擬傾斜的字型

將文字設定為斜體字體的模擬版本,也就是將普通文字傾斜的樣式應用到文字中

這是模擬傾斜的字型

因為i標籤本身具有傾斜的含義,所以可以對已有的傾斜的字型來按照需求進行相應的設定。

**中我們可以通過font-weight來設定文字的粗體大小

這裡有很多值可選,那麼使用最多的就是normalbold分別代表普通和加粗和字型粗細

屬性值描述

normal

普通的字型粗細,預設

bold

加粗的字型粗細

lighter

比普通字型更細的字型

bolder

比bold更粗的字型

100~900

400表示normal

加粗的字型粗細

比普通字型更細的字型

比bold更粗的字型

400表示normal

在網頁中有些時候我們需要對文字設定下劃線,或者刪除線

如果想實現下劃線或者刪除線,使用text-decoration屬性

屬性值描述

none

無文字的修飾

underline

文字下劃線

overline

文字上劃線

line-through

穿過文字的線,可以模擬刪除線。

無文字修飾

文字下劃線

文字上劃線

刪除線比如我們通常寫文章的時候,首行縮排兩個字元那麼我們需要使用text-indent屬性來實現

它的屬性值是畫素(px、em、rem)單位

我們希望整段文章描述,首行空兩格,那麼首先要知道字型大小是多少

比如字型大小預設是16px,那麼我需要給它設定text-indent:32px;才能實現效果

那能不能動態的設定呢?我們可以設定另乙個單位em,它是乙個相對單位,相對於p標籤的字型大小來進行設定

如果p標籤的字型是16px,那麼1em=16px,如果我後期設定了字型大小為20px,那麼2em就自動變為40px

p
行間距,也叫行高,表示行與行之間的距離 ,上個案例的呈現效果會發現,行與行之間的距離有點近, ,那麼為了使文字顯示更加美觀,我們可以使用line-height屬性來進行設定行間距,它的單位為畫素

p
如果想在網頁排版中設定中文字間隔或字母間隔可以使用letter-spacingword-spacing來實現

在word文件中,我們通常都知道對文字甚至可以設定對齊方式,比如讓文字或者居中顯示

那麼在網頁排版中我們可以使用text-align屬性來進行設定

屬性值描述

left

文字左對齊,預設

right

文字右對齊

center

中心對齊

預設左對齊

右對齊居中對齊

*****

*****

前端學習筆記 html 排版標籤

首先 html和css是兩種完全不同的語言,我們學的是結構,就只寫html標籤,認識標籤就可以了。不會再給結構標籤指定樣式了。標題文字排版標籤主要和css搭配使用,顯示網頁結構的標籤,是網頁布局最常用的標籤。h1 h2 h3 h4 h5 h6 標題標籤語義 作為標題使用,並且依據重要性遞減 其基本語...

前端學習 css

1.內聯 慕課網,超酷的網際網路 it技術免費學習平台,創新的網路一站式學習 實踐體驗 服務及時貼心,內容專業 有趣易學。專注服務網際網路工程師快速成為技術高手!2.嵌入式 嵌入式css樣式必須寫在之間,並且一般情況下嵌入式css樣式寫在之間。慕課網,超酷的網際網路 it技術免費學習平台,創新的網路...

前端學習 CSS

選擇器 選擇器和大括號中間最好加個空格 標籤選擇器p 選擇了所有的對應標籤 類選擇器.類 123長名詞或片語可以使用中橫線來給選擇器命名 多類名選擇器id選擇器 id id只能呼叫一次,呼叫後別人無法使用 和類一樣只能用英文,相比而言id用得少 萬用字元選擇器 選擇所有的標籤字型font famil...