柚子快報(bào)激活碼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>中對(duì)[id名稱]進(jìn)行修飾.語法

#id_name{

}

類選擇器

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

語法 .class_name{

}

nihao

你好

666

777

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

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

后代選擇器

• 蔡徐坤
• 陳立農(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: 文段的縮進(jìn)(px/em)(em:表示當(dāng)前一個(gè)文字的大小)text-align: left; /* 添加此行以設(shè)置文本左對(duì)齊 */

背景修飾

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

列表修飾

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

以上都可以簡(jiǎn)寫為list-style: [];

?

CSS 偽類

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

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

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

以下是如何修改您提供的CSS代碼來實(shí)現(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元素上時(shí)，會(huì)選擇緊鄰的.floor元素，并將其背景顏色設(shè)置為紅色。

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

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

塊級(jí)標(biāo)簽

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

行級(jí)標(biāo)簽

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

行級(jí)塊

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

display.

盒模型

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

文檔流

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

比如:每個(gè)塊元素都會(huì)另起一行

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

浮動(dòng)

float

transform

CSS的transform屬性允許你對(duì)元素進(jìn)行2D或3D轉(zhuǎn)換。它包含了一系列函數(shù)，如旋轉(zhuǎn)、縮放、傾斜和移動(dòng)，可以用來改變?cè)氐男螤詈臀恢谩?/p>

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

translate()：移動(dòng)元素。

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()：定義一個(gè)2D轉(zhuǎn)換，使用六個(gè)值的矩陣。

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

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

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()：定義一個(gè)3D轉(zhuǎn)換，使用16個(gè)值的4x4矩陣。

用法

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

css復(fù)制代碼

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

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

注意：轉(zhuǎn)換的順序很重要，因?yàn)樗鼈兪前凑漳阒付ǖ捻樞蜻B續(xù)應(yīng)用的。例如，先旋轉(zhuǎn)后移動(dòng)與先移動(dòng)后旋轉(zhuǎn)的效果是不同的。

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

css復(fù)制代碼

transform-origin: top left;

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

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

http://yzkb.51969.com/

推薦鏈接