本篇內(nèi)容介紹了“CSS基礎(chǔ)語法的使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括南岳網(wǎng)站建設(shè)、南岳網(wǎng)站制作、南岳網(wǎng)頁制作以及南岳網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，南岳網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到南岳省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

行內(nèi)樣式：就是直接在HTML上寫樣式，就是HTML上加屬性style=””這種形式。如

divcss8

，但是這種方法并不是被我們推薦的，因?yàn)椴焕趯?shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)分離。也為后期維護(hù)帶來很多不必要的困難。我們只需要知道即可。

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

代碼如下:

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

代碼如下:

   
   

divcss8

www.divcss8.com

我們在這里又有一個(gè)新的知識點(diǎn)。如果我們想給段落添加一個(gè)樣式的話。我們可以通過兩步實(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é)合起來用才可以。

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

代碼如下:

   
   

divcss8

divcss8提供CSS基礎(chǔ)教程

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

代碼如下:

   
   

divcss8

divcss8提供CSS基礎(chǔ)教程

語法規(guī)范就是

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

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

代碼如下:

• 項(xiàng)目編號1


• 項(xiàng)目編號2

我不會(huì)被改變

/body>

語法規(guī)范是：

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

注意：這里面是空格隔開的 HTML中的父級空格HTML中的子級

自定義選擇器

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

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

代碼如下:

   
   

• 項(xiàng)目編號1


• 項(xiàng)目編號2

• 項(xiàng)目編號1


• 項(xiàng)目編號2

我不會(huì)被改變

語法規(guī)范就是：

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

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

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

代碼如下:

   
   

• 項(xiàng)目編號1


• 項(xiàng)目編號2

• 項(xiàng)目編號2


• 項(xiàng)目編號3

我不會(huì)被改變

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

還有一種選擇符就是通用選擇符是可以針對所有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代碼
如果我們的樣式需要針對網(wǎng)頁中的多個(gè)文件應(yīng)用。而內(nèi)嵌明顯不太適合，這時(shí)候就得用到我們講的鏈接樣式了。

語法格式：

代碼如下:

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

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

樣式文件的優(yōu)先級：

代碼如下:

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

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

代碼如下:

   
   
   

www.divcss8.com

Divcss.css文件

代碼如下:

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

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

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

CSS選擇器命名

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

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

第一個(gè)單詞以小寫字母開始；第二個(gè)單詞的首字母大寫或每一個(gè)單詞的首字母都采用大寫字母，例如：myFirstName

帕斯卡（pascal）命名法：

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

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

red_navMenu

“CSS基礎(chǔ)語法的使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前文章：CSS基礎(chǔ)語法的使用-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/dcedch.html