reamweaver的CSS面板分類

type(類型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對文字設(shè)定幾個字體，當(dāng)遇到第一個字體不能顯示的文字時會自動用系列中的第二個

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號

2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。

最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據(jù)顯示器的分辨率來確定長度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當(dāng)前小一個級別或大一個級別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個精確的數(shù)值并選取一個計量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區(qū)域內(nèi)所有字母大寫。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個單詞的第一個字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。

參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級。

2. background(背景)

background面板主要是對元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動。

參數(shù)fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個關(guān)鍵詞，那么第二個值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個值，另一個值將是 50%。

xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個值，另一個值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%

德經(jīng)第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導(dǎo)致自身的混亂。結(jié)合我親身經(jīng)歷，更容易理解這句話的意思。

有一段時間，我們天都學(xué)習(xí)10個小時，這種情況一直持續(xù)了大半個月。可是效果卻幾乎等于沒有，這段時間內(nèi)每天都會有大量的信息涌入你的腦袋，在學(xué)的那一刻，你感覺你已經(jīng)完全會了。但是過個一兩天，你卻完全不記得你到底學(xué)過些什么，像失憶了似的。

艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復(fù)練習(xí)。直到隨時隨地拿來就用的地步，你就再也不會忘記了。

為什么說少則得，多則惑呢？每天只學(xué)一點，練習(xí)好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發(fā)現(xiàn)你已經(jīng)學(xué)會了很多。每天學(xué)習(xí)很多知識點，很少時間去練習(xí)，過段時間你會發(fā)現(xiàn)你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學(xué)習(xí)一遍。徒增學(xué)習(xí)成本，也就是多則惑的道理。

好了言歸正傳，今天我們來學(xué)習(xí)html中的表格和表單，這兩個可不是一個東西哦。

表格：excel表格知道吧，橫行豎起列的那種表格。看圖：

上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標(biāo)簽來實現(xiàn)一個5行3列的表格。

上圖中table標(biāo)簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標(biāo)注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。

在瀏覽器中的效果：

和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設(shè)置的緣故，table標(biāo)簽允許你通過border屬性來設(shè)置邊框（也就是格子），那我們來給它設(shè)置一個邊框吧。

通過給table標(biāo)簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：

還是有點別扭，我腦海里面的表格應(yīng)該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現(xiàn)在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關(guān)羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標(biāo)簽的cellspacing屬性把距離去掉，試一下：

加了cellspacing="0" 屬性后，瀏覽器中的效果如下：

當(dāng)然了， table標(biāo)簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設(shè)置成20試一下：

瀏覽器中的效果：

cellspacing屬性的值應(yīng)該取多少，按照你的需求來設(shè)置就好了。

現(xiàn)在還有一個問題，我覺得每個單元格的太小了，也就是“關(guān)羽”這個格子的邊框和“關(guān)羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應(yīng)該比較美觀一點。這個需求可以通過table標(biāo)簽的cellpadding屬性來設(shè)置，其實也就是設(shè)置內(nèi)邊距，關(guān)于內(nèi)邊距的概念我們在《踏上編程之路的必經(jīng)之路之html篇三》中講解過，如果忘記的同學(xué)可以返回去看一下。

我們將cellpadding設(shè)置為10，在瀏覽器中的效果如下：

現(xiàn)在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標(biāo)簽允許你調(diào)整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標(biāo)簽的width屬性來調(diào)整表格的寬度：

調(diào)整表格的寬度為600，瀏覽器中的效果如下：

表格中的文字現(xiàn)在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標(biāo)簽的align屬性來控制：

注意文字對齊方式，是給tr標(biāo)簽（也就是table的行標(biāo)簽）設(shè)置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認(rèn)是左對齊。

設(shè)置了文字對齊方式后，瀏覽器中的效果如下：

最我們整體調(diào)整一下，我需要有邊框（border="1"，設(shè)置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設(shè)置成其它值就是有距離），內(nèi)邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統(tǒng)一都是居中對齊（table標(biāo)簽的tr標(biāo)簽上面設(shè)置align="center"）,整體設(shè)置后的代碼如下：

瀏覽器中的效果如下：

其實table標(biāo)簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學(xué)可以自己嘗試一下。

最后提醒一句，代碼中的各種標(biāo)簽和標(biāo)簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。

舉個例子：

良好的行動力，是成功的一半，動手練起來。

.定位

• 定位是一種更加高級的布局手段
• 通過定位可以將元素擺放到頁面 - 使用position屬性來設(shè)置定位可選值：
• static 默認(rèn)值，元素是靜止的沒有開啟定位
• relative 開啟元素的相對定位
• absolute 開啟元素的絕對定位
• fixed 開啟元素的固定定位
• sticky 開啟元素的粘滯定位
• 通過定位可以將元素擺放到頁面的任意位置

1.1 相對定位

• 當(dāng)元素的position屬性值設(shè)置為relative時則開啟了元素的相對定位
• 相對定位的特點：
• 1.元素開啟相對定位以后，如果不設(shè)置偏移量元素不會發(fā)生任何的變化
• 2.相對定位是參照于元素在文檔流中的位置進(jìn)行定位的
• 3.相對定位會提升元素的層級
• 4.相對定位不會使元素脫離文檔流
• 5.相對定位不會改變元素的性質(zhì)塊還是塊，行內(nèi)還是行內(nèi)

position: relative;

1.2 絕對定位

• 當(dāng)元素的position屬性值設(shè)置為absolute時，則開啟了元素的絕對定位
• 絕對定位的特點：
• 1.開啟絕對定位后，如果不設(shè)置偏移量元素的位置不會發(fā)生變化
• 2.開啟絕對定位后，元素會從文檔流中脫離
• 3.絕對定位會改變元素的性質(zhì)，行內(nèi)變成塊，塊的寬高被內(nèi)容撐開
• 4.絕對定位會使元素提升一個層級
• 5.絕對定位元素是相對于其包含塊進(jìn)行定位的
• 包含塊( containing block )
• 正常情況下：包含塊就是離當(dāng)前元素最近的祖先塊元素
• 絕對定位的包含塊:
• 包含塊就是離它最近的開啟了定位的祖先元素，如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊

position: absolute;

1.3 固定定位

• 將元素的position屬性設(shè)置為fixed則開啟了元素的固定定位
• 固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣唯一不同的是固定定位永遠(yuǎn)參照于瀏覽器的視口進(jìn)行定位固定定位的元素不會隨網(wǎng)頁的滾動條滾動
• position: fixed;

1.4 粘滯定位

• 當(dāng)元素的position屬性設(shè)置為sticky時則開啟了元素的粘滯定位
• 粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素到達(dá)某個位置時將其固定
• position: sticky;

1.5 絕對定位元素的布局

• 水平布局left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內(nèi)容區(qū)的寬度
• 當(dāng)我們開啟了絕對定位后:水平方向的布局等式就需要添加left 和 right 兩個值此時規(guī)則和之前一樣只是多添加了兩個值： 當(dāng)發(fā)生過度約束： 如果9個值中沒有 auto 則自動調(diào)整right值以使等式滿足 如果有auto，則自動調(diào)整auto的值以使等式滿足
• 可設(shè)置auto的值 margin width left right
• 因為left 和 right的值默認(rèn)是auto，所以如果不指定left和right
• 則等式不滿足時，會自動調(diào)整這兩個值
• 垂直方向布局的等式的也必須要滿足top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度

1.6 元素的層級

• 對于開啟了定位元素，可以通過z-index屬性來指定元素的層級
• z-index需要一個整數(shù)作為參數(shù)，值越大元素的層級越高
• 元素的層級越高越優(yōu)先顯示
• 如果元素的層級一樣，則優(yōu)先顯示靠下的元素
• 祖先的元素的層級再高也不會蓋住后代元素

z-index: 3;

2. 偏移量（offset）

• 當(dāng)元素開啟了定位以后，可以通過偏移量來設(shè)置元素的位置
• top 定位元素和定位位置上邊的距離
• bottom 定位元素和定位位置下邊的距離
• 定位元素垂直方向的位置由top和bottom兩個屬性來控制 通常情況下我們只會使用其中一
• top值越大，定位元素越向下移動
• bottom值越大，定位元素越向上移動
• left 定位元素和定位位置的左側(cè)距離
• right 定位元素和定位位置的右側(cè)距離
• 定位元素水平方向的位置由left和right兩個屬性控制 通常情況下只會使用一個
• left越大元素越靠右
• right越大元素越靠左

position: relative;

           left: 100px;
           top: -200px;

1. 字體

• font-face可以將服務(wù)器中的字體直接提供給用戶去使用

@font-face {
               /* 指定字體的名字 */
           font-family:'myfont' ;
           /* 服務(wù)器中字體的路徑 */
           src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
      }

1.1 字體相關(guān)樣式

• color 用來設(shè)置字體顏色
• font-size 字體的大小
• em 相當(dāng)于當(dāng)前元素的 一個font-size
• rem 相對于根元素的一個font-size
• 相關(guān)的單位
• font-family 字體族（字體的格式）可選值：
• 指定字體的類別，瀏覽器會自動使用該類別下的字體
• serif 襯線字體
• sans-serif 非襯線字體
• monospace 等寬字體
• font-family 可以同時指定多個字體，多個字體間使用,隔開字體生效時優(yōu)先使用第一個，第一個無法使用則使用第二個 以此類推

Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"B8BF53",sans-serif

font-family: 'Courier New', Courier, monospace;

2. 圖標(biāo)字體

• 在網(wǎng)頁中經(jīng)常需要使用一些圖標(biāo)，可以通過圖片來引入圖標(biāo)但是圖片大小本身比較大，并且非常的不靈活
• 所以在使用圖標(biāo)時，我們還可以將圖標(biāo)直接設(shè)置為字體，然后通過font-face的形式來對字體進(jìn)行引入
• 這樣我們就可以通過使用字體的形式來使用圖標(biāo)
• fontawesome 使用步驟
• 1.下載 https://fontawesome.com/
• 2.解壓
• 3.將css和webfonts移動到項目中
• 4.將all.css引入到網(wǎng)頁中
• 5.使用圖標(biāo)字體 - 直接通過類名來使用圖標(biāo)字體 class="fas fa-bell" class="fab fa-accessible-icon"
• 通過偽元素來設(shè)置圖標(biāo)字體
• 1.找到要設(shè)置圖標(biāo)的元素通過before或after選中
• 2.在content中設(shè)置字體的編碼
• 3.設(shè)置字體的樣式

fab
  font-family: 'Font Awesome 5 Brands';

fas
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;

<i class="fas fa-cat"></i>

通過實體來使用圖標(biāo)字體：
          &#x圖標(biāo)的編碼;
<span class="fas">?</span>

3. 行高

• 可以將行高設(shè)置為和高度一樣的值，使單行文字在一個元素中垂直居中

line-height: 200px;

• 行高指的是文字占有的實際高度
• 行間距 = 行高 - 字體大小
• 也可以直接為行高設(shè)置一個整數(shù)
• 如果是一個整數(shù)的話，行高將會是字體的指定的倍數(shù)
• 可以通過line-height來設(shè)置行高
• 行高可以直接指定一個大小（px em）
• 行高經(jīng)常還用來設(shè)置文字的行間距
• 字體框
• 字體框就是字體存在的格子，設(shè)置font-size實際上就是在設(shè)置字體框的高度
• 行高會在字體框的上下平均分配

/* line-height: 1.33; */
           /* line-height: 1; */
           /* line-height: 10 */

4. 字體屬性

• font 可以設(shè)置字體相關(guān)的所有屬性
• font: 字體大小/行高 字體族
• 行高 可以省略不寫 如果不寫使用默認(rèn)值
• 語法：

font: 50px/2 微軟雅黑, 'Times New Roman', Times, serif;

• font-weight 字重 字體的加粗
• normal 默認(rèn)值 不加粗
• bold 加粗
• 100-900 九個級別（沒什么用）
• 可選值：

• font-style 字體的風(fēng)格
• normal 正常的
• italic 斜體

font-weight: bold;
font-weight: 500;
font-style: italic;

5. 文本樣式

• text-align 文本的水平對齊
• left 左側(cè)對齊
• right 右對齊
• center 居中對齊
• justify 兩端對齊
• 可選值：

text-align: justify;

• vertical-align 設(shè)置元素垂直對齊的方式
• baseline 默認(rèn)值 基線對齊
• top 頂部對齊
• bottom 底部對齊
• middle 居中對齊
• 可選值：

vertical-align:baseline;

• text-decoration 設(shè)置文本修飾
• none 什么都沒有
• underline 下劃線
• line-through 刪除線
• overline 上劃線
• 可選值：

text-decoration: overline;

• white-space 設(shè)置網(wǎng)頁如何處理空白
• normal 正常
• nowrap 不換行
• pre 保留空白
• 可選值：

white-space: nowrap;