日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

前端学习之旅3

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

1.偽類選擇器

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>/*li里的第一個是紅色*//*偽類：不存在的類，特殊的類偽類用來描述元素的特殊狀態比如：第一個子元素，被點擊的元素，鼠標移入的元素偽類一般情況下都是:開頭:first-child 第一個子元素:last-child 最后一個子元素:nth-child(m) 第m個子元素特殊值：：第n個n的范圍到正無窮2n或even表示選中第偶數個子元素2n-1或odd都表示奇數表示奇數以上這些偽類是根據所有子元素來排序的:first-child 第一個子元素:last-child 最后一個子元素:nth-child(m) 第m個子元素：這幾個功能和上面的類似-not()否定偽類將符合條件的子類從選擇器中去除nth-type（3）是第3的倍數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表示選中的內容::before表示元素的開始::after表示元素的最后before 和 after必須結合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.復合選擇器

<!DOCTYPE html> <html lang="en"><head><mata charset="UTF-8"><style>/*將class為red的元素設置為紅色（字體）交集選擇器作用：選中同時符合多個條件的元素語法：選擇器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>標題</h1><span>哈哈</span> </body> </html>


4.選擇器的權重

<!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;}/*樣式的沖突：-當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設置不同的值時，此時就發生了樣式的沖突。發生樣式沖突時，應用哪個樣式由選擇器的權重（優先級）決定選擇器的權重內聯樣式 1，0，0，0id選擇器 0，1，0，0類和偽類選擇器 0，0，1，0元素選擇器 0，0，0，1繼承的樣式 沒有優先級比較優先級時，需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示（分組選擇器是單獨進行的），選擇器的累加不會超過其最大數量，類選擇器再高也不會超過id選擇器如果優先級計算后相同，此時則優先使用靠下的樣式 可以在某一個樣式的后邊添加 !important,則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式。注意：在開發中這個玩意一定要慎用！*/</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;}/*樣式的繼承：我們為元素設置的樣式也會應用于其后代元素上繼承也發生在后代的后代我們只需要設置一次就好了注意：并不是所有的樣式都能被繼承比如背景相關的，大小相關的*/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{/*長度單位：像素-屏幕（顯示器）實際上是由一個一個的小點構成的-不同屏幕像素大小是不同的，像素越小的屏幕顯示的效果越清晰-所以同樣的200px在不同設備下顯示效果不一樣 百分比-百分比可以設置屬性時相對于父元素屬性的百分比-設置百分比可以使子元素跟隨父元素的改變而改變em：-em是相對于元素的字體大小來計算的-lem =1font-size-em會根據我們字體大小改變而改變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中可以直接使用顏色名來設置各種顏色比如：red,orange,yellow,blue,green.......但是在css中直接使用顏色名是非常的不便RGB值：-RGB通過三種顏色的不同濃度來調配出不同的顏色-R red,G green,B blue-每一種顏色的范圍在0~255（0%-100%）之間語法：RGB(紅色，綠色，藍色)RGBA:-就是在rgb的基礎上增加了一個表示不透明度需要四個值，前三個和rgb一樣，第四個表示不透明度1表示完全不透明，0表示完全透明，5半透明十六進制的RGB值-語法：#紅色綠色藍色-顏色濃度通過 00-ff -如果顏色兩位兩位重復可以進行簡寫#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表示訪問過的只能改顏色，大小不能改（為了保護隱私)*/a:hover{color:aqua;font-size: 90px;}/*:active:鼠標點擊*/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>


代碼學自尚硅谷

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。