什么是CSS:
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標准通用標記語言的一個應用)或XML(標准通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。
盒子模型:
盒模型是CSS中的核心的概念,描述了元素如何顯示。
盒子模型分類:
盒子模型分為兩種:W3c標准盒子模型和IE盒子模型
W3C盒子模型:這種盒子模型設置的寬度就是內容的寬度,其他的邊距和邊框都是在盒子外邊
IE盒子模型:這種盒子模型的內容高度是除去內邊距、外邊框、外邊距的高度,盒子的整體高度就是我們設置的高度(height)。
設置盒模型的方式是:設置box-sizing
box-sizing:content-box 標准盒模型
box-sizing:border-box 怪異盒模型
盒子模型的四種元素:
- Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
- Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Content(內容) - 盒子的內容,顯示文本和圖像。
Margin(外邊距):
- margin-top:上邊距
- margin-buttom:下邊距
- margin-left:左邊距
- margin-right:右邊距
/* margin屬性后跟四個值,第一個值設置上邊距,第二個是設置右邊距,第三個值設置下邊距,第四個值設置左邊距 */
margin: 10px 20px 30px 40px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Padding(內邊距):
- padding-top:上部填充
- padding-right:右部填充
- padding-bottom:下部填充
- padding-left:左部填充
/* padding屬性后跟四個值,第一個值設置上邊距,第二個是設置右邊距,第三個值設置下邊距,第四個值設置左邊距 */
padding: 10px 20px 30px 40px;
/* 下面樣式與上面的樣式等價 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
Border(邊框):
- border-top:上邊界
- border-bottom:下邊界
- border-left:左邊界
- border-right:右邊界
/* 使用簡寫屬性,同時設置四條邊界,四條邊界的寬度、樣式和顏色都是一樣的 */
border: 2px solid green;
/* 下面的樣式與上面的樣式等價 */
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
- border-width:邊界寬度
- border-style:邊界樣式
- border-color:邊界顏色
/* 使用簡寫屬性設置寬度、樣式和顏色,同時作用於四條邊 */
border: 2px dotted green;
/* 下面的樣式與上面的樣式等價 */
border-width: 2px;
border-style: dotted;
border-color: green;
- border-top-width:上邊界寬度
- border-top-style:上邊界樣式
- border-top-color:上邊界顏色
- border-bottom-width:下邊界寬度
- border-bottom-style:下邊界樣式
- border-bottom-color:下邊界顏色
- border-left-width:左邊界寬度
- border-left-style:左邊界樣式
- border-left-color:左邊界顏色
- border-right-width:右邊界寬度
- border-right-style:右邊界樣式
- border-right-color:右邊界顏色
/* 使用簡寫屬性設置寬度、樣式和顏色,同時作用於一條邊 */
border-top: 2px solid green;
/* 下面的樣式與上面簡寫樣式等價 */
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
- border-radius:邊界半徑
- border-top-left-radius:左上角
- border-top-right-radius:右上角
- border-bottom-left-radius:左下角
- border-bottom-left-radius:右下角
/*以簡寫屬性的三個值為例*/
border-radius: 10px 20px 30px;
/*下面樣式與上面簡寫屬性樣式等價*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
CSS選擇器:
元素選擇器:針對一類標簽
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
選擇器分組:針對多個特定的標簽使用,可以將任意多個選擇器分組在一起
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
/* grouping */
h1, h2, h3 {color:blue;}
類選擇器:針對你想要的所有標簽使用
/* 語法 */
.important {color:red;}
/* 結合元素選擇器 */
p.important {color:red;}
ID選擇器:以一種獨立於文檔元素的方式來指定樣式
#intro {font-weight:bold;}
屬性選擇器:根據元素的屬性及屬性值來選擇元素
a[href] {color:red;}
后代選擇器:選擇作為某元素后代的元素
/* 只對 h1 元素中的 em 元素應用樣式 */
h1 em {color:red;}
子元素選擇器:選擇作為某元素子元素的元素
/* 只作為 h1 元素子元素的 strong 元素 */
h1 > strong {color:red;}
相鄰兄弟選擇器:選擇緊接在另一元素后的元素,且二者有相同父元素
/* 增加緊接在 h1 元素后出現的段落的上邊距 */
h1 + p {margin-top:50px;}
偽類:向某些選擇器添加特殊的效果
selector : pseudo-class {property: value}
CSS背景:
屬性 | 描述 |
---|---|
background | 簡寫屬性,作用是將背景屬性設置在一個聲明中 |
background-color | 設置元素的背景顏色 |
background-image | 把圖像設置為背景 |
background-repeat | 設置背景圖像是否及如何重復 |
background-attachment | 設置背景圖像是否固定或者隨着頁面的其余部分滾動 |
background-position | 設置背景圖像的起始位置 |
CSS文本樣式:
屬性名 | 含義 | 舉例 |
---|---|---|
font | 設置所有字體屬性 | font:italic bold 36px "宋體"; |
font-family | 設置字體類型 | font-family:"隸書"; |
font-size | 設置字體大小 | font-size:12px; |
font-style | 設置字體風格 | font-style:italic; |
font-weight | 設置字體的粗細 | font-weight:bold; |
CSS布局:
position定位relative absolute
position:absolute;position:relative絕對定位使用通常是父級定義position:relative定位,子級定義position:absolute絕對定位屬性,並且子級使用left或right和top或bottom進行絕對定位。
對應的HTML結構:
<div class="divcss5">
<div class="divcss5-a"></div>
</div>
對應的CSS代碼:
<style>
/* 定義父級position:relative 為就認為是絕對定位聲明吧 */
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 使用絕對定位position:absolute樣式 並且使用left top進行定位位置 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
</style>
float浮動:
float屬性的屬性值:
- none # 不浮動
- left # 元素向左浮動,而后面的內容流向對象的右側
- right # 對象向右浮動,而后面的內容流向對象的左側
清除浮動clear:
- 直接在最下面加入一個空的子元素塊( )
- 在父元素中設置overflow:hidden;
- css中溢出的使用overflow:設置當對象的內容超過其指定的高度及寬度時,進行管理值:
- overflow:visible; # 默認值,不剪切內容,也不添加滾動條
- overflow:auto; # 在必須時,對象內容才會被剪切或者顯示滾動條
- overflow:hidden; # 不顯示超過對象尺寸的內容
- overflow:scroll; # 總是顯示滾動條
- 用偽類after
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}
Flexible Box彈性布局:
- 容器的屬性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- flex-direction屬性
flex-direction屬性決定主軸的方向(即項目的排列方向)。
- row(默認值):主軸為水平方向,起點在左端。
- row-reverse:主軸為水平方向,起點在右端。
- column:主軸為垂直方向,起點在上沿。
- column-reverse:主軸為垂直方向,起點在下沿。
- flex-wrap屬性
flex-wrap屬性默認情況下,項目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
- nowrap(默認):不換行。
- wrap:換行,第一行在上方。
- wrap-reverse:換行,第一行在下方。
-
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。 -
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
- flex-start(默認值):左對齊
- flex-end:右對齊
- center: 居中
- space-between:兩端對齊,項目之間的間隔都相等。
- space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
- align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
- flex-start:交叉軸的起點對齊。
- flex-end:交叉軸的終點對齊。
- center:交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
- align-content屬性
- align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
- flex-start:與交叉軸的起點對齊。
- flex-end:與交叉軸的終點對齊。
- center:與交叉軸的中點對齊。
- space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
- space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch(默認值):軸線占滿整個交叉軸。
學習地址:https://www.w3school.com.cn/css3/index.asp ,https://www.runoob.com/css3/css3-tutorial.html