CSS CSS (Cascading Style Sheets，層疊樣式表），是一種用來為結(jié)構(gòu)化文檔（如 HTML 文檔或 XML 應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語言，CSS 文件擴(kuò)展名為 .css。 通過使用 CSS 可以大大提" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > [HTML]CSS基礎(chǔ)教程-1

[HTML]CSS基礎(chǔ)教程-1

時間：2023-10-02 17:42:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-02 17:42:02 來源：網(wǎng)站運(yùn)營

[HTML]CSS基礎(chǔ)教程-1：簡介




CSS
CSS (Cascading Style Sheets，層疊樣式表），是一種用來為結(jié)構(gòu)化文檔（如 HTML 文檔或 XML 應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語言，CSS 文件擴(kuò)展名為 .css。 通過使用 CSS 可以大大提升網(wǎng)頁開發(fā)的工作效率 在教程中，您會學(xué)到如何使用 CSS 同時控制多重網(wǎng)頁的樣式和布局。

什么是 CSS?

CSS 指層疊樣式表 (Cascading Style Sheets) - 樣式定義如何顯示 HTML 元素 - 樣式通常存儲在樣式表中 - 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題 - 外部樣式表可以極大提高工作效率 - 外部樣式表通常存儲在 CSS 文件中 - 多個樣式定義可層疊為一個

正片開始

CSS 語法

CSS 實(shí)例

CSS聲明總是以分號 ;結(jié)束，聲明總以大括號 {} 括起來

p {color:red;text-align:center;}為了讓CSS可讀性更強(qiáng)，你可以每行只描述一個屬性

p{ color:red; text-align:center;}CSS 注釋 注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。

CSS注釋以 /*開始, 以*/結(jié)束, 實(shí)例如下

/*這是個注釋*/p{ text-align:center; /*這是另一個注釋*/ color:black; font-family:arial;}

CSS 的Id 和Class

id 和 class 的選擇

如果你要在HTML元素中設(shè)置CSS樣式，你需要在元素中設(shè)置"id" 和 "class"：<.....id="..." class="...">

id 的選擇

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

以下的樣式規(guī)則應(yīng)用于元素屬性 id="para1":

#para1{ text-align:center; color:red;}提示：ID屬性盡量以字母開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

class 的選擇

class 選擇器用于描述一組元素的樣式，class 選擇有別于id選擇，class可以在多個元素中使用。

class 選擇器在 HTML 中以 class 屬性表示, 在 CSS 中，類選擇器以一個點(diǎn) . 號顯示：

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。

.center {text-align:center;}你也可以指定特定的 HTML 元素使用 class。

在以下實(shí)例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中

p.center {text-align:center;}多個 class 選擇器可以使用空格分開.

.center { text-align:center; }.color { color:#ff0000; }

CSS的 創(chuàng)建

當(dāng)讀到一個樣式表時，瀏覽器會根據(jù)它來格式化 HTML 文檔。

如何插入樣式表 插入樣式表的方法有三種:

外部樣式表

當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點(diǎn)的外觀。每個頁面使用 <link>標(biāo)簽鏈接到樣式表。 <link> 標(biāo)簽在（文檔的）頭部：

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。

外部樣式表可以在任何文本編輯器中進(jìn)行編輯。文件不能包含任何的 html 標(biāo)簽。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。下面是一個樣式表文件的例子：

hr {color:sienna;}p {margin-left:20px;}body {background-image:url("/images/back40.gif");}提示：不要在屬性值與單位之間留有空格（如："margin-left: 20 px" ），正確的寫法是 "margin-left: 20px" 。）（是20px不是20 px）

內(nèi)部樣式表

當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:

<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

內(nèi)聯(lián)樣式

由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。

要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3{ color:red; text-align:left; font-size:8pt;}而內(nèi)部樣式表擁有針對 h3 選擇器的兩個屬性：

h3{ text-align:right; font-size:20pt;}假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：

color:red;text-align:right;font-size:20pt;即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。

多重樣式優(yōu)先級

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表。

一般情況下，優(yōu)先級如下：

（內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認(rèn)樣式

style.css 文件樣式代碼如下：

h3 { color:blue;}實(shí)例

<head> <!-- 外部樣式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 設(shè)置：h3{color:blue;} --> <style type="text/css"> /* 內(nèi)部樣式 */ h3{color:green;} </style></head><body> <h3>顯示綠色，是內(nèi)部樣式</h3></body>注意：如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式，實(shí)例如下

<head> <!-- 設(shè)置：h3{color:blue;} --> <style type="text/css"> /* 內(nèi)部樣式 */ h3{color:green;} </style> <!-- 外部樣式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/></head><body> <h3>顯示藍(lán)色，是外部樣式</h3></body>

背景

CSS 背景屬性用于定義HTML元素的背景。

CSS 屬性定義背景效果:

背景顏色

background-color 屬性定義了元素的背景顏色.

頁面的背景顏色使用在body的選擇器中:

body {background-color:#b0c4de;}CSS中，顏色值通常以以下方式定義:

以下實(shí)例中, h1, p, 和 div 元素?fù)碛胁煌谋尘邦伾?

h1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;}

背景圖像

background-image 屬性描述了元素的背景圖像.

默認(rèn)情況下，背景圖像進(jìn)行平鋪重復(fù)顯示，以覆蓋整個元素實(shí)體.

頁面背景圖片設(shè)置實(shí)例:

body {background-image:url('paper.gif');}

背景圖像 - 水平或垂直平鋪

默認(rèn)情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協(xié)調(diào)，如下所示:

body{background-image:url('gradient2.png');}如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:

body{background-image:url('gradient2.png');background-repeat:repeat-x;}

背景圖像- 設(shè)置定位與不平鋪




請?zhí)砑訄D片描述
讓背景圖像不影響文本的排版 如果你不想讓圖像平鋪，你可以使用 background-repeat 屬性:

body{background-image:url('img_tree.png');background-repeat:no-repeat;}以上實(shí)例中，背景圖像與文本顯示在同一個位置，為了讓頁面排版更加合理，不影響文本的閱讀，我們可以改變圖像的位置。

可以利用 background-position 屬性改變圖像在背景中的位置:

body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}

背景- 簡寫屬性

在以上實(shí)例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。

為了簡化這些屬性的代碼，我們可以將這些屬性合并在同一個屬性中.

背景顏色的簡寫屬性為 "background":

body {background:#ffffff url('img_tree.png') no-repeat right top;}當(dāng)使用簡寫屬性時，屬性值的順序?yàn)椋?

以上屬性無需全部使用，你可以按照頁面的實(shí)際需要使用.

背景屬性一覽

標(biāo)簽描述
background簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。
background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動。
background-color設(shè)置元素的背景顏色。
background-image把圖像設(shè)置為背景。
background-position設(shè)置背景圖像的起始位置。
background-repeat設(shè)置背景圖像是否及如何重復(fù)。

CSS 文本格式

文本顏色

顏色屬性被用來設(shè)置文字的顏色。

顏色是通過CSS最經(jīng)常的指定：

一個網(wǎng)頁的背景顏色是指在主體內(nèi)的選擇：

body {color:red;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}


請?zhí)砑訄D片描述
對于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

文本的對齊方式

文本排列屬性是用來設(shè)置文本的水平對齊方式。

文本可居中或?qū)R到左或右,兩端對齊.

當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報(bào)紙）。

h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

文本修飾

text-decoration 屬性用來設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：

a {text-decoration:none;}也可以這樣裝飾文字：

h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;


請?zhí)砑訄D片描述
不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常?；煜脩簟?br>

文本轉(zhuǎn)換

文本轉(zhuǎn)換屬性是用來指定在一個文本中的大寫和小寫字母。

可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。

p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

文本縮進(jìn)

文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。

p {text-indent:50px;}

所有CSS文本屬性

屬性描述
color設(shè)置文本顏色
direction設(shè)置文本方向。
letter-spacing設(shè)置字符間距
line-height設(shè)置行高
text-align對齊元素中的文本
text-decoration向文本添加修飾
text-indent縮進(jìn)元素中文本的首行
text-shadow設(shè)置文本陰影
text-transform控制元素中的字母
unicode-bidi設(shè)置或返回文本是否被重寫
vertical-align設(shè)置元素的垂直對齊
white-space設(shè)置元素中空白的處理方式
word-spacing設(shè)置字間距

CSS 字體

CSS字體屬性定義字體，加粗，大小，文字樣式。

serif和sans-serif字體之間的區(qū)別




請?zhí)砑訄D片描述
請?zhí)砑訄D片描述
在計(jì)算機(jī)屏幕上，sans-serif字體比serif字體容易閱讀

CSS字型

在CSS中，有兩種類型的字體系列名稱：

Generic family字體系列說明
SerifTimes New Roman
Georgia		Serif字體中字符在行的末端擁有額外的裝飾
Sans-serifArial
Verdana		"Sans"是指無 - 這些字體在末端沒有額外的裝飾
MonospaceCourier New
Lucida Console		所有的等寬字符具有相同的寬度

字體系列

font-family 屬性設(shè)置文本的字體系列。

font-family 屬性應(yīng)該設(shè)置幾個字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。

注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。

多個字體系列是用一個逗號分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字體樣式

主要是用于指定斜體文字的字體樣式屬性。

這個屬性有三個值：

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}

字體大小

font-size 屬性設(shè)置文本的大小。

能否管理文字的大小，在網(wǎng)頁設(shè)計(jì)中是非常重要的。但是，你不能通過調(diào)整字體大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。

請務(wù)必使用正確的HTML標(biāo)簽，就<h1> - <h6>表示標(biāo)題和<p>表示段落：

字體大小的值可以是絕對或相對的大小。

絕對大?。?br>
相對大?。?br>



請?zhí)砑訄D片描述
如果你不指定一個字體的大小，默認(rèn)大小和普通文本段落一樣，是16像素（16px=1em）

第一篇教程完結(jié)。



關(guān)鍵詞：教程,基礎(chǔ)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉