CSS總結
本章內容
- css的引入方式
- css選擇器
- css優先順序
- css的基本樣式
- 盒子模型
css的引入方式(掌握)
- css具有三種引入方式
1.頭部引用
- head引入.直接通過style標籤在head引入
- 優點1:在請求頁面的時候,css被一起請求下來了(因為在頭部),不需要單獨的http去請求,適用於網際網路頁面的首頁-----即不會出現 頁面出來了,樣式沒有出來的這種情況.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main{
color:red;
background: grey;
}
</style>
<!-- 在請求頁面的時候,CSS被一起請求下來了,不需要單獨的http去請求樣式
適用於網際網路頁面的首頁
不會出現頁面出來了,樣式沒有出來
-->
</head>
<body>
<div id="main">hello world</div>
</body>
</html>
2.外部引用
- 使用標籤link進行引用,路勁建議設定為相對路徑
- 缺點:增加了http請求的數量,增加了伺服器的壓力,
- 優點:樣式可以被多個頁面所使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main{
color:red;
background: grey;
}
</style>
<!-- 在請求頁面的時候,CSS被一起請求下來了,不需要單獨的http去請求樣式
適用於網際網路頁面的首頁
不會出現頁面出來了,樣式沒有出來
-->
</head>
<body>
<div id="main">hello world</div>
</body>
</html>
3.直接在標籤內(屬性)引用
- 直接在元素的style的屬性中設定樣式
- 優點:標籤內引用的權值最高(1000)
- 缺點:結構與樣式混著用,維護性極差.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 樣式和結構混合,維護性極差,css的優先順序最高 -->
<div id="main" style="color: hotpink;background: indigo;">hello world</div>
</body>
</html>
選擇器(重點+掌握)
選擇器的格式
選擇器{
樣式1;
樣式2;
...
}
1.ID選擇器
- 如果有的屬性有ID,可以選擇ID對標籤進行控制
- 選定單個元素
- 定位選擇器中的單個元素
- 使用#+ID名進行定義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* id選擇器
1>選中單個元素
2>定位選擇器中的單個元素
*/
#main{
color: rgb(101, 206, 31);
background: red;
/* 文字對齊方法 */
text-align: center;
}
</style>
</head>
<body>
<div id="main">你是誰呀!!!!</div>
</body>
</html>
注:元素的ID一定要保持唯一,雖然瀏覽器不會報錯,但是不合規範.
2.類選擇器
- 當標籤中有 class=“XXX” 屬性的時候,可以使用類選擇器對標籤進行控制.
- 需要改變多個元素的時候時候
- 使用 .+class名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.red{
text-align: center;
color: greenyellow;
background: skyblue;
}
.green{
color: indigo;
}
.aaa{
font-style: italic;
}
</style>
</head>
<body>
<!-- 類選擇器的加法操作 -->
<!-- 後端工程師改別人的程式碼,通常用這個 -->
<div class="red green aaa">來顆華子?</div>
<div class="red">來顆華子?</div>
<div class="red">來顆華子?</div>
<div class="red">來顆華子?</div>
<div class="red">來顆華子?</div>
<div class="red">來顆華子?</div>
<div class="1">你好呀</div>
<div class="2">我是你爸爸</div>
<div class="3">看什麼看</div>
</body>
</html>
注 :類選擇器具有加法操作,一個元素可以指定多個類.
3.標籤名選擇器
- 在同一頁中所有的標籤名都具有相同的特性.選擇頁面中多個同名元素並且引用樣式.
- 直接寫樣式名+{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 頁面中同名的所有標籤名都具有相同的樣式 -->
<style>
/* 這是後代選擇器 */
#nav span {
color: lawngreen;
background: lightskyblue;
}
</style>
</head>
<body>
<div id="nav">
<span>hello1</span>
<span>hello2</span>
<span>hello3</span>
</div>
<div><span>hello4</span></div>
</body>
</html>
4.後代選擇器
-
有時候需要選擇特定的一些選擇器,可是又不想設定class的時候,可以試一下後代選擇器
/* 中間是空格 */ 選擇器1 選擇器2{ 樣式1; 樣式2; ... }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#nav{
border: 3px red solid;
}
#nav span{
font-size: 20px;
text-decoration: underline;
border: 1px blue solid;
}
.red-text{
color: red;
}
/* 子選擇器 */
/* 子選擇器的權值和上面的權值是一樣的,但是他更加接近內容,所以顯示的是該選擇器的樣式 */
#nav > span{
border: greenyellow 1px solid;
}
</style>
</head>
<body>
<div id="nav">
<span class="red-text bold-text">抗擊疫情</span>
<span class="bold-text">新聞</span>
<span class="bold-text">hao123</span>
<span class="bold-text">地圖</span>
<span class="bold-text">視訊</span>
<span class="bold-text">貼吧</span>
<span class="bold-text">學術</span>
<span>登入</span>
<span>設定</span>
</div>
</body>
</html>
- 只要span作為div main的後代,都會應用該樣式.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#nav span{
border: solid 2px red;
}
</style>
</head>
<body>
<div id="nav">
<span>
<var>你好</var>
<span>hao123</span>
</span>
</div>
</body>
</html>
群組選擇器
-
當多個選擇器具有相同的樣式的時候,可以相同的樣式抽取出來,將其放到一個群組當中
-
選擇器1,選擇器2,選擇器3...{ 公共樣式1; 公共樣式2; ... } 選擇器 1 { 特有樣式 } 選擇器 2 { 特有樣式 } 選擇器 3 { 特有樣式 }
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 使用群組選擇器提供公共的程式碼 */
#main,.red-text,p{
color:blue;
text-decoration: underline;
font-weight: bold;
}
/* 以下寫特有的樣式 */
#main{
font-size: 15px;
}
.red-text{
font-size: 14px;
}
p{
font-size: 13px;
}
</style>
</head>
<body>
<div id="main">hello1</div>
<span class="red-text">hello2</span>
<p>hello3</p>
</body>
</html>
總結: 群組選擇器可以形成css 繼承 ,一般將公共的程式碼寫到群組選擇器裡面去,然後將特有的程式碼寫到特定的選擇器中,群組在前面,特有選擇器在後面.
選擇器的優先順序
1.優先順序權值
- 一個或者多個元素在CSS的選擇器選擇的過程中,存在多個選擇器選擇同一個元素的時候,此時如果多個選擇器應用了共同的樣式的時候,渲染後的結果由優先順序決定.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div id="main">Lorem, ipsum.</div>
</body>
</html>
選擇器優先順序可以分為4種(僅有四種)
| 選擇器 | 權值 | 描述 |
|---|---|---|
| style = “” | 1000 | 標籤內引入 |
| id選擇器 | 100 | #mian |
| 類選擇器 | 10 | .class |
| 標籤名選擇器 | 1 | tag name |
- 哪一種的選擇器的權值高,就按照那個選擇器的樣式進行渲染
- 當選擇器的權值相同的時候,就按照哪個選擇器離內容的距離最短的選擇器進行渲染.
- 當選擇器的權值相同的時候,瀏覽器從上到下進行渲染,所以下面渲染的樣式會將上面渲染的樣式進行覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background: green;
}
/* 組合選擇器 */
/* 權值為101 */
#main span{
color: red;
}
/* 權值為110 */
#main .test{
color: blue;
}
/* 所以hello展示的是選擇器 #main .test的樣式 */
</style>
</head>
<body>
<div id="main">
<span class="test">hello</span>
</div>
</body>
</html>
- 組合選擇器的優先順序是由4中優先值的權值相加進行決定的
提升優先順序
-
方法一:加權值.一般通過後代選擇器進行加權值
-
方法二:加修飾,一般加類或者ID
-
方法三:使用!import
方法一;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 提升優先順序方式[1]:加權值 */
.foo{
border: 1px red solid;
}
#main .foo{
border: 1px blue solid;
}
</style>
</head>
<body>
<div id="main">
<span class="foo">hello</span>
</div>
<div class="foo">hello2</div>
</body>
</html>
方法二;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 提升優先順序方式[2]:加修飾--不建議用 */
.foo{
border: 1px red solid;
}
/*注意:這裡不需要空格*/
span.foo{
border: 1px blue solid;
}
</style>
</head>
<body>
<div id="main">
<span class="foo">hello</span>
</div>
<div class="foo">hello2</div>
</body>
</html>
方法三;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
color: blue !important;
}
#main{
color:red;
background: lightgray;
}
</style>
</head>
<body>
<div>lorem</div>
<div id="main">
test
</div>
</body>
</html>
CSS計本樣式
1.文字的基本設定
- font-family:設定字型名稱
- 可以為元素設定多個字型，如果第一個字型沒有找到，嘗試查詢第二個字型，依次類推。如果第一個字型找到，不在尋找下一個字型。
- win7:預設的字型是微軟雅黑
- font-size: 設定字型大小.單位有 px|百分比|em|rem。主流瀏覽器預設的字型大小 16px
- px: 螢幕上具體的畫素，可以認為是一個絕對單位
- %:百分比，相對單位。相對於該元素的父元素的字型大小。
- em:一個單位，相對單位。相對於該元素的父元素的字型大小
- font-style:設定字型風格
- normal:正常風格，預設值 **font-style:normal;**可以將本來有語義的標籤var/strong/em(表示強調) 降級成為無語義的標籤.從而成為一個容器
- italic:斜體
- font-weight: 是否加粗.
- normal:正常值，不加粗,預設值。
- bold:加粗
- number:支援數字，400 表示 normal；700 表示 bold
- font 是一個複合屬性。也可以簡寫為 font: style|weight|size|family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main{
font-family: "微軟雅黑","宋體","Arial";
font-size: 20px;
}
#main span{
/* font-size: 100%; */
/* font-size: 2em; */
/* font-style: italic; */
/* font-weight:bold; */
/* 複合寫法 */
font: italic bold 2em "微軟雅黑","宋體","Arial";
}
</style>
</head>
<body>
<div id="main">
<span>
中國
</span>
</div>
</body>
</html>
- 樣式具有繼承性,繼承後的標籤的權值會變得很低很低,比1還低,即使加了!import也比1低
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 這裡的樣式顯示了一個正常顯示的"中國",並沒有出現下面的斜體,因為下面的選擇器中,其所控制的span標籤繼承了div的樣式,當一個選擇器中的標籤繼承了父元素的樣式,其權值會變得很小,甚至小於1,所以最終的樣式顯示span下的樣式. */
span {
font-style: normal;
}
#main {
font-family: "微軟雅黑", "宋體", "Arial";
font-size: 30px;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<span>
中國
</span>
</div>
</body>
</html>
2.文字的相關設定
-
color:用於設定文字的顏色。
- 關鍵字:red、green、blue、black、yellow、white、gray/grey、orange、purple、pink、coral、brown、、、
組合色: greenyellow、orangered、skyblue、darkxxx、lighitxxx
十六進位制:#000000(黑色) #FFFFFF(白色)
rgb 三元色:rgb(red,green,blue) red/green/blue 取值範圍[0,255]
- 關鍵字:red、green、blue、black、yellow、white、gray/grey、orange、purple、pink、coral、brown、、、
-
text-decoration:文字的修飾
- none:文字無修飾
- underline:下劃線
- line-through:中劃線
- overline:上劃線
-
line-height 本意用於設定行高，支援負值。
- px:具體的畫素
- %:百分比,相對單位.相對於該元素的字型大小
-
實際開發過程中，當容器高度(heigth)和行高(line-heigth)一樣時， 單行文字的垂直居中。
同時 height 可以省略。 -
text-indent:文字縮排
- px:具體畫素
- %:百分比相對於容器的寬度
- em:一個單位,相對於該元素的字型大小。
-
text-align:文字的水平對齊方式
- left:左對齊，預設值
- center:居中對齊
- right:右對齊
- 如果用在塊容器上，表示容器中的內容對齊方式。
對於行內元素無效，只適用於塊元素或者塊容器。
-
vertical-align:文字的垂直對齊方式。
- top
- middle
- bottom
-
一般對圖片加文字進行使用.
-
文字相對於圖片對齊的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img{
border:solid 2px red;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340" alt="">
<span>這個是對齊的圖片</span>
</body>
</html>
3.背景相關的設定
- background-color:背景顏色
- background-image:設定背景圖片。通過 url(“圖片地址”) 圖片預設平鋪。
- background-repeat: 背景是否平鋪
- repeat:水平和垂直方向都平鋪，預設值
- no-repeat:不平鋪
- repeat-x:水平平鋪
- repeat-y:垂直平鋪
- background-position:背景圖定位
- background-position:x 軸 y 軸
- 一般可以先將X軸,y軸設定成為一個大概的值,然後通過開發者工具進行微調
- x 軸取值/y 軸取值
px:水平/垂直方向的具體畫素,支援負值。
百分比:0%最左邊 100%最右邊，相對於容器的剩餘寬度/高度。
關鍵字:left|center|right / top | center | bottom
- background 複合屬性 background : color url( ) position repeat
- 精靈 圖 （sprite image)
4.元素的相關設定 (重點)
- display: 用於設定元素的呈現方式。也即元素以塊元素呈現還是以行內元素呈現。
- none:元素不呈現，在頁面不在位置。
- inline:以行內元素呈現
- block:以塊元素呈現
- inline-block:以行內元素呈現，但具有塊特性(能設定寬高)。
盒子模型(box model)
概念
-
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
- 盒子模型可以分為4個部分
- 1.內容自身的寬高
- 2.內容到邊框的四周的距離 (padding)
- 3.邊框的粗細程度 (border)
- 4.盒子到盒子之間的距離 (margin)
margin
- 在邊框之外的間距(盒子到盒子之間的距離)稱為外邊距/外留白
- margin有4個方向
- margin-top
- margin-left
- margin-right
- margin-bottom
- 塊元素 margin 4 個方向表現良好
- margin: 0 auto 可以讓塊元素/塊容器在其容器中水平方向居中。垂直方向的 auto 無效。
margin塌陷
- 兩個 margin 在 垂直方向上會出現塌陷，塌陷的結果以大的 margin 為主。
- 同級元素塌陷
<style>
#main1{
border: 1px red solid;
margin-bottom: 10px;
}
#main2{
border: 1px red solid;
margin-top: 20px;
}
</style>
、、、
<div id="main1">
main1
</div>
<div id="main2">
main2
</div>
- 元素包含關係的margin塌陷,以大margin為主,但是同一塌陷到外部
#main1{
width: 100px;
height: 100px;
background-color: lightgray;
margin-top: 10px;
}
#main2{
width: 50px;
height: 50px;
background-color: red;
margin-top: 30px;
}
</style>
、、、
<div id="main1">
<div id="main2">
</div>
</div>
margin表現
- margin 在塊元素 4 個方向表現良好。
- margin 在行內元素左右方向表現良好，垂直方向無效
padding
- padding 表示內容和邊框之間的間距/留白，也稱內邊距/內留白。盒子的內邊距分為 4 個方向
- padding-left/padding-rigth/padding-top/padding-bottom
- 與margin的區別是 padding 在行內元素水平方向表現良好，垂直方向有效但表現不好。
border
- border 表示邊框,可以設定 4 個方向的邊框。
<style>
#main1 {
/* border-left-width: 1px;
border-left-color: red;
border-left-style: solid; */
/* 複合寫法 */
border-left:1px solid red;
/* border-top-width: 1px;
border-top-color: blue;
border-top-style: dashed;
border-right-width: 1px;
border-right-color: blue;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: double; */
/* 複合寫法 */
border: 1px red solid;
}
、、、
<div id="main1">
main1
</div>
- 邊框的構成
<style>
body{
background: #f5f5f5;
}
#main1 {
width: 0px;
height:0px;
border-left:10px red solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px transparent solid;
}
、、、
<div id="main1">
</div>
小白新手上路,希望大家幫我找一下錯誤.
border 表示邊框,可以設定 4 個方向的邊框。
<style>
#main1 {
/* border-left-width: 1px;
border-left-color: red;
border-left-style: solid; */
/* 複合寫法 */
border-left:1px solid red;
/* border-top-width: 1px;
border-top-color: blue;
border-top-style: dashed;
border-right-width: 1px;
border-right-color: blue;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: double; */
/* 複合寫法 */
border: 1px red solid;
}
、、、
<div id="main1">
main1
</div>
- 邊框的構成
<style>
body{
background: #f5f5f5;
}
#main1 {
width: 0px;
height:0px;
border-left:10px red solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px transparent solid;
}
、、、
<div id="main1">
</div>
小白新手上路,希望大家幫我找一下錯誤.
相關文章
- css 總結CSS
- CSS背景總結CSS
- CSS日常總結CSS
- html和css總結HTMLCSS
- css常用大總結CSS
- css calc使用總結CSS
- CSS技巧總結2CSS
- css中居中總結CSS
- CSS動畫總結CSS動畫
- CSS縮寫總結CSS
- css 元素左右居中總結CSS
- 【CSS】Grid 佈局總結CSS
- css面試題總結CSS面試題
- 初學者css每日總結CSS
- 初入HTML/Css的總結HTMLCSS
- css各種佈局總結CSS
- css3新特性總結CSSS3
- css佈局基礎總結CSS
- CSS基礎知識總結（4）CSS
- CSS3一些總結CSSS3
- CSS知識點面試總結CSS面試
- CSS揭祕實用技巧總結CSS
- css基本語法總結及使用CSS
- css 盒子模型和position總結CSS模型
- CSS文字超出寬度---換行總結CSS
- css--元素居中常用方法總結CSS
- 2017/3/2 CSS學習部分總結CSS
- mooc-CSS方面的總結與梳理CSS
- 【CSS】CSS 世界 — 元素的顯示與隱藏學習總結CSS
- 30道CSS 面試知識點總結CSS面試
- 那些你需要知道的CSS-總結CSS
- PC端網站開發總結-css方面網站CSS
- 前端面試（個人收藏總結）CSS篇前端面試CSS
- 【博學谷學習記錄】超強總結，用心分享|前端CSS總結（一）前端CSS
- Web前端之HTML+CSS的知識總結Web前端HTMLCSS
- CSS預編譯語言Less的用法總結CSS編譯
- 關於Html+css階段學習總結HTMLCSS
- CSS 一些個人不常用屬性總結CSS