** 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中展示圖片
- 上傳到圖床得到圖片鏈接卿堂,使用網(wǎng)絡(luò)路徑束莫。
- 在網(wǎng)上找到圖片和圖片鏈接,使用網(wǎng)絡(luò)路徑草描。
- 把圖片上傳到服務(wù)器中麦箍,使用相對路勁。
HTML 和 CSS的書寫規(guī)范
HTML
-
id
和class
使用有意義的單詞陶珠,單詞之間的分隔符建議使用- - 盡量使用無兼容性問題的HTML標簽
- 盡可能減少div嵌套
-
img
添加alt
屬性,增加可訪問性 - 考慮并且提高代碼的可重復(fù)性
CSS
- 語法統(tǒng)一使用小寫
- 盡量不使用內(nèi)聯(lián)的
style
屬性定義樣式 - 屬性值為0的省略單位
- 塊內(nèi)容縮進
- 屬性名冒號后添加一個空格
- 選擇器與{之間添加一個空格
-
>``+``~
選擇器的兩邊各保留一個空格 - 屬性定義后必須以分號結(jié)尾
- 可以使用縮寫的情況下享钞,盡量使用屬性縮寫
- 當元素需要撐起高度以包含內(nèi)部的浮動元素時揍诽,通過對偽類設(shè)置clear或觸發(fā)BFC的方式進行clearfix。盡量不使用添加空標簽的方式栗竖。
- 參考