CSS體驗(yàn)

在企業(yè)開發(fā)中 修改樣式都是交給 CSS 來做绒障,設(shè)置樣式 美化界面

font標(biāo)簽:設(shè)置文本的 字體、大小、顏色

font-weight: bold; /* 粗體 /
font-family: "微軟雅黑"; /
字體設(shè)置 /
font-size: 5; /
字體大小 */

CSS的格式:
<style type="text/css"> 存儲的是文本類型的css代碼
選擇器 {
屬性名稱:屬性值 ;
}
</style>

注意:
①style標(biāo)簽必須處于head標(biāo)簽內(nèi),和title標(biāo)簽同級
②設(shè)置樣式時(shí)椅贱,必須按照固定格式 冒號和分號不能省略

選擇器 { 屬性:值; 屬性:值; }
CSS中和文字相關(guān)的屬性:

-文字樣式屬性 p { font-style:normal; }
normal 正常
italic 傾斜
快捷鍵 fsi+tab = font-style:italic;

-文字粗細(xì)屬性 p { font-weight:bold; }
單詞取值: bold加粗 bolder更粗 lighter細(xì)線(默認(rèn))
數(shù)值取值:100-900之間
快捷鍵 fwb+tab = font-weight:bold;

-文字大小屬性 p { font-size:10px; }
取值單位為像素(pixel)
通過font-size設(shè)置大小,一定要帶單位px
快捷鍵 fz30+tab = font-size:30px;

-文字字體屬性 p { font-family:微軟雅黑; }
默認(rèn)是宋體只冻,可修改為其它字體庇麦,如楷體
如果取值為中文,需用 " " / ' ' 引起來
設(shè)置的字體必須是用戶電腦里面安裝的字體
如果設(shè)置字體不存在属愤,系統(tǒng)會用默認(rèn)字體(宋體)顯示
字體設(shè)置有備選方案:
p { font-family:"我是不存在的字體","楷體" ; }
瀏覽器會選擇 楷體 顯示女器。
快捷鍵 ff+tab = font-family:

一段文本中設(shè)置兩種字體:
但凡是中文字體,里面都包含了英文
但凡是英文字體住诸,里面都沒有包含中文

在企業(yè)開發(fā)中最常見的字體:
中文 - 宋體驾胆、黑體、微軟雅黑
中文字體也有自己的英文名稱贱呐,如 SimSun(宋體) SimHei(黑體)
英文 - Times New Roman丧诺、Atrial

文字屬性的縮寫:所有文字屬性用一個(gè)寫
{font: italic bold 10px;} "楷體"; /* 一行寫完所有的字體屬性,位置不能亂調(diào)整奄薇,否則無效*/
注意:
可省略的 style / weight
不可省略的 size / family
位置不能亂調(diào)整

文本屬性:
-文本裝飾:下劃線驳阎、刪除線之類的
text-decoration: underline; /* 裝飾一條下劃線 */
取值:
underline 下劃線
line-through 刪除線
overline 上劃線
none 什么都沒有,可以去掉<a>標(biāo)簽超鏈接的下劃線
快捷鍵 tdu+tab = text-decoration: underline;

-文本水平對齊
text-align: center; /* 文本對齊屬性 居中 */
取值:
left center right

-文本縮進(jìn)
text-indent: 2em; /* 文本縮進(jìn)2個(gè)字符 */
取值:
一個(gè)em代表一個(gè)文字有寬度

CSS顏色屬性:
color: red;

顏色屬性的取值:紅色
coloe:rgb(255,0,0); 三原色(red / green / blue)
紅色:rgb(255,0,0)
綠色:rgb(0,255,0)
藍(lán)色:rgb(0,0,255)
黑色:rgb(0,0,0)
白色:rgb(255,255,255)
灰色:rgb三個(gè)的顏色一樣馁蒂,值小深灰呵晚,值大淺灰

coloe:rgba(255,0,0); CSS3推出
a:透明度 0-1,值越小越透明

color:#FF0000; 十六進(jìn)制
每兩個(gè)字母代表rgb中的一個(gè)數(shù)字

color:#F00; 十六進(jìn)制縮寫
在CSS中只要十六進(jìn)制的每兩個(gè)值都是一樣的沫屡,就可以簡寫為一位饵隙。

十進(jìn)制:0-9,遇10進(jìn)1 11
十六進(jìn)制:0-16沮脖,遇16進(jìn)1
1 2 3 4 5 6 7 8 9 a b c d e f

十六進(jìn)制 轉(zhuǎn)換為 十進(jìn)制
十六進(jìn)制第一位16 + 十六進(jìn)制第二位 = 十進(jìn)制
15 == 1
16 + 5 = 21
00 == 016 + 0 = 0
FF == 15
16 + 15 = 255

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末金矛,一起剝皮案震驚了整個(gè)濱河市芯急,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驶俊,老刑警劉巖娶耍,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饼酿,居然都是意外死亡榕酒,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進(jìn)店門故俐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奈应,“玉大人,你說我怎么就攤上這事购披。” “怎么了肩榕?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵刚陡,是天一觀的道長。 經(jīng)常有香客問我株汉,道長筐乳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任乔妈,我火速辦了婚禮蝙云,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘路召。我一直安慰自己勃刨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布股淡。 她就那樣靜靜地躺著身隐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪唯灵。 梳的紋絲不亂的頭發(fā)上贾铝,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機(jī)與錄音埠帕,去河邊找鬼垢揩。 笑死,一個(gè)胖子當(dāng)著我的面吹牛敛瓷,可吹牛的內(nèi)容都是我干的叁巨。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼琐驴,長吁一口氣:“原來是場噩夢啊……” “哼俘种!你這毒婦竟也來了秤标?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤宙刘,失蹤者是張志新(化名)和其女友劉穎苍姜,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悬包,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡衙猪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了布近。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垫释。...
    茶點(diǎn)故事閱讀 40,769評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖撑瞧,靈堂內(nèi)的尸體忽然破棺而出棵譬,到底是詐尸還是另有隱情,我是刑警寧澤预伺,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布订咸,位于F島的核電站,受9級特大地震影響酬诀,放射性物質(zhì)發(fā)生泄漏脏嚷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一瞒御、第九天 我趴在偏房一處隱蔽的房頂上張望父叙。 院中可真熱鬧,春花似錦肴裙、人聲如沸趾唱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鲸匿。三九已至,卻和暖如春阻肩,著一層夾襖步出監(jiān)牢的瞬間带欢,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工烤惊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留乔煞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓柒室,卻偏偏與公主長得像渡贾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子雄右,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案空骚? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,760評論 1 92
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器(重要7慕病!6谝佟)繼承熬甚、特殊性、層疊肋坚、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,093評論 0 40
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途乡括。 HTML5 HTML介紹 H...
    PYLON閱讀 3,234評論 0 5
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,839評論 0 6
  • 請各位讀者添加一下作者的微信公眾號智厌,以后有新的文章诲泌,將在微信公眾號直接推送給各位,非常感謝铣鹏。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,824評論 1 9