CSS基礎(chǔ)

** CSS **全稱為 Cascading Style Sheets,層疊樣式表壹若。

@charset "utf-8"
在CSS一般不需要加晌姚,但在css中有中文并且想顯示時沪曙,加入該代碼可以正常顯示中文邑蒋。

引用css的幾種方法姓蜂。

1. 內(nèi)鏈樣式:

<div style="color:red;width:100px;font-size:14px;"></div

2. 內(nèi)部樣式:

<style type="text/css">
 h1 {
color:red;
font-size:28px;
}
</style>

3. 外部樣式:

方法一:link

<link rel="stylesheet" type="text/css" href="../css/index.css">

link為html中的一個標簽。
方法二:@import

<style>
@import url("hello.css");
@import "world.css";
</style>

@impor 為css的一個語法医吊∏可以放到style中也可以放在其他css文件中。

文件路徑:

  • css/a.css 當前文件夾——css文件夾——a.css * 相對路徑 *
  • ./css/a.css 當前文件夾——css文件夾——a.css * 相對路徑 *
  • b.css 當前文件夾——b.css * 相對路徑 *
  • ../imgs/a.png 上級文件夾——imgs文件夾——a.png * 相對路徑 *
  • /Users/hunger/project/css/a.css Users——hunger——project——css——a.css * 絕對路徑 *
  • /static/css/a,css 當前網(wǎng)頁服務(wù)器下的static文件夾——css文件夾——a.css * 網(wǎng)頁路徑 /服務(wù)器下的絕對路徑 *
  • http://cdn.jirengu.com/kejian1/8-1.png 在該網(wǎng)址獲取圖片8-1.png * 網(wǎng)頁路徑 *

在jsbin中展示圖片

  1. 上傳到圖床得到圖片鏈接卿堂,使用網(wǎng)絡(luò)路徑束莫。
  2. 在網(wǎng)上找到圖片和圖片鏈接,使用網(wǎng)絡(luò)路徑草描。
  3. 把圖片上傳到服務(wù)器中麦箍,使用相對路勁。

HTML 和 CSS的書寫規(guī)范

HTML

  • idclass使用有意義的單詞陶珠,單詞之間的分隔符建議使用-
  • 盡量使用無兼容性問題的HTML標簽
  • 盡可能減少div嵌套
  • img添加alt屬性,增加可訪問性
  • 考慮并且提高代碼的可重復(fù)性

CSS

  • 語法統(tǒng)一使用小寫
  • 盡量不使用內(nèi)聯(lián)的style屬性定義樣式
  • 屬性值為0的省略單位
  • 塊內(nèi)容縮進
  • 屬性名冒號后添加一個空格
  • 選擇器與{之間添加一個空格
  • >``+``~選擇器的兩邊各保留一個空格
  • 屬性定義后必須以分號結(jié)尾
  • 可以使用縮寫的情況下享钞,盡量使用屬性縮寫
  • 當元素需要撐起高度以包含內(nèi)部的浮動元素時揍诽,通過對偽類設(shè)置clear或觸發(fā)BFC的方式進行clearfix。盡量不使用添加空標簽的方式栗竖。
  • 參考
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末暑脆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子狐肢,更是在濱河造成了極大的恐慌添吗,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件份名,死亡現(xiàn)場離奇詭異碟联,居然都是意外死亡妓美,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進店門鲤孵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壶栋,“玉大人,你說我怎么就攤上這事普监」笫裕” “怎么了?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵凯正,是天一觀的道長毙玻。 經(jīng)常有香客問我,道長廊散,這世上最難降的妖魔是什么桑滩? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮奸汇,結(jié)果婚禮上施符,老公的妹妹穿的比我還像新娘。我一直安慰自己擂找,他們只是感情好戳吝,可當我...
    茶點故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著贯涎,像睡著了一般听哭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上塘雳,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天陆盘,我揣著相機與錄音,去河邊找鬼败明。 笑死隘马,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的妻顶。 我是一名探鬼主播酸员,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼讳嘱!你這毒婦竟也來了幔嗦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤沥潭,失蹤者是張志新(化名)和其女友劉穎邀泉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡汇恤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年庞钢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屁置。...
    茶點故事閱讀 38,637評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡焊夸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蓝角,到底是詐尸還是另有隱情阱穗,我是刑警寧澤,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布使鹅,位于F島的核電站揪阶,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏患朱。R本人自食惡果不足惜鲁僚,卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望裁厅。 院中可真熱鬧冰沙,春花似錦、人聲如沸执虹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽袋励。三九已至侥啤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間茬故,已是汗流浹背盖灸。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留磺芭,地道東北人赁炎。 一個月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像钾腺,于是被迫代替她去往敵國和親甘邀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,500評論 2 348

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

  • 1.CSS簡介 CSS 的全稱是Cascading Style Sheets垮庐,層疊樣式表 2.CSS的引入方式 內(nèi)...
    毛毛獨角獸閱讀 322評論 0 0
  • CSS的全稱是什么? CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定...
    饑人谷_全閱讀 438評論 0 1
  • 一、css是什么坞琴? CSS全稱是Cascading Style Sheets哨查,簡寫為CSS,稱作:層疊樣式表剧辐,又稱...
    青鳴閱讀 818評論 0 1
  • 1寒亥、CSS全稱是什么邮府? CSS全稱是Cascading Style Sheets,意思是層疊樣式表溉奕,我們?nèi)绻陆ㄒ?..
    李博洋li閱讀 265評論 0 1
  • 七個習(xí)慣簽到20171024 【一褂傀、上周行動】 房產(chǎn)官司跟進 深圳戶口持續(xù)推進 確定四季度計劃,考慮明年規(guī)劃 公司...
    白洲筆記閱讀 183評論 0 0