css第二節(jié)第2天

1.CSS的顏色表示

命名顏色

red欺抗、black售碳、white、purple绞呈、green贸人、yellow、silver佃声、gray艺智、teal、blue圾亏、navy....[備注]

p { color: red;}

RGB顏色表示法

RGB模式表示色彩十拣,R:red,G:green志鹃,B:blue夭问,三種顏色組合疊加可以產生自然界中所有的顏色,也是計算機常用模式曹铃。

RGB 顏色值是這樣規(guī)定的:rgb(red, green, blue).

每個參數(shù) (red缰趋、green 以及 blue) 定義顏色的強度,可以是介于 0 與 255 之間的整數(shù),或者是百分比值(從 0% 到 100%)埠胖。

p { color: rgb(255,255,0); };

p { color: rgb(100%,100%,0%); };

十六進制顏色值

由于RGB模式書寫非常不方便糠溜,三個255值直接用3個十六進制數(shù)表示。

十六進制顏色是這樣規(guī)定的:#RRGGBB直撤,其中的 RR(紅色)非竿、GG(綠色)、BB(藍色)十六進制整數(shù)規(guī)定了顏色的成分谋竖。所有值必須介于 0 與 FF 之間红柱。

取值范圍 #000000 ~ #FFFFFF (黑色到白色)

其實就是RGB模式的另外一種寫法,所有瀏覽器都兼容蓖乘。

p { color: #c0c0c0; }? p { color: #c09; }? 三個數(shù)字的復制擴展成六個 #c09=>#cc0099锤悄。

1.2CSS的長度單位

絕對長度單位:

cm:厘米,mm:毫米嘉抒,in:英寸零聚,pc:派卡(Picas),相當于我國新四號鉛字的尺寸些侍。都不常用隶症,了解即可。

相對長度單位:

px:像素點岗宣,像素就是顯示器顯示的一個點蚂会。

em:1em 等于當前的字體大小,例如:當前元素的字體大小為16px耗式,那么1em = 16px胁住。

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

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

1.3CSS字體樣式屬性

1、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; }

1.3.2浪规、font-family:字體

font-family屬性用于設置字體。網頁中常用的字體有宋體探孝、微軟雅黑笋婿、黑體等,例如將網頁中所有段落文本的字體設置為微軟雅黑顿颅,可以使用如下CSS樣式代碼:

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

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

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

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

中文字體需要加英文狀態(tài)下的引號,英文字體一般不需要加引號啸澡。當需要設置英文字體時袖订,英文字體名必須位于中文字體名之前。

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

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

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

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

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

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

可以通過escape()? 來得到

1.4字體系列

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

serif是有襯線字體脏里,意思是在字的筆畫開始、結束的地方有額外的裝飾虹曙,而且筆畫的粗細會有所不同迫横。相反的,sans serif就沒有這些額外的裝飾酝碳,而且筆畫的粗細差不多矾踱。

為了更安全的設置:

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

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

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


1.4.2、font-weight:字體粗細

font-weight屬性用于定義字體的粗細贝搁,其可用屬性值:normal吗氏、bold、bolder雷逆、lighter弦讽、100~900(100的整數(shù)倍),有繼承性关面。

400 : Normal

700:bold

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

1.4.3捂齐、font-style:字體風格

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

normal:默認值,瀏覽器會顯示標準的字體樣式瞻想。

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

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

1.4.4、font:綜合設置字體樣式

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

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

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末吼肥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子麻车,更是在濱河造成了極大的恐慌缀皱,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件动猬,死亡現(xiàn)場離奇詭異唆鸡,居然都是意外死亡,警方通過查閱死者的電腦和手機枣察,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門争占,熙熙樓的掌柜王于貴愁眉苦臉地迎上來燃逻,“玉大人,你說我怎么就攤上這事臂痕〔螅” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵握童,是天一觀的道長姆怪。 經常有香客問我,道長澡绩,這世上最難降的妖魔是什么稽揭? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮肥卡,結果婚禮上溪掀,老公的妹妹穿的比我還像新娘。我一直安慰自己揪胃,他們只是感情好,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布氛琢。 她就那樣靜靜地躺著喊递,像睡著了一般阳似。 火紅的嫁衣襯著肌膚如雪撮奏。 梳的紋絲不亂的頭發(fā)上挽荡,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天定拟,我揣著相機與錄音青自,去河邊找鬼。 笑死驱证,一個胖子當著我的面吹牛延窜,可吹牛的內容都是我干的。 我是一名探鬼主播抹锄,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼逆瑞,長吁一口氣:“原來是場噩夢啊……” “哼荠藤!你這毒婦竟也來了?” 一聲冷哼從身側響起获高,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤哈肖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后念秧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淤井,經...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年摊趾,在試婚紗的時候發(fā)現(xiàn)自己被綠了币狠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡砾层,死狀恐怖漩绵,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情梢为,我是刑警寧澤渐行,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站铸董,受9級特大地震影響祟印,放射性物質發(fā)生泄漏。R本人自食惡果不足惜粟害,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一蕴忆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧悲幅,春花似錦套鹅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至留荔,卻和暖如春吟孙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背聚蝶。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工杰妓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碘勉。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓巷挥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親验靡。 傳聞我的和親對象是個殘疾皇子倍宾,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內容

  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,029評論 0 1
  • 請各位讀者添加一下作者的微信公眾號雏节,以后有新的文章,將在微信公眾號直接推送給各位高职,非常感謝矾屯。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,800評論 1 9
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯(lián)初厚、inline-level)元素件蚕。 塊元素的...
    饑人谷_小侯閱讀 1,985評論 1 4
  • FreeCodeCamp - HTML5 and CSS 發(fā)現(xiàn)原來在另外一臺電腦學 FreeCodeCamp 的時...
    付林恒閱讀 9,340評論 2 17
  • 簡單復習一下: Display改變標簽顯示模式: display可以控制標簽的顯示模式。 客串一個:visibil...
    顯然2017閱讀 682評論 0 3