HTML CSS學習筆記(3)文字控制總結

2021-10-03 19:08:06 字數 2543 閱讀 1264

前言

本意是寫給自己看的學習筆記,如果能恰好幫到有需要的人那最好了。我是乙個接觸時間不長的新手,禿頭摸爬滾打中,將一些重點總結記錄下來,如有錯誤歡迎指正。

(1)html文字控制

~標題標籤。從h1到h6字型大小遞減,乙個頁面中只能使用乙個標籤。預設情況下標題文字是加粗左對齊,可以使用align屬性設定對齊方式,取值如下:

left:設定標題文字左對齊(預設值)

center:設定標題文字居中對齊

right:設定標題文字右對齊

段落標籤。預設情況下段落文字是加粗左對齊,和標題標籤一樣可以使用align屬性設定對齊方式。

水平線標籤。常用屬性有:

align:設定水平線的對齊方式(預設為center)

size:設定水平線的粗細(預設為2px)

color:設定水平線的顏色(可用顏色名稱、十六進製制#rgb、rgb(r,g,b))

width:設定水平線的寬度(可以試試確定的畫素值,也可以是瀏覽器視窗的百分比,預設為100%)

換行標籤。

(2)html文字格式化

設定粗體。

設定斜體。

新增刪除線。

新增下劃線。

設定大號字。

設定上標字。

設定下標字。

設定預格式化,按文件的書寫格式保留空格和空行。

(3)css文字樣式

font-size:設定字型大小大小。(相對單位長度:em、px;絕對單位長度:in、cm、mm、pt)

font-family:設定字型。可以同時設定多個字型,中間用英文逗號隔開。中文字型需要加英文狀態下的引號。

font-weight:設定字型粗細。(normal:預設值;bold:粗體;bolder:更粗;lighter:更細;100~900(100的整數倍)定義由細到粗的字元)

font-variant:設定字型變化,僅對英文本元有效。(normal:預設值;small-caps:小型大寫字型)

font-style:設定字型風格。(normal:預設值;italic:斜體)

(4)css文字外觀

color:設定文字顏色。(可用顏色名稱、十六進製制#rgb、rgb(r,g,b))

letter-spacing:設定字元間距。(預設normal,允許使用負值)

word-spacing:設定單詞間距,對中文字元無效。(預設normal,允許使用負值)

line-height:設定行高。(單位:px、em、%)

text-transform:控制文字轉換。(normal:預設值;capitalize:首字母大寫;uppercase:全部字元轉換為大寫;lowercase:全部字元轉換為小寫)

text-decoration:用於文字裝飾。(none:預設值;underline:下劃線;overline:上劃線;line-through:刪除線)

text-align:設定水平對齊方式。(left:預設值;center:居中對齊;right:右對齊)

text-indent:設定首行縮排,可以使用負值。(單位:em、px、%)

white-space:設定空白符的處理方式。(normal:預設值;pre:預格式化;nowrap:空格空行無效,強制不能換行,除非遇到換行標籤

direction:設定文字的書寫方向。(ltr:預設值;rtl:從右到左;inherit:從父元素繼承 direction 屬性的值)

text-shadow: 設定文字的陰影。屬性分別為:水平陰影(px)、垂直陰影(px)、模糊距離(px),陰影的顏色(可用顏色名稱、十六進製制#rgb、rgb(r,g,b))

text-overflow: 設定當文字的長度超過了元素的長度時如何修剪文字(clip:預設值,修剪文字;ellipsis:用省略號表示文字超出的部分;string:使用給定的字串代表超出的文字)

word-wrap: 設定當長單詞過長時如何換行(normal:預設值,瀏覽器的預設換行方式;break-word:在長單詞或 url 位址內部進行換行)

CSS3學習筆記 14 文字效果

本節學習css3中一些文字屬性的設定。1 文字陰影 text shadow 橫向 縱向 模糊度 顏色 可以作多重陰影疊加。2 文字裁剪 把溢位的部分裁剪掉,然後判斷是否加省略號。要配合其它屬性一起用。不能換行 white space nowrap 控制溢位 overflow hidden 裁剪後不新...

HTML CSS學習筆記3

1 css全稱為 層疊樣式表 cascading style sheets 它主要用於定義html內容在瀏覽器的顯示樣式,如文字 顏色 字型加粗等。如 p 中的就是宣告,屬性和值之間用英文冒號 分隔。當有多條宣告時,中間可以英文分號 分隔,如 p注意 1 最後一條宣告可以沒有分號,但是為了以後修改方...

html css學習筆記 3

css小結 1.css包含一些簡單語句,成為規則 2.每個規則為選擇器的一些html元素提供樣式 3.典型的規則包括乙個選擇器,以及乙個或多個屬性和值 4.選擇器指定規則將應用到那些元素 5.每個屬性宣告以乙個分號結束 6.規則中的所有屬性和值都放在 大括號之間 7.可以使用元素名作為選擇器,來選擇...