慕課網的HTML和CSS學習。 一

2021-07-01 23:51:01 字數 2057 閱讀 7255

1、如果top、right、bottom、left的值相同,如下面**:

margin:10px 10px 10px 10px;

可縮寫為:

margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面**:

margin:10px 20px 10px 20px;
可縮寫為:

margin:10px 20px;
3、如果left和right的值相同,如下面**:

margin:10px 20px 30px 20px;
可縮寫為:

margin:10px 20px 30px;
padding、border的縮寫方法和margin是一致的。

關於顏色的css樣式也是可以縮寫的,當你設定的顏色是16進製制的色彩值時,如果每兩位的值相同,可以縮寫一半。

例子1:

p

可以縮寫為:

p
例子2:

p
可以縮寫為:

p
網頁中的字型css樣式**也有他自己的縮寫方式,下面是給網頁設定字型的**:

body
這麼多行的**其實可以縮寫為一句:

body
注意:

1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用預設值。

2、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

一般情況下因為對於中文**,英文還是比較少的,所以下面縮寫**比較常用:

body
只是有字型大小、行間距、中文字型、英文本型設定。

顏色

1、英文命令顏色

前面幾個小節中經常用到的就是這種設定方法:

p

2、rgb顏色

這個與 photoshop 中的 rgb 顏色是一致的,由 r(red)、g(green)、b(blue) 三種顏色的比例來配色。

p
每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。如:

p
3、十六進製制顏色

這種顏色設定方法是現在比較普遍使用的方法,其原理其實也是 rgb 設定,但是其每一項的值由 0-255 變成了十六進製制 00-ff。

p
長度單位總結一下,目前比較常用到px(畫素)、em、% 百分比,要注意其實這三種單位都是相對單位。

1、畫素

畫素為什麼是相對單位呢?因為畫素指的是顯示器上的小點(css規範中假設「90畫素=1英吋」)。實際情況是瀏覽器會使用顯示器的實際畫素值有關,在目前大多數的設計者都傾向於使用畫素(px)作為單位。

2、em

就是本元素給定字型的 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px。如下**:

p

上面**就是可以實現段落首行縮排 24px(也就是兩個字型大小的距離)。

下面注意乙個特殊情況:

但當給 font-size 設定單位為 em 時,此時計算的標準以 p 的父元素的 font-size 為基礎。如下**:

html:

以這個例子為例。

css:

p

span

結果 span 中的字型「例子」字型大小就為 11.2px(14 * 0.8 = 11.2px)。

3、百分比

p
設定行高(行間距)為字型的130%(12 * 1.3 = 15.6px)。

好啦 今天下午就啃這麼多。吃飯去了。晚上回來啃完。加油。

CSS定位(慕課網學習筆記)

定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去,行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...

CSS定位(慕課網學習筆記)

定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去,行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...

CSS學習 慕課

css,為網頁設定樣式 認識css css全稱層疊樣式表。主要用於定義htm在瀏覽器中的顯示樣式,比如文字大小顏色字型等。style p style body p 你好 p body css的優勢 同時設定標籤型別相同的標籤樣式 標籤名 語法 選擇符 也就是標籤 宣告有多條時用 號隔開 英文狀態下 ...