日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

前端学习之旅3

發(fā)布時間：2023/12/31 HTML 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端学习之旅3 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.偽類選擇器

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>/*li里的第一個是紅色*//*偽類：不存在的類，特殊的類偽類用來描述元素的特殊狀態(tài)比如：第一個子元素，被點擊的元素，鼠標(biāo)移入的元素偽類一般情況下都是:開頭:first-child 第一個子元素:last-child 最后一個子元素:nth-child(m) 第m個子元素特殊值：：第n個n的范圍到正無窮2n或even表示選中第偶數(shù)個子元素2n-1或odd都表示奇數(shù)表示奇數(shù)以上這些偽類是根據(jù)所有子元素來排序的:first-child 第一個子元素:last-child 最后一個子元素:nth-child(m) 第m個子元素：這幾個功能和上面的類似-not()否定偽類將符合條件的子類從選擇器中去除nth-type（3）是第3的倍數(shù)nth-child(3)是第3個*/ul>li:first-child{color: red;}ul>li:last-child{color:blue;}ul>li:nth-child(2n){color: green;}ul>li:first-of-type{color:brown;}ul>li:not(li:nth-type(3)){color:yellowgreen;}</style></head> <body><ul><span>我是一個span</span><li>第零個</li><li >第一個</li><li>第二個</li><li>第三個</li><li>第四個</li><li>第五個</li><li>第六個</li></ul> </body> </html>


2.偽元素選擇器

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>p{font-size:20px;}/*偽元素：偽元素表示的是一些特殊但并不存在的元素（特殊的位置）偽元素使用 ::開頭*//*::first-letter表示第一個字母::first-line表示第一行::selection表示選中的內(nèi)容::before表示元素的開始::after表示元素的最后before 和 after必須結(jié)合content使用*/p::first-letter{font-size: 60px;}p::first-line{background-color: blue;}div::before{content:'abc';color:red;}</style></head> <body><div>vhfgjhfgjgy</div><p>Wdfbuvwdcgewiwefjifgweihweiwieuiw ddfgfddddddddd</p><P>bvigdewuhbweivhgbirweu</P> </body> </html>


3.復(fù)合選擇器

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>/*將class為red的元素設(shè)置為紅色（字體）交集選擇器作用：選中同時符合多個條件的元素語法：選擇器1和選擇器2選擇器3選擇器n{}注意點：交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭*/.red{color: red;}div.red{font-size: 30px;}.a.b.c{color:blue;}/*選擇器分組（并集選擇器）作用：選擇器1，選擇器2，選擇器3，選擇器n{}b1,p1,h1,span..{}*/h1,span{color:red;}</style></head> <body><div class="red">我是div</div><p class="red">我是p元素</p><div class="red2 a b c">我是div2</div><h1>標(biāo)題</h1><span>哈哈</span> </body> </html>


4.選擇器的權(quán)重

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>#box1{background-color:orange;}.d1{background-color: purple !important;}.red{background-color:red;}div,p,span{background-color: yellowgreen;}div{font-size: 20px;}/*樣式的沖突：-當(dāng)我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設(shè)置不同的值時，此時就發(fā)生了樣式的沖突。發(fā)生樣式?jīng)_突時，應(yīng)用哪個樣式由選擇器的權(quán)重（優(yōu)先級）決定選擇器的權(quán)重內(nèi)聯(lián)樣式 1，0，0，0id選擇器 0，1，0，0類和偽類選擇器 0，0，1，0元素選擇器 0，0，0，1繼承的樣式 沒有優(yōu)先級比較優(yōu)先級時，需要將所有的選擇器的優(yōu)先級進(jìn)行相加計算，最后優(yōu)先級越高，則越優(yōu)先顯示（分組選擇器是單獨進(jìn)行的），選擇器的累加不會超過其最大數(shù)量，類選擇器再高也不會超過id選擇器如果優(yōu)先級計算后相同，此時則優(yōu)先使用靠下的樣式 可以在某一個樣式的后邊添加 !important,則此時該樣式會獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式。注意：在開發(fā)中這個玩意一定要慎用！*/</style></head> <body><div id="box1" class="red d1 d2 d3 d4" style="background-color:skyblue;">我是一個div</div> </body> </html>

5.樣式的繼承

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>p{color:red;}/*樣式的繼承：我們?yōu)樵卦O(shè)置的樣式也會應(yīng)用于其后代元素上繼承也發(fā)生在后代的后代我們只需要設(shè)置一次就好了注意：并不是所有的樣式都能被繼承比如背景相關(guān)的，大小相關(guān)的*/p{color:red;}div{color:blue;}</style></head> <body> <P> 我是一個p元素 <span>我是p元素中的span</span> </P> <div><span>我是div中的span<em>我是span中的em</em></span> </div> <span>我是p元素外的span</span> </body> </html>


6.單位

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><title>Document</title><style>html{font-size:30px;}.box1{/*長度單位：像素-屏幕（顯示器）實際上是由一個一個的小點構(gòu)成的-不同屏幕像素大小是不同的，像素越小的屏幕顯示的效果越清晰-所以同樣的200px在不同設(shè)備下顯示效果不一樣 百分比-百分比可以設(shè)置屬性時相對于父元素屬性的百分比-設(shè)置百分比可以使子元素跟隨父元素的改變而改變em：-em是相對于元素的字體大小來計算的-lem =1font-size-em會根據(jù)我們字體大小改變而改變rem: -rem是相對于根元素的字體大小來計算;*/width: 200px;height: 200px;background-color: orange;}.box2{width: 50%;height: 50%;background-color: greenyellow;}</style></head> <body><div class="box1"></div> </body> </html>


7.顏色

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><title>Document</title><style>.box1{width: 200px;height:200px;/*顏色單位：在css中可以直接使用顏色名來設(shè)置各種顏色比如：red,orange,yellow,blue,green.......但是在css中直接使用顏色名是非常的不便RGB值：-RGB通過三種顏色的不同濃度來調(diào)配出不同的顏色-R red,G green,B blue-每一種顏色的范圍在0~255（0%-100%）之間語法：RGB(紅色，綠色，藍(lán)色)RGBA:-就是在rgb的基礎(chǔ)上增加了一個表示不透明度需要四個值，前三個和rgb一樣，第四個表示不透明度1表示完全不透明，0表示完全透明，5半透明十六進(jìn)制的RGB值-語法：#紅色綠色藍(lán)色-顏色濃度通過 00-ff -如果顏色兩位兩位重復(fù)可以進(jìn)行簡寫#aabbcc --> #abcHSL值 HSLA值H 色相S 飽和度L 亮度*/background-color: red;background-color: rgb(255,0,0);background-color: rgb(0,255,0);background-color:rgb(0,0,0);background-color: rgb(255,255,255); background-color: rgb(109,34,234);background-color: #ffff00;background-color: hsl(230,100%,89%);background-color: hsla(98,48%,40%,0.658);}</style></head> <body><div class="box1"></div> </body> </html>


8.a元素的偽類

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>a:link{color:red;}/*:link 表示沒訪問過的鏈接*/a:visited{font-size: 70px; color:orange;}/*visited表示訪問過的只能改顏色，大小不能改（為了保護(hù)隱私)*/a:hover{color:aqua;font-size: 90px;}/*:active:鼠標(biāo)點擊*/a:active{color:yellowgreen;font-size:60px;}</style></head> <body><!--1.沒有訪問過的鏈接2.訪問過的鏈接--><a href="https://www.baidu.com">訪問過的鏈接</a><a href="https://www.baidu123.com">沒訪問過的鏈接</a></body> </html>


代碼學(xué)自尚硅谷

總結(jié)

以上是生活随笔為你收集整理的前端学习之旅3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。