簡介
1.什麼是css？
層疊樣式表：cascading style sheet
2.有什麼用？
html是頁面的骨架，而css就是對頁面骨架內容的修飾
3.為什麼要使用？
樣式和內容寫在一起，會顯得非常臃腫，使用css可以將樣式單獨抽出來，可以提高開發效率
css提供很多html屬性無法替代的顯示效果
單獨抽離出來的css可以進行單獨載入，能夠實現多個頁面共享，可以節約網路頻寬，節約成本
css引入方式
1.方式一：行內樣式表
通過標籤的style屬性進行設定
2.方式二：內聯樣式
通過style標籤進行設定
3.方式三：外聯樣式表
通過link標引用外部css檔案
4.使用說明：
當設定的屬性比較少，需要設定的地方也比較少，可以使用行內樣式
當樣式只在乙個頁面內部使用，很多地方都需要相同的效果，可以使用內聯樣式表
當乙個**的多個頁面需要相同的顯示效果，可以使用外聯樣式，**使用**引入即可
css語法格式
1.樣式要寫在大括號（{}）中
2.所有的樣式都是以鍵值對的形式出現的
3.樣式與值之間通過：（冒號）進行連線
4.每個屬性的結尾都要有乙個分號（；）而且建議一行乙個樣式
5.注釋：/* */
6.css檔案中不要出現style標籤
常用的選擇器
1.標籤選擇器：通過標籤名字進行選擇
2.class選擇器：通過class屬性的值進行選擇，語法：「.」
3.id選擇器：通過id屬性的值進行選擇，語法：「#」
4.組合選擇器：使用逗號隔開多個選擇器選擇的結果進行統一設定
5.層級選擇器：通過一層一層的元素定位進行選擇，多和層級之間使用空格隔開
6.屬性選擇器：根據元素的屬性進行選擇
7.偽類選擇器：通常用於標識標籤的不同狀態，如:a:link
8.通用選擇器：使用*進行選擇，會選中所有元素，盡量不用
選擇器的優先順序
1.問題：當多個選擇器同時選擇同乙個元素，並且設定同一屬性時，請問以那個為準？
2.答案：css中沒有明確的規定優先順序，但是有乙個大致的原則是定位越具體優先順序越高
3.參考：id>class>其他》*>預設屬性
4.使用說明：
盡量避免使用多種方式同時修改樣式
盡量避免多處同時修改同一標籤的同一樣式
優先順序相同，後面的會覆蓋前面的效果
如果還有優先順序問題，可以使用chrome除錯工具進行檢查定位
尺寸及單位
1.說明：在html中可以不寫單位，但是在css中必須寫
2.單位：
px：畫素，絕對單位
%：百分比，相對單位，相對於父級元素
em：相對於父級元素的倍數
rem：相對於html元素的倍數
3.width：寬度
4.height：高度
5.min-width：最小寬度
6.min-height：最小高度
7.max-width：最大寬度
8.max-height：最大高度
字型設定
1.font-style：normal（正常）,italic（斜體）
2.font-weight：normal（正常）,bold（加粗）
3.font-size：字型大小
4.font-family：字型族
5.font：簡化的書寫方案，可以進行一次性設定
順序是固定的
font-size和font-family不能省略
如：font：italic bold 30px 宋體;
文字修飾
1.text-indent：縮排
2.overflow：超出部分變滾動條
3.text-decoration：文字橫線的顯示處理
4.text-align：水平對齊方式
5.line-height：行高。若設定為容器高度可以實現垂直居中
6.vertical-align：行級標籤之間垂直對齊（top,bottom,middle）
背景設定
1.background-color:背景顏色
5.background-attachment：附著方式
fiexd：相對於窗體固定
scroll：相對於元素固定
local：相對於元素內容固定
6.background:簡化書寫
示例：background:url(123.jpg) no-repeat right scoll
列表設定
1.list-style-type:圖示型別
2.list-style-position:圖示位置
3.list-style-image:圖示
4.list-style:簡化書寫方案
示例：list-style:circle inside url(123.jpg)；
定位相關
1.position：元素定位
static：靜態，預設方式，四個偏移屬性無效
relative：相對定位，相對於自身在文件流的位置
fixed：固定定位，相對於窗體定位
absolute：絕對定位，想對於最先定位的祖先元素進行定位，直到body
2.z-index:z方向的偏移，沒有單位，值為乙個數即可，值越大越靠上
布局相關
1.float：浮動，left，right
2.clear：清除浮動，both，left，right
3.visibility：visible。hidden,隱藏時元素的位置會保留
4.display：
none，隱藏時元素位置不會保留
block：塊元素
inline：行元素
inline-block：行內塊
盒子模型
1.尺寸：width，height
2.邊框：border，border-radius
3.內邊距：padding
4.外邊距：margin，垂直方向會取較大值，水平方向疊加
5.位置：
寬度=width+左右邊框+左右內邊距+左右外邊距
高度=height+上下邊框+上下內邊距+上下外邊距
層疊樣式表
網頁實際上是乙個多層的結構，通過css可以分別為網頁的每一層設定樣式，而最終我們看到的只有最上面一層。總之css就是用來涉惡之網頁中元素的樣式 在標籤內部通過style設定元素的樣式 存在的問題 使用內聯樣式，樣式只能對乙個標籤生效，如果希望影象到多個元素，則必須在每個元素中都複製一遍，並且，當樣式...
CSS層疊樣式表 定義樣式表
定義樣式表 1 html標記定義 p p可以叫做選擇器，定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性，他們之間需要用英語 隔開，最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...
CSS層疊樣式表
一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊，並根據它來格式化文件 ...