css-属性、样式调节
生活随笔
收集整理的這篇文章主要介紹了
css-属性、样式调节
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- CSS-屬性、樣式調(diào)節(jié)
- 選擇器優(yōu)先級(jí)
- 寬和高
- 字體屬性
- 文字屬性
- 背景屬性
- 背景圖片和應(yīng)用案例
- 邊框
- 畫圓
- display屬性
- 盒子模型
- 浮動(dòng)
- 浮動(dòng)的缺陷
- 解決方法:
- 溢出
- 圓形頭像示例
- 定位(position)
- 相對(duì)定位 relative
- 絕對(duì)定位 absolute
- 固定定位 fixed
- 是否脫離文檔流
- 哪些狀態(tài)是脫離正常文檔流的
- 不脫離
- 脫離
- z-index模擬
- 透明度
CSS-屬性、樣式調(diào)節(jié)
選擇器優(yōu)先級(jí)
選擇器相同，遵循就近原則；
選擇器不同
行內(nèi)–>id選擇器–>類選擇器–>標(biāo)簽選擇器
除此之外還可以通過添加 !importrant方式來強(qiáng)制讓樣式生效,但并不推薦使用,因?yàn)槭褂眠^多會(huì)導(dǎo)致樣式文件混亂不堪,不宜維護(hù).
語法舉例:.c1 { color: blue !important;}
寬和高
寬和高.只能給塊兒級(jí)標(biāo)簽設(shè)置;行內(nèi)標(biāo)簽是無法設(shè)置寬高的.
width:寬
heigth:高
字體屬性
調(diào)節(jié)文本顏色兩種方式
文字屬性
p {text-align: justify;#對(duì)其方式text-decoration: underline;#下劃線在文字下方text-decoration: overline;#下劃線在文字上方text-decoration: line-through;#下劃線穿過文字font-size: 16px;#文字大小text-indent: 32px;#首行縮進(jìn)大小} 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;#標(biāo)簽的字體色}.c1 {width: 400px;#寬height: 400px;#高/*background-color: gray;*/#背景色/*background-image: url("111.png");*/背景圖片/*background-repeat: no-repeat; #不平鋪(平鋪的話會(huì)鋪滿整個(gè)規(guī)定的背景)/*!*background-repeat: repeat-x; *!*/# X軸平鋪/*!*background-repeat: repeat-y;*!*/# Y軸平鋪/*background-position: 100px 10px; !*# 平鋪調(diào)節(jié);第一個(gè)調(diào)節(jié)左右 第二個(gè)調(diào)節(jié)上下#平鋪支持簡(jiǎn)寫;分別是:左右,上下,圖片色,不平鋪background: center center url("111.png") yellow no-repeat ;}</style> </head> <body> <!--<div>--> <!-- 大空間的凱撒件打開--> <!--</div>--> <div class="c1"></div> </body> </html>背景圖片和應(yīng)用案例
<!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; !*邊框粗細(xì)*!*//*border-left: solid;*//*border-right: dashed;*//*border-top: dotted;*//*border-bottom: solid;*//*border-left-color: deeppink;*//*邊框有四邊 每一邊都可以設(shè)置獨(dú)有的樣式 顏色 粗細(xì)*/#上面P標(biāo)簽邊框的簡(jiǎn)寫border: solid 3px red; /*只要把參數(shù)寫進(jìn)去就可以 不需要考慮順序*/}div {height: 500px;width: 500px;border: 3px solid red;}span {height: 200px;width: 200px;border: 5px solid green;}</style> </head> <body> <p>看的撒科技大廈考慮到金卡圣誕節(jié)快樂撒嬌 </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:排隊(duì)
inline-block:內(nèi)聯(lián)塊
<!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><!--inline-block能夠讓一個(gè)標(biāo)簽即有塊兒級(jí)標(biāo)簽可以設(shè)置長(zhǎng)寬的特點(diǎn) 又有行內(nèi)標(biāo)簽在一行展示的特點(diǎn)--><div>div1</div><!--<div style="display: none">div2</div>--><div style="visibility:hidden">div2</div><div>div3</div><!--display: none隱藏標(biāo)簽 并且標(biāo)簽所占的位置也要讓出來--> </body> </html>盒子模型
浮動(dòng)
浮動(dòng)的元素是脫離正常文檔流的 自身多大就會(huì)占多大 不再有獨(dú)占一行的概念(浮動(dòng)多用于頁面的前期布局(!!!))
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;#取消外邊框默認(rèn)的8}.c1 {height: 100px;width: 100px;background-color: red;float: left;#左邊浮動(dòng)}.c2 {height: 100px;width: 100px;background-color: green;float: right;#右邊浮動(dòng)}</style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>浮動(dòng)的缺陷
浮動(dòng)會(huì)造成父標(biāo)簽塌陷的問題(里面沒有元素會(huì)塌陷)
<!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>解決方法:
清除浮動(dòng)帶來的影響,只需要記住一個(gè)結(jié)論 ,在寫頁面之前 先定義好清除浮動(dòng)的css代碼 ;結(jié)論:誰塌陷了 就給誰加上clearfix樣式類
.clearfix:after {content: "";display: block;clear: both;}#瀏覽器默認(rèn)是優(yōu)先展示文本內(nèi)容的(即文本內(nèi)容不被浮動(dòng)在上方的頁面所影響)
溢出
內(nèi)容超過文本框,會(huì)出現(xiàn)下拉條,或者修改文本框大小
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1 {height: 50px;width: 50px;border: 1px solid black;#第一個(gè)參數(shù)邊框大小,第二個(gè)邊框色overflow: auto;#溢出自動(dòng)調(diào)節(jié)}</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;#溢出的元素自動(dòng)隱藏}img {max-width: 100%;#圖片在園內(nèi)占比大小}</style> </head> <body> <div class="c1"><img src="111.png" alt=""> </div> </body> </html>定位(position)
所有的標(biāo)簽?zāi)J(rèn)情況下都是靜態(tài)的(static) 無法做位置的修改
如果你想要修改標(biāo)簽位置 你需要先將靜態(tài)改為可以修改的狀態(tài)
關(guān)鍵字語法:position:relative/absolute/fixed
相對(duì)定位 relative
? 相當(dāng)于標(biāo)簽原有的位置做偏移
? 了解即可
絕對(duì)定位 absolute
? 相當(dāng)于已經(jīng)定位過的(static>>>relative)父標(biāo)簽做偏移
? eg:
? 小米購(gòu)物車
固定定位 fixed
? 相當(dāng)于瀏覽器窗口固定在某個(gè)位置始終不變
? eg:
? 回到頂部
是否脫離文檔流
哪些狀態(tài)是脫離正常文檔流的
? 驗(yàn)證這個(gè)標(biāo)簽原來所占用的位置還在不在
? 浮動(dòng)
? 定位
不脫離
? 相對(duì)定位
脫離
? 脫離文檔流
? 絕對(duì)定位
? 固定定位
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>我是最底下的那個(gè)</div> <div class="modal"></div> <div class="form"></div> </body> </html>透明度
透明度:
總結(jié)
以上是生活随笔為你收集整理的css-属性、样式调节的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 产品读书《怪诞行为学》
- 下一篇： 一键GHOST使用图文教程