CSS第二小節(jié)第一天

HTML標(biāo)記一般分為塊標(biāo)記和行內(nèi)標(biāo)記兩種類型,它們也稱塊元素和行內(nèi)元素。具體如下:

塊元素

每個塊元素通常都會獨自占據(jù)一整行或多整行,可以對其設(shè)置寬度、高度、對齊等屬性,常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

塊級元素容器可以容納多個嵌套的塊級標(biāo)簽或者行內(nèi)標(biāo)簽。

常見的塊元素有<h1>-<h6>,<p>,div,ul,ol,li等,其中

<div>標(biāo)記是最典型的塊元素。


CSS的標(biāo)簽?zāi)J皆O(shè)置Display屬性

display可以控制標(biāo)簽的顯示模式。

display:none | inline | block | inline-block

繼承性:無

display值的解釋:

none :此元素不被顯示,在文檔中被移除。

block :此元素按塊級元素顯示:前后帶換行符,自己占一行。內(nèi)聯(lián)元素 → 塊元素

inline :此元素按內(nèi)聯(lián)元素顯示:1個挨著1個。塊元素 → 內(nèi)聯(lián)元素

inline-block:按行內(nèi)標(biāo)簽進(jìn)行排版,但是可以設(shè)置寬高,而且高度可以影響行高(以后再詳細(xì)講)。


通過設(shè)置Display為none,那么可以讓這整個標(biāo)簽在頁面中移除掉

對比一下:

/*display: none;*/? /*直接把當(dāng)前標(biāo)簽從頁面中直接移除了,不影響頁面的布局*/

visibility: hidden; ? /*這個只是不顯示,但還是占用頁面的空間*


行內(nèi)不可以設(shè)置寬高,塊級可以.行內(nèi)元素只能通過內(nèi)容來撐開.只有左右邊距.如果你設(shè)置了寬高是不會影響行內(nèi)元素的顯示的。

CSS的顏色表示


盡量用16進(jìn)制表示.

CSS的長度單位

絕對長度單位:

cm:厘米,mm:毫米,in:英寸,pc:派卡(Picas),相當(dāng)于我國新四號鉛字的尺寸。都不常用,了解即可。

相對長度單位:

px:像素點,像素就是顯示器顯示的一個點。

em:1em 等于當(dāng)前的字體大小,例如:當(dāng)前元素的字體大小為16px,那么1em = 16px。

單位之間的關(guān)系:1in = 2.54cm = 25.4 mm? = = 96px

p { width: 1in; height:20px; }

在PC時代主要以px為主。在移動web時代主要以: em、rem、pw、ph、百分比等來做布局的設(shè)置。

相對單位解釋:像素是相對單位。不同平面尺寸可以是相同的分辨率,也就相同的像素大小,對應(yīng)的實際的尺寸可能不同。

文字排版

CSS字體樣式屬性

1、font-size:字號大小

font-size屬性用于設(shè)置字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。

其中,相對長度單位比較常用,推薦使用像素單位px,絕對長度單位使用較少。

可選參數(shù)值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger?

盡量不要用上面的.

一般頁面中:12px? ? ? 14px? 12cm

1em

例如:

p { font-size: 32px; }

font-family:字體

font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等,例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑,可以使用如下CSS樣式代碼:

可以同時指定多個字體,中間以逗號隔開,表示如果瀏覽器不支持第一個字體,則會嘗試下一個,直到找到合適的字體。如果字體名稱包含空格或中文,則應(yīng)使用引號括起

例如:font-family:Verdana, Arial, '宋體';

使用font-family設(shè)置字體時,需要注意以下幾點:

? 各種字體之間必須使用英文狀態(tài)下的逗號隔開。

? 中文字體需要加英文狀態(tài)下的引號,英文字體一般不需要加引號。當(dāng)需要設(shè)置英文字體時,英文字體名必須位于中文字體名之前。

? 如果字體名中包含空格、#、$等符號,則該字體必須加英文狀態(tài)下的單引號或雙引號,例如font-family: "Times New Roman";。

? 盡量使用系統(tǒng)默認(rèn)字體,保證在任何用戶的瀏覽器中都能正確顯示。

使用font-family設(shè)置字體時,需要注意以下幾點:

在 CSS 中設(shè)置字體名稱,直接寫中文是可以的。但是在文件編碼(GB2312、UTF-8 等)不匹配時會產(chǎn)生亂碼的錯誤。

為此,在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱,瀏覽器是可以正確的解析的。

font-family: "\5FAE\8F6F\96C5\9ED1",表示設(shè)置字體為“微軟雅黑”。

可以通過escape()? 來得到

盡量用unicode或者英文名

字體系列

西方國家字母體系分為兩類:serif以及sans serif。

serif是有襯線字體,意思是在字的筆畫開始、結(jié)束的地方有額外的裝飾,而且筆畫的粗細(xì)會有所不同。相反的,sans serif就沒有這些額外的裝飾,而且筆畫的粗細(xì)差不多。

為了更安全的設(shè)置:

font-famliy:? tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

前面的字體都查找失敗后,在系統(tǒng)中找一種sans-serif字體作為默認(rèn)字體。

注意順序,如果把sans-serif放前面去,后面的都失效了。

font-weight:字體粗細(xì)

font-weight屬性用于定義字體的粗細(xì),其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數(shù)倍),有繼承性。

400 : Normal

700:bold

建議使用數(shù)字

字體的加粗跟字體有關(guān),比如:一種字體只有兩種粗細(xì)程度的變化,那么normal 到bold 和到bolder都是一樣的效果。

font-style:字體風(fēng)格

font-style屬性用于定義字體風(fēng)格,如設(shè)置斜體、傾斜或正常字體,其可用屬性值如下:

normal:默認(rèn)值,瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。

italic:瀏覽器會使用斜體的字體樣式顯示,如果字體沒有斜體,那么正常顯示字體。

oblique:瀏覽器會讓文字傾斜顯示。。

font:綜合設(shè)置字體樣式

font屬性用于對字體樣式進(jìn)行綜合設(shè)置,其基本語法格式如下:

選擇器{font: font-style? font-weight? font-size/line-height? font-family;}

使用font屬性時,必須按上面語法格式中的順序書寫,各個屬性以空格隔開。

其中不需要設(shè)置的屬性可以省略(取默認(rèn)值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。

盡量用合寫的方式.

淘寶的字體設(shè)置:font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,181評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,121評論 1 92
  • 請各位讀者添加一下作者的微信公眾號,以后有新的文章,將在微信公眾號直接推送給各位,非常感謝。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,972評論 1 9
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,198評論 1 4
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”,它主要是用于定義HTM...
    snowy_sunny閱讀 1,197評論 0 4

友情鏈接更多精彩內(nèi)容