CSS基礎語法之CSS的3種引入-html教學-PHP中文網

首頁

web前端

html教學

CSS基礎語法之CSS的3種引入

php中世界最好的语言

Feb 28, 2018 am 10:16 AM

css引入

這次帶給大家CSS基礎語法之CSS的3種引入，CSS基礎語法的CSS3種引入的注意事項有哪些，下面就是實戰案例，一起來看一下。

CSS可算是網頁設計的突破，它解決了網頁介面排版的難題。可以這麼說，HTML的Tag主要是定義網頁的內容(Content)，而CSS決定這些網頁內容如何顯示(Layout)。

Web早期，HTML是一種很有限的語言，這種語言不關心外觀，它只是一種簡潔的小型標記機制。

隨著Mosaic網頁瀏覽器的出現，網站開始到處湧現。對於頁面改變外觀的需求增加，於是增加了類似和之類的標記元素。

幾年後，大多數網站標記幾乎完全由表格和font元素組成，並且對於所要表現的內容不能傳達任何實際含義，使文件可用性降低，且不易於維護。

於是1995年，W3C發布了CSS草案，試圖解決結構與樣式混雜的問題。

1996年，W3C正式推出CSS1。

1998年，推出CSS2。

2001年從CSS3開始，CSS這門語言分割成多個獨立的模組，每個模組獨立分級，只包含一小部分功能。

2011年開始設計CSS4

一、css樣式表的引入

1.內嵌樣式表

內嵌樣式表是寫在Tag (標籤)裡面的。內嵌樣式只對所在的Tag有效。 (如果有多種樣式，內嵌式會覆蓋其它的樣式，並生效自己的)

範例：

<p style="font-size:20pt; color:red"></p>

這個style定義

裡面的文字是20pt字體，字體顏色是紅色。

2.內部樣式表

內部樣式表是寫在HTML的

裡面的。內部樣式表只對所在的網頁有效。

內部樣式表要用到style這個Tag，寫法如下：

<style  type="text/css">
     div{
           color : red;
         }</style>

3.外部樣式表

如果很多網頁需要用到同樣的樣式(Styles)，要用外部樣式表。外部樣式表需要將樣式寫在一個css檔案中,然後在頁面中用標籤引入，在需要應用該樣式的每個頁面中引入該文件。

範例:

<HTML><HEAD>
   <link href="../css/a.css " rel ="stylesheet" type="text/css "></HEAD><BODY>…</BODY>
 </HTML>

1、標籤位置一般寫在

標籤之內。

2、css樣式檔案名稱以有意義的英文字母命名，如 main.css。

3、href=""是引入css的路徑

4、rel="stylesheet" type="text/css" 是固定寫法不可修改。

記住他們的優先權：內嵌式 > 嵌入式> 外部式

在CSS中也有註解語句：用/*註解語句*/來標示（Html中使用)

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

vscode的常用設定

#10進制數如何轉換到16進位

怎麼將自己的maven專案託管到github

以上是CSS基礎語法之CSS的3種引入的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。