題:HTML中表示文字粗體的標記除了使用外,還可以使用(???)
A、
B、
C、
D、
參考答案如圖所示
天來說下HTML語言CSS樣式字體的文本縮進 text-indent
text-indent屬性用來指定文本的第一行的縮進,通常是將段落的首行縮進。來看下語法使用:
div {
text-indent:10px;
}
來看下使用效果,使用前:
每一行沒有縮進
使用后:
每個段落的第一行都縮進了20px,具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年,我考上了大學,來到了北京,冬天的雪就像冷冷的冰雨,
在臉上胡亂的拍.搖啊搖,搖啊搖,搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。</p>
<p>只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5。只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5</p>
</body>
</html>
需要縮進的像素可以是任意值,除了正的px,還可以是負的值,可以看下效果:
這不是我的瀏覽器壞了,展示不了段落首部,是將px修改為-20px
具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年,我考上了大學,來到了北京,冬天的雪就像冷冷的冰雨,
在臉上胡亂的拍.搖啊搖,搖啊搖,搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。</p>
<p>只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5。只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5</p>
</body>
</html>
根據大家寫文章段落的習慣,一般都是縮進兩個字,但是20px或者10px是不是2個字的長度呢,回答不是的??s進字數長度有專門的單位: em
通過設置該屬性,所有元素的第一行都可以縮進一個給定的長度,甚至該長度可以是負值。
em是一個相對單位,就是當前元素 font-size 1個文字的大小,如果當前元素沒有設置大小,則會按照1個父元素文字大小。
我們來看下效果:
確實是縮進了2個字的長度,看下對應代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年,我考上了大學,來到了北京,冬天的雪就像冷冷的冰雨,
在臉上胡亂的拍.搖啊搖,搖啊搖,搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。一片冰心在玉壺,我勸天公重抖擻,不拘一格降人才。</p>
<p>只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5。只有聆聽你的聲音,才能撫平我寂寞無聊的心,HTML5</p>
</body>
</html>
每個段落第一行如果想要三個字間距,就是3em
今天就先到這里,大家周末快樂~
SS3 @font-face 規則
以前CSS3的版本,網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用CSS3,網頁設計師可以使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時,只需簡單的將字體文件包含在網站中,它會自動下載給需要的用戶。
您所選擇的字體在新的CSS3版本有關于@font-face規則描述。
您"自己的"的字體是在 CSS3 @font-face 規則中定義的。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
屬性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型)。
Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.
Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.
注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。
使用您需要的字體
在新的 @font-face 規則中,您必須首先定義字體的名稱(比如 myFirstFont),然后指向該字體文件。
如需為 HTML 元素使用字體,請通過 font-family 屬性來引用字體的名稱 (myFirstFont):
實例
<style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>
使用粗體文本
您必須添加另一個包含粗體文字的@font-face規則:
實例
@font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}
該文件"Sansation_Bold.ttf"是另一種字體文件,包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列"myFirstFont"時應該呈現為粗體。
這樣你就可以有許多相同的字體@font-face的規則。
CSS3 字體描述
下表列出了所有的字體描述和里面的@font-face規則定義:
提示:
URL請使用小寫字母的字體,大寫字母在IE中會產生意外的結果描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。規定字體的名稱。 |
src | URL | 必需。定義字體文件的 URL。 |
font-stretch | ||
font-style | ||
font-weight | ||
unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。 |
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
normal
italic
oblique
可選。定義字體的樣式。默認是 "normal"。
normal
bold
100
200
300
400
500
600
700
800
900
可選。定義字體的粗細。默認是 "normal"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。