CSS基本語法格式

79226 閱讀 0 評論 0 點贊

CSS（Cascading Styel Sheet）是控制 Web 頁面外觀的一系列格式設置規(guī)則,是網(wǎng)頁設計必不可少的工具之一。下面我們就開始學習css的基本語法格式。

一、CSS定義規(guī)則

層疊樣式表是一個完全的純文本文件，通常以“css”為擴展名作為單獨的文件來使用，它的內(nèi)容包含了一組告訴瀏覽器，如何安排與顯示特定的html標簽中內(nèi)容的規(guī)則，CSS定義規(guī)則由三個部分構(gòu)成：選擇符，屬性和屬性的取值。語法如下：

語法： selector { property: value }

↑ ↑ ↑

選擇符 { 屬性：值 }

CSS 樣式由一系列規(guī)則組成，這些規(guī)則由 Web 瀏覽器解析，然后應用于 HTML 文檔相應的元素上。CSS 樣式規(guī)則由三個部分組成，分別是選擇器、屬性和值：

1. 選擇符：選擇符是要定義樣式的html標記，將html標記作為選擇符定義后，則在html頁面中該標記下的內(nèi)容，會按照CSS定義的規(guī)則發(fā)生改變。

2. 屬性：您希望給 HTML 元素設置的樣式名稱，指的是在選擇符中要改變的內(nèi)容，常見的有：字體屬性，顏色屬性，文本屬性等。下面就是我們定義的一個樣式表。

3. 值：屬性的取值，由數(shù)值和單位或者關鍵字組成，用來控制某個屬性的顯示效果。

@charset"gb2312"; 
body { 
font-family: "宋體"; 
font-size: 20px; 
color: #FF0000; 
} 
p { 
font-family: "宋體"; 
font-size: 30px; 
color: #FF00ff; 
}

在這個樣式表中：

1. @charset"gb2312";表示使用中文國標字符集。

2. body 和 p 是 html 中的兩個標簽，對這兩個標簽設置了三種樣式，即：

font-family: 指定字體的字型。

font-size: 指定字體的大小。

color: 指定字體的顏色。

上面我們定義了一個樣式表，下一步的任務是如何把這個樣式表和html文件相關聯(lián)，使html文件按照我們定義的樣式顯示出來，與html文件相關聯(lián)的方法有四種，下面我們分別敘述。

二、嵌入樣式表

在Html頁面內(nèi)部定義的CSS樣式表,叫做嵌入式CSS 樣式表，也就是在HTML文檔的head部分中，使用 style 標簽并在該標簽中定義一系列 CSS 規(guī)則。

語法：
<head> 
<style type="text/css"> 
<!-- 
...... 
--> 
</style> 
</head>

說明：

示例1：t1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>嵌入式CSS樣式表</title>
<style type="text/css">
<!-- 
@charset"gb2312"; 
body { 
font-family: "宋體"; 
font-size: 20px; 
color: #FF0000; 
} 
p { 
font-family: "宋體"; 
font-size: 30px; 
color: #FF00ff; 
} 
-->
</style>
</head>
<body>
千山鳥飛絕萬徑人蹤滅
<p>
千山鳥飛絕萬徑人蹤滅
</p>
</body>
</html>

三、鏈接外部樣式表

外部CSS樣式表是一個以 .css為后綴的外部文件,定義一個外部樣式表可以應用于多個頁面。在html頁面中使用link標簽，可以將外部的css樣式表連接進來，其語法如下：

語法：

<link rel="stylesheet" href="*.css” type="text/css">

參數(shù):

1. rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合。rel取值:Stylesheet,表示指定一個外部的樣式表

2. *.css是單獨保存的樣式表文件。

示例2 定義一個外部css文件p2.css,然后在t2.htm文件中連接該文件。

示例2：t2.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鏈接外部樣式表</title>
<style type="text/css">
<!--
@charset"gb2312";
body {
font-family: "宋體";
font-size: 20px;
color: #FF0000;
}
p {
font-family: "宋體";
font-size: 30px;
color: #FF00ff;
}
-->
</style>
</head>
<body>
親愛的,你慢慢飛,小心前面帶刺的玫瑰
<p>
親愛的,你張張嘴,風中花香會讓你沉醉
</p>
</body>
</html>

四、內(nèi)聯(lián)樣式表

內(nèi)聯(lián)樣式指的是，在HTML特定的標簽中定義的CSS樣式表。常用的HTML 標簽主要是BODY中的一些元素，例如：<p>，<h2>，<ul>,<div>等，下面是內(nèi)聯(lián)樣式的示例。

示例3：t3.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>無標題文檔</title>
</head>
<body>
<div style="color:blue;font-size:30px ;">
風中花香會讓你沉醉
</div>
<p style="color:#ff0000; font-style: italic; " >
風中花香會讓你沉醉
</p>
</body>
</html>

五、導入外部樣式表

導入外部樣式表指的是，在html文件中已經(jīng)建立了嵌入式樣式表，但是還要使用外部樣式表的某些設置，這時就可以在<style>里導入一個外部樣式表，導入時用@import，如下例所示。

<html>
<head>
<style type="text/css">
<!--
@import url("mystyle.css");
其他樣式表的聲明
-->
</style>
</head>
</body>
......
</body>
</html>

其中@import url("mystyle.css"); 表示導入mystyle.css樣式表，導入外部樣式表必須在樣式表的開始部分，在內(nèi)部樣式表的上面。

示例4

定義一個外部css文件p4.css,然后在t4.htm文件中導入該文件

示例4：t4.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>導入外部樣式表</title>
<style type="text/css">
<!--
@import url("p4.css");
@charset"gb2312";
body {
font-family: "宋體";
font-size: 20px;
color: #FF0000;
}
p {
font-family: "宋體";
font-size: 30px;
color: #FF00ff;
}
-->
</style>
</head>
<body>
千山鳥飛絕萬徑人蹤滅
<p>
千山鳥飛絕萬徑人蹤滅
</p>
</body>
</html>

六、css樣式表的繼承性

在css樣式表中，子標簽的某些屬性會繼承父標簽的屬性，例如標簽p是標簽body的子元素，當標簽p未設置字體的顏色屬性時，p中的內(nèi)容會使用body中的顏色值，下面的示例說明了這種情況。

示例5：t5.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>嵌入式CSS樣式表</title>
<style type="text/css">
<!--
@charset"gb2312";
body {
font-family: "宋體";
font-size: 20px;
color: #FF0000;
}
p {
font-family: "宋體";
font-size: 30px;
}
-->
</style>
</head>
<body>
千山鳥飛絕萬徑人蹤滅
<p>
千山鳥飛絕萬徑人蹤滅
</p>
</body>
</html>

七、設置多個元素

css允許將單一的格式套用到多個標簽，各個標簽做為選擇符時用逗號隔開，如下例所示。

示例6：t6.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>嵌入式CSS樣式表</title>
<style type="text/css">
<!--
@charset"gb2312";
h1,h2,h3,p,{
font-family: "宋體";
color: #FF0000;
}
-->
</style>
</head>
<body>
<h1>千山鳥飛絕萬徑人蹤滅</h1>
<h2>千山鳥飛絕萬徑人蹤滅</h2>
<h3>千山鳥飛絕萬徑人蹤滅</h3>
<p>千山鳥飛絕萬徑人蹤滅</p>
</body>
</html>

點贊(0)