CSS 簡(jiǎn)介

2020-10-21 14:26 更新

CSS概述

 1. Cascading Style Sheets 層疊樣式表，它可以控制多重網(wǎng)頁(yè)的樣式和布局；

 2. 需具備的基礎(chǔ)知識(shí)：HTML、XHTML；

 3. 主要實(shí)現(xiàn)：

    樣式

     ----- 定義如何顯示 HTML 元素；

     ----- 存儲(chǔ)在樣式表中；

     ----- 添加到 HTML4.0 中，解決內(nèi)容與表現(xiàn)分離；

     ----- 多個(gè)樣式定義可以層疊為一。


CSS解決的問(wèn)題--更好的利用HTML

1. 背景

HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。即通過(guò)使用 <h1>、<p>、<table> 這樣的標(biāo)簽，來(lái)表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類(lèi)的信息。

同時(shí)文檔的布局由瀏覽器來(lái)完成，而不使用任何的格式化標(biāo)簽。

由于兩種主要的瀏覽器（Netscape和Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔，內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難。


2. 樣式

  • 為解決這個(gè)問(wèn)題，樣式（Style）肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使用，這樣所有的主流瀏覽器均支持層疊樣式表；
  • 極大地提高了工作效率。樣式表定義如何顯示 HTML 元素，就像 HTML3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。
  • 多重樣式層疊為一個(gè)。樣式表允許以多種方式規(guī)定樣式信息。它可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。
  •  甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。

例子

CSS代表層疊樣式表。它定義如何顯示 HTML 元素。

以下 HTML 代碼包含樣式的 CSS。 

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        a {
            background-color:grey; 
            color:white 
        } 
        </style> 
    </head> 
    <body> 
        <a href = "http://www.o2fo.com">Visit the website</a> 
    </body> 
</html>

上面的代碼設(shè)置背景顏色和前景顏色。

樣式通常保存在外部 .css 文件中。

瀏覽器樣式

瀏覽器使用級(jí)聯(lián)和繼承來(lái)確定在顯示元素時(shí)要用于屬性的值。

每個(gè)元素都有一些 CSS 屬性。

對(duì)于每個(gè)屬性，瀏覽器需要遍歷所有樣式的源。

你已經(jīng)看到了三種不同的方式來(lái)定義樣式

  • 內(nèi)聯(lián)
  • 嵌入式
  • 外部樣式表
還有兩個(gè)其他的樣式來(lái)源，你需要知道。

如果沒(méi)有指定其他樣式，瀏覽器樣式或用戶(hù)代理樣式是瀏覽器應(yīng)用于元素的默認(rèn)樣式。

這些樣式在瀏覽器之間略有不同。

以下代碼顯示了一個(gè)不包含樣式的簡(jiǎn)單 HTML 文檔。 

<!DOCTYPE HTML>
<html>
<body>
    <a href="http://www.o2fo.com">Visit the website</a>
    <p>I  like <span>apples</span> and oranges.</p>
    <a  rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

鏈接的文本內(nèi)容顯示為藍(lán)色，帶下劃線(xiàn)。

瀏覽器正在應(yīng)用類(lèi)似于以下代碼中所示的樣式。 

a  {
    color: blue;
    text-decoration:  underline;
}
瀏覽器沒(méi)有每個(gè) HTML 元素的默認(rèn)樣式。 

小結(jié)

以上是從CSS的基本作用談起的，它內(nèi)部的需要基礎(chǔ)知識(shí)，在下文中會(huì)提到，如 CSS 基礎(chǔ)語(yǔ)法、選擇器、樣式、框模型定位等內(nèi)容。


以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)