css學習筆記(一)

2021-07-12 01:59:10 字數 4266 閱讀 4163

1.群組選擇器  如:p, body, img, div{}

2.兄弟選擇器  如:p + p

3.屬性選擇器  如: p[title]

4.包含(後代)選擇器  如:body ul li{}

5.子元素選擇器 如:div > p{}

6.id選擇器  如:#mydiv{}

7.類選擇器  如:.class1{}

8.偽元素選擇器  如:e:first-line,e:before

9.偽類選擇器  如:e:first-child ,e:visited,e:focus,e:enabled

10.標籤選擇器  如:p

子選擇器和後代選擇器的區別:

全選

複製放進筆記

1)link屬於xhtml標籤,而@import是css提供的;

2)頁面被載入的時,link會同時被載入,而@import引用的css會等到頁面被載入完再載入;

3)@import只在ie5以上才能識別,而link是xhtml標籤,無相容問題;

4)link方式的樣式的權重 高於@import的權重.

1、和其他元素都在一行上;

2、元素的高度、寬度、行高及頂部和底部邊距不可設定;

3、元素的寬度就是它包含的文字或的寬度,不可改變。

行內元素在設定 水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果,但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(真霸道,乙個塊級元素獨佔一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

在html中,、、、、就是典型的行內元素(inline)元素。

塊級元素是可以設定寬高的,但是它的實際寬高是本身寬高+padding。block元素要單獨佔一行。內聯元素不單獨佔一行,給他設定寬高是沒有用的。

知名的空元素:

鮮為人知的是:

em為相對長度單位,相對於當前物件內文字的字型尺寸(font-size)。比如:web頁面中body的文字大小在使用者瀏覽器下預設渲染是16px,所以,此時的1em = 16px;

英吋(inches)。絕對長度單位。

1

in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

點(points)。絕對長度單位。

1

in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

標籤呈現小號字型效果。

`` 標籤和 `` 標籤一樣,用於強調文字,但它強調的程度更強一些。

`em` 是 斜體強調標籤,更強烈強調,表示內容的強調點。相當於html元素中的 `...i>`;

`< b >

< i >` 是視覺要素,分別表示無意義的加粗,無意義的斜體。

em 和 strong 是表達要素(phrase elements)。

b 元素現在描述為在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文字。

i 元素現在描述為在普通文章中突出不同意見或語氣或其他的一段文字,

例如:乙個分類名稱,乙個技術術語,乙個外語中的諺語,乙個想法等。或者代表斜體的排版方式。

度(degress)。乙個圓共360度

90deg = 100grad = 0.25turn

梯度(gradians)。乙個圓共400梯度

90deg = 100grad = 0.25turn

轉、圈(turns)。乙個圓共1圈

90deg = 100grad = 0.25turn

弧度(radians)。乙個圓共2π弧度

90deg = 100grad = 0.25turn

乙個class值中可能包含乙個詞列表,各個詞之間用空格分隔。例如,如果希望將乙個特定的元素同時標記為重要(important)和警告(warning),就可以寫作:

class="important warning">

this paragraph is a very important warning.

對於id來說,就不能這樣寫了

元素透明度時常是個惱人的問題,下面這種方式可以實現所有瀏覽器下的透明度設定:

.transparent

zoom屬性是ie瀏覽器的專有屬性,firefox等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動、清除margin的重疊等。

當乙個元素的haslayout屬性值為true時,我們說這個元素有乙個布局(layout)

定義和用法

float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在css中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定乙個明確的寬度;否則,它們會盡可能地窄。

注釋:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

使用浮動(float)的乙個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素,那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景,這個問題會很難被注意到

塌陷的直觀對立面更不好,看看下面的情況:

如果你很明確的知道接下來的元素會是什麼,可以使用clear:both; 來清除浮動。這個方法很不錯,它不需要hack,不新增額外的元素也使得它有良好的語義性。

使用css 偽選擇符(:after)來清除浮動:

全選

複製 放進筆記

.clearfix

:after

text-indent屬性規定文字塊中首行文字的縮排。

注釋:允許使用負值。如果使用負值,那麼首行會被縮排到左邊。使用乙個較大的負值進行縮排的話,文字將被隱藏,如-9999em

letter-spacing屬性與word-spacing的區別在於,前者是修改字母的間隔,後者是修改單詞或單個文字的間隔

text-transform屬性處理文字的大小寫。這個屬性有 4 個值:

none

uppercase:所有的單詞都大寫

lowercase:所有的單詞都小寫

capitalize:只對每個單詞的首字母大寫

text-decoration有 5 個值:

none

underline:下劃線

overline:上劃線

line-through:在文字中間畫乙個貫穿線

blink:讓文字閃爍

pre-line     合併空白符序列,但保留換行符 

normal

nowrap 防止元素中的文字換行

pre 空白符不會被忽略

pre-wrap 保留空白符序列

CSS學習筆記一

css是cascading style sheets 層疊樣式表 的縮寫。是一種對web文件新增樣式的簡單機制,屬於表現層的布局語言。然後在樣式表裡這樣定義 menubar 其中 menubar 是你自己定義的id名稱。注意在前面加 號。id選擇器也同樣支援派生,例如 menubar p 這個方法主...

CSS學習筆記 一

什麼是文件流?對乙個網頁而言,body 元素下的任意元素,根據其前後順序,組成乙個個上下關係,這便是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁之中的位置。文件流是瀏覽器的預設顯示規則。什麼是浮動?float具有屬性值 left right none 當設定了 float 屬性後,浮動元素會被移...

css學習筆記(一)

一 css樣式表基礎 1,css基本概念 css cascading style sheet 即層疊樣式表,簡稱樣式表,要理解樣式表的概念先要理解樣式的概念,樣式是對網頁中的元素 字型,段落影象,列表等 屬性的整體概括,即描述所有網頁物件的顯示形式 例如文字的大小,字型,背景及影象的顏色,大小等都是...