CSS 學習筆記

筆記比較亂，只是學習中記下的！

一、css語法基礎

css規則由二個主要部分：選擇器、一條或多條屬性宣告

例：h1 h1為選擇器，color：條件屬性

a)、選擇器的分組：

h1,h2,h3,h4,h5,h6

b)、繼承及其問題：

body

當給body設定樣式後，body下所有html標籤都有這個樣式，但是有些遊覽器不支援繼承，可以用選擇器分組來實現。

c)、派生選擇器：

li strong

通過依據元素在其位置上的上下文關係來定義樣式，可以使標記更加簡介。

根據標籤下為標籤定義樣式。

d)、id選擇器

id選擇器可以為標有特定id的html標籤指定特定的樣式。

id選擇器以#來定義。

#red #green 這個段落是紅色。這個段落是綠色。

id選擇器在每個html中只能出現一次。

e)、id選擇器建立派生選擇器

#sidebar p #sidebar h2

意思：此id下的html 標籤擁有的樣式

f)、類選擇器

類選擇器以乙個點號顯示。

.center this paragraph will also be center-aligned.

用class引用，注意：類選擇器第乙個字元不可謂數字

g)、類選擇器也可以用在派生選擇器

h)、屬性選擇器

對帶有指定的html元素設定樣式

i)、建立css

當讀到乙個樣式表時，瀏覽器會根據他來格式化html文件，插入樣式表的三種方法

1、2、

3、abcdefg

注：當乙個標籤即擁有外部樣式表、內部樣式表，以內部為準，外部為輔。

二、css樣式

（1）：背景

1、背景色

background-color:背景色

p

padding:向外延伸，增加一些內邊距。

注：不能繼承，如果乙個元素沒有指定背景色，他就是透明的。

2、背景

background-image:url路徑

p.flower

3、背景重複

background-repeat

repeat-x:水平方向重複

repeat-y:垂直方向重複

no-repeat:不允許影象在任何方向平鋪

屬性值 repeat 導致影象在水平垂直方向上都平鋪，就像以往背景影象的通常做法一樣

4、背景定位

background-position 改變影象在北京中的位置

center

topbotton

right

left

5、百分數值

background-position:50% 50%;

6、長度值

background-position:500px 200px;

7、背景關聯

background-attachment:防止當文件向下滾動，影象也向下滾動，通過這個屬性可以宣告影象相對於可視區是固定的。

background-positionbackground-positionbackground-positionbackground-position:50% 50%;background-position:50% 50%; fixed:固定的

scroll：滾動的

（2）文字

1、縮排文字

這個屬性最常見的用途是將段落的首行縮排，下面的規則會使所有段落的首行縮排 5 em：

2、水平對其

text-align:值 left、right 和 center 會導致元素中的文字分別左對齊、右對齊和居中。

justify:在兩端對齊文字中，文字行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文字在列印領域很常見。

3、字隔符

word-spacing：改變字之間的標準間隔，預設值normal與設定為0一樣。

正長度，字之間間隔增加，負長度，字之間間隔縮小。

4、字元轉換

text-transform 處理文字的大小寫

屬性：預設值 none 對文字不做任何改動，將使用源文件中的原有大小寫。顧名思義，uppercase 和 lowercase 將文字轉換為全大寫和全小寫字元。最後，capitalize 只對每個單詞的首字母大寫。

5、文字裝飾

text-decoration:

屬性：underline 會對元素加下劃線，就像 html 中的 u 元素一樣。overline 的作用恰好相反，會在文字的頂端畫乙個上劃線。值 line-through 則在文字中間畫乙個貫穿線，等價於 html 中的 s 和 strike 元素。blink 會讓文字閃爍，類似於 netscape 支援的頗招非議的 blink 標記。

none 值會關閉原本應用到乙個元素上的所有裝飾。

5、處理空白符

white-space：影響到使用者**對源文件中的空格、換行和 tab 字元的處理。

它會把所有空白符合併為乙個空格，同時忽略元素中的換行。

值 pre：瀏覽器將會注意額外的空格，甚至回車。

6、文字方向

direction：影響塊級元素中文字的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

屬性：預設值是 ltr，顯示從左到右的文字。如果顯示從右到左的文字，應使用值 rtl。

（3）字型

1、指定字型系列

如果你希望文件使用一種 sans-serif 字型，但是你並不關心是哪一種字型，以下就是乙個合適的宣告：

body

這樣使用者**就會從 sans-serif 字型系列中選擇乙個字型（如 helvetica）

2、指定字型系列

下面的例子為所有 h1 元素設定了 georgia 字型

h1

3、字型風格

p.normal p.italic p.oblique

斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文字則是正常豎直文字的乙個傾斜版本。

4、字型變形

font-variant：設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。

5、字型加粗

font-weight:bold

6、字型大小

font-size:60px

font-size:3.75em：相對於瀏覽器的預設字型大小設定相對倍數的字型

CSS 學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

CSS 學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

相關推薦