CSS學習


什么是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:

  1. 直接在最下面加入一個空的子元素塊(
  2. 在父元素中設置overflow:hidden;
  • css中溢出的使用overflow:設置當對象的內容超過其指定的高度及寬度時,進行管理值:
  • overflow:visible; # 默認值,不剪切內容,也不添加滾動條
  • overflow:auto; # 在必須時,對象內容才會被剪切或者顯示滾動條
  • overflow:hidden; # 不顯示超過對象尺寸的內容
  • overflow:scroll; # 總是顯示滾動條
  1. 用偽類after
.clearFix:after{
         clear:both;
         display:block;
         visibility:hidden;
         height:0;
         line-height:0;
         content:"";
}

Flexible Box彈性布局:

  1. 容器的屬性:
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  1. flex-direction屬性
    flex-direction屬性決定主軸的方向(即項目的排列方向)。
  • row(默認值):主軸為水平方向,起點在左端。
  • row-reverse:主軸為水平方向,起點在右端。
  • column:主軸為垂直方向,起點在上沿。
  • column-reverse:主軸為垂直方向,起點在下沿。
  1. flex-wrap屬性
    flex-wrap屬性默認情況下,項目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
  • nowrap(默認):不換行。
  • wrap:換行,第一行在上方。
  • wrap-reverse:換行,第一行在下方。
  1. flex-flow屬性
    flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。

  2. justify-content屬性
    justify-content屬性定義了項目在主軸上的對齊方式。

  • flex-start(默認值):左對齊
  • flex-end:右對齊
  • center: 居中
  • space-between:兩端對齊,項目之間的間隔都相等。
  • space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
  1. align-items屬性
    align-items屬性定義項目在交叉軸上如何對齊。
  • flex-start:交叉軸的起點對齊。
  • flex-end:交叉軸的終點對齊。
  • center:交叉軸的中點對齊。
  • baseline: 項目的第一行文字的基線對齊。
  • stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
  1. align-content屬性
  • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
  • flex-start:與交叉軸的起點對齊。
  • flex-end:與交叉軸的終點對齊。
  • center:與交叉軸的中點對齊。
  • space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
  • space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch(默認值):軸線占滿整個交叉軸。

學習地址:https://www.w3school.com.cn/css3/index.asphttps://www.runoob.com/css3/css3-tutorial.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM