一、什麼是css
css 層疊樣式表，級聯樣式，簡稱才是樣式表
實現了內容和表示的分離
css和html之間的關係
html是負責網頁的結構
css 是負責構建html元素的樣式
css作用：
1.以統一的方式實現樣式的定義
2.提高頁面樣式的可重用性和可維護性
二、css的使用
1.內聯樣式（行內樣式）
將樣式宣告在元素的style屬性中
語法：注意：所有的樣式都必須在雙引號之內並且中間用分號進行分隔
2.內部樣式
將樣式宣告定義在頁面的style屬性中
步驟：1.在head標籤裡面新增乙個style標籤
2.在style中書寫樣式
語法：3.外部樣式表
步驟：建立乙個新的css檔案
建立和html檔案的關聯
書寫樣式
繼承性1、子級元素可以直接使用父級元素宣告好的樣式（這裡不是所有的樣式都可以被繼承）
層疊性
乙個勻速可以宣告多個樣式
注意：如果樣式不衝突，多個樣式規則中的樣式可以層疊為乙個。
優先順序 樣式定義產生衝突時按照不同的樣式使用「優先順序」來應用樣式
在們三種引入方式中誰的優先順序最高（行內樣式表）
低：瀏覽器預設值
中：外部樣式表或者內部樣式表
高：內部樣式表
！improtant
作用：顯示調整樣式的優先順序
語法：屬性名稱： 值！improtant
注意： ie瀏覽器 8 以下 不支援的
破壞了優先順序規則
1.通用選擇器
作用：匹配到頁面中所有的元素
語法：*
優點：乙個樣式整個頁面都可以被改變
缺點：效率低，盡可能的少用
2.標籤選擇器
作用：定義頁面的某乙個標籤的預設樣式
語法： 標籤名
3.類選擇器
作用：由css定義好，可以被任意標記的class屬性值進行引用的選擇器
語法： 1.在標籤中新增 class屬性 並且給他乙個名字
2.在style中 用.類名{}方式進行樣式編寫
注意：類名：不能以數字開頭，除了 _ , - 以外的特殊符號都不能使用
4.id選擇器
作用：針對指定id值得元素去定義樣式
語法： 1.在元素中定義id屬性
2.在style中用#id名進行樣式編寫
注意： id是唯一的
一定要對應頁面某個元素的id值
class裡面可以同時存在多個類名但是id不能存在多個id名
優先順序 id > 類 > 標籤 > *
5.群組選擇器
作用：選擇器宣告 以 ， 隔開的選擇器列表
語法：
選擇器1，選擇器2，。。。。
ps：不同的選擇器都可以被選中（都可以連著用）
6.後代選擇器
後代：只要具備層級關係的元素，被巢狀的都可以稱為後代元素
語法：
#div1 span{}
注意：中間用空格隔開，並且他們只能是父子級的關係
7.子代選擇器
子代：只具備一級層級關係的子元素，被巢狀的（被包括的）稱之為子代元素
語法 ： #div2 > span{}
8.偽類選擇器
1.hover
9. 選擇器的優先順序
選擇器的型別 權值
元素選擇器 0,0,0,1
類選擇器 0,0,1,0
偽類選擇器 0,0,1,0
id選擇器 0,1,0,0
內聯樣式 1,0,0,0
注意：選擇器的權值加到一起 大的是優先 如果權值相同的話，後定義的優先
作用：使用者設定元素的寬度和高度 單位為 px（畫素） 和 百分比%
寬度屬性：
width：設定元素的寬度
min-width：設定最小的寬度
max-width：設定最大的寬度
高度屬性：
height：設定元素的高度
min-height：設定元素最小的高度
max-height：設定元素的最大的高度
允許被改變高度和寬度的元素
1.塊級元素時可以設定寬高的
2.大部分行內塊元素時可以設定寬高的
input 單選多選框
3.存在width和height屬性是可以設定寬高的
img table
溢位使用尺寸屬性限制元素的大小時，如果內容所需要的空間大小大於
元素本身，會導致溢位的效果
語法：overflow:
overflow-x: 處理橫向溢位
overflow-y: 處理縱向溢位
/*溢位處理
visible 預設效果 溢位可見
hidden 溢位隱藏
scroll 滾動，元素會出現滾動條當內容溢位的時候，滾動條可用
auto 自動（自適應） 內容溢位的時候會出現滾動條 沒有溢位的時候是不出現的
* */
邊框陰影
屬性 box-shadow
h-shadow 必須填的 陰影的水平偏移距離 正數的 右邊 負數 左偏移
v-shadow 必須天的 垂直的偏移距離 + 下 - 上
blur 模糊距離 必須是正數
color 顏色
spread 陰影的大小
inset值 將預設的**影變成內陰影
輪廓作用： 繪製元素周圍的一條線，位於邊框外的
語法：outline-width：*/
/*outline-width: 10px;
outline-style: solid;
outline-color: yellow;
outline: none;*/
outline: 1px solid red;
背景屬性
1.背景顏色
background-color: #000000 英文單詞 transparent（透明色）
注意：背景顏色會填充到元素的內容區域、內邊距區域 和 邊框區域
/*背景顏色*/
background-color: red;
/*背景
預設的效果平鋪
/*修改平鋪
repeat:預設的平鋪
repeat-x ：水平平鋪
repeat-y：垂直平鋪
no-repeat：不平鋪
* */
background-repeat:repeat;
/*背景的尺寸
cover :覆蓋 撐滿整個元素
value1 value2 單位是px
value% value% 採用當前元素的寬度和高度的百分比進行縮放
* * */
background-size: 50% 50%;
/*背景的固定
fixed: 背景固定
* */
background-attachment: scroll;
1.元素的分類
1、塊級元素：獨佔一行，對寬高生效，如果不給寬度撐滿整行，如果不給
高度隨著內容的增長而增長
2、行內元素：可以多個標籤存在一行，對寬高不生效完全依靠內容去撐起寬高
3、行內塊元素： 結合了行內和塊級元素的特點，不僅是可以設定寬高而且還可以多個標籤
存在一行。
4、如果有需要的話 可以運用display進行強轉
inline 行內元素
block 塊級元素時可以設定寬高的
inline-block 行內塊元素：
none 不顯示
2.外邊距 內邊距 邊框 內容
w3c標準的盒子模型中 元素在網頁中所佔的位置的實際寬度
的理解和使用
本文出自 在傳統 jsp 中，想要實現頁面布局管理比較麻煩，為了解決在 jsp 中布局的問題，出現了很多開源軟體，比如 apache tiles 和 sitemesh 就是其中比較優秀的。但是使用開源軟體實現布局或多或少會產生一些效能問題，有沒有辦法在不依賴第三方開源軟體的情況下，使用 jsp 本身...
CSS布局 Flexbox的理解與使用
display 這定義了乙個flex容器，內斂還是塊取決於給定的值。它為所有直接孩子元素提供了乙個flex上下文。display flex or inline flex 需要注意的是，css的列對於flex容器無效。flex direction 設立主軸，因此定義flex專案放置在flex容器裡的方...
理解css中的float和clear
css浮動 float,clear 通俗講解 1.假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊 如果一行放不下這兩個元素，那麼a元素會被擠到下一行 如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素...