01-認(rèn)識CSS

CSS的起源

  • 在web最開開始(1990-1993),html只有描述段落楼镐,超鏈接忿族,列表和標(biāo)題等基本元素扼劈。隨著萬維網(wǎng)的出現(xiàn)(用戶交互體驗的加強(qiáng))驻啤,對html的要求越來越大,人們需要更好的使用體驗荐吵,于是出現(xiàn)了一些表現(xiàn)化的標(biāo)簽如<u></u>骑冗、<i></i>以及一些體現(xiàn)表現(xiàn)的屬性與屬性值如align="center"等。
  • 隨著時間的推移先煎,html既要體現(xiàn)結(jié)構(gòu)贼涩,又要用于表現(xiàn),導(dǎo)致3個問題:1.html變得越來越臃腫薯蝎;2.頁面缺乏結(jié)構(gòu)性遥倦,降低了網(wǎng)頁的可訪問性。3占锯。頁面維護(hù)越來越困難袒哥。
  • 在1995年,W3C組織(World WideWeb Consortium)成立消略,CSS(Cascading Style Sheets)的創(chuàng)作成員全部成為了W3C的工作小組并且全力以赴負(fù)責(zé)研發(fā)CSS標(biāo)準(zhǔn)堡称,并于12月份推出了第一份CSS(CSS1.0)。

CSS體驗

image.png
<head>
    <meta charset="utf-8">
    <style type="text/css">       /* type="text/css" 常省略艺演,因為這是默認(rèn)值却紧。*/
        h2{
            text-align: center;       /*設(shè)置文本水平居中對齊*/
            color: red;       /*文本顏色:紅色*/
            font-family: "微軟雅黑";      /* 字體族:微軟雅黑 */
        }
        p{
            text-align: center;
            color: blue;
            font-size: 20px;       /* 字體大型╇:20像素  */
        }
       small{
           color: orange;     
      }
    </style>
</head>
<body>
    <h2>靜夜思游子吟</h2>
    <p><small>作者:孟郊</small></p>
    <p>慈母手中線,游子身上衣晓殊。</p>
    <p>臨行密密縫断凶,意恐遲遲歸。</p>
    <p>誰言寸草心挺物,報得三春暉懒浮。</p>

    <h2>江城子·乙卯正月二十日夜記夢</h2>
    <p><small>作者:蘇軾</small></p>
    <p>十年生死兩茫茫,不思量识藤,自難忘砚著。</p>
    <p>千里孤墳,無處話凄涼痴昧。</p>
    <p>縱使相逢應(yīng)不識稽穆,塵滿面,鬢如霜赶撰。</p>
    <p>夜來幽夢忽還鄉(xiāng)舌镶,小軒窗,正梳妝豪娜。</p>
    <p>相顧無言餐胀,惟有淚千行。</p>
    <p>料得年年腸斷處瘤载,明月夜否灾,短松岡。</p>
</body>

注:

  • <style></style>其實在HTML任意部分都可以鸣奔,只是習(xí)慣在</head>上方墨技。
  • <style></style>遵循HTML規(guī)范,有開始和結(jié)束標(biāo)簽挎狸。
  • <style></style>里面的語句則遵循的是CSS語句規(guī)范扣汪,基本為:選擇器 { 屬性1:屬性值1;屬性2:屬性值2锨匆; }
  • CSS語句的注釋格式為:/* 注釋的內(nèi)容 */

CSS和HTML的關(guān)系

  • HTML負(fù)責(zé)結(jié)構(gòu)
  • CSS負(fù)責(zé)表現(xiàn)

本節(jié)課來看崭别,CSS的優(yōu)點

  • 結(jié)構(gòu)和表現(xiàn)分離
  • 代碼簡潔統(tǒng)一
    CSS還有很多優(yōu)點,隨著學(xué)習(xí)的深入恐锣,大家將會深刻體會到紊遵。

練習(xí)

1.自行完成本文的HTML部分和CSS部分。
2.思考侥蒙,如何僅僅讓 “夜來幽夢忽還鄉(xiāng),小軒窗匀奏,正梳妝鞭衩。” 字體顏色變成粉紅色(pink)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市论衍,隨后出現(xiàn)的幾起案子瑞佩,更是在濱河造成了極大的恐慌,老刑警劉巖坯台,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件炬丸,死亡現(xiàn)場離奇詭異,居然都是意外死亡蜒蕾,警方通過查閱死者的電腦和手機(jī)稠炬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咪啡,“玉大人首启,你說我怎么就攤上這事〕访” “怎么了毅桃?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長准夷。 經(jīng)常有香客問我钥飞,道長,這世上最難降的妖魔是什么衫嵌? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任读宙,我火速辦了婚禮,結(jié)果婚禮上渐扮,老公的妹妹穿的比我還像新娘论悴。我一直安慰自己,他們只是感情好墓律,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布膀估。 她就那樣靜靜地躺著,像睡著了一般耻讽。 火紅的嫁衣襯著肌膚如雪察纯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天针肥,我揣著相機(jī)與錄音饼记,去河邊找鬼。 笑死慰枕,一個胖子當(dāng)著我的面吹牛具则,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播具帮,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼博肋,長吁一口氣:“原來是場噩夢啊……” “哼低斋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起匪凡,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤膊畴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后病游,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唇跨,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年衬衬,在試婚紗的時候發(fā)現(xiàn)自己被綠了买猖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡佣耐,死狀恐怖政勃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兼砖,我是刑警寧澤奸远,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站讽挟,受9級特大地震影響懒叛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜耽梅,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一薛窥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧眼姐,春花似錦诅迷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至贡歧,卻和暖如春滩租,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背利朵。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工律想, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人绍弟。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓技即,卻偏偏與公主長得像,于是被迫代替她去往敵國和親樟遣。 傳聞我的和親對象是個殘疾皇子而叼,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案郭脂? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評論 1 92
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,562評論 32 459
  • 什么是html? html是一種網(wǎng)頁標(biāo)記語言澈歉,叫超文本標(biāo)記語言,我們平時上網(wǎng)所看到的所有網(wǎng)頁均來自于html屿衅,英文...
    波段頂?shù)?/span>閱讀 8,383評論 2 7
  • 收房啦 買一支胡蘿卜筆 作為紀(jì)念 比預(yù)想的好太多 滿意
    PWong閱讀 155評論 0 0
  • 有的用戶追求效率埃难,有的用戶追求視覺,有的用戶追求交互涤久,說到底涡尘,都是產(chǎn)品定位和用戶運(yùn)營的區(qū)別。好的設(shè)計不僅在視覺體驗...
    同行說ths閱讀 478評論 0 0