當前位置：
首頁 >
CSS入门基础
發(fā)布時間：2024/3/24
47
豆豆
目錄
一、CSS基本語法
二、CSS引入方式
行內(nèi)樣式
內(nèi)聯(lián)樣式
外聯(lián)樣式
link引入
@import引入
樣式的優(yōu)先級
三、CSS選擇器
標簽選擇器
類選擇器
id選擇器?
屬性選擇器
層級選擇器
組合選擇器
偽類選擇器
選擇器優(yōu)先級
四、CSS盒子模型
邊框顏色? border-color
邊框粗細? border-width
邊框樣式??border-style
邊框的簡寫
外邊設置?margin
內(nèi)邊設置?padding
display屬性
五、浮動
清除浮動
解決浮動塌陷問題
六、定位
相對、 絕對定位
固定定位
堆疊順序
七、常用效果（圓角、透明、陰影）
圓角效果
透明效果
背景透明
整體透明
盒子陰影? box-shadow
文本陰影? text-shadow
八、響應式效果
手機屏幕的適應
頁面自適應
一、CSS基本語法
二、CSS引入方式
行內(nèi)樣式
<!-- 行內(nèi)樣式 style="" --> <div style="color: green; border: 1px solid red;"> CSS行內(nèi)樣式的引入!!! </div>內(nèi)聯(lián)樣式
<head><!--使用style標簽寫在head標簽內(nèi)--><style>/*元素選擇器*/div {color: red;font-size: 18px;}</style> </head> <body><div> CSS行內(nèi)樣式的引入 ！！！</div> </body>外聯(lián)樣式
asd.css
div {color: red;font-size: 18px; }目錄結構
?
外聯(lián)樣式引入方式有兩種：
link引入
<link rel="stylesheet" href="css/asd.css">@import引入
<style>@import url(css/asd.css); </style>樣式的優(yōu)先級
就近原則： 行內(nèi)樣式 > 內(nèi)聯(lián)樣式 == 外聯(lián)樣式 (后面覆蓋前面)?
三、CSS選擇器
基本選擇器分三種：標簽選擇器、類選擇器、id選擇器。
標簽選擇器
語法：標簽名{}
例如：div{color:red;font-size:20px;}
類選擇器
類選擇器是通過class屬性進行元素的獲取，可用于對多個元素進行相同的樣式設置。
語法：.類名{}
例如：.div-cls{color:red;}
id選擇器?
id選擇器是通過id屬性給元素一個唯一標識（設置多個id相同不會報錯，會影響后期js的學習，建議id值要唯一）。
語法：#id名{}
例如：#div-id{color:red;}
屬性選擇器
屬性選擇器是根據(jù)元素上已有的屬性標識進行選擇
語法：[屬性名='']{}
<html><head><style>/* 具有title屬性的元素 */[title]{font-size: 18px;color: red;}/* 以http開頭的元素 */[href^="http"]{color: #008B8B;}/* 以...結束 */[href$="cn"]{color: #483D8B;}/*href中包含有i*/[href*='i']{color: #808080;}</style></head><body><button title="普通按鈕">普通按鈕</button><a href="http://www.baidu.com">百度鏈接</a><a href="www.sina.cn">新浪博客</a></body> </html>層級選擇器
<html><head></head><style>/* 祖宗后代，所有的后代 */div span{font-size: 18px;color:red;}/* 父子選擇器，僅一層后代 */div p{color: blue;}/* 兄弟選擇器 */div~p{color: pink;}/* 跟班選擇器 */p+span{background-color: deeppink;}</style><body><div><p>哈哈哈</p><a href="#"><span>點我點我！</span></a></div><p>我是div的兄弟</p><p><span>我是p標簽中的span標簽</span></p><span>跟班選擇器</span></body> </html>組合選擇器
組合選擇器是根據(jù)元素在頁面中的同級關系進行選擇。
<html><head><meta charset="utf-8"><style>div span,p span {color: green;}p span,h4 span{color: yellow;}</style></head><body><div>div中的不帶標簽的內(nèi)容<span>組合選擇器，注意很常用</span></div><p><span>p標簽中的span標簽</span></p><h4><span>h4標簽中的span標簽</span></h4></body> </html>偽類選擇器
偽類選擇器是用于快速查找元素的，開發(fā)中常用 nth-of-type?選擇器。
<html><head><style>//第一個p:nth-of-type(1) {color: red;}//奇數(shù)項p span:nth-of-type(2n+1) {background-color: aqua;}//偶數(shù)項p span:nth-of-type(2n) {background-color: blue;}/* 默認被點擊的狀態(tài) */a:link {color: red;}/* 訪問之后的狀態(tài) */a:visited {color: yellow;}/* 處在活動狀態(tài) */a:active {color: brown;}/* 鼠標懸浮狀態(tài) */a:hover {color: blueviolet;}</style></head><body><p><span>百度新聞</span><span>新浪官網(wǎng)</span><span>騰訊官網(wǎng)</span></p><a href="#">百度一下</a></body> </html>選擇器優(yōu)先級
標簽選擇器的優(yōu)先級大小如下所示
!important>行內(nèi)樣式>id選擇器>類選擇器>標簽選擇器
? 無窮大? ? ? ?1000? ? ? ? ? 100? ? ? ? ? 10? ? ? ? ? ? ? ? 1
四、CSS盒子模型
指的是將HTML中所有元素都看成一個盒子，盒子與盒子之間的距離，包括盒子的邊框以及盒子邊框和盒子內(nèi)容的距離都可以設置。
邊框顏色? border-color
<html><head><style>#box {width: 400px;height: 400px;border: 1px solid red;background-color: antiquewhite;/*上下 左右*/border-color: red blue;/*red上 blue左右 blueviolet下*/border-color: red blue blueviolet;/*上右下左*//* border-color: red blue pink lawngreen; *//*border-top-color: yellow;border-left-color: orange;border-bottom-color: green;border-right-color: red;*/}</style></head><body><div id="box">我是盒子！</div></body> </html>邊框粗細? border-width
整體粗細：
border-width:20px;? 整體邊框
指定方位調(diào)整粗細：
border-top-width? ? ? 上?
border-left-width? ? ? 左
border-right-width? ? 右
border-bottom-width? ?下
<html><head><style>.box{width: 300px;height: 300px;background-color: aqua;border: solid;border-color: red;/* border-width:20px;*/border-top-width: 10px;border-left-width: 20px;border-right-width: 30px;border-bottom-width: 40px;}</style></head><body><div class="box">hello world！</div></body> </html>邊框樣式??border-style
<html><head><style>.box{width: 300px;height: 300px;background-color: #D7D7D7;border-left-style:solid;//邊框樣式為實線border-top-style: dashed;/*邊框樣式為虛線*/border-bottom-style: double;/*邊框樣式為雙線*/border-bottom-style: solid;/*邊框樣式為實線*/}</style></head><body><div class="box">hello world！</div></body> </html>邊框的簡寫
<head><style>.box{width: 251px;height: 251px;background-color: #E8E8E8;border:1px solid #3a6587}</style></head><body><div class="box">hello world</div></body>外邊設置?margin
margin可以設置塊元素的水平對齊方式
div{margin:0 auto;//塊元素在水平方向居中 } <html><head><style>*{margin: 0px;}.box{width: 250px;height: 250px;background-color: #E8E8E8;border:1px solid #3a6587;margin-top: 30px;margin-left:60px ;/*margin: 0px auto;居中*/}#h2id{margin-top: 20px;margin-left: 500px;}</style></head><body><h2 id="h2id">水果列表</h2><div class="box">你好！蘋果</div></body> </html>內(nèi)邊設置?padding
padding-left調(diào)用文本與左邊間距
padding-top調(diào)用文本與上邊間距
padding-bottom調(diào)用文本與底部間距
padding-right調(diào)用文本與右邊間距
.input{font-size:16px;background-color:#3a6587;height:35px;line-height:35px;color:#FFF;padding-left: 110px; padding-top:10px ; /* 讓標題左邊留點空隙*/ }display屬性
| display:none; | 隱藏元素 |
| display:block; | 將元素變?yōu)閴K元素 |
| display:inline; | 將元素變?yōu)樾性?/td> |
| display:inline-block; | 將元素變?yōu)樾袃?nèi)塊元素 |
五、浮動
文檔流（元素默認從上往下布局的方式就叫文檔流），浮動是改變元素在文檔流中的規(guī)則，讓元素可以在水平方向上進行排版。
float:left或者right
清除浮動
<html><head><style>.wrapper{width: 260px;height: 260px;background-color: pink;}.content{float: left;/* 會按照從左向右浮動 */border: 1px solid #ccc;width: 50px;height: 50px;background-color: wheat;}#id8,#id9{/*清除浮動，因為content浮動后面的div都會根著浮動，清楚 id8,id9不能左浮動（默認是從上往下顯示）*/clear: left;}</style></head><body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div id="id8" class="content">8</div><div id="id9" class="content">9</div></div></body> </html>解決浮動塌陷問題
<html><head><style>#box1{width: 400px;background-color: aquamarine;/* 方案一 設置固定高度*//* height: 400px; *//* 方案二 使用overflow屬性 *//* overflow: hidden; */}#box2{float: left;background-color: pink;}.divclass{/* 方案三 在浮動的下面清除浮動 */clear: both;}</style></head><body><div id="box1"><div>黃河之水天上來，奔流到海不復回黃河之水天上來，奔流到海不復回黃河之水天上來，奔流到海不復回黃河之水天上來，奔流到海不復回黃河之水天上來，奔流到海不復回</div><div id="box2" style="width: 200px;height: 200px;"></div><div class="divclass"></div></div></body> </html>六、定位
浮動更多的用于整體排版，對于精確到像素值的頁面調(diào)整需要使用定位。
| position:relative; | 相對定位（相對默認位置進行定位，不脫離文檔流，仍占據(jù)頁面位置） |
| position:absolute; | 絕對定位（相對第一個帶有定位屬性的父元素進行定位，默認是瀏覽器） |
| position:fixed; | 相對瀏覽器進行固定定位 |
相對、 絕對定位
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0px;padding: 0px;}.box1{width: 100px;height: 100px;background-color: black;opacity: 0.5; /*透明度*//*絕對定位 不會保留原來的位*/position: absolute;left: 150px;top: 150px; /*絕對定位：會脫離原來的層，box1這一層被騰空了，別的層就可以上去了，只是不同的層而已，每個absolute都是一層，可以自由動*//*相對定位 會保留原來的位置*//*position: relative;left: 150px;top: 150px;*/}.box2{width: 200px;height: 200px;background-color: red;}</style></head><body><div class="box1"></div><div class="box2"></div></body> </html>固定定位
<html><head><meta charset="UTF-8"><title></title><style>.divid{width: 150px;height: 30px;background-color: #ff4200;border-radius:32px ;text-align: center;line-height: 31px;color: white;position: fixed;/* 固定定位*/top: 220px;right: 10px;}</style></head><body><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><div class="divid">固定定位</div><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p><p>內(nèi)容內(nèi)容......................</p></body> </html>堆疊順序
元素在進行定位時，會出現(xiàn)位置相同的情況，可以通過設置其堆疊順序決定顯示的優(yōu)先級。????????
z-index 越大越靠前
<html> <haad><style>img{position: absolute;left: 0px;top: 0px;z-index: -1; /* 圖片就在文字下方*/}p{color: #E8E8E8;}</style></head><body><img src="xxx.jpg" width="200px" /><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P></body> </html>七、常用效果（圓角、透明、陰影）
圓角效果
控制盒子的四個角的弧度，border-radius，控制四個角的弧度，當弧度值大于或等于元素寬高的一半時，元素會變成一個圓。border-radius的值可以是百分比或者px像素。
<html><head><style>#big{position: relative;margin: 200px auto;width: 300px;height: 300px;background-color: black;border-radius: 50%;}#min{position: absolute;width: 250px;height: 250px;margin: 25px;background-color: white;border-radius: 50%;}</style></head><body><div id="big"><div id="min"></div></div></body> </html>透明效果
背景透明
背景透明只針對背景顏色進行透明。background-color:rgba(x,x,x,x) 透明度在0~1之間
div{width: 200px;height: 200px;background-color:rgba(255,0,0,0.5); /*紅*/background-color:rgba(0,255,0,0.5); /*綠*/background-color:rgba(0,0,255,0.5); /*藍*/background-color: rgba(255, 255, 255, 0); /*完全透明的白色*/background-color: rgba(0, 0, 0, 1); /*完全不透明度的黑色*/ }整體透明
整個元素，包括該元素的所有子元素，進行透明。opacity 透明度 取值范圍 0~1
<head><style>div{width:100px;height:35px;background-color: #B8B8B8;color: white;line-height: 35px;text-align: center;border-radius: 10px;opacity: 0.2;}</style> </head> <body><div>百度一下</div> </body>盒子陰影? box-shadow
<head><style>div{width: 200px;height: 200px;margin: 50px auto;box-shadow: 3px 3px 9px 100px gray ;/* 參數(shù)一 X軸偏移量 參數(shù)二 Y軸偏移量 參數(shù)三 陰影模糊程度 參數(shù)四 陰影擴展半徑參數(shù)五 陰影顏色 參數(shù)六 inset內(nèi)陰影 */}</style> </head> <body><div></div> </body>文本陰影? text-shadow
<head><style>p{text-align: center;text-shadow: 3px 3px 9px grey;}</style> </head> <body><p>君不見，黃河之水天上來</p> </body>八、響應式效果
自適應方式兩種：響應式、彈性盒子；基本上所有用于前端頁面開發(fā)的流行框架中都封裝了響應式或彈性盒子的操作。
手機屏幕的適應
H5的出現(xiàn)可以讓PC端的應用直接在手機端進行等比例使用，需要設置其視圖模式。
<meta name="viewport" content="width=device-width, initial-scale=1">頁面自適應
對網(wǎng)頁中的元素的大小，根據(jù)電腦屏幕的大小進行動態(tài)設置，從而達到一種響應式的效果。
<html><head><!-- width = device-width：寬度等于當前設備的寬度initial-sacle=1：初始的縮放比例為1(默認是1) --><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>/* 設置初始樣式 */*{margin: 0px;padding: 0px;}.heading,.container,.footing{margin: 10px auto;}.heading{height: 100px;background-color: cadetblue;}.left,.right,.main{background-color: green;}.footing{height: 100px;background-color: orange;}/* 設置寬度大于960px的頁面布局 */@media screen and (min-width: 960px){.heading,.container,.footing{width:960px;}.left,.main,.right{float: left;height: 500px;}.left,.right{width: 200px;}.main{margin-left: 5px;margin-right: 5px;width: 550px;}.container{height: 500px;}}/* 設置處于600px-900px之間的頁面布局 */@media screen and (min-width: 600px) and (max-width:960px){.heading,.container,.footing{width: 600px;}.left,.main{float: left;height: 400px;}.right{display: none;}.left{width: 160px;}.main{width: 435px;margin-left: 5px;}.container{height: 400px;}}/* 設置小于600px的頁面布局 */@media screen and (max-width: 600px) {.heading,.container.footing{width: 400px;}.left,.right{width: 400px;height: 100px;}.main{margin-top: 10px;width: 400px;height: 200px;}.right{margin-top: 10px;}.container{height: 400px;}</style></head><body><div class="heading"></div><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div><div class="footing"></div></body> </html>總結
- 上一篇： 汽车：圆梦不需5万元 大空间优质小型车推
- 下一篇： CSS相关知识点记录