您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

css基礎(chǔ)教程之CSS基礎(chǔ)語(yǔ)法

 我們學(xué)習(xí)CSS要明白一個(gè)重要的問(wèn)題,CSS主要是解決與實(shí)現(xiàn)表現(xiàn)(CSS)與結(jié)構(gòu)(HTML)的分離。我們編寫完HTML之后,如何通過(guò)CSS對(duì)HTML實(shí)現(xiàn)控制呢。

1、 行內(nèi)樣式
2、 內(nèi)嵌樣式
3、 鏈接樣式
4、 導(dǎo)入樣式

我們這一節(jié)課的示例就先從行內(nèi)樣式開(kāi)始

行內(nèi)樣式:就是直接在HTML上寫樣式,就是HTML上加屬性style=””這種形式。如<p style=”color:#f00”>divcss8</p>,但是這種方法并不是被我們推薦的,因?yàn)椴焕趯?shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)分離。也為后期維護(hù)帶來(lái)很多不必要的困難。我們只需要知道即可。

內(nèi)嵌樣式:針對(duì)當(dāng)前一個(gè)網(wǎng)頁(yè)可以使用的樣式,一般寫在html的<head></head>標(biāo)記中。而且要使用一個(gè)示明,我們的樣式都要寫到這個(gè)聲明中如下:
 

代碼如下:

<style type=”text/css”>寫我們的樣式</style>


我們看一個(gè)示例文件為我們段落文字改成紅色的:

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h2>www.divcss8.com</h2>
</body>
</html>


我們?cè)谶@里又有一個(gè)新的知識(shí)點(diǎn)。如果我們想給段落添加一個(gè)樣式的話。我們可以通過(guò)兩步實(shí)現(xiàn),第一步先找到這個(gè)段落,第二步添加CSS樣式屬性(PS:這些屬性咱們現(xiàn)在可以理解為已經(jīng)提供好的,咱們使用即可)。

 

那咱們現(xiàn)在就看一下這個(gè)CSS選擇器:

CSS選擇器的分類:

1、 HTML標(biāo)簽選擇器
2、 群組選擇器
3、 包含選擇器
4、 自定義選擇器有可以分為兩種

a) Class選擇器
b) ID選擇器

HTML標(biāo)簽選擇器:就是直接使用BODY中的HTML標(biāo)記做為選擇符,就像我們第一示例那樣。

但是這種選擇器有一種局限性。假設(shè)我們有兩個(gè)段落。要設(shè)置不一樣的效果。那怎么辦呢?當(dāng)然我們選擇器必須結(jié)合起來(lái)用才可以。

假如我們要為網(wǎng)頁(yè)中的H2和P的文字都要改成紅色的,怎么辦呢?這時(shí)候群組選擇器就派上用場(chǎng)了。我們看個(gè)示例文件
 

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h2>divcss8提供CSS基礎(chǔ)教程</h2>
</body>
</html>

 

HTML標(biāo)簽選擇器:就是直接使用BODY中的HTML標(biāo)記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種局限性。假設(shè)我們有兩個(gè)段落。要設(shè)置不一樣的效果。那怎么辦呢?當(dāng)然我們選擇器必須結(jié)合起來(lái)用才可以。
假如我們要為網(wǎng)頁(yè)中的H2和P的文字都要改成紅色的,怎么辦呢?這時(shí)候群組選擇器就派上用場(chǎng)了。我們看個(gè)示例文件
 

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h2>divcss8提供CSS基礎(chǔ)教程</h2>
</body>
</html>

 

語(yǔ)法規(guī)范就是

選擇器,選擇器{屬性:屬性值;}
總結(jié):我們記得只要我們CSS屬性一致的時(shí)候,都可以使用群組選擇符。

包含選擇器:找到含有的內(nèi)容,就像我們HTML中UL LI a(PS:列表上加鏈接) 這種形式,如果我們要為列表中鏈接添加樣式。這時(shí)候我們就能使用包含選擇器
 

代碼如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>divcss8第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>項(xiàng)目編號(hào)1</a></li>
<li><a href=”#”>項(xiàng)目編號(hào)2</a></li>
</ul>
<a href=”#”>我不會(huì)被改變</a></p> <p>/body>
</html>

 

語(yǔ)法規(guī)范是:

選擇器 選擇器{屬性:屬性值;}

注意:這里面是空格隔開(kāi)的 HTML中的父級(jí)空格HTML中的子級(jí)

自定義選擇器

引入:如果網(wǎng)頁(yè)中有多個(gè)P標(biāo)簽,我們想為其中某一個(gè)P添加樣式。該怎么辦呢,之前的選擇器都不能滿足。

ID選擇器:為網(wǎng)頁(yè)中某一個(gè)標(biāo)簽添加屬于自己的選擇器,而且規(guī)范要求我們這個(gè)ID名稱的選擇器只能使用一次。(PS:也是為了以后JS好調(diào)用)
 

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8.com示例</title>
<style type="text/css">
#diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">項(xiàng)目編號(hào)1</a></li>
<li><a href="#">項(xiàng)目編號(hào)2</a></li>
</ul>
<ul id="diyi">
<li><a href="#">項(xiàng)目編號(hào)1</a></li>
<li><a href="#">項(xiàng)目編號(hào)2</a></li>
</ul>
<a href="#">我不會(huì)被改變</a>
</body>
</html>

 


語(yǔ)法規(guī)范就是:

#選擇器名稱{CSS屬性:屬性值;}
而在HTML中就是 id=”選擇器名稱”


在上面我們講到了自定義ID選擇器,為了以后JS獲取內(nèi)容方便,所以說(shuō)我們只能使用一次。如果CSS代碼想多次重復(fù)使用怎么辦呢。那么就時(shí)候就可以用自定義的class選擇符。

我們看一個(gè)下面這個(gè)示例:
 

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8.com class選擇器示例</title>
<style type="text/css">
.diyi li a{color:#f00;}
</style>
</head>
<body>
<ul class="diyi">
<li><a href="#">項(xiàng)目編號(hào)1</a></li>
<li><a href="#">項(xiàng)目編號(hào)2</a></li>
</ul>
<ul class="diyi">
<li><a href="#">項(xiàng)目編號(hào)2</a></li>
<li><a href="#">項(xiàng)目編號(hào)3</a></li>
</ul>
<a href="#">我不會(huì)被改變</a>
</body>
</html>


那么這兩個(gè)項(xiàng)目列表都會(huì)發(fā)生變化。并且還要注意的就是CLASS選擇符可以一次使用多個(gè)。在每個(gè)名稱后邊加一個(gè)空格即可,如 class=”diyi  clear”這樣就可以了。

 

還有一種選擇符就是通用選擇符是可以針對(duì)所有HTML標(biāo)簽應(yīng)用如下:
 

代碼如下:
*{padding:0px;margin:0px;}

 

這個(gè)我準(zhǔn)備放到布局時(shí)在詳細(xì)講解。

咱們一直使用的都是內(nèi)嵌樣式,我們現(xiàn)在學(xué)習(xí)一個(gè)新的引入CSS樣式的方式,也是我們?nèi)蘸蠼?jīng)常用的鏈接樣式。

使用鏈接樣式有什么好處呢:

為了SEO方便,如果直接使用內(nèi)嵌樣式。那么會(huì)造成蜘蛛在爬行的時(shí)候,要爬行很多CSS代碼
如果我們的樣式需要針對(duì)網(wǎng)頁(yè)中的多個(gè)文件應(yīng)用。而內(nèi)嵌明顯不太適合,這時(shí)候就得用到我們講的鏈接樣式了。

語(yǔ)法格式:
 

代碼如下:

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


最關(guān)鍵的是href需要大家改成自己寫的CSS樣式文件

 

總結(jié):通過(guò)使用鏈接的方式這樣就實(shí)現(xiàn)了我們之前所說(shuō)的HTML與CSS的分離。如果想更換網(wǎng)頁(yè)的風(fēng)格,只需要更換CSS樣式文件即可。大家可以百度搜一下CSS禪意花園。Html是固定的通過(guò)更換的CSS樣式文件,可以看到不同的風(fēng)格的網(wǎng)頁(yè)。也是新手學(xué)習(xí)CSS推薦看的編碼,樣式文件。

樣式文件的優(yōu)先級(jí):
 

復(fù)制代碼
代碼如下:

行內(nèi)樣式 > 內(nèi)嵌樣式 > 鏈接樣式 > 導(dǎo)入樣式


咱們通過(guò)一個(gè)實(shí)例認(rèn)識(shí)一下


代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8示例</title>
<style type="text/css">
p{color:#666;font-size:24px;}
</style>
<link rel="stylesheet" type="text/css" href="divcss.css"/>
</head>
<body>
<p style="color:#f00;">www.divcss8.com</p>
</body>
</html>


Divcss.css文件


代碼如下:

p{color:#0f0;font-weight:bold;}


總結(jié):行內(nèi)樣式,內(nèi)嵌樣式以及鏈接樣式分別對(duì)P中的實(shí)現(xiàn)了樣式的更改。由于行內(nèi)樣式的優(yōu)先級(jí)比較高所以最終結(jié)果顯示紅色。

 

大家還需要注意的是后面的樣式會(huì)覆蓋上邊的樣式。

CSS選擇器命名

CSS選擇器命名要有三種:駱駝命名法,帕斯卡命名法,匈牙利命名法,我們下邊分別看一下:

駱駝命名法:指混合使用大小寫字母來(lái)構(gòu)成,也是為了以后工作中有一個(gè)團(tuán)隊(duì)交流中比較方便。它的特點(diǎn)如下:

第一個(gè)單詞以小寫字母開(kāi)始;第二個(gè)單詞的首字母大寫或每一個(gè)單詞的首字母都采用大寫字母,例如:myFirstName

帕斯卡(pascal)命名法:

此CSS命名規(guī)則與駱駝命名法類似。只不過(guò)駱駝命名法是首字母小寫,而帕斯卡命名法是首字母大寫

匈牙利命名法:名稱前面加上一個(gè)或多個(gè)小寫字母作為前綴

red_navMenu

以上命名并不是說(shuō)特定使用哪一個(gè)。主要是讓你寫的CSS代碼得讓別人一看顯得很專業(yè)。很明白。在下邊我給大家分享一些網(wǎng)上總結(jié)好的命名規(guī)范。

大家學(xué)了這么多選擇符了。給大家考試一下:請(qǐng)大家說(shuō)出如下選擇符會(huì)選擇什么對(duì)象。答案會(huì)在下篇課程中公布。

問(wèn)題:

1、h1 .p1{}
2、#content h1{}
3、 h1 .p1, #content h1
4、h1#content h2{}

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd2209.html
css中background-size屬性使用介紹
CSS 平級(jí)和兒子級(jí)樣式寫法示例
圖趣網(wǎng)微信
建議反饋
×