初識css
1、了解什麼是網頁樣式
2、掌握css的基本語法
3、熟練掌握css的基本屬性
4、會使用div + css進行網頁布局
5、熟練使用css來裝飾頁面
塊元素和內聯元素
塊元素獨佔一行
可以定義寬度和高度
常用塊元素
div p ul li
內聯元素
一行排列顯示
不能定義寬度和高度
常用內聯元素
span a label
標籤可以相互轉換（display） 規範角度而言，標籤不內嵌
標籤 和
標籤 最大優點： 沒有任何的預設樣式渲染 最大區別：
標籤是塊元素，
標籤是內聯元素 作用：1、結構化html元素 2、div + css網頁布局 3、提高網頁載入速度 什麼是css ？ css 的概念 cascading style sheet 級聯樣式表 表現html或xhtml檔案樣式的計算機語言 包括對字型、顏色、邊距、高度、寬度、背景、網頁定位等設定 css的作用： -能控制頁面的樣式和布局 -網頁檔案與樣式檔案相分離，提高開發效率 2.2css基本語法 選擇器
eg:h1
經驗：css的最後一條宣告後的；可寫可不寫，建議都寫上css多條宣告可寫在同一行，但開發時便於閱讀建議分行寫並縮排
基本選擇器
標籤選擇器：
-html標籤作為標籤選擇器的名稱
p類選擇器 《標籤名 class=「類名」>標籤內容id選擇器 《標籤名 id=「id名稱」>標籤內容格式為：標籤 + 類選擇器 或者 標籤 + id選擇器
選擇器之間不能用偶空格
後代選擇器
p a
經驗：選擇器之間可以是多個不同或相同型別並有層級關係的；選擇器之間用空格隔開
通配選擇器
*基本上不使用：
總結：-標籤選擇器直接用於html標籤
-類選擇器可以再頁面中多次使用
-id選擇器可以再同乙個頁面中只能使用一次
-靈活運用並集，交集，後代選擇器
2.5css的引入樣式
-行內樣式
–使用style屬性引入css樣式
eg：直接在html標籤中設定的樣式
-內部樣式
-外部樣式
css 的引入方式
外部樣式表
-css**儲存在擴充套件名為.css的樣式表中
-html檔案引用擴充套件名為.css的樣式表，有兩種方式
–鏈結式
–匯入式
：屬於xhtml ；優先載入css檔案到頁面 @import：屬於css2.1 ;先載入html結構再載入css檔案
css樣式優先順序：
行內樣式》內部樣式表》外部樣式表(後兩者是就近原則)
id選擇器》類選擇器》標籤選擇器
總結：-css選擇器分為標籤選擇器、類選擇器和id選擇器
-css復合選擇器
-交集選擇器 、並集選擇器 、 後代選擇器
-在html中引入css樣式的三種方式
-行內樣式、內部樣式和外部樣式
-注意css的優先順序
css字型屬性
字型屬性：
屬性 描述
font -style 設定字型風格
font-weight 設定字型粗細
font-size 設定字型尺寸
font-family 設定字型系列
font 簡寫屬性，作用是把所有針對字型的屬性設定在乙個宣告中（注意順序）
font:font-style || font -variant ||font-weight ||font-size/line-height||font-family
font-variant:small-caps; 顯示小型的大寫字母的字型
文字屬性
屬性 描述
color 設定文字的顏色 ，如red ,#ff0000
line-height 文字的行高
text-align 設定文字的對齊方式，如left,center,right
text-decoration 設定文字裝修，如underline none line-through
css背景屬性：
設定頁面元素的背景樣式
屬性 描述
background-color 背景色，取值如，red ,#ff00
background-image 背景，如：background-image:url("./images/bg.png");
background-position 背景開始位置，包括水平方向（x軸）和豎直方向（y軸）的設定；
x軸取值：left ，center ，right y軸取值 top center bottom 或畫素值，或百分比
background-repeat 背景填充方式，取值，repeat -x |repeat -y|no-repeat
background 合寫方式，如，background :#fff url(bg.png) left top no -repeat;
背景屬性基本應用
2.12列表屬性及偽類
盒子模型
display屬性：
浮動屬性
float 屬性：
取值：-left 左浮動
-right 右浮動
-none 不浮動
作用：-塊元素同行排列顯示，一般用於排版，分欄顯示
-設定浮動屬性後，脫離文件流向指定的左或右邊對齊，直到父元素的邊界或者浮動的元素
注意：-使用浮動後要及時清除，以免影響其後的網頁元素
清除浮動：
清除浮動的必要性
-浮動後，脫離了文件流不佔網頁空間
-浮動後的網頁元素會影響同級元素
clear屬性清除浮動
取值：left
right
both
none
表名容器框的哪邊不挨著浮動框
清除浮動的方法：
-幾個並列的盒子同時加浮動，他們的父級盒子出現如下情況：
（1） 背景不能顯示
（2） 邊框不能撐開
方法一：新增新元素，應用 clear：both
方法二：父級新增overflow：auto；zoom：1；
//zoom: 1；是在處理相容性問題
方法三：據說是最高大上的方法 ：after 方法
（注意：作用於浮動元素的父親）
#box //for ie6/7 maxthon==/
#box:after
2.21清除浮動的方法：
定位屬性
position屬性：
-relative（相對定位）
-相對他原來的位置，通過指定偏移，到達新的位置。
-仍在標準流中，他對父級盒子和相鄰盒子都沒有任何影響
-absolute(絕對定位)
-相對已設定非static定位屬性的父元素計算偏移量,脫離文件流；
-fixed(相對瀏覽器固定定位，ie6不支援)
-static(預設)
偏移量設定
-x軸（left、right屬性）與y軸（top，bottom屬性）
可取值：畫素或百分比
z-index:設定定位盒子的層級
-數字越大。層級越高，越在上層
z-index：2(數字之後沒有單位，數字可以設定為負值)
2.26網頁布局注意事項
如何進行網頁布局：
table**布局：用於統計**
優點：簡單易懂、位置很規矩
缺點：載入速度慢，結構固定不靈活，不利於維護和seo
框架布局：
多頁面載入在同一頁面，如標籤
div+css方式布局（目前最流行，最合理的布局方式）
html結構：標籤
css樣式：float浮動和盒子模型
為什麼使用div+css
標籤「乾淨」，網頁更小，開啟更快
結構清晰，便於維護，利於seo
標籤更靈活，更好控制頁面元素
樣式與結構相分離，更好的結構重組
表現與內容相分離，利於分工協作
總體把握 分塊實現 完善細節 效能優化
網頁布局命名規範：
命名整體框架 用id選擇器
命名小模組內容用類選擇器
語法： 選擇器
注意：元素必須為塊元素
元素必須設定其寬度
元素的上下邊距可自定義
使塊元素水平排列
語法：選擇器-1
選擇器-2
分割槽實現
分別實現每個區域的內容
重複對大區塊下進行切分布局
浮動布局
自動居中布局
定位布局
相對定位屬性合絕對定位屬性相結合
確定採用適合的html標籤
*遵循語義性標籤優先原則
*結構性容器一般採用標籤
*小圖示，小部件一般採用內聯元素
標籤*列表形式的內容一般採用
第三章： 倒三角和css.sprite製作使用及優缺點
3.1倒三角的實現方法（一）
–用背景
–用border製作倒三角
–用特殊符號構造倒三角
3.2倒三角的實現方法（二）
3.3css精靈（一）
3.4css精靈（二）
更新中。。。
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...