CSS簡介:
CSS(Cascading Style Sheets):層疊樣式表
樣式定義如何顯示 HTML 元素,樣式通常存儲在樣式表中
CSS引入方式
內聯樣式:<h1 style="color:red;></h1>
內部樣式
link與@import的區別
本質上,這兩種方式都是為了加載CSS文件,但還是存在著細微的差別
- 1.link屬于XHTML標簽,而@import完全是CSS提供的一種方式。link標簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
- 2.加載順序的差別。當一個頁面被加載的時候,link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時性能較差
- 3.兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題
- 4.使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的。
3.以下這幾種文件路徑分別用在什么地方,代表什么意思?
3.1.相對路徑
css/a.css 當前目錄下的css文件夾中的a.css
./css/a.css 當前目錄中css文件夾中的a.css文件
b.css 當前目錄下的b.css文件
../imgs/a.png 上級目錄中的imgs 文件夾中的a圖片
3.2.絕對路徑(本地文件的絕對地址)
/User/hunger/project/css/a.css 本地絕對路徑中的a.css文件
3.3.網站路徑
/static/css/a.css 網站中也可以使用相對路徑
http://cdn.jirengu.com/kejian1/8-1.png9網絡中的路徑 ??
如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?
思路:將本地圖片上傳,通過瀏覽器加載server中文件夾內的圖片
上傳完成后,當圖片所在文件夾與html展示頁面在同級目錄中時,我們可以通過相對路徑直接調用展示
比如:img src="url" alt="some_text" style="width:width;height:height;"
這里的url是對應的相對路徑
比如/images/html5.gif
如果在另外一臺服務器中:
img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
可采用網絡路徑直接引入
html和 css 的書寫規范
1.語法統一使用小寫
2.不使用內聯樣式的style元素定義樣式,建議采用外部css
3.id和class使用有區分度的單詞
4.塊內容縮進
5.屬性名:后面加一個space