CSS第二節(jié):CSS性質(zhì)

簡單復習一下:


Display改變標簽顯示模式:

display可以控制標簽的顯示模式简烤。

客串一個:visibility屬性:

行內(nèi)塊元素設置:

行內(nèi)元素不能設置寬高,只能通過他的內(nèi)容來撐開他的寬度和高度跋破。如果你設置了寬高是不會影響行內(nèi)元素的顯示的。

CSS的顏色表示:

RGB顏色表示法:

RGB:red顾瞻,green宿接,blue三元素疊加組成不同顏色焦匈。

語法:color: rgb(33,33,33);? ? ? (取值:0-255血公,也可以用百分比:0% - 100%)

十六進制是另外一種寫法:

語法: ?Color:#3333333;

十六進制也是rgb的表示方法另外一種寫法而已。


CSS的長度單位:

絕對長度單位:

cm:厘米缓熟,mm:毫米累魔,in:英寸,pc:派卡(Picas)够滑,相當于我國新四號鉛字的尺寸垦写。都不常用,了解即可彰触。

相對長度單位:

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

em:1em等于當前的字體大小况毅,例如:當前元素的字體大小為16px分蓖,那么1em = 16px。

單位之間的關系:1in = 2.54cm = 25.4 mm= =96px

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

在PC時代主要以px為主尔许。在移動web時代主要以:em么鹤、rem、pw味廊、ph蒸甜、百分比等來做布局的設置。

相對單位解釋:像素是相對單位毡们。不同平面尺寸可以是相同的分辨率迅皇,也就相同的像素大小昧辽,對應的實際的尺寸可能不同衙熔。


CSS字體樣式屬性:

font-size:字號大小

font-size屬性用于設置字號,該屬性的值可以使用相對長度單位搅荞,也可以使用絕對長度單位红氯。

其中,相對長度單位比較常用咕痛,推薦使用像素單位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設置字體時茉贡,需要注意以下幾點:

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

中文字體需要加英文狀態(tài)下的引號,英文字體一般不需要加引號腔丧。當需要設置英文字體時放椰,英文字體名必須位于中文字體名之前作烟。

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

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

使用font-family設置字體時错邦,還需要注意以下幾點:

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

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

(上圖中的字體中文改成下圖中的英文名稱或Unicode編碼即可) 建議寫Unicode編碼更好

Unicode編碼–可以通過escape()來得到

Unicode編碼也可以通過 ?escape(*輸入需要的字體名稱*) ?來得到:


字體系列:

襯線體:字體有一些修飾的東西晨另,讓字體變的美觀潭千。

非襯線體:沒有修飾。

為了更安全的設置:

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

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

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


字體加粗:font-weight

font-weight屬性用于定義字體的粗細,其可用屬性值:normal茂契、bold蝶桶、bolder、lighter掉冶、100~900(100的整數(shù)倍)真竖,有繼承性。

400: Normal ? ? ? ? ? ?700:bold

字體的加粗跟字體有關厌小,比如:一種字體只有兩種粗細程度的變化恢共,那么normal到bold 和到bolder都是一樣的效果。

注意注意:設置字體是否加粗是不需要加單位的璧亚。


字體風格:font-style

font-style屬性用于定義字體風格讨韭,如設置斜體、傾斜或正常字體,其可用屬性值如下:

normal:默認值透硝,瀏覽器會顯示標準的字體樣式吉嚣。

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

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


font:綜合設置字體樣式

上圖寫法太繁瑣甜攀,還可以優(yōu)化秋泄,綜合設置:

font屬性用于對字體樣式進行綜合設置,其基本語法格式如下:

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

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

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


CSS文本外觀屬性:

color:文本顏色

通過color屬性可以設置字體的顏色厉碟。 ? ? ??Color: red; ? ? ? ?建議最好使用十六進制的方式來寫喊巍。


letter-spacing:字間距

letter-spacing屬性用于定義字間距,所謂字間距就是字符與字符之間的空白箍鼓。其屬性值可為不同單位的數(shù)值崭参,允許使用負值,默認為normal款咖。


word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距何暮,對中文字符無效。和letter-spacing一樣铐殃,其屬性值可為不同單位的數(shù)值海洼,允許使用負值,默認為normal富腊。

word-spacing和letter-spacing均可對英文進行設置坏逢。不同的是letter-spacing定義的為字母之間的間距,而word-spacing定義的為英文單詞之間的間距蟹肘。

注意上圖的注釋:也可以設置漢字中出現(xiàn)斷字的距離(比如:文字間出現(xiàn)空格等)

letter-spacing:字間距

letter-spacing屬性用于定義字間距词疼,所謂字間距就是字符與字符之間的空白俯树。其屬性值可為不同單位的數(shù)值帘腹,允許使用負值,默認為normal许饿。


line-height:行間距

line-height屬性用于設置行間距阳欲,就是行與行之間的距離,即字符的垂直間距,一般稱為行高球化。

line-height常用的屬性值單位有三種秽晚,分別為像素px,相對值em和百分比%筒愚,實際工作中使用最多的是像素px赴蝇。

行高的CSS定義:行高是兩行文本基線的距離。實際上就是:文本的高度+一倍的行距巢掺。

一行文本的高度正好是:0.5倍行距+文本的高度+ 0.5倍行距句伶。

行高可以跟單位,也可以不跟單位陆淀。但是意義不一樣考余。

font:12px/1.5em '宋體'; ? ??font:12px/150%'宋體'; ? ??font:12px/1.5'宋體';

font:

12px/20px '宋體';

繼承特性

加上單位先計算 后繼承是以父親為基準

不加單位先繼承 后計算是孩子根據(jù)自己的文字大小為基準

line-height:可以讓單行文本垂直居中。

a?,


text-decoration:文本裝飾

text-decoration屬性用于設置文本的下劃線轧苫,上劃線楚堤,刪除線等裝飾效果,其可用屬性值如下:刪除線

none:沒有裝飾(正常文本默認值)含懊。

underline:下劃線身冬。

overline:上劃線。

line-through:刪除線岔乔。

另外吏恭,text-decoration后可以賦多個值,用于給文本添加多種顯示效果重罪,例如希望文字同時有下劃線和刪除線效果樱哼,就可以將underline和line-through同時賦給text-decoration。


text-align 水平對齊方式

text-align屬性用于設置文本內(nèi)容的水平對齊剿配,相當于html中的align對齊屬性搅幅。其可用屬性值如下:

left:左對齊(默認值)

right:右對齊

center:居中對齊


text-indent:首行縮進

text-indent屬性用于設置段落首行文本的縮進,只能設置于塊級標簽呼胚。其屬性值可為不同單位的數(shù)值茄唐、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%蝇更,允許使用負值, 建議使用em作為設置單位沪编。


white-space:空白符處理

使用HTML制作網(wǎng)頁時,不論源代碼中有多少空格年扩,在瀏覽器中只會顯示一個字符的空白蚁廓。在CSS中,使用white-space屬性可設置空白符的處理方式厨幻,其屬性值如下:

Normal:正常的顯示相嵌,如果寬度不夠進行折行顯示腿时。

Nowrap:即使超過盒子的寬度,文本也不進行換行顯示饭宾。

Pre:寫html代碼的時候是什么樣式的批糟,顯示就顯示成什么樣的。


word-break:自動換行

normal ?使用瀏覽器默認的換行規(guī)則看铆,不打斷單詞顯示徽鼎。

break-all ?允許在單詞內(nèi)換行。

keep-all ?只能在半角空格或連字符處換行弹惦。


綜合案例:

代碼看回:32 Comprehensive practice.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纬傲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子肤频,更是在濱河造成了極大的恐慌叹括,老刑警劉巖捍靠,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泡孩,死亡現(xiàn)場離奇詭異,居然都是意外死亡轩褐,警方通過查閱死者的電腦和手機报咳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門侠讯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人暑刃,你說我怎么就攤上這事厢漩。” “怎么了岩臣?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵溜嗜,是天一觀的道長。 經(jīng)常有香客問我架谎,道長炸宵,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任谷扣,我火速辦了婚禮土全,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘会涎。我一直安慰自己裹匙,他們只是感情好,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布末秃。 她就那樣靜靜地躺著概页,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蛔溃。 梳的紋絲不亂的頭發(fā)上绰沥,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天,我揣著相機與錄音贺待,去河邊找鬼徽曲。 笑死,一個胖子當著我的面吹牛麸塞,可吹牛的內(nèi)容都是我干的秃臣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼哪工,長吁一口氣:“原來是場噩夢啊……” “哼奥此!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起雁比,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤稚虎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后偎捎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蠢终,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年茴她,在試婚紗的時候發(fā)現(xiàn)自己被綠了寻拂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡丈牢,死狀恐怖祭钉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情己沛,我是刑警寧澤慌核,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站申尼,受9級特大地震影響遂铡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晶姊,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一扒接、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧们衙,春花似錦钾怔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忆蚀,卻和暖如春矾利,著一層夾襖步出監(jiān)牢的瞬間姑裂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工男旗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留舶斧,地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓察皇,卻偏偏與公主長得像茴厉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子什荣,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案矾缓? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)稻爬、inline-level)元素嗜闻。 塊元素的...
    饑人谷_小侯閱讀 2,007評論 1 4
  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,060評論 0 1
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!NΤE⒎)繼承、特殊性竞滓、層疊咐吼、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,088評論 0 40
  • 1.display 可以讓行內(nèi)元素跟塊級元素相互轉(zhuǎn)換, e.g. inline, block商佑,inline-blo...
    becauseyou_90cd閱讀 169評論 0 0