css的學習一共分為兩大部分, 乙個是css的屬性, 另乙個是css選擇器. 也就是說著兩部分學完css就沒有別的東西了
1.規定文字樣式的屬性
格式：font-style: italic;
取值：normal ： 正常的， 預設就是正常的
italic : 傾斜的
快捷鍵：
fs font-style: italic;
fsn font-style: normal;
2.規定文字粗細的屬性
格式： font-weight: bold;
單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細線， 預設就是細線
數字取值：
100-900之間整百的數字
快捷鍵fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3.規定文字大小的屬性
格式：font-size: 30px;
單位：px（畫素 pixel）
注意點： 通過font-size設定大小一定要帶單位， 也就是一定要寫px
快捷鍵fz font-size:;
fz30 font-size: 30px;
4.規定文字字型的屬性
格式：font-family:"楷體";
注意點：
1.如果取值是中文， 需要用雙引號或者單引號括起來
2.設定的字型必須是使用者電腦裡面已經安裝的字型
快捷鍵ff font-family:;
1.如果設定的字型不存在, 那麼系統會使用預設的字型來顯示
預設使用宋體
2.如果設定的字型不存在, 而我們又不想用預設的字型來顯示怎麼辦?
可以給字型設定備選方案
格式:font-family:"字型1", "備選方案1", ...;
3.如果想給中文和英文分別單獨設定字型, 怎麼辦?
但凡是中文字型, 裡面都包含了英文
但凡是英文本型, 裡面都沒有包含中文
也就是說中文字型可以處理英文, 而英文本型不能處理中文
**注意點: 如果想給介面中的英文單獨設定字型, 那麼英文的字型必須寫在中文的前面
4.補充在企業開發中最常見的字型有以下幾個
中文: 宋體/黑體/微軟雅黑
英文: "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必須寫在所有屬性的最後
1.文字裝飾的屬性
格式: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;
2.文字水平對齊的屬性
格式: text-align: right;
取值:left 左
right 右
center 中
快捷鍵ta text-align: left;
tar text-align: right;
tac text-align: center;
3.文字縮排的屬性
格式: text-indent: 2em;
取值:2em, 其中em是單位, 乙個em代表縮排乙個文字的寬度
快捷鍵ti text-indent:;
ti2e text-indent: 2em;
1.在css中如何通過color屬性來修改文字顏色
格式: 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.如果當前顏色對應的兩位數字不一樣, 那麼就不能簡寫
#123456;
2.如果兩位相同的數字不是屬於同乙個顏色的, 也不能簡寫
#122334
css3新屬性學習
box size width 這樣就可以讓我們不必要再去計算盒子增減內邊距後有沒有撐開什麼的，因為無論內邊距如何變化，盒子的大小始終只會等於width。filter blur 5px 濾鏡，css3為我們增加了濾鏡效果，當括號中的數值越大，則越模糊。width calc 100 30px 可以自動計...
CSS3學習筆記（新屬性）
1.邊框 圓角邊框 加陰影和用繪製 新增加 border radius box shadow border image div12.背景 新增加 background size background origin background clip div13 陰影 可以分為box shadow和tex...
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...