CSS學習

本文轉載自查看原文 2020-03-28 14:56 608 前端

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