## CSS基礎(chǔ)-常見(jiàn)屬性
# HTML被廢棄的標(biāo)簽
# 字符實(shí)體
# CSS
# 文字屬性
# 文本裝飾屬性
# 顏色屬性
## HTML中被廢棄的標(biāo)簽
1.為什么HTML中有一部分標(biāo)簽會(huì)被廢棄?
-因?yàn)楫?dāng)前HTML中的標(biāo)簽只有一個(gè)作用,就是用來(lái)添加語(yǔ)義
而早期的HTML標(biāo)簽中有一部分標(biāo)簽是沒(méi)有語(yǔ)義的,有一部分標(biāo)簽是用來(lái)修改樣式的
b:
bold 加粗文本,沒(méi)有語(yǔ)義
u:
underlined 下劃線,沒(méi)有語(yǔ)義
i:
italic 傾斜,沒(méi)有語(yǔ)義
s:
strikethourgh 給文本添加刪除線,沒(méi)有語(yǔ)義
注意點(diǎn):
以后再企業(yè)開(kāi)發(fā)中,不到萬(wàn)不得已一定不要使用這些被廢棄掉的標(biāo)簽
如果一定要使用,一般情況下都是用來(lái)作為CSS的鉤子來(lái)使用
strong == b
ins == u
em == i
del == s
strong語(yǔ)義:定義重要性強(qiáng)調(diào)的文字
ins語(yǔ)義(inseted):定義插入的文字
em語(yǔ)義(emphasized):定義強(qiáng)調(diào)的文字
del語(yǔ)義(deleted):定義被刪除的文字
字符實(shí)體
1.在HTML中對(duì)空格/回車(chē)/tab不敏感,會(huì)把多個(gè)空格/回車(chē)/tab當(dāng)成一個(gè)空格來(lái)處理
2.什么是字符實(shí)體?
在HTML中有的字符是被HTML保留的,有的HTML字符在HTML中是有特殊含義的,是不能在瀏覽器中直接顯示的
那么這些東西想要顯示出來(lái)就需要用到字符實(shí)體
- 空格,一個(gè)?就是一個(gè)空格
<
- <小于符號(hào)
>
- >大于符號(hào)
?
版權(quán)符號(hào)
通過(guò)標(biāo)簽來(lái)修改樣式的缺點(diǎn):
1.需要記憶哪些標(biāo)簽有哪些屬性,如果該標(biāo)簽沒(méi)有這個(gè)屬性,則修改了也沒(méi)有改變
2.當(dāng)需求變更時(shí)我們需要修改大量的代碼才能滿(mǎn)足現(xiàn)有的需求
3.HTML只有一個(gè)作用就是來(lái)添加語(yǔ)義
通過(guò)CSS修改樣式的好處:
1.不用記憶哪些屬性屬于哪個(gè)標(biāo)簽
2.當(dāng)需求變更時(shí)我們不需要修改大量的代碼就可以滿(mǎn)足需求
3.在前端開(kāi)發(fā)中CSS只有一個(gè)作用,就是用來(lái)修改樣式
CSS重點(diǎn)就是學(xué)選擇器和屬性
寫(xiě)在head里面的title標(biāo)簽下面
CSS
格式:
標(biāo)簽名稱(chēng){
屬性名稱(chēng):屬性對(duì)應(yīng)的值;
…
}
注意點(diǎn):
1.style標(biāo)簽必須寫(xiě)在head標(biāo)簽的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間
2.style標(biāo)簽中的type其實(shí)可以不用寫(xiě)
默認(rèn)就是 type=“text/css”
3.設(shè)置樣式時(shí)必須按照固定的格式來(lái)寫(xiě),key:value;
文字屬性
1.規(guī)定文字樣式的屬性
-格式:font-style: normal/italic;(普通/傾斜)
-快捷鍵:
fs font-style: italic;
fsn font-style: normal;
2.規(guī)定文字粗細(xì)的屬性
font-weight: bold;
2.1 單詞取值:
bold 加粗
bolder 加粗加粗(但加粗到極限不會(huì)繼續(xù)加粗)
lighter 細(xì)線
-快捷鍵:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder
2.2 數(shù)字取值:
100-900之間整百的數(shù)字
3.規(guī)定文字大小的屬性
-格式: font-size: 30px;
-單位: px(像素 pixel)
-注意點(diǎn): 通過(guò)font-size設(shè)置大小一定要帶單位
-快捷鍵:
fz font-size: ;
fz30 font-size: 30px;
4.規(guī)定文字字體的屬性
-格式: font-family: ”宋體”;
-注意點(diǎn):
1.如果取值是中文,需要用雙引號(hào)或者單引號(hào)括起來(lái)
2.使用的字體必須是用戶(hù)電腦里已經(jīng)安裝的字體
-快捷鍵:
ff font-family: ;
字體屬性擴(kuò)充
1.如果設(shè)置的字體不存在,那么系統(tǒng)會(huì)使用默認(rèn)的字體(宋體)來(lái)顯示
2.如果設(shè)置的字體不存在,而我們又不想用默認(rèn)的字體怎么辦?
-可以設(shè)置備選方案
-格式:font-famliy:”字體1”,”備選方案1”,”備選方案2”;
3.如果想給中文和英文分別單獨(dú)設(shè)置字體怎么辦?
-把英文設(shè)置在前面,把中文字體設(shè)置為備選方案
-原理:英文字體不能處理中文字體,于是渲染中文字體時(shí)使用備選方案”微軟雅黑”
-格式:font-family:”Times New Roman”,”微軟雅黑”;
補(bǔ)充在企業(yè)開(kāi)發(fā)中最常用的字體有以下一些:
-中文:
宋體/黑體/微軟雅黑
-英文:
“Times New Roman”/Arial
注意點(diǎn):因?yàn)橹形淖煮w其實(shí)都有自己的英文名稱(chēng),所以是不是中文字體具體要看能不能處理中文
宋體: SimSun
黑體: SimHei
微軟雅黑: Microsoft YaHei
CSS中的注釋
/*
注釋掉的內(nèi)容
*/
文字屬性的縮寫(xiě)
格式:
font: style weight size family;
例:
font:italic bold 10px “楷體”;
注意點(diǎn):
1.在這種縮寫(xiě)格式中有的屬性值可以省略
style可以省略
weight可以省略
2.style,weight的位置可以互換
3.有些屬性可以省略
4.有些屬性不可以省略
5.size不能省略
6.family不能省略
7.size和family的位置是不能隨便亂放的,size一定要寫(xiě)在family前面,family必須寫(xiě)在所有屬性的最后
# 文本屬性
1.文本裝飾的屬性
格式:text-decoration: underline;
取值:
underline 下劃線
line-through 刪除線
overthrough 上劃線
none 什么都沒(méi)有,最常用的用途就是去除超鏈接的下劃線
快捷鍵:
td underline
tdu line-through
tdl overthrough
tdn none
2.文本水平對(duì)齊的屬性
格式: text-align: left;
取值:
left 左
right 右
center 中間
快捷鍵:
ta
tar
tac
3.文本縮進(jìn)的屬性
格式: text-indent: 2em;
取值:
2em,其中em是單位,一個(gè)em代表縮進(jìn)一個(gè)文字的寬度
快捷鍵:
ti
ti2e
顏色控制
1.在CSS中如何通過(guò)color屬性來(lái)修改文字顏色
格式: color:值;
取值:
1.1 英文單詞
一般情況下常見(jiàn)的顏色都有對(duì)應(yīng)的英文單詞,但是英文單詞能夠表達(dá)的顏色是有限制的,也就是說(shuō)不是所有的顏色都能夠通過(guò)英文單詞來(lái)表達(dá)
1.2 rgb
rgb其實(shí)就是三原色,其中r(red) g(green) b(blue)
格式: rgb(0,0,0)
r/g/b,取值范圍是0-255,值越大越亮
1.3 rgba
格式:rgba(0,0,0,0)
a,取值0-1,控制透明度,值越小越透明
1.4 十六進(jìn)制
在前端開(kāi)發(fā)中通過(guò)十六進(jìn)制來(lái)表示顏色,其本質(zhì)就是rgb每?jī)晌粊?lái)表示
例如:#FFEE00 FF表示R EE表示G 00表示B
#FF0000
1.5 十六進(jìn)制的縮寫(xiě)
在CSS中,只要十六進(jìn)制的顏色每?jī)晌坏闹刀际且粯拥?那么就可以簡(jiǎn)寫(xiě)為一位
例如:
#FFEE00 -> #FE0
注意點(diǎn):
1.如果當(dāng)前顏色對(duì)應(yīng)的兩位數(shù)字不一樣,那么就不能簡(jiǎn)寫(xiě)
2.如果兩位相同數(shù)字不是屬于同一顏色也不能簡(jiǎn)寫(xiě)
#122334 這個(gè)不能簡(jiǎn)寫(xiě)
# 十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
(僅限顏色轉(zhuǎn)換)
-用十六進(jìn)制的第一位*16 + 十六進(jìn)制的第二位 = 十進(jìn)制
15 == 1 *16 + 5 = 21
文字縮進(jìn)屬性:
text-indent: 2em;
