HTML入門學習筆記 CSS屬性 2

2021-07-25 21:25:55 字數 4658 閱讀 5215

格式: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字型。如果作業系統未安裝該字型,則瀏...