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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類