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)站路徑
- /static/css/a.css
主域名下static文件夾下的css文件夾中的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
線上圖片地址
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)放在最前面。