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

编程问答

css-属性、样式调节

發布時間：2024/3/12 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 css-属性、样式调节小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

CSS-屬性、樣式調節
- 選擇器優先級
- 寬和高
- 字體屬性
- 文字屬性
- 背景屬性
- 背景圖片和應用案例
- 邊框
- 畫圓
- display屬性
- 盒子模型
- 浮動
- - 浮動的缺陷
  - 解決方法:
- 溢出
- - 圓形頭像示例
- 定位(position)
- - 相對定位 relative
  - 絕對定位 absolute
  - 固定定位 fixed
- 是否脫離文檔流
- - 哪些狀態是脫離正常文檔流的
  - 不脫離
  - 脫離
- z-index模擬
- 透明度

CSS-屬性、樣式調節

選擇器優先級

選擇器相同，遵循就近原則；

選擇器不同

行內–>id選擇器–>類選擇器–>標簽選擇器

除此之外還可以通過添加 !importrant方式來強制讓樣式生效,但并不推薦使用,因為使用過多會導致樣式文件混亂不堪,不宜維護.

語法舉例:.c1 { color: blue !important;}

寬和高

寬和高.只能給塊兒級標簽設置;行內標簽是無法設置寬高的.

width:寬

heigth:高

字體屬性

調節文本顏色兩種方式

color: yellow;#顏色color: #ffffff;#顏色color: rgb(255,103,0);#顏色深淺color: rgba(255,103,0,0.4);#顏色深淺

font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;#字體類型font-size: 16px; #字體型號font-weight: bold; #字體粗細color: rgba(255,103,0,0.4); #顏色深淺

文字屬性

p {text-align: justify;#對其方式text-decoration: underline;#下劃線在文字下方text-decoration: overline;#下劃線在文字上方text-decoration: line-through;#下劃線穿過文字font-size: 16px;#文字大小text-indent: 32px;#首行縮進大小} a {text-decoration: none;#控制下劃線方式color: yellow;#字體顏色}

背景屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div {background-color: black;#背景色color: white;#標簽的字體色}.c1 {width: 400px;#寬height: 400px;#高/*background-color: gray;*/#背景色/*background-image: url("111.png");*/背景圖片/*background-repeat: no-repeat; #不平鋪(平鋪的話會鋪滿整個規定的背景)/*!*background-repeat: repeat-x; *!*/# X軸平鋪/*!*background-repeat: repeat-y;*!*/# Y軸平鋪/*background-position: 100px 10px; !*# 平鋪調節;第一個調節左右第二個調節上下#平鋪支持簡寫;分別是:左右,上下,圖片色,不平鋪background: center center url("111.png") yellow no-repeat ;}</style> </head> <body>    <div class="c1"></div> </body> </html>

背景圖片和應用案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#d1 {background-image:#背景圖片 url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");background-attachment: fixed;#背景--固定}</style> </head> <body> <div style="height: 500px;background-color: red"></div> <div style="height: 500px;background-color: gray"></div> <div style="height: 500px" id="d1"></div> <div style="height: 500px;background-color: yellow"></div></body> </html>

邊框

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>p {/*border-style: dotted; !*樣式*!*//*border-color: red; !*邊框顏色*!*//*border-width: 10px; !*邊框粗細*!*//*border-left: solid;*//*border-right: dashed;*//*border-top: dotted;*//*border-bottom: solid;*//*border-left-color: deeppink;*//*邊框有四邊每一邊都可以設置獨有的樣式顏色粗細*/#上面P標簽邊框的簡寫border: solid 3px red; /*只要把參數寫進去就可以不需要考慮順序*/}div {height: 500px;width: 500px;border: 3px solid red;}span {height: 200px;width: 200px;border: 5px solid green;}</style> </head> <body> <p>看的撒科技大廈考慮到金卡圣誕節快樂撒嬌 </p><div>sakljdkasd</div> <span>hdsakljdklsad</span></body> </html>

畫圓

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div {height: 200px;width: 200px;border-radius: 50%;#基于上面的框,圓的占比background-color: red;#圓背景色background-image: url("111.png");#圖片background-repeat: no-repeat;#不平鋪}</style> </head> <body> <div></div> </body> </html>

display屬性

display:顯示

inline:排隊

inline-block:內聯塊

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="height: 50px;width: 50px;background-color: red;display: inline">喲喲喲 </div><div style="height: 50px;width: 50px;background-color: green;display: inline">啊啊啊 </div><span style="background-color: red;height: 100px;width: 100px;display: inline-block">span</span><span style="background-color: green;height: 100px;width: 100px;display: inline-block">span</span><div>div1</div><div style="visibility:hidden">div2</div><div>div3</div> </body> </html>

盒子模型

外邊框margin

邊框border

內邊距/內填充padding

內容content

快遞盒快遞盒與快遞盒之間的距離---標簽與標簽之間的距離---外邊距(margin) 快遞盒盒子的厚度---標簽的邊框---邊框(border) 快遞盒里面的物體到里面盒子的距離---標簽內部文本內容到邊框的距離---內邊距/內填充(padding) 快遞盒內容的物體大小---標簽內部的文本內容 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0; #/*取消body標簽自帶的8px的外邊距*/}/*div {*//* border: 5px solid red;*//*}*/.c1 {height: 100px;width: 100px;background-color: red;/*margin-bottom: 50px;*//*margin-left: 100px;*//*margin: 20px; #上下左右/*margin: 20px 40px; #第一個是上下第二個是左右/*margin: 20px 40px 60px; #上左右下/*margin: 20px 40px 60px 80px; #上右下左順時針/*margin: 0 auto; #水平居中}.c2 {margin-top: 20px;height: 100px;width: 100px;background-color: green;}.c3 {border: 3px solid black;height: 400px;width: 400px;/*padding-top: 20px;*//*padding-left: 40px;*//*padding: 20px;*/padding: 20px 40px;/*padding: 20px;*//*padding: 20px;*//*padding跟margin簡寫規律一致*/}p {margin: 0;}ul {padding-left: 0;}</style></head> <body>     <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p><ul><li>111</li><li>222</li><li>333</li> </ul></body> </html>

浮動

浮動的元素是脫離正常文檔流的自身多大就會占多大不再有獨占一行的概念(浮動多用于頁面的前期布局(!!!))

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;#取消外邊框默認的8}.c1 {height: 100px;width: 100px;background-color: red;float: left;#左邊浮動}.c2 {height: 100px;width: 100px;background-color: green;float: right;#右邊浮動}</style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>

浮動的缺陷

浮動會造成父標簽塌陷的問題(里面沒有元素會塌陷)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}#d1 {border: 3px solid black;}.c1 {height: 100px;width: 100px;background-color: red;float: left;}.c2 {height: 100px;width: 100px;background-color: green;float: left;}.c3 {height: 150px;width: 100px;background-color: orange;/*float: left;*/}.clearfix:after {content: " ";display: block;clear: both;}</style> </head> <body> <div id="d1" class="clearfix"><div class="c1"></div><div class="c2"></div><div class="c3">sadkjajsdasjd</div> </div> </body> </html>

解決方法:

清除浮動帶來的影響,只需要記住一個結論 ,在寫頁面之前先定義好清除浮動的css代碼 ;結論:誰塌陷了就給誰加上clearfix樣式類

.clearfix:after {content: "";display: block;clear: both;}

#瀏覽器默認是優先展示文本內容的(即文本內容不被浮動在上方的頁面所影響)

溢出

內容超過文本框,會出現下拉條,或者修改文本框大小

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1 {height: 50px;width: 50px;border: 1px solid black;#第一個參數邊框大小,第二個邊框色overflow: auto;#溢出自動調節}</style> </head> <body> <div class="c1">今天周五了可惜明天不放假今天周五了可惜明天不放假今天周五了可惜明天不放假今天周五了可惜明天不放假今天周五了可惜明天不放假今天周五了可惜明天不放假今天周五了可惜明天不放假 </div> </body> </html>

圓形頭像示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;background-color: antiquewhite;#背景色}.c1 {height: 100px;width: 100px;border-radius: 50%;#圓占比border: 1px solid white;#圓邊框大小和圓背景色/*background-image: url("111.png");*//*background-repeat: no-repeat;*/overflow: hidden;#溢出的元素自動隱藏}img {max-width: 100%;#圖片在園內占比大小}</style> </head> <body> <div class="c1"><img src="111.png" alt=""> </div> </body> </html>

定位(position)

所有的標簽默認情況下都是靜態的(static) 無法做位置的修改
如果你想要修改標簽位置你需要先將靜態改為可以修改的狀態

關鍵字語法:position:relative/absolute/fixed

相對定位 relative

? 相當于標簽原有的位置做偏移
? 了解即可

絕對定位 absolute

? 相當于已經定位過的(static>>>relative)父標簽做偏移
? eg:
? 小米購物車

固定定位 fixed

? 相當于瀏覽器窗口固定在某個位置始終不變
? eg:
? 回到頂部

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.c1 {height: 100px;width: 100px;background-color: red;/*position: static; #!*默認值*!*/position: relative; #/*相對定位*/left: 100px;top: 100px;}.c2 {height: 50px;width: 100px;background: green;position: relative;#相對定位}.c3 {position: absolute;#絕對定位height: 200px;width: 200px;background-color: orange;left: 100px;top: 50px;}.cc {height: 50px;width: 100px;background-color: #4e4e4e;color: white;position: fixed;#固定浮動bottom: 20px;#浮動框高度right: 20px;#浮動框右間距}</style> </head> <body>     <div style="height: 1000px;background-color: red"></div> <div style="height: 1000px;background-color: green"></div> <div style="height: 1000px;background-color: orange"></div> <div class="cc">回到頂部</div> </body> </html>

是否脫離文檔流

哪些狀態是脫離正常文檔流的

? 驗證這個標簽原來所占用的位置還在不在
? 浮動
? 定位

不脫離

? 相對定位

脫離

? 脫離文檔流
? 絕對定位
? 固定定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1 {background-color: red;height: 50px;width: 50px;position: relative;#相對定位不脫離}.c2 {background-color: green;height: 50px;width: 50px;/*position: absolute;*/#脫離position: fixed;#脫離bottom: 20px;right: 20px;}.c3 {background-color: orange;height: 50px;width: 50px;}</style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>

z-index模擬

控制z軸的距離(類似彈出的登錄小框)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.modal {background-color: #808080;position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: 999;#Y軸小于下面的頁面,所以顯示在下面的頁面下面opacity: 0.4;}.form {background-color: white;height: 200px;width: 100px;position: fixed;top: 50%;left: 50%;z-index: 1000;#Y軸margin-top: -100px;margin-left: -50px;}</style> </head> <body> <div>我是最底下的那個</div> <div class="modal"></div> <div class="form"></div> </body> </html>

透明度

透明度:

optacity既可以該顏色也可以改文本

rgba只能改該顏色

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1 {background-color: rgba(128,128,128,0.4);}#只能改該顏色.c2 {background-color: rgb(128,128,128);#既可以改顏色也可以改文本顏色 opacity: 0.4;}</style> </head> <body> <div class="c1">阿薩德撒大家都</div> <div class="c2">阿薩德撒大家都</div> </body> </html>

總結

以上是生活随笔為你收集整理的css-属性、样式调节的全部內容，希望文章能夠幫你解決所遇到的問題。

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