今天的學習讓我把之前學的知識進行了乙個彙總。
1、關係:html是基礎,css為其增色。
2、工作原理:首先瀏覽器把html和css轉換成dom(文件物件模型)——把文件內容和樣式結合在一起,然後再瀏覽器上顯示dom就出現了最後的結果。
3、dom:相當於一種樹形結構,每個元素、屬性、文字都相當於乙個結點,然後把這些節點分支連線在包含這些的總元素上就構成了一棵樹。
4、css應用到html中的三種方法:
(1)外部樣式表:html是乙個檔案,css是乙個檔案,然後再html中寫上一句//相對而言最好的。如果有需要,只需改動一處,就可以把所有連線在css的html文字的內容都改寫。
(2)內部樣式表:。
(3)內聯模式://很難維護,不建議用
5、語法:選擇器
6、語句:
@import 'custom.css'; 該@-規則向當前 css 匯入其它 css 檔案
@media (min-width: 801px)
}
7、文字樣式:
(1)基於字型的改變
font:
font-style
,
font-variant
,
font-weight
,
font-stretch
,font-size
/line-height
,
.font-family(必寫):字型樣式,可自定義,也可用「楷體」的形式表示,但預設的有5種,serif,
sans-serif,
monospace,
cursive
和fantasy
,
為防止用到的字型沒有,可以並列使用
。
font-size(必寫):字型大小,盡量先設整體(body)的大小,方便以後所有的內容都以此為基準進行調整。可用px,em,rem(幾倍),%,small/big;
font-weight:字型粗細,normal/bold,lighter/bolder,也可用100-900間的整數設定粗細。
font-style:字型風格,italic(傾斜)/normal(去掉傾斜)/oblique(模擬傾斜)。
(2)基於文字的改變
color:文字顏色,可用red等表示顏色的單詞,也可用#000000表示。
text-decoration:文字裝飾,underline(下劃線)/overline(上劃線)/line-through(橫穿)/none(去除本來帶下劃線的)。
text-transform:文字轉換,uppercase(變成大寫)/lowercase(變成小寫)/capticalize(只有首字母大寫)/full-width(將所有字形轉換成固定寬度的正方形)/none。
text-shadow:為文字新增陰影,水平向右偏移距離(向左為負)+豎直向上偏移距離(向下為負)+模糊半徑+顏色(text-shadow:5px 5px 4px red;)。
text-align:文字對齊,center/right/left/justify(自適應,改變單詞間的距離,等於行寬)
line-height:行高,直接加數值1.5或其他。
CSS學習第三天
定位布局 相對定位 相對於自身的位置進行偏移position需要搭配left right top bottom position relative 絕對定位 相對於有position屬性的父元素定位,如果父元素沒有position屬性就會再向上找父元素,最後一直找到body元素 position a...
8天入門wpf 第三天 樣式
說起樣式,大家第一反應肯定是css,好的,先上一段 html ul,form body,div,th,td,li,dd,span,p,a h3,input body ulh1,h2,h4,h5,h6 imga a hover 我們知道css實現了內容與樣式的分離,既然wpf跟webform非常類似,...
CSS學習第三天 字型
指定字型 選擇器 如果讀者沒有安裝 georgia,但安裝了 times 字型 serif 字型系列中的一種字型 使用者 就可能對 h1 元素使用 times。儘管 times 與 georgia 並不完全匹配,但至少足夠接近。因此,我們建議在所有 font family 規則中都提供乙個通用字型系...