CSS 類型(type)、背景(background)

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴展)

共八個部分

1. type(類型)

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

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

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

字體或后面的字體顯示。

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

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

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

注意：

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

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

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

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

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

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

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

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

絕對長度單位有：

pt：磅(point)

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

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

相對長度單位有：

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

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

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

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

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

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

默認值：medium(標準大小)

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

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

默認值:normal

(4)line-height：設置文本所在行的行高。默認為normal?？梢允切袃仍?、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。

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

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

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

默認值： normal

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

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

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

默認值： none

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

normal 默認值。定義標準的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細的字符。

100

200

300

400

500

600

700

800

900

inherit 規定應該從父元素繼承字體的粗細。

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

默認值: normal

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

normal表示正常的字體, 為默認值；

默認值: normal

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

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

默認值：none

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

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

#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。

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

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

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

顏色值的縮寫:

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

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

默認值： not specified

color: transparent; 透明色

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

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

2. background(背景)

background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。

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

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

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

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

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

默認值:none

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

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

base64使用

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

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

repeat 默認值。背景圖像將在垂直方向和水平方向重復。

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

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

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

inherit 規定應該從父元素繼承background-repeat屬性的設置。

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

默認值: repeat

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

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

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

默認值: scroll

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

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

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

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

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

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規定了一個關鍵詞，那么第二個值將是"center"。

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

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

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

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

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

默認值：0% 0%

1）字體的屬性

font 屬性
font-family 屬性
font-size 屬性
font-weight 屬性
font-style 屬性

字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：

屬性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一個聲明中設置所有的字體屬性
font-family	字體名稱、inherit	設置字體類型
font-size	xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit	設置字體大小
font-weight	normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	設置字體粗細
font-style	normal、italic、oblique、inherit	設置字體風格

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        font-size: 20px;
        font-family: 隸書;
        line-height: 28px;
      }
      span {
        font: italic 16px 華文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技術</h3>
    <span
      >在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
      系統，就必須掌握 Web 前端技術。</span
    >
  </body>
</html>

顯示為，

（2）CSS 中鏈接標簽可用的偽類：

a:link
a:hover
a:active
a:visited

CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。

鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

狀態	效果
a:link	普通的、未被訪問的鏈接。
a:hover	鼠標指針位于鏈接的上方。
a:active	鏈接被單擊的時刻。
a:visited	用戶已訪問的鏈接。

針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。

狀態	顏色	背景色	文本修飾
未訪問	藍色	無	無下畫線
鼠標移到	黑色	#DDDDDD	下畫線
正單擊	紅色	#AAAAAA	刪除線
已訪問	綠色	無	無下畫線

對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">這是一個鏈接</a>
  </body>
</html>

顯示為，

為什么要按照這樣的順序來使用呢？調整幾個偽類的順序，看看會發生什么。

我們把 a:link 放到最后，效果如下：

從圖中可以發現其中的樣式屬性都被覆蓋了。

（3）列表相關的樣式屬性：

list-style 屬性
list-style-image 屬性
list-style-position 屬性
list-style-type 屬性

屬性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一個聲明中設置所有的列表屬性
list-style-image	URL、none	設置圖像為列表項標志
list-style-position	inside、outside、inherit	設置列表中列表項標志的位置
list-style-type	disc（默認）、circle、square、decimal 等	設置列表項標志的類型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

天說下CSS字體裝飾文本text-decoration, 該屬性規定添加到文本的修飾，可以給文本添加下劃線、刪除線和上劃線等。

具體的語法規則為:

div {

text-decoration:underline;

}

共有四種屬性:

none 默認值沒有裝飾線(最常用)

underline 下劃線鏈接a自帶下劃線(常用)

overline上劃線 (基本不用)

line-through 刪除線(不常用)

看下效果展示:

下劃線展示如上，對應的代碼如下:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*下劃線展示*/

div {

text-decoration: underline;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

接著是上劃線展示:

用的不多，對應的代碼如下:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*上劃線展示*/

div {

text-decoration: overline;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

當下劃線為none時，即不展示下劃線。

如果想讓帶下劃線的鏈接能跳轉但是不展示下劃線，應該怎么處理呢？

來看看效果:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*不展示下劃線*/

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

<a href="#">人保好，還是平安好呢？一個是央企，一個是巨頭</a>

</body>

</html>

需要將第二行的下劃線效果去掉，我們看下效果:

下劃線不展示了，但是可以跳轉，看下對應代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*不展示下劃線*/

a {

text-decoration: none;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

<a href="#">人保好，還是平安好呢？一個是央企，一個是巨頭</a>

</body>

</html>

最后再試下刪除線，來看下效果:

看下對應的代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*刪除線*/

div {

text-decoration: line-through;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

四種屬性都已經展示了，今天就到這里了，大家晚安~

在線咨詢

上一篇：手把手教你用Python進行Web抓取（附代碼）
下一篇：const在JavaScript中 #常量

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 類型(type)、背景(background)

您的項目需求