CSS

CSS是指層疊樣式表(Cascading Style Sheets)，它是一種用來描述HTML或XML等文檔如何呈現的語言。CSS描述了文檔的內容應該如何被渲染到屏幕、紙張或其他媒體上。

一、基礎概念

1、CSS的組成

/*樣式表由選擇器和聲明塊組成*/
selector{
   property:value;
   property2:value2;
}

其中，選擇器選擇需要改變樣式的HTML元素，聲明塊由一個或多個屬性-值對組成，定義需要改變樣式的具體屬性及其值。

2、CSS的三種樣式

• 內聯樣式：在HTML標籤中直接寫入樣式，優先級最高。
• 內部樣式：在HTML中使用<style></style>標籤定義樣式，作用於整個頁面。
• 外部樣式：在外部CSS文件中定義樣式，通過<link>標籤引入HTML文件中，作用於整個站點。

二、CSS選擇器

1、元素選擇器

/*按HTML標籤選擇*/
p{
   color:red;
}

2、類選擇器

/*按類名稱選擇*/
.className{
   color:red;
}
/*HTML中應用*/
<p class="className">Hello World!</p>

3、ID選擇器

/*按ID名稱選擇*/
#idName{
   color:red;
}
/*HTML中應用*/
<p id="idName">Hello World!</p>

4、通配符選擇器

/*對所有HTML元素應用樣式*/
*{
   color:red;
}

5、後代選擇器

/*選取某元素下的子元素*/
ul li{
   color:red;
}

三、CSS盒模型

1、什麼是CSS盒模型

CSS盒模型是指一個HTML元素由內容、內邊距、邊框和外邊距組成的矩形框，決定了元素在頁面上所佔的空間。

2、盒模型的組成

/*內容區(Width & Height)*/
{
   width:200px;
   height:100px;
}
/*內邊距(Padding)*/
{
   padding:10px; /*四周內邊距*/
   padding-top:20px; /*上內邊距*/
   padding-right:20px; /*右內邊距*/
   padding-bottom:20px; /*下內邊距*/
   padding-left:20px; /*左內邊距*/
}
/*邊框(Border)*/
{
   border:1px solid #000; /*四周邊框*/
   border-top:2px dashed #000; /*上邊框*/
   border-right:2px dashed #000; /*右邊框*/
   border-bottom:2px dashed #000; /*下邊框*/
   border-left:2px dashed #000; /*左邊框*/
}
/*外邊距(Margin)*/
{
   margin:10px; /*四周外邊距*/
   margin-top:20px; /*上外邊距*/
   margin-right:20px; /*右外邊距*/
   margin-bottom:20px; /*下外邊距*/
   margin-left:20px; /*左外邊距*/
}

四、CSS布局

1、基本布局方法

• 定位布局(position)
• 浮動布局(float)
• 彈性盒子布局(flex)

2、定位布局

/*relative相對定位；absolute絕對定位*/
#box{
   position:relative;
   left:10px;
   top:10px;
}
#box2{
   position:absolute;
   left:20px;
   top:20px;
}

3、浮動布局

/*float實現左右布局，clear清除浮動*/
.left{
   float:left;
}
.right{
   float:right;
}
.clear{
   clear:both;
}

4、彈性盒子布局

/*實現靈活分佈和對齊*/
.box{
   display:flex;
   justify-content:center; /*水平對齊*/
   align-items:center; /*垂直對齊*/
}

五、CSS動畫

1、CSS3實現動畫

/*定義動畫*/
@keyframes myanimation{
   from {transform:rotate(0deg);}
   to {transform:rotate(360deg);}
}
/*調用動畫*/
#box{
   animation:myanimation 2s linear infinite;
}

2、CSS動畫屬性

• animation-name：指定動畫名稱
• animation-duration：指定動畫時長
• animation-timing-function：指定動畫的時間函數
• animation-delay：指定動畫延遲
• animation-iteration-count：指定動畫執行次數
• animation-direction：指定動畫方向

六、CSS預處理器

1、什麼是CSS預處理器

CSS預處理器是一種語言，其可以在推出之前編譯成CSS。它通過一些基本的編程風格，如變量、循環、函數等，來更好地組織和維護CSS代碼。

2、常見的CSS預處理器

• Sass
• Less
• Stylus

七、CSS框架

1、什麼是CSS框架

CSS框架是一系列預先編寫好的樣式集，在開發過程中可用以構建網站或應用程序。框架提供了用於排版、樣式、設計元素和JavaScript插件等基礎的代碼和文件。

2、常見的CSS框架

• Bootstrap
• Foundation
• Bulma

八、總結

本文中介紹了CSS的基礎概念、選擇器、盒模型、布局、動畫、預處理器和框架等多個方面。相信通過學習本文，讀者們已經有了深入了解並掌握了CSS的必要知識。