【教程】html+css零基礎入門教程(九)

2021-12-25 web前端開發

在前面我們一起將HTML的基礎知識學習完了,我想你應該知道怎麼寫基礎的HTMl代碼了,那麼接下來從今天開始,我們一起來學習CSS的基礎部分,如果你還不知道前面的HTML的基礎知識,請到文章底部點擊【相關文章】裡面的內容進行學習。有什麼可以後臺留言交流學習。

CSS文字 - font 屬性

CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。

font 簡寫屬性 在一個聲明中設置所有字體屬性。
這個簡寫屬性用於一次設置元素字體的兩個或更多方面。

使用 icon 等關鍵字可以適當地設置元素的字體,使之與用戶計算機環境中的某個方面一致。

注意,如果沒有使用這些關鍵詞,至少要指定字體大小和字體系列。
可以按順序設置如下屬性:
font-style font-variant font-weight font-size/line-height font-family

如下代碼:

.ex2{font:italic bold 12px/20px
arial,sans-serif;}

頁面上顯示為 F2E.TMING

還有一些屬性也可以寫font裡,如下:
caption icon menu small-caption status-bar

CSS文字 - font-family 屬性

font-family 規定元素的字體系列。
font-family 可以把多個字體名稱作為一個「回退」系統來保存。

如果瀏覽器不支持第一個字體,則會嘗試下一個。

有兩種類型的字體系列名稱:

1) 指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。

2) 通常字體系列名稱:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

p{ font-family:"Times New Roman",Georgia,
Serif; }

提示:使用逗號分割每個值,並始終提供一個類族名稱作為最後的選擇。

CSS文字 - font-size 屬性

font-size 屬性可設置字體的尺寸。

font-size屬性有3種值的方式:(比較常用的)

1) length
把 font-size 設置為一個固定的值。如:p{font-size:14px;}

2) %
把 font-size 設置為基於父元素的一個百分比值。如:p{font-size:50%;}

3) inherit
規定應該從父元素繼承字體尺寸。如:p{font-size:inherit;}

CSS文字 - font-style 屬性

font-style 屬性定義字體的風格。

font-size屬性有4種值:

1) normal
默認值。瀏覽器顯示一個標準的字體樣式。如:p.normal{font-style:normal;} 
頁面上顯示為 F2E.TMING

2) italic
瀏覽器會顯示一個斜體的字體樣式。如:p.italic{font-style:italic;}
頁面上顯示為 F2E.TMING

3) oblique
瀏覽器會顯示一個傾斜的字體樣式。如:p.oblique{font-style:oblique;}
頁面上顯示為 F2E.TMING

4) inherit
規定應該從父元素繼承字體樣式。如:p.inherit{font-style:inherit;}
頁面上顯示為 F2E.TMING

CSS文字 - font-weight 屬性

font-weight 屬性設置文本的粗細。
使用 bold 關鍵字可以將文本設置為粗體。
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。

如果一個字體內置了這些加粗級別,那麼這些數字就直接映射到預定義的級別,100 對應最細的字體變形,900 對應最粗的字體變形。

數字 400 等價於 normal,而 700 等價於 bold。

p{font-weight:100;}p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}

頁面上顯示為 
F2E.TMING
F2E.TMING
F2E.TMING
F2E.TMING

提示:如果將元素的加粗設置為 bolder,瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反,關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

CSS文字 - font-variant 屬性

font-variant 屬性可以設定小型大寫字母。
小型大寫字母不是一般的大寫字母,也不是小寫字母,這種字母採用不同大小的大寫字母。
p{font-variant:small-caps;} 頁面上顯示為 aaaaa

CSS文字 - text-decoration 屬性

text-decoration 屬性規定添加到文本的修飾。

text-decoration屬性有4種值:

1) none
默認。定義標準的文本。如:p.none{text-decoration:none;} 
頁面上顯示為 F2E.TMING

2) underline
定義文本下的一條線。如:p.underline{text-decoration:underline;}
頁面上顯示為 F2E.TMING

3) overline
定義文本上的一條線。如:p.overline{text-decoration:overline;}
頁面上顯示為 F2E.TMING

4) line-through
定義穿過文本下的一條線。如:p.line-through{text-decoration: line-through;}
頁面上顯示為 F2E.TMING

5) blink
定義閃爍的文本。如:p.blink{text-decoration:blink;}
頁面上顯示為 F2E.TMING

6) inherit
規定應該從父元素繼承 text-decoration 屬性的值。如:p.inherit{text-decoration:inherit;}
頁面上顯示為 F2E.TMING

CSS文字 - text-underline-position 屬性

text-underline-position 屬性線條在文本的位置。該屬性有2種值:

1) below
默認值。在文本下面。如:p.below{text-underline-position :below;text-decoration:underline;} 
頁面上顯示為 F2E.TMING

2) above
在文本上面。如:p.above{text-underline-position :above;text-decoration:underline;}
頁面上顯示為 F2E.TMING

CSS文字 - text-shadow 屬性

text-shadow 屬性給文本添加陰影效果。
語法:p{text-shadow: h-shadow v-shadow blur color;} 
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。

p{ text-shadow: 5px 5px 5px #FF0000; }


頁面上顯示為 F2E.TMINGCSS文字 - text-transform 屬性

text-transform 屬性控制文本的大小寫。該屬性有4種值:

1) none
默認。定義帶有小寫字母和大寫字母的標準的文本。如:p{text-transform:none;} 
頁面上顯示為 flash

2) capitalize
文本中的每個單詞以大寫字母開頭。如:p{text-transform:capitalize;}
頁面上顯示為 Flash

3) uppercase
定義僅有大寫字母。如:p{text-transform:uppercase;}
頁面上顯示為 FLASH

4) lowercase
定義無大寫字母,僅有小寫字母。如:p{text-transform:lowercase;}
頁面上顯示為 flash

CSS文字 - line-height 屬性

line-height 屬性設置行間的距離(行高)。
注釋:不允許使用負值。

1) normal
默認。設置合理的行間距。如:p{line-height:normal;} ,頁面上顯示為

flash
flash

2) number
設置數字,此數字會與當前的字體尺寸相乘來設置行間距。如:p{line-height:1.2;},頁面上顯示為

flash
flash

3) length
定義僅有大寫字母。如:p{line-height:20px;},頁面上顯示為

flash
flash

4) %
基於當前字體尺寸的百分比行間距。如:p{line-height:100%;},頁面上顯示為

flash
flash

CSS文字 - letter-spacing 屬性

letter-spacing 屬性增加或減少字符間的空白(字符間距)。
注釋:允許使用負值,這會讓字母之間擠得更緊。

p{ letter-spacing:2px; }

頁面上顯示為flashflash

p{ letter-spacing:-5px; }

頁面上顯示為flashflashCSS文字 - word-spacing 屬性

letter-spacing 屬性增加或減少單詞間的空白(即字間隔)。
注釋:允許使用負值,這會讓字母之間擠得更緊。

p{ word-spacing:25px; }

頁面上顯示為flash flash

相關文章

【教程】html+css零基礎入門教程(一)

【教程】html+css零基礎入門教程(二)

【教程】html+css零基礎入門教程(三)

【教程】html+css零基礎入門教程(四)

【教程】html+css零基礎入門教程(五)

【教程】html+css零基礎入門教程(六)

【教程】html+css零基礎入門教程(七)

【教程】html+css零基礎入門教程(八)

相關焦點

  • 教程 | Web前端教程2:CSS+DIV頁面布局
    參考3school有關div內容學習div+css界面布局得知識。CSS 盒子模型CSS 盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
  • HTML元素中的屬性1——零基礎自學網頁製作
    ="_blank" title="中國最先進戰鬥機">殲-20戰鬥機</a></body> </html>效果如圖:當滑鼠移動到超連結上時,"中國最先進戰鬥機"的說明就出現在下側。
  • 微單眼相機入門教程
    也跟著自由攝影師學習過!一路走來,漫長的學習經歷令人難忘!我相信這裡的資料絕對可以幫到正在學習攝影的你!本人入攝影坑13年了,作為一個職業攝影師,我曾經花5000多元買教程,我也曾經花2.5萬跟著師傅學攝影。
  • 單眼相機入門教程圖解
    也跟著自由攝影師學習過!一路走來,漫長的學習經歷令人難忘!我相信這裡的資料絕對可以幫到正在學習攝影的你!本人入攝影坑13年了,作為一個職業攝影師,我曾經花5000多元買教程,我也曾經花2.5萬跟著師傅學攝影。
  • 索尼單眼相機入門教程
    也跟著自由攝影師學習過!一路走來,漫長的學習經歷令人難忘!我相信這裡的資料絕對可以幫到正在學習攝影的你!本人入攝影坑13年了,作為一個職業攝影師,我曾經花5000多元買教程,我也曾經花2.5萬跟著師傅學攝影。
  • 遊戲網頁設計入門教程,遊戲網頁設計製作教程
    攝影教程設計手稿 html網頁設計教程音頻 ui設置圖標3、方便漫畫教程產品迭代,輔助漸變字體設計和開發更好ui設計直播教程設計海報教程視頻的完成設計的協素描教程作 英文書法字體 隨著設計產品設抖音字體設計教ps文字海報設計新手教程程計的業攝影教程務變化,發現一化妝品包裝瓶些問題或者需要優化家裝手繪設計三維計算機輔助教程用戶體驗的時候繪畫教程,針雪糕包裝對單個控制項噴繪教程進平面設計從
  • 鋼琴入門指法教程,入門零基礎自學教程免費領取(1000份經典鋼琴譜)
    鋼琴入門指法教程、鋼琴譜怎麼看、鋼琴曲、鋼琴譜、鋼琴簡譜、卡農鋼琴曲學鋼琴不能急於求成,鋼琴不是一朝一夕就能學會的。要想學好鋼琴,在開始時就要打下一個良好的基礎,那麼鋼琴如何入門呢?初學鋼琴又要注意什麼?謹記以下三點初學鋼琴注意事項。鋼琴入門指法教程|初學者應該如何進行練習?
  • 零基礎學漫畫需要掌握什麼?畫漫畫教程分享
    零基礎學漫畫需要掌握什麼?畫漫畫教程分享!自學繪畫入門是非常關鍵的,尤其是對於零基礎的人來說,因為你沒有接受過系統的訓練,你需要以基礎為起始點,循序漸進的學習,這個過程就是繪畫的樂趣,陶醉於自己腦海之中,完成一幅畫的成就感,不斷進步的喜悅,這就是最大的收穫。
  • 實用梭編教程:零基礎也能10分鐘入門,附編織方法和圖解教程
    超實用梭編教程:零基礎也能10分鐘入門!梭編你知道嗎?據說梭編靈感可能來自編漁網的技巧。入門小教程一、準備材料:1、線梭:用來纏繞蕾絲線。
  • 素描快速入門教程之零基礎學習素描
    那麼零基礎如何開始學素描?首要,需要搞清楚什麼是素描。廣義上的素描是指全部單色的繪畫,狹義上的素描,指用鉛筆木炭繪畫過程。更多美術教程可以搜索美術集網校下面直接進入正題初學者的素描練習:一、線條剛開始學素描的時候,狂練線條是很有用的,因為線條的美感會影響整個作品,而且在任何繪畫中線條都起著舉重若輕的作用
  • 口琴自學入門教程視頻
    口琴入門教程口琴自學。
  • 學習網頁製作並不難,HTML菜鳥教程,從這裡開始第一課學習
    HTML如何入門?要學習任何程式語言,都不好好高騖遠,HTML的入門很簡單,但是也要遵循學習的基本步驟,選擇一本入門書籍,循序漸進地去學習每一張的內容。一邊學習,一邊查看網頁代碼對照來學,提升入門速度。
  • 劉金玉的零基礎VB教程074期:如何使用doevents
    視頻講解:文字講解:劉金玉的零基礎VB教程074期:如何使用doeventsDoevents把權限轉讓給作業系統,處理事件使用。好處就是,系統界面不會卡頓。BooleanPrivateSub Command1_Click()flag = TrueDimi As DoubleWhileflagText1.Text = Val(Text1.Text) + 1DoEventsWendEndSubPrivateSub Form_Unload(Cancel As Integer)flag = FalseEndEndSub相關文章:零基礎VB教程
  • 零基礎看得懂的C語言入門教程
    一、前言 距離上一次編寫C語言的教程是5年前了(2015年),由於自己是從初一時開始學習編程,深知學習編程的痛苦。當時正在念大學的我想著分享自己自學編程的經驗,搭建了一個社區(社區之後自己維護太懶,維護了一年不到關閉了)第一次編寫了C語言教程,分享自己的學習經驗。社區關閉後,於2017年上傳至了CSDN留存至今。 現在回過頭查看當時自己編寫的教程,由於當時技術的淺薄,編寫的教程還是存在很多的不足,故有了一個重新編寫C語言教程的想法。
  • 刷爆屏的九格愛心拼圖,入門到變態級教程來了!
    這個把照片拼出愛你形狀的花式曬照技能早已火爆微博、朋友圈美圖社交圈美老師今天整理了從入門級到變態級的九格愛心拼圖神技作品,非常精彩,更有乾貨滿滿的3個拼圖教程,教你從小白變大神!入門級的九格愛心拼圖玩法,有向idol表白的表白王源、王俊凱、易烊千璽
  • Python爬蟲教程,付費歌曲一樣可以免費下載~
    page=searchPage')driver.find_element_by_css_selector('#input').send_keys('張杰')driver.find_element_by_css_selector('#search button:nth-child(2) i').click()"""保存歌曲數據"""def download(name, url): filename
  • 零基礎如何學插畫?學習插畫的步驟教程
    零基礎如何學插畫?學習插畫的步驟教程!首先你要想清楚,你是手繪還是板繪,還是兩者都兼顧,好吧~雖然這兩者並不衝突。需要的基礎技能都一樣,只是在工具上有點差別,本次內容我們以板繪為主。>一、準備繪畫工具1、電腦+數位板+繪畫軟體(ps、sai、ai、sketch)2、ipad pro+繪畫軟體(procreate、Medibang Paint、SketchBook)如果不是該如何選擇數位板或者是各大繪畫軟體的安裝、導入的朋友可參考以下教程
  • html菜鳥教程,HTML新手如何快速入門
    第一:開發工具的選擇1、Nodepad++,作為一種文本編輯器,可以通過顏色標記各種html的標籤,同時可以提示出來基本的html語法,但是缺點也比較明顯:沒有集成容器運行,同時也不支持自動補標籤的功能。但是作為新手前期的開發IDE,能夠幫助新手快速記憶打好基礎。
  • 板繪零基礎sai教程,簡單的板繪入門
    板繪零基礎sai教程,簡單的板繪入門!對每一位板繪新手來說,一個有規劃的學習順序是非常的重要,那麼零基礎學板繪究竟要怎麼做?每一步做什麼呢?下面就針對零基礎學板繪給出大家詳細的學習步驟,逐步練習方可進步哦!
  • 新年煙花/表白/拜年/情人節/ html+css+js 放一場浪漫煙花秀(含音樂/定製相片)程式設計師表白必備煙花
    ❉ 更多源碼❤女朋友生日❤ HTML+css3+js 實現抖音炫酷櫻花3D相冊 (含背景音樂)程式設計師表白必備❤七夕情人節❤html+css+js 漫天飛雪3D相冊(含音樂自定義文字) 程式設計師表白必備❤炫酷煙花表白❤ html+css+js 放一場浪漫煙花秀(含音樂) 程式設計師表白❤唯美滿天星❤ html+css+js炫酷3D相冊(含音樂可自定義文字