第三天 css的文字樣式

2021-08-19 11:43:06 字數 1768 閱讀 8368

今天的學習讓我把之前學的知識進行了乙個彙總。

1、關係:html是基礎,css為其增色。

2、工作原理:首先瀏覽器把html和css轉換成dom(文件物件模型)——把文件內容和樣式結合在一起,然後再瀏覽器上顯示dom就出現了最後的結果。

3、dom:相當於一種樹形結構,每個元素、屬性、文字都相當於乙個結點,然後把這些節點分支連線在包含這些的總元素上就構成了一棵樹。

4、css應用到html中的三種方法:

(1)外部樣式表:html是乙個檔案,css是乙個檔案,然後再html中寫上一句//相對而言最好的。如果有需要,只需改動一處,就可以把所有連線在css的html文字的內容都改寫。

(2)內部樣式表:。

(3)內聯模式://很難維護,不建議用

5、語法:選擇器

6、語句:

@import 'custom.css';    該@-規則向當前 css 匯入其它 css 檔案

@media (min-width: 801px) 

}

7、文字樣式:

(1)基於字型的改變

font:

font-style

font-variant

font-weight

font-stretch,font-size

/line-height,  

.font-family(必寫):字型樣式,可自定義,也可用「楷體」的形式表示,但預設的有5種,serif,sans-serif,monospace,cursivefantasy

為防止用到的字型沒有,可以並列使用

font-size(必寫):字型大小,盡量先設整體(body)的大小,方便以後所有的內容都以此為基準進行調整。可用px,em,rem(幾倍),%,small/big;

font-weight:字型粗細,normal/bold,lighter/bolder,也可用100-900間的整數設定粗細。

font-style:字型風格,italic(傾斜)/normal(去掉傾斜)/oblique(模擬傾斜)。

(2)基於文字的改變

color:文字顏色,可用red等表示顏色的單詞,也可用#000000表示。

text-decoration:文字裝飾,underline(下劃線)/overline(上劃線)/line-through(橫穿)/none(去除本來帶下劃線的)。

text-transform:文字轉換,uppercase(變成大寫)/lowercase(變成小寫)/capticalize(只有首字母大寫)/full-width(將所有字形轉換成固定寬度的正方形)/none。

text-shadow:為文字新增陰影,水平向右偏移距離(向左為負)+豎直向上偏移距離(向下為負)+模糊半徑+顏色(text-shadow:5px 5px 4px red;)。

text-align:文字對齊,center/right/left/justify(自適應,改變單詞間的距離,等於行寬)

line-height:行高,直接加數值1.5或其他。

CSS學習第三天

定位布局 相對定位 相對於自身的位置進行偏移position需要搭配left right top bottom position relative 絕對定位 相對於有position屬性的父元素定位,如果父元素沒有position屬性就會再向上找父元素,最後一直找到body元素 position a...

8天入門wpf 第三天 樣式

說起樣式,大家第一反應肯定是css,好的,先上一段 html ul,form body,div,th,td,li,dd,span,p,a h3,input body ulh1,h2,h4,h5,h6 imga a hover 我們知道css實現了內容與樣式的分離,既然wpf跟webform非常類似,...

CSS學習第三天 字型

指定字型 選擇器 如果讀者沒有安裝 georgia,但安裝了 times 字型 serif 字型系列中的一種字型 使用者 就可能對 h1 元素使用 times。儘管 times 與 georgia 並不完全匹配,但至少足夠接近。因此,我們建議在所有 font family 規則中都提供乙個通用字型系...