當(dāng)前位置：
首頁 >
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
發(fā)布時(shí)間：2025/3/20
29
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
什么是css？
?
通配符選擇器
?
<head>/* *通配符選擇器 匹配任何元素 */*{margin: 0;padding: 0;} </head>?
?
?
?
css樣式有三種
一種是內(nèi)嵌，寫在head的style里面
<style>div{/*內(nèi)嵌的css*/width: 200px;height: 200px;background: blue;}</style>?
一種是外鏈，寫在單獨(dú)的.css文件里面
通過link標(biāo)簽（link + tab）填寫路徑的.css文件名即可
<head><meta charset="UTF-8"><link rel="stylesheet" href=""><title>css</title></head>?
一種是標(biāo)簽，直接寫在標(biāo)簽里面
<body><div style="width: 200px;height: 200px;background: lawngreen"></div></body>?
優(yōu)先級：標(biāo)簽樣式>內(nèi)嵌樣式 >外鏈樣式
?
?因?yàn)榇嬖谌N方法，所以在開發(fā)中總會(huì)產(chǎn)生耦合，所以存在一個(gè)選擇器的概念
優(yōu)先級：id選擇器>class選擇器>標(biāo)簽選擇器選擇器
用于準(zhǔn)確的選中元素，賦予樣式
?選擇器權(quán)重
誰的權(quán)重大，就聽誰的，誰的權(quán)重大，就用誰的樣式
1 ?class選擇器
? 通過標(biāo)簽的class屬性，選擇對應(yīng)的元素，借助類的概念，一處定義，多處使用
2 ?id選擇器
? ?通過標(biāo)簽的id屬性，選擇對應(yīng)元素。注：id選擇器唯一
3 ?群組選擇器
? 可以同時(shí)選擇多個(gè)標(biāo)簽的選擇器
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>?
?群組選擇器（群組選擇器 對幾個(gè)有相同屬性的選擇器進(jìn)行樣式設(shè)置 兩個(gè)選擇器之間必須用逗號隔開）
<!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>? 子代選擇區(qū)（>）只會(huì)選兒子，不會(huì)選孫子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>*{margin: 0;padding: 0;}/*子代選擇器 選擇某個(gè)元素下面的子元素*/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相鄰的下一個(gè)兄弟元素選擇到緊隨目標(biāo)元素后的第一個(gè)元素挨著的兄弟元素*/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>?復(fù)雜后代選擇器 優(yōu)先級的比較
1.先比id(最高位) class（中間位） tagName（個(gè)數(shù)位）
????????????? 1 ? ? ? ? ? ? ? ? ? ? ? ?? 2 ? ? ? ? ? ? ? ? ? ? ? ?? 3
2.id選擇器個(gè)數(shù)不相等，id越多，優(yōu)先級越高
3.id選擇器個(gè)數(shù)相同,則看class,class多的優(yōu)先級高
4.class個(gè)數(shù)相等，就看tagName個(gè)數(shù)
?
偽類選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類選擇器</title><style><!--順序不能亂-->/*LoVeHAte*/a:link{/*link 未被點(diǎn)擊的鏈接*/color: red;}a:visited{/*已被點(diǎn)擊的鏈接*/color: green;}a:hover{/*鼠標(biāo)懸停其上的元素 這個(gè)一定要掌握*/color: yellow;}a:active{/*鼠標(biāo)已經(jīng)再其上按下但是還沒有釋放的元素*/color: blue;}</style></head> <body><a href="http://www.baidu.com">baidu</a> </body> </html>?
? 重點(diǎn)了解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 當(dāng)div被鼠標(biāo)劃入的時(shí)候 改變后代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>/*設(shè)置網(wǎng)頁字體*//*html{*//*font-size: 20px;*//*}*/ /*font-family 字體類型瀏覽器默認(rèn)的字體是微軟雅黑，字體中有多個(gè)字體的時(shí)候，如果前面的字體沒有就使用后面的字體*/.box1{font-family: Arial,Algerian;}/*font-size 字體大小單位 px rem % empx 谷歌瀏覽器默認(rèn)字體大小16px,最小是12pxrem 相對于html(根標(biāo)簽)的字體大小em 等于父級的字體尺寸——相對于父級字體大小而言的% 相對于父容器中字體的%調(diào)整 這個(gè)要知道 */.box2{font-size: 32px;}.box3{font-size: 12px;}.box4{font-size: 2rem;}.box5{font-size: 2em;}/*font-weight 字體粗細(xì)關(guān)鍵字normal 默認(rèn)字體lighter 較細(xì)bold 加粗 這個(gè)要知道bolder 很粗給值只能100-900的整百數(shù)400相當(dāng)于正常的700相當(dāng)于bold*/.box6{font-weight: lighter;}.box7{font-weight: 700;}/*font-style 字體類型normal 默認(rèn) 文字正常italic 文字斜體（屬性）oblique 文字斜體*/.box8{font-style: italic;}/*color 文字顏色關(guān)鍵字英文單詞 red green16進(jìn)制（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 首行縮進(jìn)（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 默認(rèn)值 向左對其rightcenter ******/.box1{text-align: center;}/*text-transform 文本大小寫none 默認(rèn)值 無轉(zhuǎn)換發(fā)生uppercase 轉(zhuǎn)換成大寫lowercase 轉(zhuǎn)換成小寫capitalize 將英文單詞的首字母大寫*/div{text-transform: uppercase;}</style> </head> <body><div>Python是純粹的自由軟件， 源代碼和解釋器CPython遵循 GPL(GNU General Public License)協(xié)議。Python語法簡潔清晰，特色之一是強(qiáng)制用空白符(white space)作為語句縮進(jìn)。</div><p class="box">Python是純粹的自由軟件， 源代碼和解釋器CPython遵循 GPL(GNU General Public License)協(xié)議。Python語法簡潔清晰，特色之一是強(qiáng)制用空白符(white space)作為語句縮進(jìn)。</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 平鋪 默認(rèn)repeat-x 平鋪xrepeat-y 平鋪ynp-repeat 不平鋪?zhàn)⒁?#xff1a;只有背景圖片的寬高小于被設(shè)置的元素的寬高，才會(huì)有平鋪效果background-position 背景位置 x軸 y軸x軸 left center righty軸 top center bottom如果只給一個(gè)值，默認(rèn)在x軸，y軸默認(rèn)center(50%)% pxbackground-size 背景大小% px給一個(gè)值的時(shí)候，默認(rèn)x軸，y軸默認(rèn)auto auto會(huì)等比縮放cover 等比例縮放直到鋪滿x,y軸 可以鋪滿整個(gè)框 但是不一定能看到完整的圖片contain 等比例縮放x軸或者y軸其中的一個(gè)方向 不一定鋪滿 但是可以看到整個(gè)圖片*/</style> </head> <body><div></div></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/pywjh/p/9554050.html
總結(jié)
以上是生活随笔為你收集整理的css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centons7编译安装zabbix3.
- 下一篇： Difference Between I