CSS 基本知識

来源:http://www.cnblogs.com/Mtime/archive/2016/02/26/5184685.html
-Advertisement-
Play Games

1、CSS 簡介 CSS 指層疊樣式表 (Cascading Style Sheets)，是一種用來表現 HTML 文檔樣式的語言，樣式定義如何顯示 HTML 元素，是能夠真正做到網頁表現與結構分離的一種樣式設計語言。樣式通常存儲在樣式表中，外部樣式表通常存儲在 CSS 文件中，多個樣式定義可層疊為


1、CSS 簡介

　　CSS 指層疊樣式表 (Cascading Style Sheets)，是一種用來表現 HTML 文檔樣式的語言，樣式定義如何顯示 HTML 元素，是能夠真正做到網頁表現與結構分離的一種樣式設計語言。樣式通常存儲在樣式表中，外部樣式表通常存儲在 CSS 文件中，多個樣式定義可層疊為一。

　　HTML 標簽被設計為用於定義文檔內容，也就是文檔結構，為了增強代碼的可讀性，實現網頁結構與表現相分離的原則，萬維網聯盟（W3C），肩負起了 HTML 標準化的使命，併在 HTML4 之外創造出樣式（Style）。CSS 目前最新版本是 CSS3，相對於傳統 HTML 的表現而言，CSS 能夠對網頁中對象的位置排版進行像素級的精確控制，擁有對網頁對象編輯的能力，易於維護和改版，提高頁面瀏覽速度，使用 CSS 佈局頁面更符合 W3C 標準，他是目前基於文本展示最優秀的表現設計語言。

　　CSS 樣式表極大地提高了工作效率：樣式通常保存在外部的 .css 文件中，通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表有能力同時改變站點中所有頁面的佈局和外觀。

 

2、CSS 語法

　　CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。如下：

1 p{
2     color:red;
3     text-indent:2em;
4 }

　　選擇器就是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明總是以分號 ; 結束，聲明組以大括弧 {...} 括起來。為了讓 CSS 可讀性更強，可以每行只描述一個屬性。

　　CSS 註釋是用來解釋代碼，並且可以隨意編輯，瀏覽器會忽略它。CSS註釋以 "/*" 開始，以 "*/" 結束。如下：

1 p{
2     color:red;
3     text-indent:2em; /* 段落縮進2個字，即段落開頭空2個漢字的位置。 */
4 }

 

3、創建 CSS

　　當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。CSS 創建樣式表有三種方法：內聯樣式、內部樣式、外部樣式。

　　(1)、內聯樣式

　　內聯樣式也叫行內樣式或者行間樣式，即在相關標簽內使用樣式（style）屬性定義。如下：

<div style="width:200px;height:100px;border:1px solid black;"></div>

　　由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。因此需要慎用這種方法，例如當樣式僅需要在一個元素上應用一次時，可以使用內聯樣式。要使用內聯樣式，需要在相關的標簽內使用樣式屬性定義，style 屬性可以包含任何 CSS 屬性。

　　(2)、內部樣式

　　內部樣式也叫內嵌樣式，即在文檔中創建內嵌的樣式表，需要使用 <style> 標簽在文檔頭部定義內部樣式表，如下：

 1 <head>
 2 <style>
 3 div{
 4     width:200px;
 5     height:100px;
 6     border:1px solid black;
 7 }
 8 p{
 9     color:blue;
10     font-size:14px;
11 }
12 span{
13     color:black;
14     font-weight:bold;
15 }
16 </style>
17 </head>

　　當單個文檔需要特殊的樣式時，就應該使用內部樣式表。

　　(3)、外部樣式

　　外部樣式也叫做外聯樣式，即使用 <link> 標簽鏈接到外部樣式表，如下：

1 <head>
2 <link rel="stylesheet" type="text/css" href="css/style.css">
3 </head>

　　當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇，在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表，瀏覽器會從文件 style.css 中讀到樣式聲明，並根據它來格式化文檔。註意：<link> 標簽中 rel="stylesheet" type="text/css" 是固定代碼格式，不可更改。

　　外部樣式表可以在任何文本編輯器中進行編輯，樣式文件不能包含任何的 HTML 標簽，樣式表以 .css 擴展名進行保存。註意：不要在屬性值與單位之間留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那麼它在不同的瀏覽器中可能無法正常工作，導致意向不到的結果。

　　(4)、樣式優先順序

　　樣式優先順序，也可以稱為層疊次序，即同一個 HTML 元素不止被一個樣式定義時，會優先使用哪個樣式。一般而言，所有的樣式會根據下麵的規則層疊於一個新的虛擬樣式表中：

　　內聯樣式 > 內部樣式 > 外部樣式

　　內聯樣式（在 HTML 元素內部）擁有最高的優先權，即優先採用在元素內部定義的樣式信息，然後是內部樣式表（位於 <head> 標簽內部），最後是外部樣式表中的樣式聲明，瀏覽器中的樣式聲明（預設值）同外部樣式處於同一層次。

　　優先順序的順序是有一個前提的，即內聯樣式、內部樣式、外部樣式表中 CSS 樣式是在的相同權值的情況下。

　　但是內部樣式 > 外部式也有一個前提，即內部樣式的位置一定在外部樣式的後面。如下：

1 <link rel="stylesheet" type="text/css" href="css/style.css">
2 <style>
3 ...
4 </style>

 

　　(5)、多重樣式

　　樣式表允許以多種方式規定樣式信息，樣式可以規定在單個的 HTML 元素中，或在 HTML 頁的 <head> 元素中，亦或在一個外部的 CSS 文件中，甚至可以在同一個 HTML 文檔內部引用多個外部樣式表，但是最終多重樣式將被層疊為一個。那就意味著：如果你使用了外部文件的樣式，在 <head> 中也定義了該樣式，那麼內部樣式會取代外部文件中的樣式。

 

4、id 和 class 選擇器

　　如果要給 HTML 元素設置 CSS 樣式，則需要在元素中設置 "id"  和 "class" 屬性，該屬性用作選擇器。

　　(1)、id 選擇器

　　id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證一樣具有唯一性。HTML元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。註意： id 屬性不能以數字開頭。

 1 <head>
 2 <style>
 3 #heading{
 4     color:red;
 5     text-align:center;
 6 }
 7 </style>
 8 </head>
 9 <body>
10 <h1 id="heading">CSS 選擇器</h1>
11 </body>

 

　　(2)、class 選擇器

　　class 選擇器用於描述一組元素的樣式，也叫做類選擇器，class 選擇器有別於 id 選擇器，class 可以在多個元素中使用，並且一個元素也可以指定多個類名。class 選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點 "." 號來定義。可以設置所有帶有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。註意：類名的第一個字元也不能使用數字。

　　實例：所有擁有 center 類的 HTML 元素均為居中顯示。

 1 <head>
 2 <style>
 3 .center{
 4     text-align:center;
 5 }
 6 .col{
 7     color:red;
 8 }
 9 .font{
10     font-size:18px;
11     font-family:"Microsoft YaHei";
12 }
13 </style>
14 </head>
15 <body>
16 <h1 class="center">class 選擇器</h1>
17 <p class="center col">我是一個段落。</p>
18 <p class="center font">我是另一個段落。</p>
19 </body>

 

　　實例：所有的 p 元素使用 class="center"，讓該元素的文本居中。

 1 <head>
 2 <style>
 3 .center{
 4     color:blue;
 5 }
 6 p.center{
 7     text-align:center;
 8 }
 9 p.col{
10     color:red;
11 }
12 .font{
13     font-size:18px;
14     font-weight:bold;
15     font-family:"Microsoft YaHei";
16 }
17 </style>
18 </head>
19 <body>
20 <h1 class="center col">class 選擇器</h1>
21 <p class="center col">我是一個段落。</p>
22 <p class="center col font">我是另一個段落。</p>
23 <h2 class="center">h2 標題</h2>
24 </body>

 

　　(3)、ID 選擇器和類（class）選擇器的區別

　　相同點：可以應用於任何元素。

　　不同點：

　　①、ID 選擇器只能在文檔中使用一次。與類選擇器不同，在一個 HTML 文檔中，ID 選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

　　②、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。在一個 HTML 文檔中，可以為一個元素同時設置多個樣式，但只可以用類選擇器的方法實現，ID 選擇器是不可以的，不能使用 ID 詞列表，即一個元素可以指定多個類名，如 <span class="one two three">文本</span>，而 ID 只能指定一個。

 

5、CSS 元素選擇器

　　最常見的 CSS 選擇器就是元素選擇器，即標簽選擇器，也就是說 HTML 的元素就是最基本的選擇器。

　　如果使用元素選擇器設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。

　　在 W3C 標準中，元素選擇器也叫做類型選擇器，類型選擇器匹配文檔中元素類型的名稱，類型選擇器匹配文檔樹中該元素類型的每一個實例，也就是如果使用元素選擇器，比如 h1{color:red;}，他會匹配文檔中所有的 h1 元素，即頁面上所有的 h1 標題都顯示為紅色。

 

6、CSS 背景

　　background 屬性用於定義 HTML 元素的背景。

　　定義元素背景效果的 CSS 屬性有以下五種：

　　　　①：background-color

　　　　②：background-image

　　　　③：background-repeat

　　　　④：background-position

　　　　⑤：background-attachment

　　(1)、background-color：背景顏色

　　background-color 屬性定義了元素的背景顏色。頁面的背景顏色可以使用 body 元素選擇器進行定義：

1 body{
2     background-color:gray;
3 }

 

　　CSS 中，顏色值通常使用以下方式定義：

　　　　①：十六進位，如："#ff0000"，類似這樣的形式，可以縮寫為："#f00"。

　　　　②：RGB，如："rgb(255,0,0)"。

　　　　③：顏色名稱，如："red"。

　　(2)、background-image：背景圖像

　　background-image 屬性描述了元素的背景圖像。預設情況下，背景圖像進行平鋪重覆顯示，以覆蓋整個元素實體，頁面背景圖片設置如下：

1 body{
2     background-image:url('images/wallpaper.jpg');
3 }

 

　　(3)、background-repeat：背景圖像設置水平或垂直平鋪或不平鋪

　　預設情況下，background-image 屬性會在頁面的水平或者垂直方向平鋪。一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協調，如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些：background-repeat:repeat-x，定義垂直方向平鋪語法：background-repeat:repeat-y。

　　在使用背景圖像時，預設會平鋪重覆顯示，這樣不僅不具有美感，還會影響文本的排版。如果不想讓圖像平鋪，並且只顯示一次，那麼就這樣定義：background-repeat:no-repeat。

 1 <head>
 2 <style>
 3 body{
 4     background-image:url('images/wallpaper.jpg');
 5     background-repeat:no-repeat;
 6 }
 7 </style>
 8 </head>
 9 <body>
10 <h1 class="center col">class 選擇器</h1>
11 <p class="center col">我是一個段落。</p>
12 <p class="center col font">我是另一個段落。</p>
13 <h2 class="center">h2 標題</h2>
14 </body>

 

　　(4)、background-position：背景圖像設置定位

　　在上面的例子中，背景圖像與文本顯示在同一個位置，這樣不利於文本的閱讀，為了讓頁面排版更加合理，可以利用 background-position 屬性改變圖像在背景中的位置：

1 body{
2     background-image:url('images/wallpaper.jpg');
3     background-repeat:no-repeat;
4     background-position:right top;
5 }

　　此時，背景圖像會顯示在頁面的右上角。background-position 屬性設置背景圖像的位置，如果背景圖像要重覆，也將從這一點開始。

　　background-position 屬性值可以使用關鍵字表示：left | right | center，如果僅指定一個關鍵字，其他值將會是 "center"。該方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。

　　background-position 屬性值也可以使用百分比表示：x％y％，預設值為：0％0％，第一個值是水平位置，第二個值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果僅指定了一個值，其他值將是 50％。

　　background-position 屬性值還可以使用長度單位精確表示，單位可以是像素或任何其他 CSS 單位，通常都使用像素。第一個值是水平位置，第二個值是垂直位置，左上角是 0 0，兩個數值之間用空格隔開，例如：background-position:12px 24px; 表示背景圖片距離該元素左上角的水平方向位置是 12px，垂直方向位置是 24px。該屬性就是圖像左上角相對於元素左上角的位置偏移，如果取負值，則向上向左偏移。該方法在製作 CSS 雪碧圖（即 CSS Sprite，也叫做 CSS 精靈）時，將十分重要。

　　(5)、background-attachment：背景圖像設置固定或滾動

　　background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動，預設值是 scroll，背景圖片隨頁面的其餘部分滾動。如果需要設置圖像不隨著頁面的其他部分滾動，那麼屬性值則使用 fixed，定義背景圖像是固定的，如下：

 1 <head>
 2 <style>
 3 body{
 4     height:2000px;
 5     background-image:url('images/fix.gif');
 6     background-repeat:no-repeat;
 7     background-attachment:fixed;
 8 }
 9 </style>
10 </head>
11 <body>
12 <p>我是一個段落,我是一個段落</p>
13 <p>我是一個段落,我是一個段落</p>
14 <p>我是一個段落,我是一個段落</p>
15 <p>我是一個段落,我是一個段落</p>
16 <p>我是一個段落,我是一個段落</p>
17 <p>我是一個段落,我是一個段落</p>
18 <p>我是一個段落,我是一個段落</p>
19 <p>我是一個段落,我是一個段落</p>
20 <p>我是一個段落,我是一個段落</p>
21 <p>我是一個段落,我是一個段落</p>
22 <p>我是一個段落,我是一個段落</p>
23 <p>我是一個段落,我是一個段落</p>
24 <p>我是一個段落,我是一個段落</p>
25 <p>我是一個段落,我是一個段落</p>
26 <p>我是一個段落,我是一個段落</p>
27 <p>我是一個段落,我是一個段落</p>
28 <p>我是一個段落,我是一個段落</p>
29 <p>我是一個段落,我是一個段落</p>
30 <p>我是一個段落,我是一個段落</p>
31 <p>我是一個段落,我是一個段落</p>
32 <p>我是一個段落,我是一個段落</p>
33 </body>

 

　　(6)、背景屬性簡寫

　　在上面實例中，設置頁面的背景效果時，通過很多的單個屬性來進行定義，這樣代碼就顯得很繁瑣，為了簡化這些屬性的代碼，可以將這些屬性合併在同一個屬性中，如下：

1 body{
2     background:green url('images/fix.gif') no-repeat fixed 12px 24px;
3 }

 

　　background 屬於複合屬性，也叫快捷屬性，他可以簡化代碼，提高頁面的運行效率，但是在使用 JS 時卻不能使用複合屬性來獲取元素的樣式，需要使用單個屬性精確獲取，如果一個元素定義了多個背景樣式，那麼使用複合屬性獲取，瀏覽器並不知道你到底需要哪個樣式，就出錯了。類似這樣的複合屬性還有：font、border、padding 和 margin 等。

　　當使用簡寫屬性時，屬性值的順序依次為：

　　　　background-color --> background-image --> background-repeat --> background-attachment --> background-position

　　以上屬性無需全部使用，可以按照頁面的實際需要使用，比如只定義背景顏色，就可以這樣設置：background:#90C;

 

7、CSS 文本格式

　　(1)、文本顏色

　　color 屬性被用來設置文字的顏色，可以使用合理的背景顏色和文本顏色搭配，這樣有利於提高文本的可讀性。

 1 <head>
 2 <style>
 3 body{
 4     background-color:#d5f3f4;
 5 }
 6 h1{
 7     color:#00c; /* color:#0000cc; */
 8 }
 9 </style>
10 </head>
11 <body>
12 <h1>文字顏色</h1>
13 <p>可以使用合理的背景顏色和文本顏色搭配，這樣有利於提高文本的可讀性。</p>
14 </body>

 

　　(2)、文本對齊方式

　　text-align 文本排列屬性可以用來設置文本的水平對齊方式，文本可以居中或對齊到左或右，兩端對齊。

　　該屬性有4個值，預設值為 left，由瀏覽器決定，把文本排列到左邊，即對齊到左。center 則為文本居中，right 為文本對齊到右邊。

 1 <head>
 2 <style>
 3 h1{
 4     text-align:center;
 5 }
 6 h3{
 7     text-align:right;
 8
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【AngularJS學習筆記】02 小雜燴及學習總結
    表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ $index + 1 }}</td> <td ng-if=
  • html5數字和顏色輸入框
    html5功能強大，數字和顏色輸入框例子 效果：http://hovertree.com/code/html5/rxujb6g8.htm 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="te
  • 先序遍歷DOM樹的5種方法
    DOM樹由文檔中的所有節點（元素節點、文本節點、註釋節點等）所構成的一個樹結構，DOM樹的解析和構建是瀏覽器要實現的關鍵功能。既然DOM樹是一個樹結構，那麼我們就可以使用遍歷樹結構的相關方法來對DOM樹進行遍歷，同時DOM2中的"Traversal"模塊又提供了兩種新的類型，從而可以很方便地實現DO...
  • [轉]jQuery的each方法的幾種常用的用法
    下麵提一下jQuery的each方法的幾種常用的用法 複製代碼 代碼如下: var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); 上面這個each輸出的結果分別為：one,two,th
  • 2016年某前端群題目答案參考
    一.CSS部分 1.什麼是盒模型？ 盒模型是網頁製作的基礎，在網頁文檔中每個元素都將被描繪為一個矩形盒子來進行渲染。通常來說，一個完整的盒子如下圖所示： 2.Doctype的幾種類型？ Doctype是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTM
  • sencha gridpanel checkbox 覆選框的勾選
    gridpanel顯示checkbox: 添加SelectionModel為Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', header: false, title: '條線列表', deferRowRender: false,
  • Javascript基礎惡補
    1、字元集：Javascript採用Unicode字元集，支持地球上所有在用的語言。2、區分大小寫：Javascript區分大小寫，HTML不區分大小寫。3、空格、換行、格式控制符：Javascript忽略空格、換行，可以採用整齊、一致的縮進來形成統一的編碼風格。4、Unicode轉義序列：使用6個
  • IE相容性問題彙總【持續更新中】
    問題：IE8/9不支持Array.indexOf 解決方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/) { var len = this.length >>> 0; var fr
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類