• id和class選擇器

#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>

.center
{
text-align:center;
}
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中。</p>
或者
h1.center{} p.center{}

• 背景

  • background-color背景顏色
    十六進制 - 如："#ff0000"RGB - 如："rgb(255,0,0)"顏色名稱 - 如"red"
  • background-image背景圖像
  • background-repeat背景圖像 - 水平或垂直平鋪
    repeat-x 只有水平位置會重復(fù)背景圖像
    repeat-y 只有垂直位置會重復(fù)背景圖像
    no-repeat background-image不會重復(fù)
  • background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動
    scroll 背景圖片隨頁面的其余部分滾動這是默認 fixed 背景圖像是固定的
  • background-position背景圖像- 設(shè)置定位
    left center bottom right /x px,y px/x%,y%
    簡寫 background: #00ff00 url('smiley.gif') no-repeat fixed center;

• 文本

  • color 設(shè)置文本顏色
  • direction 設(shè)置文本方向。
    ltr 默認。文本方向從左到右。
    rtl 文本方向從右到左。
  • line-height 設(shè)置行高
    number 設(shè)置數(shù)字，此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。
    length 設(shè)置固定的行間距。
    % 基于當(dāng)前字體尺寸的百分比行間距。
  • text-align 對齊元素中的文本
    left 把文本排列到左邊。默認值：由瀏覽器決定。
    right 把文本排列到右邊。
    center 把文本排列到中間。
    justify 實現(xiàn)兩端對齊文本效果。
  • text-decoration 向文本添加修飾
    underline 定義文本下的一條線。
    overline 定義文本上的一條線。
    line-through 定義穿過文本下的一條線。
    blink 定義閃爍的文本。
  • text-indent 縮進元素中文本的首行
    length 定義固定的縮進。默認值：0。
    % 定義基于父元素寬度的百分比的縮進。
  • text-shadow 設(shè)置文本陰影 text-shadow: h-shadow v-shadow blur color;
    h-shadow 必需。水平陰影的位置。允許負值。
    v-shadow 必需。垂直陰影的位置。允許負值。
    blur 可選。模糊的距離。
  • text-transform 控制元素中的字母(大小寫)
    capitalize 文本中的每個單詞以大寫字母開頭。
    uppercase 定義僅有大寫字母。
    lowercase 定義無大寫字母，僅有小寫字母。
  • vertical-align 設(shè)置元素的垂直對齊
    sub 垂直對齊文本的下標(biāo)。
    super 垂直對齊文本的上標(biāo)
    top 把元素的頂端與行中最高元素的頂端對齊
    text-top 把元素的頂端與父元素字體的頂端對齊
    middle 把此元素放置在父元素的中部。
    bottom 把元素的底端與行中最低的元素的頂端對齊。
    text-bottom 把元素的底端與父元素字體的底端對齊。
    length
    % 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
  • word-spacing 設(shè)置字間距

• 字體

  • font 在一個聲明中設(shè)置所有的字體屬性
    font:15px arial,sans-serif;
    font-style font-variant font-weight font-size/line-height font-family"
  • font-family 指定文本的字體系列
  • font-size 指定文本的字體大小
  • font-style 指定文本的字體樣式
  • font-variant 以小型大寫字體或者正常字體顯示文本。
  • font-weight 指定字體的粗細。
    bold 定義粗體字符。
    bolder 定義更粗的字符。
    lighter 定義更細的字符。

• 鏈接

  • a:link - 正常，未訪問過的鏈接
  • a:visited - 用戶已訪問過的鏈接
  • a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時
  • a:active - 鏈接被點擊的那一刻

  a:link {color:#000000;} /* 未訪問鏈接/
  a:visited {color:#00FF00;} / 已訪問鏈接 /
  a:hover {color:#FF00FF;} / 鼠標(biāo)移動到鏈接上 /
  a:active {color:#0000FF;} / 鼠標(biāo)點擊時 */

• 列表

  • list-style用于把所有用于列表的屬性設(shè)置于一個聲明中
  • list-style-image 將圖象設(shè)置為列表項標(biāo)志。
  • list-style-position 設(shè)置列表中列表項標(biāo)志的位置。
  • list-style-type 設(shè)置列表項標(biāo)志的類型。none無標(biāo)記

• 表格
  顯示一個表的單個邊框，使用 border-collapse屬性。border-collapse:collapse;
  border設(shè)置邊框

• 盒模型

  • Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
  • Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
  • Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
  • Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
  • 總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

• 邊框

  • 邊框-簡寫屬性 border:border-width border-style (required) border-color
  • border-style 值:
    none: 默認無邊框
    dotted: 定義一個點線邊框
    dashed: 定義一個虛線邊框
    solid: 定義實線邊框
    double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
    groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
    ridge: 定義3D脊邊框。效果取決于邊框的顏色值
    inset:定義一個3D的嵌入邊框。效果取決于邊框的顏色值
    outset: 定義一個3D突出邊框。 效果取決于邊框的顏色值
  • border-style屬性可以有1-4個值：border-style:dotted solid double dashed;

• 輪廓

  • outline 在一個聲明中設(shè)置所有的輪廓屬性
  • outline:outline-color,outline-style,outline-width
  • outline-color 設(shè)置輪廓的顏色
  • outline-style 設(shè)置輪廓的樣式
    none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
  • outline-width 設(shè)置輪廓的寬度
    thin
    medium
    thick
    length

• 邊距

  
  
  image.png
  • margin 簡寫屬性。在一個聲明中設(shè)置所有外邊距屬性。
    auto 設(shè)置瀏覽器邊距。這樣做的結(jié)果會依賴于瀏覽器
    length 定義一個固定的margin（使用像素，pt，em等）
    % 定義一個使用百分比的邊距
  • margin-bottom 設(shè)置元素的下外邊距。
  • margin-left 設(shè)置元素的左外邊距。
  • margin-right 設(shè)置元素的右外邊距。
  • margin-top 設(shè)置元素的上外邊距。

• 填充

  • padding 使用簡寫屬性設(shè)置在一個聲明中的所有填充屬性
  • padding-bottom 設(shè)置元素的底部填充
  • padding-left 設(shè)置元素的左部填充
  • padding-right 設(shè)置元素的右部填充
  • padding-top 設(shè)置元素的頂部填充

• 分組和嵌套

  • 分組選擇器

    h1,h2,p
    {
    color:green;
    }

  • 嵌套選擇器

    p{ }: 為所有 p 元素指定一個樣式。
    .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
    .marked p{ }: 為所有 class="marked" 元素內(nèi)的 p 元素指定一個樣式。
    p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。

• 尺寸
  *height 設(shè)置元素的高度。

  • line-height 設(shè)置行高。
  • max-height 設(shè)置元素的最大高度。
  • max-width 設(shè)置元素的最大寬度。
  • min-height 設(shè)置元素的最小高度。
  • min-width 設(shè)置元素的最小寬度。
  • width 設(shè)置元素的寬度。

• 顯示

  • 隱藏元素 - display:none或visibility:hidden
    isibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間
    display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間
  • 塊和內(nèi)聯(lián)元素
    display:inline;
    display:block;
  • 塊級元素主要有：
    div ，form , h1 ， hr , ol , p , pre , table , ul , li
  • 內(nèi)聯(lián)元素主要有:

• 定位

  • position脫離文檔流
  • static 沒有定位，遵循正常的文檔流對象。
    靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
  • relative
    相對定位元素的定位是相對其正常位置。
  • fixed
    元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動：
  • absolute
    絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>
  • sticky

• 浮動

  • clear 指定不允許元素周圍有浮動元素。
    left
    right
    both
    none

  • float 指定一個盒子（元素）是否可以浮動。
    left
    right
    none

• overflow
  屬性用于控制內(nèi)容溢出元素框時顯示的方式。
  visible 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
  hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
  scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
  auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

• 對齊元素

  • 元素居中對齊：margin: auto;
  • 注意: 如果沒有設(shè)置 width 屬性(或者設(shè)置 100%)，居中對齊將不起作用。
  • 文本居中對齊：text-align: center;
  • 文本垂直居中：line-height:width的長度
  • 圖片居中對齊： display: block; margin: 0 auto;
  • 左右對齊 - 使用定位方式position: absolute; right: 0px;
  • 左右對齊 - 使用 float 方式 float: right;
  • 垂直對中 - 不設(shè)置height 設(shè)置padding：num 0；
  • 垂直居中 - 使用 position 和 transform

    .center {
    height: 200px;
    position: relative;
    
    border: 3px solid green;
    }
    .center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    <div class="center">
    <p>我是水平和垂直居中的。</p>
    </div>

• 組合選擇符

  <div>
  <p>段落 1 在 div 中。</p>
  <p>段落 2在 div 中。</p>
  <div>
  <p>段落 3在 div 中。</p>
  <p>段落 4在 div 中。</p>
  </div>
  </div>
  <p>段落 5在 div 中。</p>
  <p>段落 6在 div 中。</p>

  • 后代選擇器(以空格分隔) 選取某元素的后代元素。

  div p{} 將對div下所有p元素起作用即1，2，3，4

  • 子元素選擇器(以大于號分隔） 選擇作為某元素子元素的元素

    div>p{} 將對div下子元素p元素起作用1，2
    * 相鄰兄弟選擇器（以加號分隔）選擇緊接在另一元素后的元素，且二者有相同父元素
    >div+p{} 將對div下子元素p元素起作用5
    * 普通兄弟選擇器（以破折號分隔）選取所有指定元素之后的相鄰兄弟元素
    >div~p{} 將對div下子元素p元素起作用5,6

• 生成的內(nèi)容

• 偽類

  • 語* 法：selector.class:pseudo-class {property:value;}
  • :first-child 偽類選擇父元素的第一個子元素。
  • :checked input:checked 選擇所有選中的表單元素
  • :disabled input:disabled 選擇所有禁用的表單元素
  • :empty p:empty 選擇所有沒有子元素的p元素
  • :enabled input:enabled 選擇所有啟用的表單元素
  • :first-of-type p:first-of-type 選擇每個父元素是p元素的第一個p子元素
  • :in-range input:in-range 選擇元素指定范圍內(nèi)的值
  • :invalid input:invalid 選擇所有無效的元素
  • :last-child p:last-child 選擇所有p元素的最后一個子元素
  • :last-of-type p:last-of-type 選擇每個p元素是其母元素的最后一個p元素
  • :not(selector) :not(p) 選擇所有p以外的元素
  • :nth-child(n) p:nth-child(2) 選擇所有 p 元素的父元素的第二個子元素
  • :nth-last-child(n) p:nth-last-child(2) 選擇所有p元素倒數(shù)的第二個子元素
  • :nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數(shù)的第二個為p的子元素
  • :nth-of-type(n) p:nth-of-type(2) 選擇所有p元素第二個為p的子元素
  • :only-of-type p:only-of-type 選擇所有僅有一個子元素為p的元素
  • :only-child p:only-child 選擇所有僅有一個子元素的p元素
  • :optional input:optional 選擇沒有"required"的元素屬性
  • :out-of-range input:out-of-range 選擇指定范圍以外的值的元素屬性
  • :read-only input:read-only 選擇只讀屬性的元素屬性
  • :read-write input:read-write 選擇沒有只讀屬性的元素屬性
  • :required input:required 選擇有"required"屬性指定的元素屬性
  • :root root 選擇文檔的根元素
  • :target #news:target 選擇當(dāng)前活動#news元素(點擊URL包含錨的名字)
  • :valid input:valid 選擇所有有效值的屬性
  • :link a:link 選擇所有未訪問鏈接
  • :visited a:visited 選擇所有訪問過的鏈接
  • :active a:active 選擇正在活動鏈接
  • :hover a:hover 把鼠標(biāo)放在鏈接上的狀態(tài)
  • :focus input:focus 選擇元素輸入后具有焦點
  • :first-letter p:first-letter 選擇每個<p> 元素的第一個字母
  • :first-line p:first-line 選擇每個<p> 元素的第一行
  • :first-child p:first-child 選擇器匹配屬于任意元素的第一個子元素的 <p> 元素
  • :before p:before 在每個<p>元素之前插入內(nèi)容
  • :after p:after 在每個<p>元素之后插入內(nèi)容
  • :lang(language) p:lang(it) 為<p>元素的lang屬性選擇一個開始值

• 偽元素

• 導(dǎo)航欄

  ul li a:hover:not(.active){
  background: #ff9c01;
  color:#fff;
  } 除了active都能
  li a.active {
  color: white;
  background-color: #4CAF50;
  }首次激活
  <li><a class="active" href="#">主頁</a></li>

  • 垂直導(dǎo)航欄
  • 激活/當(dāng)前導(dǎo)航條實例
  • 創(chuàng)建鏈接并添加邊框
  • 全屏高度的固定導(dǎo)航條

  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全屏高度 /
  position: fixed;
  overflow: auto; / 如果導(dǎo)航欄選項多，允許滾動 */
  }

• 下拉菜單

  • .dropdown 類使用 position:relative, 這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。
  • .dropdown-content 類中是實際的下拉菜單。默認是隱藏的，在鼠標(biāo)移動到指定元素后會顯示。 注意 min-width 的值設(shè)置為 160px。你可以隨意修改它。 注意: 如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置 width 為 100% ( overflow:auto 設(shè)置可以在小尺寸屏幕上滾動)。
  • 使用 box-shadow 屬性讓下拉菜單看起來像一個"卡片"。
  • :hover 選擇器用于在用戶將鼠標(biāo)移動到下拉按鈕上時顯示下拉菜單。
  • 下拉內(nèi)容對齊方式左邊對齊left:0; 右邊對齊 right:0;
  • 圖片放大：給圖片設(shè)置不同的width和height;