CSS入门基础
目錄
一、CSS基本語法
二、CSS引入方式
行內樣式
內聯樣式
外聯樣式
link引入
@import引入
樣式的優先級
三、CSS選擇器
標簽選擇器
類選擇器
id選擇器?
屬性選擇器
層級選擇器
組合選擇器
偽類選擇器
選擇器優先級
四、CSS盒子模型
邊框顏色? border-color
邊框粗細? border-width
邊框樣式??border-style
邊框的簡寫
外邊設置?margin
內邊設置?padding
display屬性
五、浮動
清除浮動
解決浮動塌陷問題
六、定位
相對、 絕對定位
固定定位
堆疊順序
七、常用效果（圓角、透明、陰影）
圓角效果
透明效果
背景透明
整體透明
盒子陰影? box-shadow
文本陰影? text-shadow
八、響應式效果
手機屏幕的適應
頁面自適應
一、CSS基本語法
二、CSS引入方式
行內樣式
<!-- 行內樣式 style="" --> <div style="color: green; border: 1px solid red;"> CSS行內樣式的引入!!! </div>內聯樣式
<head><!--使用style標簽寫在head標簽內--><style>/*元素選擇器*/div {color: red;font-size: 18px;}</style> </head> <body><div> CSS行內樣式的引入 ！！！</div> </body>外聯樣式
asd.css
div {color: red;font-size: 18px; }目錄結構
?
外聯樣式引入方式有兩種：
link引入
<link rel="stylesheet" href="css/asd.css">@import引入
<style>@import url(css/asd.css); </style>樣式的優先級
就近原則： 行內樣式 > 內聯樣式 == 外聯樣式 (后面覆蓋前面)?
三、CSS選擇器
基本選擇器分三種：標簽選擇器、類選擇器、id選擇器。
標簽選擇器
語法：標簽名{}
例如：div{color:red;font-size:20px;}
類選擇器
類選擇器是通過class屬性進行元素的獲取，可用于對多個元素進行相同的樣式設置。
語法：.類名{}
例如：.div-cls{color:red;}
id選擇器?
id選擇器是通過id屬性給元素一個唯一標識（設置多個id相同不會報錯，會影響后期js的學習，建議id值要唯一）。
語法：#id名{}
例如：#div-id{color:red;}
屬性選擇器
屬性選擇器是根據元素上已有的屬性標識進行選擇
語法：[屬性名='']{}
<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>組合選擇器
組合選擇器是根據元素在頁面中的同級關系進行選擇。
<html><head><meta charset="utf-8"><style>div span,p span {color: green;}p span,h4 span{color: yellow;}</style></head><body><div>div中的不帶標簽的內容<span>組合選擇器，注意很常用</span></div><p><span>p標簽中的span標簽</span></p><h4><span>h4標簽中的span標簽</span></h4></body> </html>偽類選擇器
偽類選擇器是用于快速查找元素的，開發中常用 nth-of-type?選擇器。
<html><head><style>//第一個p:nth-of-type(1) {color: red;}//奇數項p span:nth-of-type(2n+1) {background-color: aqua;}//偶數項p span:nth-of-type(2n) {background-color: blue;}/* 默認被點擊的狀態 */a:link {color: red;}/* 訪問之后的狀態 */a:visited {color: yellow;}/* 處在活動狀態 */a:active {color: brown;}/* 鼠標懸浮狀態 */a:hover {color: blueviolet;}</style></head><body><p><span>百度新聞</span><span>新浪官網</span><span>騰訊官網</span></p><a href="#">百度一下</a></body> </html>選擇器優先級
標簽選擇器的優先級大小如下所示
!important>行內樣式>id選擇器>類選擇器>標簽選擇器
? 無窮大? ? ? ?1000? ? ? ? ? 100? ? ? ? ? 10? ? ? ? ? ? ? ? 1
四、CSS盒子模型
指的是將HTML中所有元素都看成一個盒子，盒子與盒子之間的距離，包括盒子的邊框以及盒子邊框和盒子內容的距離都可以設置。
邊框顏色? 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;? 整體邊框
指定方位調整粗細：
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>內邊設置?padding
padding-left調用文本與左邊間距
padding-top調用文本與上邊間距
padding-bottom調用文本與底部間距
padding-right調用文本與右邊間距
.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; | 將元素變為塊元素 |
| display:inline; | 將元素變為行元素 |
| display:inline-block; | 將元素變為行內塊元素 |
五、浮動
文檔流（元素默認從上往下布局的方式就叫文檔流），浮動是改變元素在文檔流中的規則，讓元素可以在水平方向上進行排版。
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>六、定位
浮動更多的用于整體排版，對于精確到像素值的頁面調整需要使用定位。
| position:relative; | 相對定位（相對默認位置進行定位，不脫離文檔流，仍占據頁面位置） |
| 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>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><div class="divid">固定定位</div><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p><p>內容內容......................</p></body> </html>堆疊順序
元素在進行定位時，會出現位置相同的情況，可以通過設置其堆疊順序決定顯示的優先級。????????
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 ;/* 參數一 X軸偏移量 參數二 Y軸偏移量 參數三 陰影模糊程度 參數四 陰影擴展半徑參數五 陰影顏色 參數六 inset內陰影 */}</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>八、響應式效果
自適應方式兩種：響應式、彈性盒子；基本上所有用于前端頁面開發的流行框架中都封裝了響應式或彈性盒子的操作。
手機屏幕的適應
H5的出現可以讓PC端的應用直接在手機端進行等比例使用，需要設置其視圖模式。
<meta name="viewport" content="width=device-width, initial-scale=1">頁面自適應
對網頁中的元素的大小，根據電腦屏幕的大小進行動態設置，從而達到一種響應式的效果。
<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万元 大空间优质小型车推
- 下一篇： 盲点