整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS的介紹
CSS，Cascading Style Sheets層疊樣式表。
一個網頁由三個部分：結構、表現、行為，對應的標準是：XHTML、CSS、JavaScript。
這三個標準語言，是瀏覽器直接可以識別的，并且能直接進行解釋(翻譯)的。
CSS的格式
一個CSS樣式表(<style></style>)由多個CSS規則構成；
一個CSS規則由“選擇器”和{}構成；
選擇器就是給哪一個HTML元素定義；
CSS選擇器
第一：基本選擇器（單一）
通用選擇器(*)：將匹配所有的HTML元素；
標簽選擇器：對應所有的HTML標記，名稱與標記名稱一樣。
類選擇器：可以通過給一類HTML元素，定義同一個class屬性來增加樣式。類樣式定義以“.”開頭定義。CSS的CLASS屬性一般給層疊樣式用表。比如：
.news表示class=news的元素增加樣式
news表示class=news的<div>元素增加樣式
.news title表示class=news下的class=title的<div>元素
ID選擇器：給標記特定ID屬性的HTML元素來增加樣式。\
Id選擇器的定義，以“#”號開頭
網頁不能出現同一個ID的值，ID像身份證號，具有唯一性；
HTML元素的ID屬性，一般給JavaScript使用
第二：組合選擇器
多元素選擇器：也就是同時給多個HTML元素定義。
body,p,a,ul,li,p{margin:0px;padding:0px;}
每一個HTML元素都具有默認樣式。
后代元素選擇器：用空格來分隔各個選擇器。
.news .title p{background-color:#FF0000;}
子元素選擇器：用>號來分隔父子選擇器，不存在第三層級的問題。
第三：偽類選擇器
偽類選擇器一般是給超鏈接<a>標記來增加樣式。
超鏈接具有四個狀態：
正常狀態 a:link{ }
放上狀態 a:hover{ }
激活狀態a:active{ }
訪問過狀態 a:visited{ }
全局鏈接
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#FF0000,text-decoration:underline;}
給鏈接增加類樣式 (class=“a2”)
a.a2:link,a.a2:visited{ }
a.a2:hover{ }
CSS的繼承性
CSS內部元素將繼承外部元素的樣式，多個外層元素的樣式就疊加到內層元素上。<body>元素是網頁中最大的標記，它中的樣式將被其它子元素繼承。
哪些CSS屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等
引入CSS的方式
（1）內嵌式
通過<style></style>來書寫CSS代碼。
只能應用于當前網頁，不能被其它網頁共享。
注意：<style>標記可以放在網頁的任何地方，但一般放在<head>。
（2）外聯式
通過<link>標記來引入外部的CSS文件(.css)。
可以被其它網頁共享。public.css index.css news.css about.css
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>標記只能放在<head>中
（3）行內樣式
通過style的屬性來書寫CSS代碼。
每一個HTML元素，都有 style、class、id、name、title 屬性。
舉例：<p style=“font-size:24px;”></p>
CSS的字體/文本屬性
Font-size：文字大小
Font-weight：加粗
Font-style：斜體
Color：顏色
Line-height：行高
Text-indent：首行縮進
Text-align：水平對齊
Letter-spacing：字符間距
CSS列表
List-style-type：列表類型，取值：none、circle、 square
List-style-position：符號位置，取值：inside、outside
List-style-image：圖片路徑，舉例：list-style-image:url(images/li01.gif);
Background-color：背景顏色
Background-image：背景圖片，舉例：background-image:url(images/bg.gif);
Background-repeat：背景平鋪，取值：no-repeat(不平鋪)、repeat(平鋪)、repeat-x(x方向)、repeat-y(y方向)
Background-position：背景定位，取值：固定值或百分比
格式：background-position:水平方向 垂直方向;
用固定值定位：background-position:100px 0px; //距離左邊100px，距離上邊0px
用百分比定位：background-position:50% 50%; //水平方向居中 垂直方向居中
用單詞來定位：background-postion:left|center|right top|center|bottom; 三個值取其中一個
Background-attachment：附加信息，取值：scroll(滾動)、fixed(固定)
簡寫形式：background:url(images/bg.gif) repeat-x 100px 0px; //多個屬性值間用“空格”隔開
Float：元素浮動，取值：left或right。
Clear：清除浮動，取值：left或right或both
CSS浮動元素將向左向右浮動；
浮動可以叫“飄”起來；
浮動的元素，直到碰到父元素的邊框或前一個浮動元素的邊框為止；
浮動元素是一個塊元素框，不管它原來是什么元素(行內元素)；
浮動元素不再占用空間，脫離了普通文檔流，層級比普通元素的級別高；
清除浮動
清除浮動特性后，清除元素之后的其它元素將恢復默認排版；
清除浮動特性后，包圍元素從視覺上看起來，像包圍住了浮動元素；
Border：同時設置四個邊框的屬性
Border-left：設置左邊框的屬性
Border-right：設置右邊框的屬性
Border-top：設置頂邊框的屬性
Border-bottom：設置底邊框的屬性
格式：border-bottom：粗細 線型 線顏色;
舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實線，顏色為紅色
線型取值：none(無邊線)、solid(實線)、dashed(虛線)、dotted(點狀線)、double(雙線)
每一個HTML元素可以看成一個“盒子”。
一個“盒子”具有：寬度、邊框、內填充、外邊距
寬度(width)和高度(height)：是指內容的寬度和高度，不含邊框、外邊距、內填充。
內填充(padding)：是指內容到邊框線間的距離，含四個方向：上、右、下、左
外邊距(margin)：是指邊框線以外的距離。
計算一個“盒子”的總空度
假設：總寬度為100px，邊框為1px，內填充為10px，求內容的寬度
Width = 100px – 1px*2 -10px*2 = 78px
假設：總寬度為100px，內容的寬50px，求左右內填充分別是多少？
Padding-left = (100px – 50px )/2 = 25px
Padding-left：左邊線到內容間的距離
Padding-right：右邊線到內容間的距離
Padding-top：頂邊線到內容間的距離
Padding-bottom：底邊線到內容間的距離
Padding：同時設置四個邊的內填充距離
padding:10px; //表示：上下左右四個內填充都是10px
padding:5px 10px; //表示：上下為5px，左右為10px
padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px
padding:5px 10px 15px 20px; //表示：上右下左分別設置不同的內填充，順序不可亂
Margin-left：左邊線以外的距離
Margin-right：右邊線以外的距離
Margin-top：頂邊線以外的距離
Margin-bottom：底邊線以外的距離
Margin:10px; //表示：四個外邊距都是10px
Margin:10px 15px; //表示：上下外邊為10px，左右外邊距為15px
Margin:5px 10px 15px //表示：上外邊距為5px，左右外邊距為10px，下外邊距為15px
Margin:5px 10px 15px 20px; //分別設置四外外邊距，順序為“上右下左”
一、首先要確定的事情
主頁的寬度：973px
主頁的背景色、背景圖片
網頁的結構：網頁頭部、網頁尾部、網頁主要內容（左右兩列）
二、網頁結構圖
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
1 文檔流介紹
浮動（ float）
普通流（ normal flow）也叫標準流、文檔流
前面我們說過，網頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位
htmi語言當中另外一個相當重要的概念——標準流！或者普通流，或者文檔流。普通流實際上就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
2 浮動是用來做文字環繞效果的
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞圖片的效果。
后來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經是我們真正意義上的網頁布局，具體CSS3我們會詳細解釋）
3 體會浮動
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{ float：屬性值；}
4 浮動就是漂浮的意思
浮動脫離標準流，不占位置，會影響標準流。可以蓋住標準流。浮動只有左右浮動。
5 浮動首先需要添加標準流父級
浮動首先創建包含塊的概念（包裹）。就是說，浮動的元素總是找離它最近的父級元素對齊。但是不會超出內邊距的范圍。
6 浮動特性對齊父盒子
7 浮動特性盒子排列
浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
8 浮動影響盒子顯示模式
元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少。
浮動根據元素書寫的位置來顯示相應的浮動。
9 浮動總結
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float浮漏特（形象的表示）
浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏：加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標準流的盒子。
特：特別注意，首先浮動的盒子需要和標準流的父級搭配使用，其次特別的注意浮動可以使元素顯示模式體現為行內塊特性。
10 版心和布局流程
閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。
“版心”是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960pX、980px、1000px、1200px等。
布局流程
為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML頁面，CSS文件。
4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。
11 一列固定寬度且居中
12 兩列左套右寬型
快捷生成框架：
按tab鍵即可生成如下框架：
13 通欄平均分布型
看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結束，下篇文章將分享《12 清除浮動》小伙伴們不要錯過喲！
、什么是 CSS 盒模型，它是如何工作的？
CSS 盒模型定義了元素在網頁上的呈現方式。它由內容、內邊距、邊框和邊距組成。內容代表實際的元素內容，而填充則在內容和邊框之間添加空間。邊框提供可見的邊界，邊距在元素周圍創建空間。
這是一個例子：
.box { width: 200px; padding: 20px; border: 1px solid black; margin: 10px;}2、解釋 CSS 特異性的概念以及它如何影響樣式應用。
CSS 特異性決定了當多個規則針對某個元素時，將哪些樣式應用于該元素。特異性是根據選擇器的組合計算的，例如，元素類型、類、ID 和內聯樣式。特異性越高，規則的優先級越高。
這是一個例子：
/* ID selector - high specificity */#myElement { color: red;}
/* Class selector - medium specificity */.myClass { color: blue;}/* Element selector - low specificity */div { color: green;}3、使元素水平和垂直居中的不同方法有哪些？
有多種方法可以使元素水平和垂直居中。以下是三種流行的技術：
1).彈性盒方法：
.container { display: flex; justify-content: center; align-items: center;}2).CSS網格方法：
.container { display: grid; place-items: center;}3).變換方法：
.container { position: relative;}
.centered-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}4、如何創建在滾動時保持固定的粘性標題？
您可以通過使用position:sticky;來實現粘性標題。此屬性允許元素在滾動時在其容器或視口中保持固定。
這是一個例子：
.header { position: sticky; top: 0; background-color: #ffffff;}5、什么是CSS浮動屬性，它是如何工作的？
CSS float 屬性用于在其容器內定位元素。浮動元素向左或向右移動，允許其他元素環繞它們。此屬性通常用于創建多列布局或定位圖像。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
