task 6 css基礎(chǔ)

1. CSS的全稱是什么?

CSS全稱是 Cascading Style Sheets, 層疊樣式表

2. CSS有幾種引入方式? link 和@import 有什么區(qū)別?
2.1內(nèi)聯(lián)樣式

即寫在標(biāo)簽內(nèi)部的樣式

<h1 style="color: red; font-size: 20px;"></h1>
2.2內(nèi)部樣式

寫在<style></style>中的樣式

<style type="text/css">
      p{
          color: yellow;
          font-size: 30px;
       }
</style>
2.3外部樣式

用link標(biāo)簽引入css文件
<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>


用import引入樣式
<style>
  @import url("hello.css");
  @import "world.css";
</style>
2.4瀏覽器默認(rèn)樣式

例如h1~h6本身自帶樣式

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
link 和@import 有什么區(qū)別

區(qū)別1:link是XHTML標(biāo)簽艳丛,除了加載CSS外凝赛,還可以定義RSS等其他事務(wù)唯沮;@import屬于CSS范疇衫嵌,只能加載CSS肃拜。
區(qū)別2:link引用CSS時,在頁面載入時同時加載遗遵;@import需要頁面網(wǎng)頁完全載入以后加載老赤。
區(qū)別3:link是XHTML標(biāo)簽,無兼容問題枉氮;@import是在CSS2.1提出的志衍,低版本的瀏覽器不支持。
區(qū)別4:link支持使用Javascript控制DOM去改變樣式嘲恍;而@import不支持。

3.以下這幾種文件路徑分別用在什么地方雄驹,代表什么意思?
相對路徑
  • css/a.css
    當(dāng)前文件和css同級佃牛,要切換到css文件夾下的a.css文件
  • ./css/a.css
    ./代表當(dāng)前文件(夾),作用和css/a.css一樣
  • b.css
    當(dāng)前文件和b.css文件同處于一級医舆,直接切換到b.css文件俘侠。
  • ../imgs/a.png
    當(dāng)前文件上一級與imgs同處一個文件夾象缀,切換到當(dāng)前文件的上一級,然后進(jìn)入其中的imgs文件夾爷速,找到其中的a.png
絕對路徑
  • /Users/hunger/project/css/a.css
    在本地時一級一級的往下找央星,直到找到a.css。放在服務(wù)器上時會失效惫东。
網(wǎng)站路徑
4.如果我想在js.jirengu.com上展示一個圖片莉给,需要怎么操作?

圖片是網(wǎng)絡(luò)上的圖片,直接在src中添加其網(wǎng)絡(luò)地址廉沮;
如果是本地圖片颓遏,先上傳至網(wǎng)絡(luò)上,獲得網(wǎng)絡(luò)地址再添加進(jìn)src滞时。
七牛云圖床

5.列出5條以上html和 css 的書寫規(guī)范
  • 語法不區(qū)分大小寫叁幢,但建議統(tǒng)一使用小寫
  • 不使用內(nèi)聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞,分隔符建議使用-
  • 有可能就是用縮寫
  • 屬性值是0的省略單位
  • 塊內(nèi)容縮進(jìn)
  • 屬性名冒號后面添加一個空格
  • 選擇器 與 { 之間必須包含空格
  • +坪稽、>曼玩、~ 選擇器的兩邊各保留一個空格
  • 屬性定義必須另起一行
  • 屬性定義后必須以分號結(jié)尾
  • 如無必要,不得為 id窒百、class 選擇器添加類型選擇器進(jìn)行限定
  • 同一 rule set 下的屬性在書寫時黍判,應(yīng)按功能進(jìn)行分組,并以 Formatting Model(布局方式贝咙、位置) > Box Model(尺寸) > Typographic(文本相關(guān)) > Visual(視覺效果) 的順序書寫样悟,以提高代碼的可讀性。

Formatting Model 相關(guān)屬性包括:position / top / right / bottom / left / float / display / overflow 等
Box Model 相關(guān)屬性包括:border / margin / padding / width / height 等
Typographic 相關(guān)屬性包括:font / line-height / text-align / word-wrap 等
Visual 相關(guān)屬性包括:background / color / transition / list-style 等
另外庭猩,如果包含 content 屬性窟她,應(yīng)放在最前面。

6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)
chrome調(diào)試.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蔼水,一起剝皮案震驚了整個濱河市震糖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌趴腋,老刑警劉巖吊说,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異优炬,居然都是意外死亡颁井,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門蠢护,熙熙樓的掌柜王于貴愁眉苦臉地迎上來雅宾,“玉大人,你說我怎么就攤上這事葵硕∶继В” “怎么了贯吓?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蜀变。 經(jīng)常有香客問我悄谐,道長,這世上最難降的妖魔是什么库北? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任爬舰,我火速辦了婚禮,結(jié)果婚禮上贤惯,老公的妹妹穿的比我還像新娘洼专。我一直安慰自己,他們只是感情好孵构,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布屁商。 她就那樣靜靜地躺著,像睡著了一般颈墅。 火紅的嫁衣襯著肌膚如雪蜡镶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天恤筛,我揣著相機與錄音官还,去河邊找鬼。 笑死毒坛,一個胖子當(dāng)著我的面吹牛望伦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播煎殷,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼屯伞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了豪直?” 一聲冷哼從身側(cè)響起劣摇,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎弓乙,沒想到半個月后末融,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡暇韧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年勾习,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片懈玻。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡巧婶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情粹舵,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布骂倘,位于F島的核電站眼滤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏历涝。R本人自食惡果不足惜诅需,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荧库。 院中可真熱鬧堰塌,春花似錦、人聲如沸分衫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚪战。三九已至牵现,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間邀桑,已是汗流浹背瞎疼。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留壁畸,地道東北人贼急。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像捏萍,于是被迫代替她去往敵國和親太抓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案照弥? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,737評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理腻异,服務(wù)發(fā)現(xiàn),斷路器这揣,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 2017—05-26 揚帆作文 編號0004 【材料】一位從沿夯诔#回來的朋友準(zhǔn)備到內(nèi)地投資,重點考察A城和B城给赞。在...
    夢海揚帆閱讀 1,692評論 0 5
  • 要么跑机打!要么死!他用生命和死神賽跑片迅,活不過20歲的魔咒残邀,希望他能打破! 2017-04-12 跑下去的理由 就是為...
    家春秋霧雨電閱讀 198評論 0 0
  • 記錄自己第一次在知乎上回答問題驱闷。鏈接http://www.zhihu.com/question/24048128/...
    cheny閱讀 895評論 0 1