CSS開始使用CSS

Download CSS for free

備註

樣式可以通過多種方式創作,在源HTML文檔中指定時允許不同程度的重用和範圍。 外部樣式表可以在HTML文檔中重複使用。 嵌入式樣式表適用於指定它們的整個文檔。 內聯樣式僅適用於指定它們的單個HTML元素。

版本

發布日期
1 1996年12月17日
2 1998年5月12日
3 2015年10月13日

使用JavaScript更改CSS

純JavaScript

可以通過元素的style 屬性使用JavaScript添加,刪除或更改CSS屬性值。

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
 

請注意,樣式屬性以較低的駝峰案例樣式命名。在示例中,您會看到css屬性font-family 在javascript中變為fontFamily

作為直接處理元素的替代方法,您可以在JavaScript中創建<style><link> 元素,並將其附加到HTML文檔的<body><head>

jQuery的

使用jQuery修改CSS屬性更簡單。

$('#element').css('margin', '5px');
 

如果您需要更改多個樣式規則:

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});
 

jQuery包含兩種方法來更改其中帶有連字符的css規則(即font-size )。您可以將它們放在引號或駝峰式樣式規則名稱中。

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});
 

也可以看看

CSS @import規則(CSS規則之一)

@import CSS at-rule用於從其他樣式表導入樣式規則。這些規則必須先於所有其他類型的規則,但@charset規則除外;因為它不是嵌套語句,所以@import不能在條件組at-rules中使用。 @import

如何使用@import

您可以通過以下方式使用@import規則:

A.帶內部樣式標籤

   <style>
    @import url('/css/styles.css');
   </style>
 

B.使用外部樣式表

以下行將根目錄additional-styles.css 名為additional-styles.css 的CSS文件導入到出現的CSS文件中:

@import '/additional-styles.css';
 

也可以導入外部CSS。常見的用例是字體文件。

@import 'https://fonts.googleapis.com/css?family=Lato';
 

@import 規則的可選第二個參數是媒體查詢列表:

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
 

外部樣式表

通過在每個HTML文檔中放置<link> 元素,可以將外部CSS樣式表應用於任意數量的HTML文檔。

<link> 標記的屬性rel 必須設置為"stylesheet"href 屬性設置為"stylesheet" 的相對或絕對路徑。雖然使用相對URL路徑通常被認為是良好的做法,但也可以使用絕對路徑。在HTML5中, 可以省略 type 屬性。

建議將<link> 標記放在HTML文件的<head> 標記中,以便在樣式元素之前加載樣式。否則, 用戶將看到一些無格式的內容

你好,world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>
 

style.css文件

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}
 

確保在href中包含CSS文件的正確路徑。如果CSS文件與HTML文件位於同一文件夾中,則不需要路徑(如上例所示),但如果將其保存在文件夾中,則將其指定為href="foldername/style.css"

<link rel="stylesheet" type="text/css" href="foldername/style.css">
 

外部樣式表被認為是處理CSS的最佳方式。這有一個非常簡單的原因:當您管理一個100頁的網站時,所有網站都由一個樣式表控制,並且您希望將鏈接顏色從藍色更改為綠色,這樣可以更容易地進行更改在你的CSS文件中,讓所有100個頁面中的更改“級聯”,而不是進入100個單獨的頁面並進行相同的更改100次。同樣,如果您想徹底改變網站的外觀,您只需要更新這個文件。

您可以根據需要在HTML頁面中加載任意數量的CSS文件。

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
 

CSS規則適用於一些基本規則,順序很重要。例如,如果您有一個main.css文件,其中包含一些代碼:

p.green { color: #00FF00; }
 

所有帶有“green”類的段落都將以淺綠色寫入,但您可以使用另一個.css文件覆蓋它,只需將其包含 main.css 之後即可 。你可以使用以下代碼的override.css跟隨main.css,例如:

p.green { color: #006600; }
 

現在所有帶有“綠色”類的段落都將以深綠色而不是淺綠色寫入。

其他原則適用,例如'!important'規則,特異性和繼承。

當有人第一次訪問您的網站時,他們的瀏覽器會下載當前頁面的HTML以及鏈接的CSS文件。然後當他們導航到另一個頁面時,他們的瀏覽器只需要下載該頁面的HTML; CSS文件已緩存,因此無需再次下載。由於瀏覽器緩存外部樣式表,因此頁面加載速度更快。

內聯樣式

使用內聯樣式將樣式應用於特定元素。請注意,這不是最佳選擇。鼓勵在<style> 標記或外部CSS文件中放置樣式規則,以便在內容和表示之間保持區別。

內聯樣式會覆蓋<style> 標記或外部樣式表中的任何CSS。雖然這在某些情況下很有用,但這個事實往往會降低項目的可維護性。

以下示例中的樣式直接應用於它們所附加的元素。

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
 

內聯樣式通常是確保在各種電子郵件客戶端,程序和設備之間呈現兼容性的最安全方式,但編寫起來既費時又有點難以管理。

內部風格

包含在HTML文檔中的<style></style> 標記中的CSS的功能類似於外部樣式表,除了它存在於其樣式的HTML文檔中而不是單獨的文件中,因此只能應用於其中的文檔。住。請注意,此元素必須位於<head> 元素內以進行HTML驗證(儘管它可以在所有當前瀏覽器中使用,如果放在body )。

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>
 

使用CSS設置列表

樣式列表項有三種不同的屬性: list-style-typelist-style-imagelist-style-position ,它們應按該順序聲明。默認值分別為disc,outside和none。每個屬性都可以單獨聲明,也可以使用list-style 簡寫屬性聲明。

list-style-type 定義用於每個列表項的項目符號點的形狀或類型。

list-style-type 一些可接受的值:

  • 圓盤
  • 廣場
  • 十進制
  • 低羅馬
  • 上羅馬
  • 沒有

(有關詳盡列表,請參閱W3C規範wiki

例如,要為每個列表項使用方形項目符號,您將使用以下屬性 - 值對:

li {
    list-style-type: square;
}
 

list-style-image 屬性確定列表項圖標是否設置了圖像,並接受值none 或指向圖像的URL。

li {
    list-style-image: url(images/bullet.png);
}
 

list-style-position 屬性定義列表項標記的位置,並接受以下兩個值之一:“inside”或“outside”。

li {
  list-style-position: inside;
}
 
2D變換