柚子快報激活碼778899分享：前端 html CSS基礎(chǔ)語法

http://yzkb.51969.com/

CSS

標(biāo)簽選擇器

內(nèi)嵌式改變標(biāo)簽樣式

nihao

外嵌式

.css文件

p{

font-size: 16px;

color: red;

}

.html文件

s

nihao

id選擇器

**在標(biāo)簽中使用 id = [id名稱] 命名,在< style>< /style>中對[id名稱]進行修飾.語法

#id_name{

}

類選擇器

在標(biāo)簽中使用 class = [class名稱],在< style>< /style>中對[id名稱]進行修飾

語法 .class_name{

}

nihao

你好

666

777

id選擇器與類選擇器的區(qū)別

ID 選擇器的是以井號 # 開頭來定義的。而類選擇器是以點 . 來定義的。ID 選擇器在 HTML 中是可以通過 id 屬性來使用。而類選擇器是通過 class 屬性來使用的。同一個頁面中一個ID選擇器只能在中出現(xiàn)一次，是唯一的。而類選擇器可以在多次出現(xiàn)，所以ID選擇器的針對性更強。

后代選擇器

• 蔡徐坤
• 陳立農(nóng)
• 范丞丞
• 黃明昊
• 林彥俊
• 朱正廷
• 王子異
• 王琳凱
• 尤長靖
• Nine Percent

文本修飾

color : 字體顏色font-size: 字體像素大小 (px)font-family:字體font-weight:700;font-style:italic(斜體)text-decoration: line-through; 刪除線~ : underline; 下滑線line-height:文字行高(px)letter-spacing: 字符的寬度(px)word-spacing:單詞之間的寬度(px)text-indent: 文段的縮進(px/em)(em:表示當(dāng)前一個文字的大小)text-align: left; /* 添加此行以設(shè)置文本左對齊 */

背景修飾

background-image:url(“圖片;鏈接”);背景圖片background-color:背景顏色background-repeat:背景重復(fù) no-repeat(不重復(fù))background-size:背景尺寸(px,px)background-position: 背景位置

列表修飾

color:顏色list-style-type: none(無序列號);list-style-imag:url(“圖片鏈接”);list-style-position:inside(圖片位置);

以上都可以簡寫為list-style: [];

?

CSS 偽類

**[標(biāo)簽] : hover{}**鼠標(biāo)放在[標(biāo)簽]的事件

要實現(xiàn)當(dāng)鼠標(biāo)懸停在.lead_text元素上時改變.floor元素的顏色，

? 您可以使用CSS中的兄弟選擇器（sibling selector）。通過這種方式，您可以選擇.lead_text元素的兄弟元素（即.floor元素），并在.lead_text元素懸停時應(yīng)用新的樣式。

以下是如何修改您提供的CSS代碼來實現(xiàn)這一效果：

.floor {

width: 100px;

height: 44px;

background-color: white;

position: absolute;

top: 0px;

z-index: 0;

}

.lead_text:hover + .floor {

background-color: red;

}

在上面的代碼中，使用了兄弟選擇器+來選擇.lead_text元素的緊鄰兄弟元素.floor。當(dāng)鼠標(biāo)懸停在.lead_text元素上時，會選擇緊鄰的.floor元素，并將其背景顏色設(shè)置為紅色。

通過應(yīng)用上述CSS樣式，您可以實現(xiàn)當(dāng)鼠標(biāo)懸停在.lead_text元素上時改變.floor元素的背景顏色的效果。您可以根據(jù)需要調(diào)整顏色和其他樣式。

**[標(biāo)簽] : active{}**鼠標(biāo)點擊發(fā)生事件 [標(biāo)簽] : focus{} 想擁有鼠標(biāo)點擊的標(biāo)簽(輸入框)添加樣式

塊級標(biāo)簽

塊級標(biāo)簽:無論內(nèi)容多少,都會獨占一行,一般用來進行網(wǎng)頁布局,可以設(shè)置寬高width height

行級標(biāo)簽

行級標(biāo)簽:只占自身大小,不會占一行,設(shè)置寬高無效

行級塊

不占一行,可以設(shè)置長寬高

display.

盒模型

內(nèi)容區(qū)(content)內(nèi)邊距(padding)邊框(border)外邊框(margin)

文檔流

文檔流指的是文檔中的標(biāo)簽在排列時所占用的位置。 將窗體自上而下分 成一行行 ，并在每行中按從左至右的順序排放標(biāo)簽，即為文檔流。 在文檔流`中標(biāo)簽?zāi)J會緊貼到上一個標(biāo)簽的右邊，如果右邊不 足以放下標(biāo)簽，標(biāo)簽則會另起一行，在新的一行中繼 續(xù)從左至右擺放。 這樣一來每一個塊標(biāo)簽都會另起一行，那么我們?nèi)绻朐谖臋n 流中進行 布局就會變得比較麻煩

比如:每個塊元素都會另起一行

為了解決這種問題,我們可以使用css的浮動屬性

浮動

float

transform

CSS的transform屬性允許你對元素進行2D或3D轉(zhuǎn)換。它包含了一系列函數(shù)，如旋轉(zhuǎn)、縮放、傾斜和移動，可以用來改變元素的形狀和位置。

2D轉(zhuǎn)換函數(shù)

translate()：移動元素。

css復(fù)制代碼

transform: translate(50px, 100px);

scale()：縮放元素。

css復(fù)制代碼

transform: scale(2, 0.5); /* 寬放大2倍，高縮小到一半 */

rotate()：旋轉(zhuǎn)元素。

css復(fù)制代碼

transform: rotate(45deg); /* 旋轉(zhuǎn)45度 */

skew()：傾斜元素。

css復(fù)制代碼

transform: skew(30deg, 20deg); /* X軸傾斜30度，Y軸傾斜20度 */

matrix()：定義一個2D轉(zhuǎn)換，使用六個值的矩陣。

3D轉(zhuǎn)換函數(shù)

translate3d()：在3D空間中移動元素。

css復(fù)制代碼

transform: translate3d(50px, 100px, 200px);

scale3d()：在3D空間中縮放元素。

css復(fù)制代碼

transform: scale3d(2, 0.5, 1);

rotate3d()：在3D空間中旋轉(zhuǎn)元素。

css復(fù)制代碼

transform: rotate3d(1, 0, 0, 45deg); /* 繞X軸旋轉(zhuǎn)45度 */

rotateX()**，rotateY()，rotateZ()：分別繞X軸、Y軸和Z軸旋轉(zhuǎn)元素。

css復(fù)制代碼

transform: rotateX(45deg);

perspective()：為3D轉(zhuǎn)換元素定義透視視圖。matrix3d()：定義一個3D轉(zhuǎn)換，使用16個值的4x4矩陣。

用法

你可以將多個轉(zhuǎn)換函數(shù)結(jié)合使用，只需用空格分隔即可。例如：

css復(fù)制代碼

transform: translate(50px, 100px) rotate(45deg) scale(2);

在上面的例子中，元素首先會移動，然后旋轉(zhuǎn)，最后縮放。

注意：轉(zhuǎn)換的順序很重要，因為它們是按照你指定的順序連續(xù)應(yīng)用的。例如，先旋轉(zhuǎn)后移動與先移動后旋轉(zhuǎn)的效果是不同的。

另外，transform-origin屬性可以用來改變轉(zhuǎn)換的原點。默認的原點是元素的中心（50% 50%）。例如：

css復(fù)制代碼

transform-origin: top left;

這將把轉(zhuǎn)換的原點設(shè)置為元素的左上角。

柚子快報激活碼778899分享：前端 html CSS基礎(chǔ)語法

http://yzkb.51969.com/

推薦鏈接