CSS基礎筆記

css基礎語法

ø css中的方向 --- 順時針方向

ø 自定義元素屬性之前很重要的一點是清楚系統預設的屬性，比如清楚系統預設的內邊距和外邊距。

ø 繼承關係：子區域繼承父區域的樣式，同時，子區域也可以對父區域的樣式進行重寫，或者說覆蓋。

ø 選擇器：不同的選擇器修飾於同一元素，按照優先順序，選擇器依次是id選擇器，類選擇器，標籤選擇器。除了三大主流**擇器之外，還有一些旁門左道選擇器。比如為了精確選擇而誕生的後代選擇器，為了精簡**而誕生的群組選擇器，以及廣泛使用的偽類選擇器和偽元素選擇器。

css3常用的屬性

ø 文字和字型

a. 字型顏色 --- color，包括字面值模式red和rgb模式#fff

b. 字型粗細 --- font-weight，包括normal和bold

c. 字型大小 --- font-size，包括絕對大小px和相對大小em

d. 段落縮排 --- text-indent，單位推薦用em不要用px

e. 字型的樣式 --- font-style。

f. 行高 --- line-height，瀏覽器預設的行高比較小，大段文字顯得比較密集。需要重新調整。可以使用畫素px也可以使用相對於瀏覽器預設行高的百分比，比如150%，表示現在的行高是瀏覽器預設行高的1.5倍。行高的一大用處就是設定內容垂直居中。操作是使得行高等於段落或者標題的高度。height:100px; line-height:100px;

ø 邊框和背景（適用於區塊或者）

1) 邊框設定需要設定邊框線寬度，邊框線型，邊框顏色。三者缺一不可。比如

border:2px dotted #fff。

2) 可以給邊框設定圓角，border-radius:5%，當百分數達到50%時就變成了乙個圓。當然圓角半徑也可以用絕對值px表示。

3) 邊框的另一種用法就是分割線border-left，left-right，left-top，left-bottom。

4) 可以使用背景當background:url(picture.png)，如果螢幕尺寸遠遠大於尺寸，可以放置不止一張，如果不設定background-repeat，那麼會鋪滿螢幕。

ø 元素定位

1) css中存在兩類元素:行內元素和塊狀元素。如p就是乙個塊狀元素而span是乙個行內元素。可以設定背景色來觀察它們之間的區別：對自身需求空間是不一樣的。塊級元素和行內元素可以相互轉化，途徑是display。display:inline，將塊級元素轉化成行內元素，display:block將行內元素轉換塊級元素。塊級元素可以包含行內元素，可是行內元素不可以包含塊級元素。可以給塊級元素設定行高和列寬，可是不能給行內元素設定寬度而只能設定高度。

2) 元素的浮動特性。float:left。浮動後，塊級元素不在獨佔一行而是依次排列。

3) 絕對定位和相對定位。相對定位是說元素的位置根據上下文的位置的變化而變化。塊級元素預設情況下是相對定位relative。絕對定位是指相對于父元素而定位的元素。絕對定位的元素有可能會和其它元素發生重疊。這是需要注意的。需要說明：top，button，left，right都是絕對定位，因為它們都是相對于父元素而言的。

ø 盒子模型

元素中的內容的定位和元素的定位是不同。房子的location和房子中的一張桌子的location是兩個不同層次的文字。一大一小，一內一外。margin---外邊距，元素和元素之間的間距。

padding---內邊距，元素內部的內容和元素邊界之間的距離。border元素邊界的厚度，好比城牆的厚度。這裡涉及到了乙個概念上的歧義：我們本意是給乙個元素設定高度和寬度，但是實際不是。實際是我們給元素中的內容設定了高度和寬度，真實的高度和寬度還要加上內邊距和邊框的厚度。事與願違！解決方法是box-size:border-box;加上內邊距和邊框厚度之後的盒子尺寸。系統預設是content-box，沒有把內邊距和邊框厚度算進去。這個細節需要注意。

ø 列表的橫向排放

橫向擺放時需要注意的問題，其中之一就是列表項的絕對大小px螢幕的縮放問題，螢幕縮放時，列表如何存在？最好是採用相對大小%，而且計算好條目之間的間距，尤其是去除最右側的間距。涉及到偽類選擇器li:last-child，最後一點就是設定最小寬度min-width，放置螢幕縮放過小時出現文字擠壓問題。

ø 陰影效果

text-shadow: x方向上的位移，y方向上的位移，陰影的模糊程度，rgba(顏色和透明度)。

在陰影運用上，注意精細淺淡才唯美。

CSS基礎筆記

css 基礎筆記

CSS 基礎筆記

CSS基礎筆記

CSS基礎筆記

css 基礎筆記

CSS 基礎筆記

CSS基礎筆記

相關推薦