當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

發布時間：2025/3/20 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是css？

通配符選擇器

<head>/* *通配符選擇器匹配任何元素 */*{margin: 0;padding: 0;} </head>

css樣式有三種

　　一種是內嵌，寫在head的style里面

　　　　　　<style>div{/*內嵌的css*/width: 200px;height: 200px;background: blue;}</style>

　　一種是外鏈，寫在單獨的.css文件里面

　　　　通過link標簽（link + tab）填寫路徑的.css文件名即可

　　一種是標簽，直接寫在標簽里面

優先級：標簽樣式>內嵌樣式 >外鏈樣式

?因為存在三種方法，所以在開發中總會產生耦合，所以存在一個選擇器的概念

優先級：id選擇器>class選擇器>標簽選擇器

選擇器

　　用于準確的選中元素，賦予樣式

?選擇器權重

　　誰的權重大，就聽誰的，誰的權重大，就用誰的樣式

　　　　1 ?class選擇器

　　　　　　 ? 通過標簽的class屬性，選擇對應的元素，借助類的概念，一處定義，多處使用

　　　　2 ?id選擇器

　　　　　　? ?通過標簽的id屬性，選擇對應元素。注：id選擇器唯一

　　　　3 ?群組選擇器

　　　　　　 ? 可以同時選擇多個標簽的選擇器

　　　　4 ?層次選擇器

　　　　　　 ? 分為兄弟，子代，相鄰，后代，四種選擇器

class選擇器（.class名）借助類的概念，一處定義，多處使用

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css</title><style>.wrap{background: aqua;}</style> </head> <body><div class="wrap">3</div><div class="wrap">4</div></body> </html>

?id選擇器（.id名）id選擇器唯一

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css</title><style>#box{background: red;}</style> </head> <body><div id="box">2</div> </body> </html>

?群組選擇器（群組選擇器對幾個有相同屬性的選擇器進行樣式設置兩個選擇器之間必須用逗號隔開）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>*{margin: 0;padding: 0;}/*群組選擇器，逗號分隔，都擁有樣式屬性*/div,p{width: 100px;height: 50px;background: lawngreen;}</style> </head> <body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body> </html>

層次選擇器

　　兄弟選擇器(~)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>*{margin: 0;padding: 0;}/*兄弟選擇器操作的對象是該元素下（下方）的所有兄弟元素*/div~p{width: 100px;height: 50px;background: lawngreen;}</style> </head> <body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body> </html>

?　　子代選擇區（>）只會選兒子，不會選孫子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>*{margin: 0;padding: 0;}/*子代選擇器選擇某個元素下面的子元素*/div>p{width: 100px;height: 50px;background: lawngreen;}</style> </head> <body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div> </body> </html>

?　　相鄰選擇器：（+）同級元素相鄰！隔開就不行

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>*{margin: 0;padding: 0;}/*相鄰選擇器操作的對象是該元素的同級元素選擇div相鄰的下一個兄弟元素選擇到緊隨目標元素后的第一個元素挨著的兄弟元素*/div+p{width: 100px;height: 50px;background: skyblue;}</style> </head> <body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div> </body> </html>

?　　后代選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>li{list-style: none;}/*后代選擇器之后要是后代*/div li{width: 100px;height: 50px;background: aqua;}</style> </head> <body><div><ul><li>1</li><li>2</li><li>3</li></ul><ol><li>1</li><li>2</li><li>3</li></ol></div><ul><li>1</li><li>2</li><li>3</li></ul> </body> </html>

?復雜后代選擇器優先級的比較

1.先比id(最高位) class（中間位） tagName（個數位）

????????????? 1 ? ? ? ? ? ? ? ? ? ? ? ?? 2 ? ? ? ? ? ? ? ? ? ? ? ?? 3

2.id選擇器個數不相等，id越多，優先級越高

3.id選擇器個數相同,則看class,class多的優先級高

4.class個數相等，就看tagName個數

偽類選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類選擇器</title><style>/*LoVeHAte*/a:link{/*link 未被點擊的鏈接*/color: red;}a:visited{/*已被點擊的鏈接*/color: green;}a:hover{/*鼠標懸停其上的元素這個一定要掌握*/color: yellow;}a:active{/*鼠標已經再其上按下但是還沒有釋放的元素*/color: blue;}</style></head> <body><a href="http://www.baidu.com">baidu</a> </body> </html>

?　　重點了解hover：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background: skyblue;}div:hover{ /*div:hover 改變的是div本身*/background: red;width: 300px;height: 200px;cursor: pointer;/*手指*//*cursor: default; 箭頭*//*cursor: wait; 等待*//*cursor: help;*/}div:hover p{/*div:hover p 當div被鼠標劃入的時候改變后代p*/width: 50px;height: 30px;background: aqua;}</style> </head> <body><div><p></p></div> </body> </html>

css文字屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*設置網頁字體*//*html{*//*font-size: 20px;*//*}*/ /*font-family 字體類型瀏覽器默認的字體是微軟雅黑，字體中有多個字體的時候，如果前面的字體沒有就使用后面的字體*/.box1{font-family: Arial,Algerian;}/*font-size 字體大小單位 px rem % empx 谷歌瀏覽器默認字體大小16px,最小是12pxrem 相對于html(根標簽)的字體大小em 等于父級的字體尺寸——相對于父級字體大小而言的% 相對于父容器中字體的%調整這個要知道 */.box2{font-size: 32px;}.box3{font-size: 12px;}.box4{font-size: 2rem;}.box5{font-size: 2em;}/*font-weight 字體粗細關鍵字normal 默認字體lighter 較細bold 加粗這個要知道bolder 很粗給值只能100-900的整百數400相當于正常的700相當于bold*/.box6{font-weight: lighter;}.box7{font-weight: 700;}/*font-style 字體類型normal 默認文字正常italic 文字斜體（屬性）oblique 文字斜體*/.box8{font-style: italic;}/*color 文字顏色關鍵字英文單詞 red green16進制（0-9 a-f）#5544aa #54a #abd456#dddddd #dddrgb(0-255,0-255,0-255)r redg greenb bluergba(0-255,0-255,0-255,0-1)r redg greenb bluea alpha(透明度)0 完全透明1 完全不透明*/.box9{/*color: red;*/color: rgb(255,25,10);}.box10{/*color: #29aa60;*/color: rgba(255,25,10,0.5);}</style> </head> <body><div class="box1"> hello word 123 你好</div><div class="box2"> hello word 123 你好</div><div class="box3"> hello word 123 你好</div><div class="box4"> hello word 123 你好</div><div class="box5"> hello word 123 你好</div><div class="box6"> hello word 123 你好</div><div class="box7"> hello word 123 你好</div><div class="box8"> hello word 123 你好</div><div class="box9"> hello word 123 你好</div><div class="box10"> hello word 123 你好</div><div style="font-size: 20px">1<div style="font-size: 2em">2</div></div> </body> </html>

css文本屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*white-space: 換行方式normal 正常換行nowrap 不換行*/div{width: 200px;background: skyblue;white-space: nowrap;/*超出隱藏*/overflow: hidden;/*省略號*/text-overflow: ellipsis;}/*text-indent 首行縮進（em）line-height 行高 *****letter-spacing 字距word-spacing 詞距*/.box{width: 300px;text-indent: 2em;line-height: 30px;letter-spacing: 2px;}/*div中的文字垂直居中：line-height:值。值等于div的高度。line-height: 80px;text-align 文本水平對齊方式left 默認值向左對其rightcenter ******/.box1{text-align: center;}/*text-transform 文本大小寫none 默認值無轉換發生uppercase 轉換成大寫lowercase 轉換成小寫capitalize 將英文單詞的首字母大寫*/div{text-transform: uppercase;}</style> </head> <body><div>Python是純粹的自由軟件，源代碼和解釋器CPython遵循 GPL(GNU General Public License)協議。Python語法簡潔清晰，特色之一是強制用空白符(white space)作為語句縮進。</div><p class="box">Python是純粹的自由軟件，源代碼和解釋器CPython遵循 GPL(GNU General Public License)協議。Python語法簡潔清晰，特色之一是強制用空白符(white space)作為語句縮進。</p><p class="box1" style="background: skyblue;height: 50px;line-height: 50px;">你好哇</p> </body> </html>

?css背景

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width: 600px;height: 400px;/*background-color: skyblue;*//*background-image: url("img/0.jpg");*//*background-repeat: no-repeat;*//*background-repeat: repeat-x;*//*background-repeat: repeat-y;*//*background-size: contain;*//*background-position: 90px;*/background: skyblue url("img/0.jpg") no-repeat center center/300px 300px;/*background: color image repeat position/size*/}/*background-color 背景色background-image 背景圖片background-repeat 背景平鋪repeat 平鋪默認repeat-x 平鋪xrepeat-y 平鋪ynp-repeat 不平鋪注意：只有背景圖片的寬高小于被設置的元素的寬高，才會有平鋪效果background-position 背景位置 x軸 y軸x軸 left center righty軸 top center bottom如果只給一個值，默認在x軸，y軸默認center(50%)% pxbackground-size 背景大小% px給一個值的時候，默認x軸，y軸默認auto auto會等比縮放cover 等比例縮放直到鋪滿x,y軸可以鋪滿整個框但是不一定能看到完整的圖片contain 等比例縮放x軸或者y軸其中的一個方向不一定鋪滿但是可以看到整個圖片*/</style> </head> <body><div></div></body> </html>

轉載于:https://www.cnblogs.com/pywjh/p/9554050.html

總結

以上是生活随笔為你收集整理的css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： centons7编译安装zabbix3.
下一篇： Difference Between I