css(cascading style sheets)
css通常稱為css樣式表或層疊樣式表(級聯樣式表),主要用於設定html頁面中的文字內容(字型、大小、對齊方式等)、的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
使用html時,需要遵從一定的規範。
1.選擇器用於指定css樣式作用的html物件,花括號內是對該物件設定的具體樣式。
2.屬性和屬性值以「鍵值對」的形式出現。
3.屬性是對指定的物件設定的樣式屬性,例如字型大小、文字顏色等。
4.屬性和屬性值之間用英文「:」連線。
5.多個「鍵值對」之間用英文「;」進行區分。
可以用段落 和 **的對齊的演示。
font-size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。
font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文字的字型設定為微軟雅黑,可以使用如下css樣式**:
p可以同時指定多個字型,中間以逗號隔開,表示如果瀏覽器不支援第乙個字型,則會嘗試下乙個,直到找到合適的字型。
常用技巧:
現在網頁中普遍使用14px+。
盡量使用偶數的數字字型大小。ie6等老式瀏覽器支援奇數會有bug。
各種字型之間必須使用英文狀態下的逗號隔開。
中文字型需要加英文狀態下的引號,英文本型一般不需要加引號。當需要設定英文本型時,英文本型名必須位於中文字型名之前。
如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font-family: 「times new roman」;。
盡量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示。
在 css 中設定字型名稱,直接寫中文是可以的。但是在檔案編碼(gb2312、utf-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。
方案一: 你可以使用英文來替代。 比如 font-family:「microsoft yahei」。
方案二: 在 css 直接使用 unicode 編碼來寫字型名稱可以避免這些錯誤。使用 unicode 寫中文字型名稱,瀏覽器是可以正確的解析的。
字型名稱
英文名稱
unicode 編碼
宋體simsun
\5b8b\4f53
新宋體nsimsun
\65b0\5b8b\4f53
黑體simhei
\9ed1\4f53
微軟雅黑
microsoft yahei
\5fae\8f6f\96c5\9ed1
楷體_gb2312
kaiti_gb2312
\6977\4f53_gb2312
隸書lisu
\96b6\4e66
幼園youyuan
\5e7c\5706
華文細黑
stxihei
\534e\6587\7ec6\9ed1
細明體mingliu
\7ec6\660e\4f53
新細明體
pmingliu
\65b0\7ec6\660e\4f53
字型加粗除了用 b 和 strong 標籤之外,可以使用css 來實現,但是css 是沒有語義的。
font-weight屬性用於定義字型的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。
字型傾斜除了用 i 和 em 標籤之外,可以使用css 來實現。
font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其可用屬性值如下:
normal:預設值,瀏覽器會顯示標準的字型樣式。
italic:瀏覽器會顯示斜體的字型樣式。
oblique:瀏覽器會顯示傾斜的字型樣式。
小技巧:
平時我們很少給文字加斜體,反而喜歡給斜體標籤(em,i)改為普通模式。
font屬性用於對字型樣式進行綜合設定,其基本語法格式如下:
選擇器要想將css樣式應用於特定的html元素,首先需要找到該目標元素。在css中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。
快速分組
這就用到基礎選擇器組:
標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。其基本語法格式如下:
標籤名 或者
元素名
標籤選擇器最大的優點是能快速為頁面中同型別的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。
類選擇器使用「.」(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:
.類名
標籤呼叫的時候用 class=「類名」 即可。
類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。
命名規範: 見附件(web前端開發規範手冊.doc)
命名是我們通俗約定的,但是沒有規定必須用這些常用的命名。
我們可以給標籤指定多個類名,從而達到更多的選擇目的。
注意:樣式顯示效果跟html元素中的類名先後順序沒有關係,受css樣式書寫的上下順序有關。
各個類名中間用空格隔開。
多類名選擇器在後期布局比較複雜的情況下,還是較多使用的。
123
4
id選擇器使用「#」進行標識,後面緊跟id名,其基本語法格式如下:
#id名
該語法中,id名即為html元素的id屬性值,大多數html元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某乙個具體的元素。
用法基本和類選擇器相同。
w3c標準規定,在同乙個頁面內,不允許有相同名字的id物件出現,但是允許相同名字的class。
類選擇器(class) 好比人的名字, 是可以多次重複使用的
id選擇器 好比人的身份證號碼, 全中國是唯一的, 不得重複。 只能使用一次。
id選擇器和類選擇器最大的不同在於 使用次數上。
萬用字元選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:
*
例如下面的**,使用萬用字元選擇器定義css樣式,清除所有html標記的預設邊距。
*
注意:
這個萬用字元選擇器,就像我們的電影明星中的夢中情人, 想想它就好了,但是它不會和你過日子。
偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果, 比如可以選擇 第1個,第n個元素。
為了和我們剛才學的類選擇器相區別, 類選擇器是乙個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}
鏈結偽類選擇器a
a:hover
結構(位置)偽類選擇器(css3)li:first-child
li:last-child
li:nth-child(4)
目標偽類選擇器(css3)
:target目標偽類選擇器 :選擇器可用於選取當前活動的目標元素
:target
css規則是使用 /* 需要注釋的內容 */ 進行注釋的,即在需要注釋的內容前使用 「/*」 標記開始注釋,在內容的結尾使用 「*/」結束。
例如:
p
color屬性用於定義文字的顏色
line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。
text-align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:
left:左對齊(預設值)
right:右對齊
center:居中對齊
text-indent屬性用於設定首行文字的縮排,允許使用負值, 建議使用em作為設定單位。
letter-spacing屬性用於定義字間距,允許使用負值,預設為normal。
word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。允許使用負值,預設為normal。
word-spacing和letter-spacing均可對英文進行設定。不同的是letter-spacing定義的為字母之間的間距,而word-spacing定義的為英文單詞之間的間距。
文字顏色到了css3我們可以採取半透明的格式了語法格式如下:
color: rgba(r,g,b,a) a 是alpha 透明的意思 取值範圍 0~1之間 color: rgba(0,0,0,0.3)
以後我們可以給我們的文字新增陰影效果了 shadow 影子
text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;
sublime可以快速提高我們**的書寫方式
生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵, 就可以生成
如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div
如果有父子級關係的標籤,可以用 > 比如 ul > li就可以了
如果有兄弟關係的標籤,用 + 就可以了 比如 div+p
如果生成帶有類名或者id名字的, 直接寫 .demo 或者 #two tab 鍵就可以了
CSS樣式屬性
position用來設定元素的定位型別,有absolute 絕對定位 relative 相對定位 static 靜態定位,預設值 fixed 固定定位 四種。static 預設。位置設定為 static 的元素,它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom lef...
css樣式屬性
這個屬性設定字型名稱,如arial,tahoma,courier等。例句如下 s1演示示例 這個屬性可以設定字型的大小。字型大小的設定可以有多種方式,最常用的就是pt和px pixel 例句如下 s2演示示例 這個屬性有三個值可選 normal,italic,oblique。normal是預設值,i...
CSS 樣式屬性
標準文件流組成 塊級元素 block level 列表 獨佔一行,可設定寬高,寬度預設和父級元素相同 內聯元素 inline 水平排列,不可設定寬高,寬度根據內容而定 display 用於塊級元素和行內元素的轉化 隱藏元素 none block display none 所在的位置被清空 opaci...