一、 樣式
a) css cascading style sheet 層疊樣式表
b) 樣式的引入方式
行內樣式： 內容
內部樣式： 在頁面頭部
外部樣式： 在頁面頭部以link標籤鏈入
c) 樣式的基本語法 1. 選擇器 2. 基本選擇器的種類 1. 標籤選擇器 標籤名稱 同名標籤自動響應 2. 類選擇器 .類選擇器名稱 用標籤的class屬性引入 3. id選擇器 #id選擇器名稱 用標籤的id屬性引入 id選擇器的名稱，在同乙個html頁面中必須唯一 body中的第一代全部適應id選擇器
樣式的種類
字型樣式 font
a) 字型的樣式：font-style: normal/italic;
b) 字型的粗細：font-weight: normal/bold;
c) 字型的字型大小：font-size: npx/em; 12-14px;
d) 字型的家族：font-family : 英文本型 , 』中文字型』;
e) 字型復合樣式：font: 樣式 粗細 字型大小 字族;
文字樣式
a) 文字的顏色：color: 顏色英文常量/#a45fj7;
b) 文字的裝飾：text-decoratin: none / underline;
c) 文字水平對齊方式：text-align: left / center / right;
d) 文字的首行縮排：text-indent: nem/npx;
e) 段落文字行距：line-height:npx; 文字的垂直居中
列表樣式 list-style
a) 列表專案符號：list-style-type: none / decimal … ;
b) 列表專案：list-style-image: url(路徑);
c) 列表位置：list-style-position: outside / inside;
d) 列表符合樣式：list-style:none url(路徑) inside;
邊框樣式 border
a) 顏色：border-color: 顏色英文常量/#a45fj7;
b) 寬度：border-width: npx;
c) 線型：border-style: solid單實線 / dashed段虛線; dotted/groove
d) 上邊：border-top: color width style;
e) 右邊：border-right: color width style;
f) 下邊：border-bottom: color width style;
g) 左邊：border-left: color width style;
h) 上邊框寬度：border-top-width: npx;
i) 右邊框顏色：border-right-color: 顏色英文常量/#a45fj7;
j) 下邊框線型：border-bottom-style: solid單實線 / dashed段虛線;
k) 復合選擇器：border: color width style;
背景樣式 background
a) 背景顏色：background-color: 顏色英文常量/#a45fj7;
b) 背景：background-image: url(位址);
c) 背景位置：
background-position: left/center/right top/center/bottom;
background-position: left px toppx;
d) 背景平鋪:background-repeat: repeat/no-repeat/repeat-x/repeat-y;
e) 復合樣式：background: color url() position repeat;
f) 背景尺寸: background-size: n% / width px height px;
二、 盒子模型 上、右、下、左 專用於塊級元素
a) 外邊距：margin
margin-top/right/bottom/left: npx;
margin: ntoppx nrightpx nbottompx nleftpx; 上、右、下、左
margin: ntoppx nlrpx nbottompx; 上、左右、下
margin: ntbpx nlrpx; 上下、左右
margin: ntrblpx; 上下左右
b) 內邊距：padding 同margin
c) 寬度：width:npx;
d) 高度：height:npx;
e) 盒子水平居中：margin:npx auto npx; body中的第一代子元素
f) 彈性盒子：
宣告當前的盒子為彈性盒子：display: flex;
子盒子的排列方式：flex-direction: row橫向排列 / column縱向排列;
彈性盒子的水平居中：justify-content: center;
垂直居中：align-items: center;
g) 盒子邊框和內邊距向盒子內部擴充套件：box-sizing: cotent-box / border-box;
web前端學習 CSS樣式設定技巧
一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align...
web前端之CSS樣式書寫方法
回顧之前寫的內容 1.認識編譯軟體和html 2.html中的標籤和特殊字元 3.html中的頭部標籤和常用標籤 4.超連結 錨鏈結和功能性鏈結 之前介紹過修飾網頁需要用到css樣式，但是在 寫css樣式呢？這篇帖子就介紹如何書寫。本篇帖子的目錄 1.內部css樣式 書寫 2.外部css樣式 書寫 ...
Web前端（二）CSS層疊樣式表
二.基本語法 三.常用css樣式 四.基本選擇器 五.盒子模型 六.css浮動 七.應用案例 css實現qq郵箱介面 css指層疊樣式表 cascading style sheets 定義如何顯示控制 html元素，從而實現美化html網頁。為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆...