css-属性、样式调节
生活随笔
收集整理的這篇文章主要介紹了
css-属性、样式调节
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- CSS-屬性、樣式調節
- 選擇器優先級
- 寬和高
- 字體屬性
- 文字屬性
- 背景屬性
- 背景圖片和應用案例
- 邊框
- 畫圓
- display屬性
- 盒子模型
- 浮動
- 浮動的缺陷
- 解決方法:
- 溢出
- 圓形頭像示例
- 定位(position)
- 相對定位 relative
- 絕對定位 absolute
- 固定定位 fixed
- 是否脫離文檔流
- 哪些狀態是脫離正常文檔流的
- 不脫離
- 脫離
- z-index模擬
- 透明度
CSS-屬性、樣式調節
選擇器優先級
選擇器相同，遵循就近原則；
選擇器不同
行內–>id選擇器–>類選擇器–>標簽選擇器
除此之外還可以通過添加 !importrant方式來強制讓樣式生效,但并不推薦使用,因為使用過多會導致樣式文件混亂不堪,不宜維護.
語法舉例:.c1 { color: blue !important;}
寬和高
寬和高.只能給塊兒級標簽設置;行內標簽是無法設置寬高的.
width:寬
heigth:高
字體屬性
調節文本顏色兩種方式
文字屬性
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>--> <!-- 大空間的凱撒件打開--> <!--</div>--> <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><!--inline-block能夠讓一個標簽即有塊兒級標簽可以設置長寬的特點 又有行內標簽在一行展示的特點--><div>div1</div><!--<div style="display: none">div2</div>--><div style="visibility:hidden">div2</div><div>div3</div><!--display: none隱藏標簽 并且標簽所占的位置也要讓出來--> </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:
? 回到頂部
是否脫離文檔流
哪些狀態是脫離正常文檔流的
? 驗證這個標簽原來所占用的位置還在不在
? 浮動
? 定位
不脫離
? 相對定位
脫離
? 脫離文檔流
? 絕對定位
? 固定定位
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>透明度
透明度:
總結
以上是生活随笔為你收集整理的css-属性、样式调节的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 产品读书《怪诞行为学》
- 下一篇： 一键GHOST使用图文教程