5.1 像素
5.1.1 px
一般情況下瀏覽器默認(rèn)的最小像素是12px,即使你設(shè)置的像素小于12px，文字也不會(huì)變小
5.1.2 百分比%
根據(jù)父元素的大小來(lái)設(shè)置自己的大小
好處：
當(dāng)父元素大小發(fā)生變化時(shí)子元素也會(huì)跟著改變適配屏幕的大小；
移動(dòng)端自適應(yīng)比較常用。
5.1.3 rem
根據(jù)根元素（html)去設(shè)置它的大小
1rem=根元素設(shè)置的大小
移動(dòng)端自適應(yīng)比較常用
5.1.4 em
根據(jù)當(dāng)前元素來(lái)設(shè)置自己的字體大小,可以根據(jù)自己的字體大小設(shè)置自己的寬高等
1em=1font-size(1font-size是指你設(shè)置的字體大小)
好處：適用于移動(dòng)端自適應(yīng)屏幕大小
<style>
.emFont {
? ? ? ? font-size: 60px;
? ? ? ? width: 2em;
? ? ? ? height: 2em;
? ? ? ? background-color: crimson;
? ? }
</style>
<body>
<div class="emFont">em字體大小</div>
</body>5.2 顏色
color：顏色名，不常用；
rgb：濃度范圍在0~255值之間，0是最小（代表沒(méi)有），255是最大；
color: rgb(172, 39, 39);rgba：a代表透明度 a的值在0-1之間 0代表完全透明 1代表不透明
a的值如果是小數(shù)的話可以省略小數(shù)點(diǎn)前面的0，寫(xiě)為（.5)
color: rgba(50%, 50%, 50%, 1);HEX：使用十六進(jìn)制的rgb值來(lái)表示顏色，主要的值是0-9 a-f 值的范圍是00-ff
00代表最小值（相當(dāng)于rgb中的0） ff代表最大值（相當(dāng)于rgb中的255）
和rag的區(qū)別就是一個(gè)是使用的十六進(jìn)制 一個(gè)是使用的0-255之間數(shù)字
每一組的值代表一種顏色，
第一組代表紅色
第二組代表綠色
第三組代表藍(lán)色
三組值都是雙數(shù)（除非每一組值是相同的，可以省略一個(gè)，例如：#fff
注意：三組值要么都大寫(xiě)要么都小寫(xiě),三個(gè)值不是非要是雙數(shù)
常用的值： #f00 紅色 #ccc 灰色 #000黑色 #fff 白色 #0f0 綠色 #00藍(lán)色
HEXA
HSL（了解）
5.3 字體樣式
字體大小 font-size:20px; 大部分瀏覽器默認(rèn)字體大小為16px；
字體樣式 font-style 屬性值為：normal、italic [i't?lik] 文字會(huì)以斜體顯示、oblique [?'bli:k]文字會(huì)以傾斜的效果顯示；
字體類型 font-family:宋體；
字體粗細(xì) font-weight 屬性值為：normal、bold、100-900（400正常、700加粗）；
字體行高 line-height px單位設(shè)置：如果想要文字垂直居中，line-height的值需等于line-height的值
小知識(shí)點(diǎn)：行高經(jīng)常還用來(lái)設(shè)置文字的行間距
行高=上間距+文字高度+下間距
行間距 = 行高 - 字體大小
文本樣式 text-transform（了解）
文本修飾 text-decoration 屬性值為：none underline overline（上劃線） line-through（刪除線）
字符間距 letter-spacing:2px;
單詞距離 word-spacing：2px;
文本對(duì)齊方式 text-align 屬性值為：left right center justify（兩端對(duì)齊）
首行縮進(jìn) text-indent 一般用em作為單位
正值->向右側(cè)縮進(jìn)指定的像素
負(fù)值->向左移動(dòng)指定的像素
設(shè)置網(wǎng)頁(yè)如何處理空白 white-space 可選值： normal正常 nowrap不換行 per保留空白
文本溢出 text-overflow 可選值：clip（修剪文本） ellipsis[i'lipsis] （顯示省略符號(hào)來(lái)代表被修剪的文本）
5.4 表格的屬性
邊框?qū)挾龋篵order-width
默認(rèn)值：3px
指定4個(gè)值代表：上、右、下、左
指定3個(gè)值代表：上、左右、下
指定2個(gè)值代表：上下、左右
另一種寫(xiě)法：border-top(right/bottom/left)-width
邊框顏色：border-color
設(shè)置邊框的顏色 默認(rèn)值是黑色
同border-width方向值
border-style: none默認(rèn)值、solid實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線
border
可以同時(shí)設(shè)置四個(gè)邊框的寬度，樣式，顏色
一指定就是同時(shí)指定四個(gè)邊不能分別指定:border-top、 border-right、 border-bottom、 border-left
可以單獨(dú)設(shè)置四個(gè)邊的樣式，規(guī)則和border一樣，只不過(guò)它只對(duì)一個(gè)邊生效
border:2px solid red;
文本陰影 text-shadow:h-shadow v-shadow blur color;
參數(shù)1:必需。水平陰影的位置。允許負(fù)值
參數(shù)2: 必需。垂直陰影的位置。允許負(fù)值
參數(shù)3: 可選。模糊的距離，只為正值
參數(shù)4:可選。陰影的顏色 一般用rgba
text-shadow:0px -10px 5px red;盒子陰影 box-shadow
參數(shù)1:必需。水平陰影的位置。允許負(fù)值。
參數(shù)2: 必需。垂直陰影的位置。允許負(fù)值。
參數(shù)3: 可選。模糊的距離。
參數(shù)4:可選。陰影的顏色 一般用rgba
5.5 CSS三大特性
- 層疊性：如果樣式?jīng)_突，遵循就近原則，哪個(gè)離的最近就遵循哪個(gè)；
- 繼承性：兒子和孫子都可以繼承祖宗的樣式，只有color、font-開(kāi)頭的text-開(kāi)頭的、line-開(kāi)頭的這些具有繼承性；
- 優(yōu)先級(jí)：important >行內(nèi) >id >類 >標(biāo)簽 > * >繼承
????????????????????????????????????????1,0,0,0? ?0,1,0,0? ?0,0,1,0? ?0,0,0,1? ?0,0,0,0
三像素解決方法：
元素垂直對(duì)齊 vertical-align 可選值：baseline默認(rèn)值 基線對(duì)齊 top頂部對(duì)齊 bottom底部對(duì)齊 middle居中對(duì)齊
-
vertical-align設(shè)置除默認(rèn)值以外的可選值
-
把圖片轉(zhuǎn)化為塊元素
-
給元素font-size設(shè)置為0
5.6 盒子模型
content：內(nèi)容區(qū)（子元素和文本內(nèi)容），width和height設(shè)置大小
padding：內(nèi)邊距，內(nèi)容區(qū)與邊框的距離
border：邊框，寬度、樣式、顏色
margin：外邊距，盒子和盒子之間的距離
行內(nèi)元素可以設(shè)置左右margin值，但設(shè)置上下margin值沒(méi)有任何效果
margin值可以是auto,塊級(jí)元素設(shè)置 margin:auto; 可以實(shí)現(xiàn)該元素在父元素內(nèi)水平居中，但行內(nèi)元素/行內(nèi)塊元素不可以
盒子大小=content+左右padding+左右border
水平布局： margin-left border-left padding-left width padding-right border-right margin-right
垂直布局：父元素如何處理溢出的子元素 overflow：；
可選值：
visible 默認(rèn)值 子元素會(huì)從父元素中溢出，在父元素外部的位置顯示
hidden 溢出的內(nèi)容將會(huì)被裁剪不會(huì)顯示
scroll 生成兩個(gè)滾動(dòng)條，通過(guò)滾動(dòng)條來(lái)查看完整的內(nèi)容
auto 根據(jù)需要生成滾動(dòng)條
overflow-y：scroll
外邊距重疊：在網(wǎng)頁(yè)中相鄰的垂直方向的外邊距，會(huì)發(fā)生外邊距的重疊，兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是取和，誰(shuí)大聽(tīng)誰(shuí)的
清除瀏覽器的默認(rèn)樣式：
<style> ? *{ ? ? ? ? ? ?padding: 0; ? ? ? ? ? ?margin: 0; ? ? ? ? ? ?text-decoration: none; ? ? ? ? ? ?list-style: none; ? ? ? } </style>
標(biāo)準(zhǔn)盒模型 width=content
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<style>
? ? ? ?div {
? ? ? ? ? ?width: 300px;
? ? ? ? ? ?height: 300px;
? ? ? ? ? ?padding: 20px;
? ? ? ? ? ?border: 10px solid red;
? ? ? ? ? ?margin: 20px;
? ? ? }
? ?</style>
</head>
?
<body>
? ?<div>可是大家思考</div>
</body>
?
</html>IE盒模型 width=content+padding+border box-sizing:border-box content-box;?
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<style>
? ? ? ?div {
? ? ? ? ? ?width: 300px;
? ? ? ? ? ?height: 300px;
? ? ? ? ? ?padding: 20px;
? ? ? ? ? ?border: 10px solid red;
? ? ? ? ? ?margin: 20px;
? ? ? ? ? ?/* IE盒模型 */
? ? ? ? ? ?box-sizing: border-box;
? ? ? }
? ?</style>
</head>
?
<body>
? ?<div>可是大家思考</div>
</body>
?
</html>5.7 隱藏元素
display 用來(lái)設(shè)置元素顯示的類型 none
visibility 用來(lái)設(shè)置元素的顯示狀態(tài) 可選值： visible 默認(rèn)值 元素在頁(yè)面中正常顯示 hidden 元素不在頁(yè)面中顯示（隱藏一個(gè)元素），位置依然保留文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-790221.html
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<style>
? ? ? ?div {
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 200px;
? ? ? }
?
? ? ? ?.box1 {
? ? ? ? ? ?background-color: red;
? ? ? ? ? ?/* 隱藏元素，直接銷毀元素，在頁(yè)面中不再占據(jù)原本位置， */
? ? ? ? ? ? display: none;
? ? ? ? ? ?/* hidden 只是隱藏元素，還占據(jù)原來(lái)的位置 */
? ? ? ? ? ?/* visibility: hidden;*/
? ? ? }
?
? ? ? ?.box2 {
? ? ? ? ? ?background-color: pink;
? ? ? }
? ?</style>
</head>
?
<body>
? ?<div class="box1"></div>
? ?<div class="box2"></div>
</body>
?
</html>?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790221.html
到了這里，關(guān)于CSS Day5-像素、顏色、字體樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![CSS字體樣式（font）[詳細(xì)]](https://imgs.yssmx.com/Uploads/2024/02/455467-1.png)
![[HTML]Web前端開(kāi)發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫(huà)網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
