css基礎(chǔ)

樣式類型

• 行內(nèi)樣式

  <div style="color: red; font-size: 200px">追命</div>
  

  ?

• 內(nèi)部樣式

  <style>
    div {
        color: red ;
    }
  </style>
  

  ?

• 外部樣式

  <link rel="stylesheet" href="a.css" />
  

  ?

• 導(dǎo)入樣式（@import）

  style type="text/css" >
  @import url(css文件路徑);或 @import "css文件路徑";
    /* 在此還可以存放其他CSS樣式*/
  </style>
  

選擇器

• 所有標(biāo)簽選擇器 * {}
• 標(biāo)簽選擇器 p {} div {}
• ID選擇器 #head {}
• 類選擇器 .head {}
• 交集選擇器 h3.special{} p#one{}
• 并集選擇器 div,p{}
• 后代選擇器 div a{}
• 子元素選擇器 h1 > strong {}
• 屬性選擇器

1. h1[class]{ color:red;}
   選擇所有擁有class屬性的h1標(biāo)簽
2. p[id="aside"]{color:red;}
   根據(jù)屬性名相等選擇
3. p[class~="a"]{color:rd;}
   只要包含屬性，就被選擇。ie6不支持。
4. E[att^="val"] { sRules }
   E[att$="val"] { sRules }
   選擇具有att屬性且屬性值為以val開頭（結(jié)尾）的字符串的E元素
5. E[att*="val"] { sRules }
   選擇具有att屬性且屬性值為包含val的字符串的E元素

• 偽類選擇器

• a:link {color: #FF0000} /* 未訪問的鏈接 /
  a:visited {color: #00FF00} / 已訪問的鏈接 /
  a:hover {color: #FF00FF} / 當(dāng)有鼠標(biāo)懸停在鏈接上 /
  a:active {color: #0000FF} / 被選擇的鏈接 */
  最好的順序 love hate
• :focus（向擁有鍵盤輸入焦點的元素添加樣式）
• :first-child（向元素的第一個子元素添加樣式）

• 偽元素選擇器

• :first-letter（向文本的第一個字母添加特殊樣式）
• :first-line（向文本的首行添加特殊樣式）
• :before（在元素內(nèi)容之前添加內(nèi)容）
• :after（在元素內(nèi)容之后添加內(nèi)容）

尺寸屬性

• width（元素的寬度）

1. 不設(shè)置width的子塊級元素會繼承父塊級元素的寬度]
2. 子盒子設(shè)置寬度為100%,那么這個子盒子的寬與父盒子一樣寬

• height（元素的高度）
• max-height（元素的最大高度）
• max-width（元素的最大寬度）
• min-height （元素的最小高度）
• min-width（元素的最小寬度）
• 無繼承性

內(nèi)邊距屬性

• padding（設(shè)置所有內(nèi)邊距）

1. 上右下左（順時針）
2. 享有背景色

• padding-bottom（下內(nèi)邊距）
• padding-left（左內(nèi)邊距）

設(shè)置為負(fù)數(shù)，那么盒子會向左方向移動

• padding-right（右內(nèi)邊距）

設(shè)置為負(fù)數(shù)，那么盒子會向右移動

• padding-top（上內(nèi)邊距）
• 小盒子的width是繼承自大盒子的話，那么設(shè)置小盒子的padding-left不會改變小盒子的大小。
• 無繼承性

邊框?qū)傩?/h2>

• border-width（設(shè)置四條邊框的寬度）

border-width:15px;
可能的值：thin，medium，thick，length，inherit

• border-style（設(shè)置四條邊框的樣式）

• border-style:dotted solid double dashed;
  border-style:solid;
  none：無邊框
  hidden：與 "none" 相同
  dotted 定義點狀邊框。
  dashed 定義虛線。
  solid 定義實線。
  double 定義雙線。

• border-color（設(shè)置四條邊框的顏色）

border-color:red green blue pink;

• border（設(shè)置所有的邊框?qū)傩裕?/li>

• border:5px solid red;
• 兼容性最好的消除邊框方式：border: 0 none;

• border-radius（邊框圓角）

大小為內(nèi)容的寬度或高度的一半時變成圓

• outline（元素的輪廓（類似邊框，不占據(jù)空間）

outline:#00ff00 dotted thick;

• 無繼承性

外邊距屬性

• margin（設(shè)置所有外邊距）,上右下左（順時針）
• margin-bottom（下外邊距）
• margin-left（左外邊距）

設(shè)置為負(fù)數(shù)，那么將來這個盒子會向左方向移動

• margin-right（右外邊距）
• margin-top（上外邊距）
• margin：0 auto;（只對塊元素居中有效）

• 要給居中的元素一個寬度，否者無效；
• 該元素一定不能浮動，否者無效。

• 如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。左右的margin是相加
• 對于兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與塊級子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者
• margin-right:auto;//有寬度塊級元素靠左，默認(rèn)
  margin-left:auto;//有寬度塊級元素靠右
• 無繼承性

表格屬性

• border-collapse（是否合并表格邊框）
  • border-collapse:collapse;//合并表格的邊框
• border-spacing（相鄰單元格邊框之間的距離，僅用于分離模式）

列表屬性

• list-style（設(shè)置所有的列表屬性）

• list-style:none;消除列表項的標(biāo)記

• list-style:square inside url('/i/arrow.gif');

  list-style-type 設(shè)置列表項標(biāo)記的類型。
  list-style-position 設(shè)置在何處放置列表項標(biāo)記。
  list-style-image 使用圖像來替換列表項的標(biāo)記。

• list-style-type（列表項標(biāo)記的類型）

none 無標(biāo)記。
disc 默認(rèn)。標(biāo)記是實心圓。
circle 標(biāo)記是空心圓。
square 標(biāo)記是實心方塊。
decimal 標(biāo)記是數(shù)字。

• list-style-image（使用圖像來替換列表項的標(biāo)記）

list-style-image:url("/i/arrow.gif");

• list-style-position（在何處放置列表項標(biāo)記）

list-style-position（在何處放置列表項標(biāo)記）

• 有繼承性

其它

• content（與 :before 以及 :after 偽元素配合使用，來插入生成內(nèi)容）
• opacity（不透明度）背景文字都透明
• 層疊性
• 繼承性
• 優(yōu)先級
• 行內(nèi)樣式 > 頁內(nèi)樣式 > 外部引用樣式 > 瀏覽器默認(rèn)樣式
  !important > 內(nèi)聯(lián) > ID > 偽類|屬性選擇 >類 > 標(biāo)簽 > 偽對象 > 通配符 > 繼承
• 權(quán)重計算（！important個數(shù)，ID選擇器個數(shù)，類選擇器個數(shù)，標(biāo)簽選擇器個數(shù)）
• 瀏覽器查找元素順序：從右往左找
• 盒子的總寬度= width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?/li>
• 計算盒子模型的總高度時，還應(yīng)考慮上下兩個盒子垂直外邊距合并的情況。
• 1)body標(biāo)簽?zāi)J(rèn)帶有margin: 8px的屬性
  2)p標(biāo)簽?zāi)J(rèn)帶有margin: font-size 0;
  3)h標(biāo)簽也默認(rèn)帶有margin-top和margin-bottom
  4)ul默認(rèn)帶有上下的margin以及左邊的padding
• 行內(nèi)塊元素不能轉(zhuǎn)化為行內(nèi)元素
• CSS內(nèi)容移除某個區(qū)域
  • 利用text-index:-2000em;
  • 利用padding 擠開盒子 并且overflow 切割。
  • 利用margin拉動盒子配合overflow切割
• 消除inline-block中的空隙
  • 去除空格，把代碼放在一行上
  • 使用margin負(fù)值
  • .給父級添加font-size:0；
  • 使用letter-spacing或者 word-spacing
  • 使用float的方式
• 圖片默認(rèn)和文字的基線對齊
• 通欄、版心（980px）

?