css禪意花園(一)

第1章結(jié)構(gòu)

?1绊谭、帶有語義的標(biāo)記 扛芽,選擇何種HTML標(biāo)簽取決于標(biāo)簽本身的語義人柿,而不是其默認(rèn)顯示出的樣式馁菜。使用CSS進(jìn)行設(shè)計(jì)時(shí)的主要任務(wù)之一就是從編寫合法的、帶有良好結(jié)構(gòu)并擁有語義的HTML文檔開始最爬。

2涉馁、創(chuàng)建良好的標(biāo)記 ?選擇DOCTYPE,指定語言和字符集,指定標(biāo)題烂叔,選擇恰當(dāng)?shù)脑亟靼苊膺^度使用div和span,盡可能少用標(biāo)簽,適當(dāng)使用class和id(class 和id可以選用字母或數(shù)字蒜鸡,下劃線命名胯努,但是必須以字母開頭)

UTF-8是一種Unicode,Unicode是一種流行的國際性編碼方案,使用UTF-8好處是逢防,不同的字符集的多種語言叶沛,例如法語、日語忘朝、阿拉伯語和希臘語等灰署,將能夠共存于同一張頁面中。

第2章 ?設(shè)計(jì)

在css中使用的顏色局嘁,css支持17種顏色分別為black(黑色)溉箕、sliver(銀色)、gray(灰色)悦昵、white(白色)肴茄、maroon(栗色)、red(紅色)但指、purple(紫色)寡痰、fuchsia(紫紅色)、green(綠色)棋凳、lime(鮮綠色)拦坠、olive(橄欖色)、yellow(黃色)剩岳、navy(藏青色)贞滨、blue(藍(lán)色)、teal(藍(lán)綠色)拍棕、aqua(淺藍(lán)綠色)晓铆、orange(橙色)。

RGB(絕對值表示) 紅(Red 莫湘,R)R尤蒿,綠(Green,G)幅垮,藍(lán)(Blue腰池,B)三種顏色的絕對值來描述某種顏色。RGB值(百分比表示)如:color:rgb(93%,51%,93%)表示紫色; ?(十六進(jìn)制值)如color:#0000FF;(十六進(jìn)制簡寫值)#ff6699 ->#f69

使用CSS的關(guān)鍵之處是將頁面的表現(xiàn)形式從頁面結(jié)構(gòu)中分離出來

將HTML結(jié)尾部分的照片圖像定位到頁首示弓。絕對定位在處理居中時(shí)并不那么方便讳侨。shea使用了一種非常有用的技巧來處理這個(gè)問題:首先將父元素絕對定位于頁面的最左邊,并將其寬指定100%奏属,在水平方向占滿整個(gè)瀏覽器窗口跨跨。然后將其子元素,設(shè)置居中囱皿。

例如:#eDiv1{

position:absolute;

top:41px;

left:0;

text-align:center;

width:100%;

}

#eDiv1 span{

background:transparent url(aa.jpg) top left no-repeat;

display:block;

margin-left:auto;

margin-right:auto;

height:123px;

width:770px;

}

如果不想絕對居中勇婴,為元素加上一定的內(nèi)邊距(padding)能夠增加元素的總寬度,但是這個(gè)偏移量的值在指定到內(nèi)邊距時(shí)要加倍計(jì)算——因?yàn)樵诮o元素添加內(nèi)邊距的同時(shí)也增加了元素的總寬度嘱腥。還有內(nèi)邊距要添加在與期望偏移方向相反的一側(cè)耕渴,例如若要讓在正中央圖像像左移動,那么應(yīng)該為圖像添加右側(cè)的內(nèi)邊距值(padding-right)齿兔。反之亦然橱脸。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市分苇,隨后出現(xiàn)的幾起案子添诉,更是在濱河造成了極大的恐慌,老刑警劉巖医寿,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栏赴,死亡現(xiàn)場離奇詭異,居然都是意外死亡糟红,警方通過查閱死者的電腦和手機(jī)艾帐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進(jìn)店門乌叶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盆偿,“玉大人,你說我怎么就攤上這事准浴∈屡ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵乐横,是天一觀的道長求橄。 經(jīng)常有香客問我,道長葡公,這世上最難降的妖魔是什么罐农? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮催什,結(jié)果婚禮上涵亏,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好气筋,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布拆内。 她就那樣靜靜地躺著,像睡著了一般宠默。 火紅的嫁衣襯著肌膚如雪麸恍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天搀矫,我揣著相機(jī)與錄音抹沪,去河邊找鬼。 笑死瓤球,一個(gè)胖子當(dāng)著我的面吹牛采够,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播冰垄,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蹬癌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了虹茶?” 一聲冷哼從身側(cè)響起逝薪,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蝴罪,沒想到半個(gè)月后董济,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡要门,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年虏肾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欢搜。...
    茶點(diǎn)故事閱讀 39,769評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡封豪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出炒瘟,到底是詐尸還是另有隱情吹埠,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布疮装,位于F島的核電站缘琅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏廓推。R本人自食惡果不足惜刷袍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望樊展。 院中可真熱鬧呻纹,春花似錦鸽心、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至太闺,卻和暖如春糯景,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背省骂。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工蟀淮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钞澳。 一個(gè)月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓怠惶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親轧粟。 傳聞我的和親對象是個(gè)殘疾皇子策治,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表兰吟,主要用...
    寥寥十一閱讀 1,832評論 0 6
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,552評論 32 459
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途通惫。 HTML5 HTML介紹 H...
    PYLON閱讀 3,223評論 0 5
  • 我們需要別人多管閑事 今天中午翻了兩篇《撒哈拉的故事》,雖說三毛的文筆詼諧幽默混蔼,但是有總能感受到深層的悲涼苦楚履腋。記...
    千影鹿閱讀 542評論 0 1