當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础入门（详细总结笔记）

發布時間：2024/1/1 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础入门（详细总结笔记）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、CSS介紹

2、CSS引入方式

2.1、行內樣式

2.2、內聯樣式

2.3、外聯樣式

2.4、樣式的優先級

2.5、樣式選擇

3、CSS選擇器

3.1、基本選擇器

3.2、屬性選擇器

3.3、層級選擇器

3.4、組合選擇器

3.5、偽類選擇器

3.6、通配符

3.7、選擇器優先級

4、CSS盒子模型

4.1、基礎樣式

4.2、盒子模型

4.2.1、邊框顏色

4.2.2、邊框粗細

4.2.3、邊框樣式

4.2.4、邊框的簡寫

4.2.5、外邊設置

4.2.6、內邊設置

4.2.7、背景

4.2.8、display屬性

4.3、浮動

4.3.1、清除浮動

4.3.2、解決浮動塌陷問題

4.4、定位

4.4.1、相對、絕對定位

4.4.2、固定定位

4.4.3、堆疊順序

5、CSS3常見效果

5.1、圓角效果

5.2、透明效果

5.2.1、背景透明

5.2.2、整體透明

5.3、盒子陰影

5.3.1、文本陰影

5.4、響應式效果

5.4.1、手機屏幕的適應

5.4.2、頁面自適應

1、CSS介紹

層疊樣式表其實就是對靜態頁面進行裝飾，但是，特別要注意的點是：通常建議表現形式與頁面內容分離（例如：人就是內容，穿著打扮就是表現形式）。

2、CSS引入方式

2.1、行內樣式

行內樣式（將樣式直接寫在標簽上），需要使用style屬性。

<div style="color: green; border: 1px solid red;">每天叫醒我的不是鬧鐘，是夢想！！！</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是鬧鐘，是夢想！！！</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是鬧鐘，是夢想！！！</div>

該方式可用于提高樣式的優先級，多次使用會導致代碼臃腫，不利于后期維護。?

2.2、內聯樣式

講頁面內容與表現形式進行分離，方便對樣式進行統一管理。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>/*元素選擇器*/div {color: red;font-size: 18px;}p{color: pink;font-size: 20px;}</style></head><body><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><p>鋼鐵俠</p><p>蝙蝠俠</p><p>蜘蛛俠</p></body> </html>

2.3、外聯樣式

對內聯樣式進行進一步的抽離，方便多個頁面共用同一個樣式，創建一個css文件，需要該樣式的HTML直接引用樣式即可。在項目下創建css包，創建css文件

外聯樣式引入方式有兩種：

link引入

@import引入

asd.css?

div {color: antiquewhite; } p{color: blue; }

html文件?

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>@import url(css/asd.css);</style></head><body><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><div>每天叫醒我的不是鬧鐘，是夢想！！！</div><p>鋼鐵俠</p><p>蝙蝠俠</p><p>蜘蛛俠</p></body> </html>

2.4、樣式的優先級

就近原則：行內樣式 > 內聯樣式 == 外聯樣式 (后面覆蓋前面) 。
注意事項：今后盡量不要對同個html進行多個樣式書寫。
如何選擇三種樣式寫法？
1、如果樣式是固定并且不修改并且很少情況，行內樣式。
2、如果樣式針對當前html頁面做的樣式，并且量比較大的情況下，內聯樣式。
3、如果你的樣式是通用，如果你的css代碼很多，外聯樣式，需要創建一個css文件，引入。

2.5、樣式選擇

三種樣式引入方式，在實際開發過程中該如何選擇？

1.如果是通用樣式，就選擇外聯樣式。

2.當樣式內容過多時，也會將樣式單獨抽離成一個.css文件，方便管理。

3.當某個標簽有特殊樣式實現，且在頁面中是不重復的，出現次數唯一的，就使用行內樣式。

4.除了上面的幾種情況，通常使用的都是內聯樣式。

3、CSS選擇器

3.1、基本選擇器

選擇器可以快速、方便的選擇所需要使用的頁面元素。

基本選擇器分三種：標簽選擇器、類選擇器、id選擇器。

標簽選擇器

語法：標簽名{}

例如：div{color:red;font-size:20px;}

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>/* 標簽選擇器 */div{color: bisque;}/* 類選擇器 */.div-cls{color: aqua;}.p-cls{color: yellow;}/* id選擇器 */#p-id{color: green;}</style></head><body><div class="div-cls">我是div1，我用的是class選擇器</div><div class="p-cls" id="p-id">我是div2，我用的是class選擇器和id選擇器</div><div class="div-cls">我是div3，我用的是class選擇器</div><p class="p-cls">我是p，我用的是class選擇器</p><h4 class="h4-cls">我是h4，我用的是class選擇器</h4></body> </html>

類選擇器

類選擇器是通過class屬性進行元素的獲取，可用于對多個元素進行相同的樣式設置。

語法：.類名{}

例如：.div-cls{color:red;}

.div-cls{color: red; } .p-cls{color: green; } .h4-cls{color: blue; }

id選擇器

id選擇器是通過id屬性給元素一個唯一標識（設置多個id相同不會報錯，會影響后期js的學習，建議id值要唯一）。

語法：#id名{}

例如：#div-id{color:red;}

/*id選擇器：在標簽上添加了一個id屬性，作為唯一標識，通常不允許重復*/ #p-id{color: #483D8B; }

3.2、屬性選擇器

屬性選擇器是根據元素上已有的屬性標識進行選擇

語法：[屬性名='']{}

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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><a href="http://www.yunhe.cn">云和數據</a></body> </html>

3.3、層級選擇器

后代選擇器是根據元素在頁面中的相對（嵌套）位置進行按區域選擇元素。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></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>

3.4、組合選擇器

組合選擇器是根據元素在頁面中的同級關系進行選擇。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

3.5、偽類選擇器

偽類選擇器是css3中提供的用于快速查找元素的便捷選擇器，開發中常用nth-of-type選擇器。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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><span>騰訊官網</span><span>人人編程官網</span></p><a href="#">百度一下</a></body> </html>

3.6、通配符

*通配符，作用在頁面中的所有標簽上，開發不建議使用，影響網頁的渲染性能。

*{color:red;font-size:20px; }

開發不建議使用通配符，通配符相當于是作用在了所有的標簽上，某些屬性并不是所有的標簽都能識別，只要加了屬性不論是否生效，瀏覽器都會對屬性進行解析然后渲染，這樣比較消耗性能 ?

3.7、選擇器優先級

網頁中的選擇器多種多樣，可以組合使用，當同一個元素有多個樣式時，最終生效的樣式與優先級有關。

可以假設行內樣式的優先級為1000，那么id選擇器、類選擇器、標簽選擇器的優先級大小如下所示

!important>行內樣式>id選擇器>類選擇器>標簽選擇器

? 無窮大? ? ? ?1000? ? ? ? ? 100? ? ? ? ? 10? ? ? ? ? ? ? ? 1

4、CSS盒子模型

4.1、基礎樣式

樣式名描述

text-align	設置內容位置
text-decoration	控制下劃線 none沒有 underline有
line-hight	行高
font-size	設置字體大小
font-weight	設置字體粗細的
font-famliy	設置字體樣式
letter-spacing	設置中文字體之間的間距
word-spacing	設置英文單詞之間的間距

行高：設置單行文字所占據的高度，實際位置是文字的大小+上下的空白間距 ?

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 400px;height: 400px;background-color: pink;color: aquamarine;text-align: center;line-height: 100px;font-size: 18px;font-weight: bold;font-family: '宋體';letter-spacing: 20px;}#p1{word-spacing: 60px;}#p2{letter-spacing: 20px;}</style></head><body><div>輕輕的我走了，正如你輕輕來了<br>輕輕的我走了，正如你輕輕來了<br></div><p id="p1">hello world java</p><p id="p2">我愛你中國</p></body> </html>

4.2、盒子模型

頁面中的每個元素都可以稱為盒子，主要目的是為了計算元素在網頁中的實際占位，通過F12可以直觀的查看到盒子模型。

4.2.1、邊框顏色

border-color

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

4.2.2、邊框粗細

整體粗細：

border-width:20px;? 整體邊框

指定方位調整粗細：

border-top-width? ? ? 上?

border-left-width? ? ? 左

border-right-width? ? 右

border-bottom-width? ?下

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.box{width: 300px;height: 300px;background-color: aqua;/* border: solid;border-width:20px;border-color: red; */border:solid;border-color: pink;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>

4.2.3、邊框樣式

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

4.2.4、邊框的簡寫

<head><style>.box{width: 251px;height: 251px;background-color: #D7D7D7;border:1px solid #3a6587}</style></head><body><div class="box">hello world</div></body>

4.2.5、外邊設置

margin可以設置塊元素的水平對齊方式

div{margin:0 auto;//讓塊元素在水平方向居中 } <style>*{margin: 0px;}.box{width: 251px;height: 251px;background-color: #D7D7D7;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>

4.2.6、內邊設置

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 ; /* 讓標題左邊留點空隙*/ }

4.2.7、背景

屬性名說明

background-color	設置背景顏色
background-image	設置背景圖片
background-position	設置背景圖片的位置
background-size	設置背景圖片的大小
background-repeat	設置背景圖片是否重復
background-attachment	設置背景圖片相對瀏覽器的定位位置

div{width: 1000px;height: 1000px;/* background-color: #008B8B;background-image: url(./timg.jpg);background-size: 50px 50px;background-repeat: no-repeat;background-position: center;background-attachment: fixed; */background: #008B8B url(./timg.jpg) no-repeat; }

4.2.8、display屬性

屬性名描述

display:none;	隱藏元素
display:block;	將元素變為塊元素
display:inline;	將元素變為行元素
display:inline-block;	將元素變為行內塊元素

4.3、浮動

浮動是改變元素在文檔流（元素默認從上往下布局的方式就叫文檔流）中的規則，讓元素可以在水平方向上進行排版。

float:left或者right

4.3.1、清除浮動

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

4.3.2、解決浮動塌陷問題

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

4.4、定位

浮動更多的用于對模塊化（無具體像素值要求）區域進行整體排版，對于精確到像素值的頁面調整需要使用定位，例如：購物車上的數量、消息通知等。

屬性名描述

position:relative;	相對定位（相對默認位置進行定位，不脫離文檔流，仍占據頁面位置）
position:absolute;	絕對定位（相對第一個帶有定位屬性的父元素進行定位，默認是瀏覽器）
position:fixed;	相對瀏覽器進行固定定位

4.4.1、相對、絕對定位

<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>

4.4.2、固定定位

<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>

4.4.3、堆疊順序

元素在進行定位時，會出現位置相同的情況，可以通過設置其堆疊順序決定顯示的優先級。????????

z-index 數值越大越靠前

5、CSS3常見效果

5.1、圓角效果

控制盒子的四個角的弧度，語法：border-radius，控制的是元素的四個角的弧度，當弧度值大于或等于元素寬高的一半時，元素會變成一個圓。border-radius的值可以是百分比或者px像素。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><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>

5.2、透明效果

5.2.1、背景透明

背景透明只針對背景顏色進行透明。background-color:rgba(x,x,x,x) 透明度在0~1之間

5.2.2、整體透明

針對整個元素進行透明，包括該元素的所有子元素。opacity 透明度在0~1之間

5.3、盒子陰影

box-shadow

對塊元素添加陰影效果從而達到視覺效果上的立體感。

5.3.1、文本陰影

text-shadow

對文本添加陰影從而達到視覺效果上的立體感。

5.4、響應式效果

早期頁面的開發，需要有前端人員、Android工程師和IOS工程師，因為PC端和移動端的屏幕大小差別比較大，需要針對PC端和移動端分別開發整套項目；從H5出現之后，前端人員在開發PC端可以通過技術將PC端的頁面在IPAD和移動端上都進行自適應，因此前端就變得更加重要了。自適應方式兩種：響應式、彈性盒子；目前基本上所有用于前端頁面開發的流行框架中都封裝了響應式或彈性盒子的操作。

5.4.1、手機屏幕的適應

H5的出現可以讓PC端的應用直接在手機端進行等比例使用，需要設置其視圖模式。

5.4.2、頁面自適應

對網頁中的元素的大小，根據電腦屏幕的大小進行動態設置，從而達到一種響應式的效果。

<!DOCTYPE html> <html><head><meta charset="utf-8"><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></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>

總結

以上是生活随笔為你收集整理的CSS基础入门（详细总结笔记）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：艾奇android视频格式转换器,艾奇a
下一篇：世界上最惨烈的股市大崩盘

CSS

CSS基础入门（详细总结笔记）

1、CSS介紹

2、CSS引入方式

2.1、行內樣式

2.2、內聯樣式

2.3、外聯樣式

2.4、樣式的優先級

2.5、樣式選擇

3、CSS選擇器

3.1、基本選擇器

3.2、屬性選擇器

3.3、層級選擇器

3.4、組合選擇器

3.5、偽類選擇器

3.6、通配符

3.7、選擇器優先級

4、CSS盒子模型

4.1、基礎樣式

4.2、盒子模型

4.2.1、邊框顏色

4.2.2、邊框粗細

4.2.3、邊框樣式

4.2.4、邊框的簡寫

4.2.5、外邊設置

4.2.6、內邊設置

4.2.7、背景

4.2.8、display屬性

4.3、浮動

4.3.1、清除浮動

4.3.2、解決浮動塌陷問題

4.4、定位

4.4.1、相對、 絕對定位

4.4.2、固定定位

4.4.3、堆疊順序

5、CSS3常見效果

5.1、圓角效果

5.2、透明效果

5.2.1、背景透明

5.2.2、整體透明

5.3、盒子陰影

5.3.1、文本陰影

5.4、響應式效果

5.4.1、手機屏幕的適應

5.4.2、頁面自適應

總結

4.4.1、相對、絕對定位