格式:font-style: italic;
取值:
normal : 正常的, 預設就是正常的
italic : 傾斜的
fs font-style: italic;
fsn font-style: normal;
格式: font-weight: bold;
單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細線, 預設就是細線
數字取值:100-900之間整百的數字
快捷鍵
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
格式:font-size: 30px;
單位:px(畫素 pixel)
注意點: 通過font-size設定大小一定要帶單位, 也就是一定要寫px
快捷鍵
fz font-size:;
fz30 font-size: 30px;
格式:font-family:"楷體";
注意點:
1.如果取值是中文, 需要用雙引號或者單引號括起來
2.設定的字型必須是使用者電腦裡面已經安裝的字型
快捷鍵
ff font-family:;
**1.如果設定的字型不存在, 那麼系統會使用預設的字型來顯示
預設使用宋體**
**2.如果設定的字型不存在, 而我們又不想用預設的字型來顯示怎麼辦?
可以給字型設定備選方案**
格式:font-family:"字型1", "備選方案1", ...;
3.如果想給中文和英文分別單獨設定字型, 怎麼辦?
但凡是中文字型, 裡面都包含了英文
但凡是英文本型, 裡面都沒有包含中文
也就是說中文字型可以處理英文, 而英文本型不能處理中文
注意點: 如果想給介面中的英文單獨設定字型, 那麼英文的字型必須寫在中文的前面
中文: 宋體/黑體/微軟雅黑
英文: 「times new roman」/arial
還需要知道一點, 就是並不是名稱是英文就一定是英文本型
因為中文字型其實都有自己的英文名稱, 所以是不是中文字型主要看能不能處理中文
宋體 simsun
黑體 simhei
微軟雅黑 microsoft yahei
font: style weight size family;
例如:
font:italic bold 10px "楷體";
1.在這種縮寫格式中有的屬性值可以省略
sytle可以省略
weight可以省略
2.在這種縮寫格式中style和weight的位置可以交換
3.在這種縮寫格式中有的屬性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能順便亂放的
size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最後
格式: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: right;
取值:
left 左
right 右
center 中
快捷鍵
ta text-align: left;
tar text-align: right;
tac text-align: center;
格式: text-indent: 2em;
取值:
2em, 其中em是單位, 乙個em代表縮排乙個文字的寬度
ti text-indent:;
ti2e text-indent: 2em;
格式: color: 值;
1.1英文單詞
一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達
1.2rgb
rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色)
格式: rgb(0,0,0)
那麼這個格式中的
第乙個數字就是用來設定三原色的光源元件紅色顯示的亮度
第二個數字就是用來設定三原色的光源元件綠色顯示的亮度
第三個數字就是用來設定三原色的光源元件藍色顯示的亮度
這其中的每乙個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮
紅色: rgb(255,0,0);
綠色: rgb(0,255,0);
藍色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
在前端開發中其實並不常用黑色
只要讓紅色/綠色/藍色的值都一樣就是灰色
而且如果這三個值越小那麼就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
1.3rgba
rgba中的rgb和前面講解的一樣, 只不過多了乙個a
那麼這個a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
1.4十六進製制
在前端開發中通過十六進製制來表示顏色, 其實本質就是rgb
十六進製制中是通過每兩位表示乙個顏色
例如: #ffee00 ff表示r ee表示g 00表示b
什麼是十六進製制?
十六進製制和十進位制一樣都是一種計數的方式
在十進位制中取值範圍0-9, 逢十進一
在十六進製制中取值範圍0-f, 逢十六進一
9 a 10
b 11
c 12
d 13
e 14
f 15
10 16
11 17
12 18
十六進製制和十進位制轉換的公式
用十六進製制的第一位*16 + 十六進製制的第二位 = 十進位制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
ff == f*16 + f == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0
1.5十六進製制縮寫
在css中只要十六進製制的顏色每兩位的值都是一樣的, 那麼就可以簡寫為一位
例如:
#ffee00 == #fe0
注意點:
1.如果當前顏色對應的兩位數字不一樣, 那麼就不能簡寫
#123456;
2.如果兩位相同的數字不是屬於同乙個顏色的, 也不能簡寫
#122334
HTML入門學習筆記 CSS浮動 7
在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等,所以在企業開發中,編寫 之前第一件事情就是清空缺省的邊距 格式 實際開發中不推薦使用這種格式 萬用字元選擇器會找導 遍歷 當前介面中所有的標籤,所以效能不好 企業開發中可以從這個 中拷貝 yui css reset 在css中所有的行都有自己...
HTML入門學習筆記 CSS定位 8
1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位 相對定位就是相對於自己以前在標準流中的位置來移動 3.1相對定位是不脫離標準流的,會繼續在標準流中占用乙份空間 3.2在相對定位中同乙個方向上的定位屬性只能使用乙個 3.3由於相對定位是不脫離標準流的,所以在相對定位中是區分塊級元素 行...
HTML學習筆記之CSS屬性設定(一)
一.設定字型樣式 1.字型屬性 1 font family 字型系列 本屬性描述了用何種字型系列來顯示文字,可以為文字指定一種或多種字型,屬性值為用逗號分隔的字型名稱列表。例如 p 瀏覽器會使用列表中的第乙個字型,這裡是new century schoolbook字型。如果作業系統未安裝該字型,則瀏...