CSS簡潔筆記

weixin_33807284發表於2017-12-11
CSS筆記

1.通用屬性

  1. name：名稱，可以重複，可以一樣;
  2. class：類名，可以重複，也可以擁有多個，給CSS用的；如<div class="one two"></div>;
  3. id：唯一標示，不能重複，一般多用在JavaScript中；命名規則與其他語言的標示命名規則一樣;
  4. title：標題，可以在標籤中新增；如<img src="1.jpg" title="這是一張圖片">;

2.標籤關係

  1. 後代關係：父子關係（包含關係）;
  2. 兄弟關係：同父關係;

3.CSS-層疊樣式表

  1. CSS註釋：/註釋內容寫在這裡，給程式設計師看，頁面上不顯示/;
  2. CSS語法規則：所有符號都以英文輸入法狀態下輸入，要小寫，大括號裡寫屬性，每條屬性語句都以分號結束，屬性值要帶畫素單位（px）；格式：屬性:屬性值;

4.CSS的引入方式

  1. 行內引入：在標籤中加樣式的引入方式；格式：<標籤 style="background:red; font-size:20px;">內容</標籤>;注意：程式碼可維護性極差，CSS程式碼與html結構沒有實現分離；影響的範圍只在當前標籤;
  2. 內嵌引入：在網頁頭部中加<style type="text/css">CSS樣式</style>;注意：程式碼可維護性比較差，沒有實現CSS程式碼與HTML結構分離，影響範圍只在當前頁面;
  3. 外聯引入：在網頁外建立一個xx.css檔案，網頁頭部中利用<link rel="stylesheet" type="text/css" href="xx.css">;注意：程式碼可維護性高，CSS程式碼與HTML結構完全分離，影響範圍整個網站所有引入CSS檔案網頁中;

5.CSS核心語法：

  1. 結構格式：選擇器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};
  2. 選擇器：選擇頁面元素的工具;
  3. 大括號：大括號裡面寫樣式內容;

6.選擇器

  1. 基礎選擇器：

    • 通用選擇器：用來初始化網頁預設樣式的，樣式表開頭就寫；格式：*{padding:0;margin:0;};
    • 標籤選擇器:給指定標籤加樣式；格式：p{color:green;};
    • 類選擇器：選擇制定類選擇器樣式；格式:.class名{background:pink;};注意：class名在標籤中定義，如class="one";如果幾個塊內容樣式一樣，那麼給他們一樣的樣式就可以;
    • id選擇器：唯一標示，不能重複出現；格式：#id名{backgound-image:url(1.jpg);}注意：id名在標籤中定義id="one";id不能隨表加，幾個塊內容樣式一樣時幾個塊的id名都得不一樣;;
id和class的區別：注意上一點——ID必須能夠唯一的確定DOM節點。如果你全篇都使用ID選擇器，那麼即使兩個DOM節點樣式完全相同，那麼你也必須把節點樣式寫兩遍, 如果後期要進行維護,那麼你必須對兩處的程式碼都進行維護！！！極大的增加了維護的成本;
  • 偽類選擇器：順序LoVe HAte原則，可以跳過去，但順序不能換；分別是連結狀態(link)，訪問過的狀態(visited)，活動狀態(hover)和點選狀態(active);
描點類：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 獲取焦點時的樣式a:focus{};注意：屬性中可以加文字屬性，背景顏色和圖片；a{}與a:link{}實現的效果是一樣的;
列表類：li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意：屬性中可以加文字系列屬性，背景顏色和圖片等;

  1. 複合選擇器：

    • 分組選擇器（並集選擇器，多元選擇器）：用來給多個元素加同一個樣式；例：.one,#one,a,span{color:red;font-size:14px;}意思是類one,#one,a標籤，span標籤有共同屬性;
    • 後代選擇器：給子類元素加屬性;例：.one a{text-decoration:none;}意思是類one的後代a標籤修飾的內容無下劃線;
    • 子元素選擇器（指定式選擇器）：給指定的子元素加屬性；例：#one>p{color:red;};意思是給id選擇器one的兒子p標籤休息的內容加屬性;
    • 相鄰元素選擇器：
1.兩個緊挨著的兄弟選擇器加屬性,不給自己加屬性，只給後面的兄弟加屬性；.one+p{background:red;};
2.one~p{background:green}意思是給one選擇器後面的所有p標籤元素加屬性，前提是他們擁有一個父類;
  • 屬性選擇器：

1.給帶有屬性的元素的加屬性;img[id]{background:red;}給帶id的元素加屬性;

  1. 給帶有指定屬性值的元素加屬性：img[src="b.jpg"]{background:red;}給帶b.jpg的元素加屬性;

3.給帶有指定字元開頭的的元素加屬性：img[src^="b"]{background:red;}給以b開頭的所有元素加屬性;
4.選擇器帶有以指定屬性值為結尾的元素：img[src$="b"]{background:red;}給以b結尾的所有元素加屬性;
5.選擇器帶有包含指定屬性值的元素:img[src*="b"]{background:red;}給含b的所有元素加屬性;

7.元素包含（顯示方式的分類）

  1. 塊元素：用來排版，結構 典型的有：div，p，li，h1，dt;

    • 元素自己獨佔一行顯示（與寬度無關）;
    • 可以設定寬度和高度;
    • 當巢狀一個塊級元素，子元素如果不設定寬度，那麼該子元素的寬度為父元素的寬度;

  2. 行內元素： 用來加樣式的；span,a,font,strong;注意：行內元素不要給上下的margin和padding，上下會被忽略，左右起作用（一般不用）;

    • 元素在一行上顯示;
    • 不能直接設定寬度和高度;

  3. 行內塊元素：image,input;

    • 元素在一行上顯示;
    • 可以設定寬度和高度;

  4. 轉換關係：行內包含行內；塊元素包含塊元素，塊元素可以包含行內元素;

    • Display: inline 將元素轉化為行內元素
    • Display：inline-block 將元素轉化行內塊元素
    • Display: block 將元素轉化為塊元素

8.CSS的屬性

  1. 字型有關屬性：

    • font-size:字型大小，多少畫素，px;
    • font-weight:字型粗細，bold（700-900），normal，可以寫100-900;
    • font-style：字型傾斜，italic，normal;
    • font-family:字型，微軟雅黑，黑體;
    • 屬性連寫：font: font-style font-weight font-size/line-height font-family;注意： font屬性聯寫必須有 font-size 和font-family(其他屬性可以不寫)；font-size 和font-family的順序不能換;

  2. 文字：

    • color:顏色;
    • text-indent：縮排【單位是em】;
    • text-decoration：文字線【underline下劃線，overline上劃線，line-through刪除線，none取消線】;
    • word-spacing:單詞之間距離;
    • letter-spacing：字母鍵距離;
    • text-align：水平對齊方式【預設left，center，right】;
    • line-height：行高，文字所在行的高度【行高和元素高度相等時文字垂直居中】;

  3. 尺寸：是塊元素的尺寸，行內元素不可以設定寬高，想設定得轉換;

    • width：寬度;
    • height：高度;

  4. 列表ul，li的屬性：list-style-type在ul中加了可以的li中不用加;

    • list-style-type:none;去掉符號,square方塊，circle圓，disc實體圓，加圖片了後可以不寫也可以list-style-type:none;
    • list-style-image:url(1.jpg)圖片
    • border:1px solid red;給ul整體設定邊框
    • list-style-position:outside;樣式圖片定位：inside,outside

  5. 背景：

    • 背景顏色background-color;
    • 背景圖片background-image注意：設定背景圖片的時候一定要設定寬度和高度;
    • 背景平鋪background-repeat：repeat （預設值）|no-repeat （不平鋪）|repeat-x | （橫向平鋪）repeat-y （縱向平鋪）
    • 背景位置background-position：設定具體值： left| right| top| bottom| cneter；設定具體值的時候不區分先後順序；設定具體數字的時候，第一個值代表水平方向，第二個值代表垂直方向，設定前背景圖片設定格式改成background-image;
    • 設定背景是否固定background-attachment： Scroll（預設值）滾動;fixed （圖片固定）;
    • 屬性聯寫：沒有數量限制和先後順序限制：background:url("") red no-peat 30px 40px;
  6. 行高line-height:

  7. 盒子模型：用來進行網頁佈局，必須設定寬度

    • 組成部分：
    1. border邊框：
    2. padding內邊距：設定內容距離盒子邊框之間的距離
    3. margin外邊距： 設定盒子與盒子之間的距離
    • 盒子邊框屬性：
    1. 邊框寬高：border-width:1px;
    2. 邊框顏色：border-color:red;
    3. 邊框樣式：border-style:solid實線/dotted點線/dashed虛線/none無;
    4. 屬性聯寫：border:1px solid red; 注意：屬性聯寫的時候沒有先後順序限制，邊框顏色可以不寫，邊框寬度可以不寫
    5. 分開寫法：
     div{
          width:300px;
          height:200px;
         border-top:1px solid red;
         border-left:1px solid  red;
         border-right:1px solid  red;
         border-bottom:1px solid  red;
        }
6. 單獨設定屬性法：
     border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;

  1. 盒子大小：

    • 盒子大小計算： 寬度=內容寬度+左右邊框+左右內邊距
    1. 邊框可以影響盒子大小
    2. 內邊距影響盒子大小
    3. 以後進行頁面盒子佈局的實現，如果給盒子設定了內邊距，對應的要將內容寬度或者高度減去相應的值
    • 盒子大小影響的地方：繼承的盒子再父盒子寬度範圍內，padding值不會影響該盒子大小

  2. margin外邊距： 設定盒子與盒子之間的距離

    • 屬性聯寫：
    1. Margin: 10px 上 右 下 左 10px
    2. Margin:10px 20px 上下10px 左右20px
    3. Margin: 10px 20px 30px 上10px 左右20px 下30px
    4. Margin: 10px 20px 30px 40px 上右下左

    • 盒子居中：

      1. 標準流下的盒子居中:margin:0px auto;
      2. 定位的盒子居中：先走父盒子的一半，再往回走自己寬度的一半
 one{
       width: 100px;
      height:100px;
      border: solid red  1px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
      }

  • 注意：

    1. 當兩個盒子垂直顯示的時候，外邊距以設定的最大值為準（外邊距合併的第一種情況），當兩個盒子橫排顯示時，外邊距疊加

    2. 外邊距塌陷（有難問題）解決步驟：

      1. 給父盒子設定邊框
      2. 給父盒子設定overflow:hidden;
    3. padding內邊距：設定內容距離盒子邊框之間的距離

  • 屬性聯寫：

    1. Padding: 10px; 上，右，下，左的距離為10px
    2. Padding: 10px 20px; 上下10px 左右20px
    3. Padding: 10px 20px 30px； 上10px 左右20px 下30px
    4. Padding: 10px 20px 30px 40px; 上， 右 ， 下， 左

  1. 清除邊距：

    1. 方法1：*{padding：0；margin：0；}
    2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div,span{margin:0px;padding:0px;}

9.CSS的三大特性

  1. 繼承性：

    • 可繼承性：color，text-align，text-indent，font-size，font-weight，font-family
    • 不可繼承：text-decoration，border，display，margin，float，padding
    • 繼承性發生的前提是標籤之間屬於一種巢狀關係
    • 文字顏色可以實現繼承；文字大小可以實現繼承；字型可以實現繼承；與文字有關的屬性都可以 實現繼承
    • 行高可以實現繼承
    • 特殊性：
    1. 不能繼承父元素中的文字顏色（層疊掉了）
    2. <h1></h1> 標題標籤不能繼承父元素中的文字大小

  2. 重疊性：層疊性是指樣式的覆蓋

    • 樣式的層疊性與樣式的呼叫順序沒有關係，與樣式的定義順序有關。
    • 層疊性發生的前提： 樣式衝突

  3. 優先順序：

    • 權重：行內引入（1000）>id(100)>class(10)>標籤（1）>通用(0)
    • 把權重相加，值越大越有先
    • 權重一樣，後面的樣式起作用

10.補充知識筆記

  1. 表單優化寫法：<lable for="one">使用者名稱：</lable><input type="text" id="one">
  2. 格式化列表圖示：list-style: none
  3. 表單合併：border-collapse:collapse(設定表格邊框合併，適用於表格）
  4. Bfc “格式化上下文”

  5. overflow:

    • visible:預設值。內容不會被修剪，會呈現在元素框之外
    • hidden:內容會被修剪，並且其餘內容是不可見的;當圖片改變位置時帶動父元素也改變位置，給父元素加此屬性值可使父元素位置不變
    • scroll:內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容
    • auto:如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容

11.標準流：塊級元素獨佔一行顯示；標準流的顯示方式：元素預設的顯示方式

12.浮動：浮動用來解決文字圖片環繞問題；用來製作導航欄，網頁佈局

  • 用法： Float:left| right

  • 特點：要浮動都浮動

    1. 設定了浮動的元素不佔原來的位置（脫標）
    2. 可以讓塊級元素在一行上顯示
    3. 浮動可以行內元素轉化為行內塊元素
    4. 模式轉換的過程中，能用display就用display

  • 清除浮動：

    1. 定義：清除浮動不是刪除浮動；清除浮動指的是清除浮動的影響
    2. 注意使用時機：當子元素設定了浮動，父元素沒有高度的時候，造成頁面佈局混亂；這種情況下進行清除浮動。
    3. 清除浮動方法：
      [x]注意：在要清除浮動的元素後面新增一個空塊元素（<div></div>,標籤），在新增的空元素中加clear:both | left |right 
     .clearfix{
            clrar:both;
      }
     <div class="content">
           <div class="left"></div>
           <div class="right"></div>
           <div class="clearfix"></div>
     </div>
  [x]給父盒子設定overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推薦使用該種方式清除浮動**
     .content{
     width:500px；
     overflow:hidden;
     }
  [x]使用偽元素清除浮動
     .clearfix:after{
        content:"";
       display:block;
       clear:both;
       height:0;
       visibility:hidden;
     }
     .clearfix
     {
       zoom:1;
     }
     

     <div class="content  clearfix">
     <div class="left"></div>
     <div class="right"></div>
     </div>

13.定位：方位：left、right、top、bottom

  • 靜態定位：靜態定位就是元素標準流的顯示方式position:static;就是預設的定位
  • 絕對定位：相對於定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就會找到最初的包含層；不佔有以前的位置；position：absolute；
  1. 當給一個單獨的元素設定絕對定位，以瀏覽器左上角（body）為基準設定定位的。
  2. 當盒子發生巢狀關係的時候，如果父盒子沒有設定定位，子盒子設定定位以瀏覽器左上角為基準設定定位。
  3. 當盒子發生巢狀關係的時候，如果父盒子設定定位，子盒子設定定位父盒子左上角為基準設定定位。
  4. 給盒子設定了絕對定位，該盒子不佔位置（脫標）
  5. 給行內元素設定絕對定位後，該元素轉化為了行內塊元素
  6. 注意：元素設定了絕對定位後，通過具體的方位名稱可以隨便設定元素的位置
  • 相對定位：相對於元素原位置，會佔有以前位置；position：relative；
  1. 元素設定了相對定位後佔原來的位置
  2. 設定相對定位以自己的位置為參照設定位置
  3. 相對定位不能進行元素的模式轉換
  4. 子絕父相（子元素設定絕對定位，父元素設定相對定位）
  • 固定定位：相對於整個穩穩當固定不變；固定定位不佔位置（脫標）;將行內元素轉化為行內塊元素position:fixed
  • 層級問題：
  1. 只有設定到定位才會有層級問題
  2. 兄弟元素中存在相對，絕對等定位，誰的HTML文件結構在後面，誰在最外層（層級高）
  3. Z-index:設定層級，值是數字，只要有定位會用到定位設定

14. CSS之精靈兔：選擇透明文件

  • 瀏覽器中的座標系
  • 圓點以右為正方向，圓點以下為正
  • CSS精靈是一種處理網頁背景影象的方式；精靈圖也是一種背景圖片
  • 精靈圖的使用
  1. 使用fw一定要用開啟的方式開啟精靈圖
  2. 使用精靈圖作為背景圖片的時候，常與background-position配合使用
  3. 測量精靈圖中的元素的座標使用矩形選擇器
  4. 或者使用快捷鍵 字母： k

15. CSS可見性

  • overflow: hidden 將超出部分進行隱藏
  • display: none 直接將元素隱藏
  • display：block 將元素顯示(與js配合更搭)
  • visibility:hidden 將元素隱藏
  • display: none; 將元素隱藏後不佔位置
  • visibility: hidden; 將元素隱藏後佔原來的位置

16. 圖片和文字居中

  • 每一種inlne-block元素都有一個預設的vertical-align:baseline
  • vertical-align:middle 垂直對齊； vertical-align與inline-block更搭配；

17.規避脫標流

  • 網頁佈局過程中能用標準流就用標準流
  • 標準流不能解決浮動
  • 浮動不能解決定位
  • 使用margin-left/margin-right 取值為auto可以將盒子自動衝到兩外一邊

18. 標籤包含規範

  • div可以包含任何標準流下的標籤
  • p標籤不能包含div和標題標籤和列表標籤
  • 標題便籤可以包含其他標籤
  • 行內元素最好不要包含其他標籤

19. 設定寬高的總結

  • 在浮動之後，元素可以設定寬高
  • 在絕對定位後，元素可以設定寬高
  • 在固定定位後，元素可以設定寬高

20. 提升至CSS3

  • CSS3和CSS2：CSS功能強大，程式碼簡潔
  • 偽類選擇器：
  1. 第一個子元素：first-child
  2. 最好一個元素：last-child
  3. 第n個子元素：nth-child（n）;n給數值
  4. 奇數為子元素：nth-child(odd);或者（nth-child(2n+1)）
  5. 偶數位子元素：nth-child(even)；或者（nth-child(2n)）
  • 文字陰影：text-shadow：水平，垂直，陰影
  • 盒子陰影：box-shaadow:水平，、垂直，陰影
  • 背景：background

相關文章