注意點:
- style標簽必須寫在head標簽的開始標簽和結束標簽之間(也就是必須和title標簽是兄弟關系)
- style標簽中的type屬性其實可以不用寫, 默認就是type="text/css"
- 設置樣式時必須按照固定的格式來設置. key: value;其中:不能省略, 分號大多數情況下也不能省略(當有多個屬性時, 最后一個可以省略)
CSS常見屬性
文字屬性
font-style
- 作用: 規定文字樣式
- 格式: font-style: italic;
- 取值:
- normal ： 正常的， 默認就是正常的
- italic : 傾斜的
- 快捷鍵:
- fs font-style: italic;
- fsn font-style: normal;
font-weight
作用: 規定文字粗細
格式: font-weight: bold;
取值:
單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細線， 默認就是細線數字取值：
100-900之間整百的數字快捷鍵
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
font-size
- 作用: 規定文字大小
- 格式: font-size: 30px;
- 取值: px(像素 pixel)
- 快捷鍵
- fz font-size:;
- fz30 font-size: 30px;
font-family
- 作用: 規定文字字體
- 格式: font-family:"楷體";
- 取值: 各種字體名稱
- 快捷鍵:
- ff font-family:;
- 注意點:
- 如果取值是中文， 需要用雙引號或者單引號括起來
- 設置的字體必須是用戶電腦里面已經安裝的字體
字體屬性補充
如果設置的字體不存在, 那么系統會使用默認的字體來顯示
默認一般使用宋體
如果設置的字體不存在, 而我們又不想用默認的字體來顯示怎么辦?
可以給字體設置備選方案
格式:font-family:"字體1", "備選方案1", ...;
如果想給中文和英文分別單獨設置字體, 怎么辦?
但凡是中文字體, 里面都包含了英文
但凡是英文字體, 里面都沒有包含中文
也就是說中文字體可以處理英文, 而英文字體不能處理中文
注意點: 如果想給界面中的英文單獨設置字體, 那么英文的字體必須寫在中文的前面
補充在企業開發中最常見的字體有以下幾個
中文: 宋體/黑體/微軟雅黑
英文: "Times New Roman"/Arial
還需要知道一點, 就是并不是名稱是英文就一定是英文字體,因為中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
文字屬性縮寫
- 縮寫格式:
- 例如:
注意點:
在這種縮寫格式中有的屬性值可以省略
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
- 作用: 設置文本水平對齊方式
- 格式: text-align: center;
- 取值:
- left 左
- right 右
- center 中
- 快捷鍵:
- ta text-align: left;
- tar text-align: right;
- tac text-align: center;
text-indent
- 作用: 設置文本縮進
- 格式: text-indent: 2em;
- 取值: 2em, 其中em是單位, 一個em代表縮進一個文字的寬度
- 快捷鍵:
- ti text-indent:;
- ti2e text-indent: 2em;
在CSS中如何通過color屬性來修改文字顏色
格式: color: 值;
取值:
英文單詞
一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達
rgb
- rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色)
- 格式: rgb(0,0,0)
- 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度
- 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度
- 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度
- 這其中的每一個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮
rgba
- rgba中的rgb和前面講解的一樣, 只不過多了一個a.
- a代表透明度, 取值是0-1, 取值越小就越透明
- 例如:
十六進制
通過十六進制來表示顏色其實本質就是RGB
十六進制中是通過每兩位表示一個顏色
例如: #FFEE00 FF表示R EE表示G 00表示B
什么是十六進制?
十六進制和十進制一樣都是一種計數的方式
在十進制中取值范圍0-9, 逢十進一
在十六進制中取值范圍0-F, 逢十六進一
- 十六進制和十進制轉換的公式
- 用十六進制的第一位*16 + 十六進制的第二位 = 十進制
十六進制縮寫
在CSS中只要十六進制的顏色每兩位的值都是一樣的, 那么就可以簡寫為一位
例如: #FFEE00 == #FE0
注意點:
1.如果當前顏色對應的兩位數字不一樣, 那么就不能簡寫
123456;2.如果兩位相同的數字不是屬于同一個顏色的, 也不能簡寫
122334
