CSS編程快速入門教程

一朱嘴、什么是CSS?


  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式通常存儲在樣式表
  • 把樣式添加到 HTML 4.0 中嘶伟,是為了解決內(nèi)容與表現(xiàn)分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲在 CSS 文件
  • 多個樣式定義可層疊為一

開始學習什么是CSS

二虎锚、基本語法規(guī)范


分析一個典型CSS的語句:

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
  • 其中"p"我們稱為"選擇器"(selectors),指明我們要給"p"定義樣式榆芦;
  • 樣式聲明寫在一對大括號"{}"中挥等;
  • COLORBACKGROUND稱為"屬性"(property)翰蠢,不同屬性之間用分號";"分隔;
  • "#FF0000"和"#FFFFFF"是屬性的值(value)服赎。

開始學習CSS語法規(guī)范

三葵蒂、顏色值


顏色是由紅(RED),綠(GREEN)重虑,藍(BLUE )光線的顯示結(jié)合簡稱“RGB”刹勃,例如:color : rgb(255,0,0)也可以用十六進制寫,就象上面例子color:#FF0000如果十六進制值是成對重復的可以簡寫嚎尤,效果一樣荔仁。例如:#FF0000可以寫成#F00。但如果不重復就不可以簡寫芽死,例如#FC1A1B必須寫滿六位乏梁。
查看更多CSS顏色值

四、定義字體


CSS字體屬性定義字體关贵,加粗遇骑,大小,文字樣式揖曾。
web標準推薦如下字體定義方法:

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

嘗試一下 ?

  • 字體按照所列出的順序選用落萎。如果用戶的計算機含有Lucida Grande字體亥啦,文檔將被指定為* * Lucida Grande。沒有的話练链,就被指定為Verdana字體翔脱,如果也沒有Verdana,就指定為Lucida字體媒鼓,依此類推届吁,;
  • Lucida Grande字體適合Mac OS X绿鸣;
  • Verdana字體適合所有的Windows系統(tǒng)疚沐;
  • Lucida適合UNIX用戶
  • "宋體"適合中文簡體用戶;
  • 如果所列出的字體都不能用,則默認的sans-serif字體能保證調(diào)用;

學習更多CSS字體

五潮模、CSS 屬性


CSS的屬性都定義在CSS的聲明塊中亮蛔,每個CSS屬性都定義了一系列的關(guān)鍵信息

|||
------ | ------ | ------
動畫 | 網(wǎng)格 | 分頁
背景 | 超鏈接 | Ruby
邊框和輪廓 | 線框 | 語音
| 列表 | 表格
顏色 | 外邊距 | 文本
內(nèi)容頁的媒體屬性 | 字幕 | 2D/3D 轉(zhuǎn)換
尺寸 | 多列 | 過渡
盒子模型(新) | 內(nèi)邊距 | 用戶界面
盒子模型(舊) | 頁面媒體
字體 | 定位 |
內(nèi)容生成 | |

查看全部CSS屬性

六、CSS 實戰(zhàn)闖關(guān)


我們?yōu)閷W習者準備了大量的CSS編程實戰(zhàn)練習擎厢,供大家通過親自編程實驗來熟練編程操作

開始CSS編程闖關(guān)

七尔邓、CSS 實例


css 在線150個實例,通過本站編輯器锉矢,你可以學習在線查看修改后css的運行效果梯嗽。
嘗試一下!

八、CSS 問答


自學自怕的就是遇到問題無人解答沽损,為此W3Cschool開設(shè)了CSS問答專區(qū)灯节,方便新手們學習交流。
去CSS問答提問

九绵估、CSS 相關(guān)工具


W3CSchool中你可以找到更完整的CSS教程炎疆、資料,工具等国裳。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末形入,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缝左,更是在濱河造成了極大的恐慌亿遂,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件渺杉,死亡現(xiàn)場離奇詭異蛇数,居然都是意外死亡,警方通過查閱死者的電腦和手機是越,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門耳舅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人倚评,你說我怎么就攤上這事浦徊×笥瑁” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵盔性,是天一觀的道長霞丧。 經(jīng)常有香客問我,道長纯出,這世上最難降的妖魔是什么蚯妇? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任敷燎,我火速辦了婚禮暂筝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘硬贯。我一直安慰自己焕襟,他們只是感情好,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布饭豹。 她就那樣靜靜地躺著鸵赖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拄衰。 梳的紋絲不亂的頭發(fā)上它褪,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音翘悉,去河邊找鬼茫打。 笑死,一個胖子當著我的面吹牛妖混,可吹牛的內(nèi)容都是我干的老赤。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼制市,長吁一口氣:“原來是場噩夢啊……” “哼抬旺!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起祥楣,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤开财,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后误褪,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體床未,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年振坚,在試婚紗的時候發(fā)現(xiàn)自己被綠了薇搁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡渡八,死狀恐怖啃洋,靈堂內(nèi)的尸體忽然破棺而出传货,到底是詐尸還是另有隱情,我是刑警寧澤宏娄,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布问裕,位于F島的核電站,受9級特大地震影響孵坚,放射性物質(zhì)發(fā)生泄漏粮宛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一卖宠、第九天 我趴在偏房一處隱蔽的房頂上張望巍杈。 院中可真熱鬧,春花似錦扛伍、人聲如沸筷畦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鳖宾。三九已至,卻和暖如春逆航,著一層夾襖步出監(jiān)牢的瞬間鼎文,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工因俐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拇惋,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓女揭,卻偏偏與公主長得像蚤假,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子吧兔,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

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

  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,033評論 0 1
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,525評論 32 459
  • 引言 本人在慕課網(wǎng)學習HTML+CSS基礎(chǔ)課程磷仰,記錄一些文字,方便自己回憶境蔼,也希望對大家有所幫助 上次給大家?guī)砹?..
    zhaolion閱讀 7,378評論 18 272
  • 第一部分HTML&CSS整理答案1.什么是HTML5灶平? 答:HTML5是最新的HTML標準。 注意:講述HTML5...
    Programmer客棧閱讀 2,001評論 0 12
  • 若你哭泣箍土, 我心淅瀝逢享; 若你生氣, 我心霹靂吴藻; 你若大笑瞒爬, 我心安好。 從此-- 你就是我的晴雨表!
    最愛肉丸子先生閱讀 234評論 0 1