注意點:

• style標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間(也就是必須和title標(biāo)簽是兄弟關(guān)系)
• style標(biāo)簽中的type屬性其實可以不用寫, 默認(rèn)就是type="text/css"
• 設(shè)置樣式時必須按照固定的格式來設(shè)置. key: value;其中:不能省略, 分號大多數(shù)情況下也不能省略(當(dāng)有多個屬性時, 最后一個可以省略)

CSS常見屬性

文字屬性

font-style

• 作用: 規(guī)定文字樣式
• 格式: font-style: italic;
• 取值:
• normal ： 正常的， 默認(rèn)就是正常的
• italic : 傾斜的
• 快捷鍵:
  • fs font-style: italic;
  • fsn font-style: normal;

font-weight

• 作用: 規(guī)定文字粗細(xì)

• 格式: font-weight: bold;

• 取值:

• 單詞取值:

• bold 加粗

• bolder 比加粗還要粗
  lighter 細(xì)線， 默認(rèn)就是細(xì)線

• 數(shù)字取值：
  100-900之間整百的數(shù)字

• 快捷鍵

• fw font-weight:;

• fwb font-weight: bold;

• fwbr font-weight: bolder;

font-size

• 作用: 規(guī)定文字大小
• 格式: font-size: 30px;
• 取值: px(像素 pixel)
• 快捷鍵
• fz font-size:;
• fz30 font-size: 30px;

font-family

• 作用: 規(guī)定文字字體
• 格式: font-family:"楷體";
• 取值: 各種字體名稱
• 快捷鍵:
• ff font-family:;
• 注意點:
• 如果取值是中文， 需要用雙引號或者單引號括起來
• 設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體

字體屬性補(bǔ)充

• 如果設(shè)置的字體不存在, 那么系統(tǒng)會使用默認(rèn)的字體來顯示

• 默認(rèn)一般使用宋體

• 如果設(shè)置的字體不存在, 而我們又不想用默認(rèn)的字體來顯示怎么辦?

• 可以給字體設(shè)置備選方案

• 格式:font-family:"字體1", "備選方案1", ...;

• 如果想給中文和英文分別單獨設(shè)置字體, 怎么辦?

• 但凡是中文字體, 里面都包含了英文

• 但凡是英文字體, 里面都沒有包含中文

• 也就是說中文字體可以處理英文, 而英文字體不能處理中文

• 注意點: 如果想給界面中的英文單獨設(shè)置字體, 那么英文的字體必須寫在中文的前面

• 補(bǔ)充在企業(yè)開發(fā)中最常見的字體有以下幾個

• 中文: 宋體/黑體/微軟雅黑

• 英文: "Times New Roman"/Arial

• 還需要知道一點, 就是并不是名稱是英文就一定是英文字體,因為中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文

• 宋體 SimSun

• 黑體 SimHei

• 微軟雅黑 Microsoft YaHei

文字屬性縮寫

• 縮寫格式:

Paste_Image.png

• 例如:

Paste_Image.png

• 注意點:

• 在這種縮寫格式中有的屬性值可以省略

• sytle可以省略

• weight可以省略

• 在這種縮寫格式中style和weight的位置可以交換

• 在這種縮寫格式中有的屬性值是不可以省略的

• size不能省略

• family不能省略

• size和family的位置是不能順便亂放的, size一定要寫在family的前面, 而且size和
  family必須寫在所有屬性的最后

文本屬性

text-decoration

• 作用: 給文本添加裝飾
• 格式: text-decoration: underline;
• 取值:
• underline 下劃線
• line-through 刪除線
• overline 上劃線
• none 什么都沒有, 最常見的用途就是用于去掉超鏈接的下劃線
• 快捷鍵:
• td text-decoration: none;
• tdu text-decoration: underline;
• tdl text-decoration: line-through;
• tdo text-decoration: overline;

text-align

• 作用: 設(shè)置文本水平對齊方式
• 格式: text-align: center;
• 取值:
• left 左
• right 右
• center 中
• 快捷鍵:
• ta text-align: left;
• tar text-align: right;
• tac text-align: center;

text-indent

• 作用: 設(shè)置文本縮進(jìn)
• 格式: text-indent: 2em;
• 取值: 2em, 其中em是單位, 一個em代表縮進(jìn)一個文字的寬度
• 快捷鍵:
• ti text-indent:;
• ti2e text-indent: 2em;

在CSS中如何通過color屬性來修改文字顏色

• 格式: color: 值;

• 取值:

• 英文單詞

• 一般情況下常見的顏色都有對應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達(dá)

rgb

• rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色)
• 格式: rgb(0,0,0)
• 第一個數(shù)字就是用來設(shè)置三原色的光源元件紅色顯示的亮度
• 第二個數(shù)字就是用來設(shè)置三原色的光源元件綠色顯示的亮度
• 第三個數(shù)字就是用來設(shè)置三原色的光源元件藍(lán)色顯示的亮度
• 這其中的每一個數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮

Paste_Image.png

rgba

• rgba中的rgb和前面講解的一樣, 只不過多了一個a.
• a代表透明度, 取值是0-1, 取值越小就越透明
• 例如:

Paste_Image.png

十六進(jìn)制

• 通過十六進(jìn)制來表示顏色其實本質(zhì)就是RGB

• 十六進(jìn)制中是通過每兩位表示一個顏色

• 例如: #FFEE00 FF表示R EE表示G 00表示B

• 什么是十六進(jìn)制?

• 十六進(jìn)制和十進(jìn)制一樣都是一種計數(shù)的方式

• 在十進(jìn)制中取值范圍0-9, 逢十進(jìn)一

• 在十六進(jìn)制中取值范圍0-F, 逢十六進(jìn)一

Paste_Image.png

• 十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
• 用十六進(jìn)制的第一位*16 + 十六進(jìn)制的第二位 = 十進(jìn)制

Paste_Image.png

十六進(jìn)制縮寫

• 在CSS中只要十六進(jìn)制的顏色每兩位的值都是一樣的, 那么就可以簡寫為一位

• 例如: #FFEE00 == #FE0

• 注意點:

• 1.如果當(dāng)前顏色對應(yīng)的兩位數(shù)字不一樣, 那么就不能簡寫
  123456;

• 2.如果兩位相同的數(shù)字不是屬于同一個顏色的, 也不能簡寫
  122334