CSS的總結(選擇器,偽類等…)

技術小哥哥發表於2017-11-21
原文網址 : https://flycode.co/archives/131756
CSS

主要內容

  • CSS概述
  • CSS和HTML結合的四種方式
  • CSS樣式優先順序和程式碼規範
  • CSS三種常用選擇器
  • CSS三種擴充套件選擇器
  • CSS的常見操作

CSS概述

CSS （Cascading Style Sheet）是層疊樣式表.作用來定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

CSS的優點

1：CSS可以更加精細的控制網頁的內容形式。比如說前面的font標籤中的size屬性，可以用於控制文字的大小，但是，它控制的字型只有7級。 要是出現其他級別的文字，它就實現不了，而css可以辦到，它可以任意設定字型的大小。

2：CSS樣式是豐富多彩的。

3：CSS的樣式定義是靈活多樣的。

CSS和HTML結合的方式

  • sytle屬性方式(行內樣式)
  • style標籤方式(內嵌樣式)
  • 匯入方式
  • 連結方式

A：style屬性方式：

利用標籤中style屬性來改變每個標籤的顯示樣式。

例：

<p style=”background-color:#FF0000; color:#FFFFFF”>

　　 p標籤段落內容。

</p>

該方式比較靈活，但是對於多個相同標籤的同一樣式定義比較麻煩，適合區域性修改。

B：style標籤方式：（內嵌方式） 在head標籤中加入style標籤，對多個標籤進行統一修改。

<head>

　　<style type=”text/css”>

　　　　p { color:#FF0000;}

　　</style>

</head>

該方式可以對單個頁面的樣式進行統一設定，但對於區域性不夠靈活。

C：匯入方式： 前提是已經存在一個定義好的CSS檔案。網頁的一部分樣式需要用到，那麼就用到這種方式。

例：

<style type=”text/css”>

　　@import url(css_3.css);

　　div { color:#FF0000;}

</style>

注：url括號後面必須要用分號結束。如果匯入進來的樣式與本頁面定義的樣式重複，以本頁定義樣式為準。

D：連結方式： 通過head標籤中link標籤來實現，前提也是先要有一個已定好的CSS檔案。

例：

<link rel=”stylesheet” type=”text/css” href=”css_3.css” />

注：可以通過多個link標籤連結進來多個CSS檔案。重複樣式以最後連結進來的CSS樣式為準。

E：樣式優先順序： 由上到下，由外到內。優先順序由低到高。

 

CSS樣式優先順序和程式碼規範

  •  樣式優先順序
    • 由上到下，由外到內。優先順序由低到高。
  • 程式碼規範
    • 選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
    • 屬性與屬性之間用 分號 隔開
    • 屬性與屬性值直接按用 冒號 連線
    • 如果一個屬性有多個值的話，那麼多個值用 空格 隔開。

CSS選擇器

  •  就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意為：選擇哪個容器。
  • CSS選擇器的型別
    • html標籤名選擇器。使用的就是html的標籤名
    • class選擇器。其實使用的標籤中的class屬性
    • id選擇器。其實使用的是標籤的中的id屬性。

 

A：每一個標籤都定義了class屬性和id屬性。用於對標籤進行標識，方便對標籤進行操作。 在定義的中，多個標籤的class屬性值可以相同，而id值要唯一，因為JavaScript中經常用。

B：class選擇器：

在標籤中定義class屬性並賦值。通過 標籤名.class值 對該標籤進行樣式設定。

例：

相同標籤設定不同樣式的時候，用class進行區分。

p.pclass_1 {color:#FF0000;}

p.pclass_2 {color:#0000FF;}

 

<p class=”pclass_1”>P標籤樣式</p>

<p class=”pclass_2”>P標籤樣式</p>  

不同標籤進行相同設定的時候，用class進行統一定義。 .

classname {color:#00FF00;}

 

<p class=”classname”>P標籤樣式</p>

<div class=”classname”>DIV標籤樣式</div>

C：id選擇器：

與class選擇器類似，但格式不同，選擇器的名稱為：#id值。

例：

#pid { color:#0000FF;} <p id=”pid”>P標籤樣式</p>

注：多個標籤同樣可以定義相同的id值，但是對於JavaScript對標籤元素的獲取就會出錯。所以形成習慣，確保id值的唯一性對於以後的資料庫設計也很有好處。

 

CSS擴充套件選擇器

  •  關聯選擇器
  • 組合選擇器
  • 偽元素選擇器

 A：關聯選擇器

標籤是可以巢狀的，要讓相同標籤中的不同標籤顯示不同樣式，就可以用此選擇器。

例：

p { color:#00FF00;}

p b { color:#FF000;}

<p>P標籤<b>劉德華</b>段落樣式</p>

<p>P標籤段落</p>

B：組合選擇器

對多個不同選擇器進行相同樣式設定的時候應用此選擇器。

p,div { color:#FF0000;}

<p>P標籤顯示段落。</p>

<div>DIV標籤顯示段落</div>

注：多個不同選擇器要用逗號分隔開。

C：偽元素選擇器

其實就在html中預先定義好的一些選擇器。稱為偽元素。是因為CSS的術語。

格式：標籤名：偽元素。類名 標籤名。類名：偽元素。都可以。

a:link 超連結未點選狀態。

a:visited 被訪問後的狀態。

a:hover 游標移到超連結上的狀態（未點選）。

a:active 點選超連結時的狀態。

使用順序 L – V – H – A

p:first-line 段落的第一行文字。

p:first-letter 段落中的第一個字母。

:focus 具有焦點的元素。IE6瀏覽器不支援，在FireFox中可以看到效果。

 CSS的常見操作

  •  CSS中尺度單位的介紹
  • 字型設定
  • 文字設定
  • 背景設定
  • 列表設定
  • 盒子模型(border margin padding)
  • 定位設定(position,float,clear,z-index)
  • 滑鼠樣式設定(cursor)

 

檢視CSS幫助文件帶領大家做案例

em與px的換算 　　1em=16px, 12px=0.75em

2. font-family

設定字型型別

font-family:”隸書”;

font-size

設定字型大小

font-size:12px;

font-style

設定字型風格

font-style:italic;

font-weight

設定字型的粗細

font-weight:bold;

font

在一個宣告中設定所有字型屬性

字型屬性的順序：字型風格→字型粗細→字型大小→字型型別

font:italic bold 36px “宋體”;

多個字型優先順序從前到後，字型 有空格一定盯引號引上

body{font-family: Times,”Times New Roman”, “楷體”;}

3.文字

color

設定文字顏色

color:#00C;

text-align

設定元素水平對齊方式

text-align:right;

text-indent

設定首行文字的縮排

text-indent:20px;

line-height

設定文字的行高

line-height:25px;

text-decoration

設定文字的裝飾

text-decoration:underline;

4.背景

background-color

background-image

background-position

background-repeat

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

5.列表

list-style:none

6.定位設定

絕對定位: absolute,它會使得後面的區域發生位置的改變,是相對於body所發生的改變

相對定位:relative ,它是相對原來自己的位置做一下相對偏移

 

本文轉自SummerChill部落格園部落格，原文連結：http://www.cnblogs.com/DreamDrive/p/5734217.html，如需轉載請自行聯絡原作者


相關文章