seo代碼入門之div+css

　　這節課給大家講解html中的div+css，首先讓我們去認識一下div+css，首先我們看一下抵押為標簽div是一個html布局，標簽也被稱為虛榮氣，它主要是用來實現網頁布局和模塊的添加的.例如我們打開一個網頁，經常會看到DiV+css這樣的布局好，我們現在打開桌面，我們打開這個文件夾，在這里面有一個index.html，我們右擊選擇打開方式，火狐瀏覽器打開。好打開這個網頁以后，我們在空白的地方右擊查看頁面源代碼，那在源代碼里面我們就可以看到很獨振這樣的DiV，表示很多這樣的div標簽，而這些標簽它并不是單獨存在的，往往它是和謝S選擇符放在一起去使用的，比如說ID選擇符類選擇符等等這樣的𒆙css同時去使用的，所以我們經常會稱為div+css主要是因為Div標簽和css經常在一起使用。下面我們重點去了解一下css，我們先看一下css的概述。

　　第一個css，首先它指的是程蝶衣樣式表，他的英文單詞是開卡丁，是胎兒細致，這些樣式主要是用來顯示html元素的。通過上幾節課的學習，我們都知道一個網頁，他是有很多個html元素組成的，而css主要是用來定義這些html元素它的一ꦐ個顯示規則，這些樣式通常是存儲在樣式表文件中，好，我們還是打開剛才這個文件夾，我們看到這有一個網頁，那么這個網頁打開以后，我們可以看到這個網頁的風格，并且看到有一些字體是不一樣的，有些字體是黑色的，而其他的字體是一些橙色的，那么這樣的顏色以及它的背景顏色是如何實現的?

　　它就是通過文件夾里面的另一個文件，是它有點css這樣的樣式表文件去實現的好，我們繼續往下面看，css的出現主要是解決網頁內容與表現分離的問ꦚ題的，之前的網頁內容和分離是放在一塊的，而現在把內容和表現進行分離了，也就是把內容和樣式進行分離，這樣的話如果我們想修改網頁的內容，就直接在網頁里面去修改內容，如果我們想修改樣式，直接去修改它的css就可以了。

　　另外它把這些鑰匙放在一個外部的樣式表中，可以極大地提高我們的工作效率，下面我們去看一下css它產⛦生的一個原因，現實的產生主要是用來取代之前網頁中成就的表格布局技術，提高網頁編輯和ℱ修改的效率。

　　我們之前的網頁都是通過表格進行布局的，就像是我們使用office里面的word直接去插入一個表格，那么有多少個網頁就需要插入多少個表🍬格，如果我們想修改這些網頁的風格的時候就需要一個網頁一個網頁去修改，里面的表格內容是非常復雜和麻煩的，而現在🌱我們把樣式統一儲存在一個樣式表當中，如果我們想修改網頁的風格，只要去修改這個css的文件就可以做到這個網站里面所有網頁的修改，這樣可以極大地提高我們的網頁編輯和修改效率。

　　所以總結來說，采用css這樣的技術有以下幾個優勢

　　第一，可以讓我們的網頁布局更加清晰明了。

　　第二，可以更準確地去控制網頁模塊的樣子。

　　第三，這樣可以把我們的代碼更加簡化，可以加速我們網頁的訪問速度。

　　第四，更加有利于搜索引擎優化，所以你會發現現在大多數的網站都是采用的css技術，比如我們打開瀏覽器，我們打開魔貝課凡的官方論壇，hunyin1314.cn，回車，在空白的地方右擊查看頁面源代碼，在這里我們就可以看到很多這樣的div的布局標簽以及里面的樣式ID和類選擇符等等好，𓄧我們繼續回來，下面我們就看一下線是在網頁中他所扮演的角色。

　　我們目前的網頁它有三大部分去組成的，這三部分分別是內容結構和表現，首先內容也就是我們網頁中的文字圖片音樂視頻等等這樣的信息，另外一個就是結構，主要包括我們網頁中的段落標題列表等這樣的♎網頁框架，這些網頁框架主要是由h🌌tml標簽就完成的，另外一個就是網頁的表現。

　　網頁的表現主要是用來控制網頁的🍌結構布局，也就是去控制html標簽html元素，它的一個顯示方式還有一個作用是控制內容的顯示樣式，比如說我們想修改網頁里面的字體大小，網頁字體的粗細網頁中字體的顏色以及背景顏色等等都是網頁的表現，那么這個網頁的表現主要是通過我們現在所介紹的css技術去實現的好。

　　下面我們看一下西安30的一個語法結構，語法結構號這里一個圖片給大家展示一下，這就是西S的一個語法結構好，下面🎐給大🧔家分析一下。

　　首先，第一個叫選擇器，它主要是用來表明私家樣式的對象，你要給這個網頁里面的哪一個對象去私家樣式，我們看到這個圖片里面它是給H1文本標簽去添加樣式的，那么施加什么樣的樣式，它的所有的樣式都是以聲明的形式展現出來的，那么這些聲明它是放在一個大括號里面，每一個聲明包括一個屬性和直屬性，主要指的是給這ﷺ個對象施加什么樣的樣式，比如說你要修改H1標簽里面字體的顏色字體的大小等等這些都是屬性，另外一個就是屬性，后面跟著值。

　　你需要改變hr標簽里面文字字體的顏色，那你就需要給它一個準確的值。

　　修改成什么樣的顏🐈色主要是指的屬性的范圍，比如說我們想修改它的顏色為紅色，修改它的大小為14像素等等，這些都是它的值，這是一個聲明的表示方法，那如果我們需要給這個對象私家多個樣式的話，那我們就可以用英文的分號進行分隔，然后再寫一個聲明。

　　當然這個聲明和第一個是一樣的，也是包含屬性和值，如果講到這里，你還ꩵ是不了解下H語法是什么，那么下面我再舉一個通俗的例子給大家去理解，比如我們要需要去描述一個人的身🦹高那怎么樣去描述?

　　首ꦐ先我們需要指明一下我們需要描述樣式的對象，那這里對象就是人，然后寫一個大括號，大括號里面去寫上它的聲明，那么🧸第一個聲明就是它的身高，身高就是它的屬性，它身高有多高，后面就是它的值，比如說這里寫的是175厘米，我們還可以描述這個人的體重，當然我們這兩個屬性都是描述的一個對象，所以我們可以把這兩個樣式都放在一個大括號里面，然后用英文的分號進行分割好，這就是css的語法結構，那么這一節課就給大家講到這里，那么下一節課再見大家好，這里是魔貝課凡SEO培訓這一節課，繼續給大家講解html中的divv+css，那么上一節課我們已經認識到div+css的概念以及它的語法格式，那么這一節課給大家演示一下css的屬性應用。

　　首先我們看第一個文本修飾這里主要給大家演示一下修改字體的大小以及自己的顏色好。

　　首先，我們打開桌面雙擊打開DW好打開以后新建一個html文檔，我們首先在body里面去輸入一個H2標簽，hr是我們學習的html標簽，它代表的是一個文本標題標簽，我們在這個hr標簽里面去寫上我們的內容，比如說我們這里去寫上魔貝課凡SEO培訓，🐠寫完以后點擊文件保存我們這里保存到桌面保存完成以后，我們又擊打開桌面，這里就是我們剛創建的一個html文本文件好。

　　我們現在又擊選擇打開方式，選擇火狐瀏覽器打開，打開以后，我們就ℱ可以看到我們剛才所書寫的一句話，魔貝課凡培訓，現在我們看一下如何去修改它的字體大小。字體大小的屬性是css，然后后面跟上它的值好，我們首先打開DW，我們的屬性要寫在黑的標簽上面，這是一種內部引入方式，首先我們需要輸入一個樣式，標簽輸完以后，根據我們上一節課學到的css規則，如果我們想修改H2標簽的它的屬性，首先我們需要寫上他的選擇福，我們這里要給Hr樣式，那么我們首先要寫選擇服務為hr，然后寫成大括號，大括號里面去寫上他的聲明，那么在這里我們是需要修改它的字體大小，那這里我們就直接復制這一個屬性和值。復制打開DW那在大括號里面進行粘貼，這個聲明所代表的方xx就是它的字體大小的屬性。

　　12px表明的是這個值的大小，復制完成以后點擊文件保存，然后我們這個時候再打開瀏覽器刷新，你就會發現這個字體明顯的變小了。那么打開DW，我們把這個持續調整，比如說我們調整為36像素，然后點擊保存，再打開DW進行刷新，你就會發現這個字變大了。好，這個就可以修改文本的字體大小，我們再看第二個，如果我們想修改自己的顏色，那我們再添加一個聲明復制我們上一節課講過，如果需要對一個對象施加多個聲明的話，我們就需要在每個聲明中間用英文的分號進行分隔，然后在分號后面去粘貼另外一個聲明，這個聲明所代表的意思就是去修改這個文本的字體顏色修改。為什么樣的顏色軟的也就是紅色好粘貼完成以后，點擊文件保存，我們再次打開瀏覽器進行刷新，你就會發現魔貝課凡SEO培訓這幾個字已經變成了紅色，這個就是文本修飾的一個演示，那我們繼🌄續往下面看修改網頁的樣式屬性。

　　首先我們看第一個修改網頁的背景顏色，我們在制作網💫站的時候往往有時候有這樣的需要，我們需要修改這個ꦰ網站的背景顏色，那么如何去修改?

　　首先我們打開DW，我們首先需要分析一下，我們現在需要修改的是整個網頁的🌼背景顏色，所以我們的私家樣式的對象就是最大的一對標簽，就是報的標簽。那這樣的話，我們就直接可以在樣式里面去輸入包的標簽作為他的選擇福，然后后面跟著大括號在大括號里面，我們去添加第一個聲明背景顏色的修改我們復制這個證明復制在大括號里面進行粘貼好暫停以后，我們看一下這🎶個聲明，白果仁的看了指的就是背景顏色，葉樓是黃色的，背景顏色是它的值。好粘貼完成以后，我們點擊文件保存，然后這個時候我們再次打開瀏覽器進行刷新，你就會發現背景顏色已經變成了一個黃色好，我們繼續往下面看，下面一個屬性是修改這個網頁的背景圖片好，我們還是復制的，一個聲明右擊復制，然后再多個聲明，后面加了一個分號，在分號里面去粘貼，這個聲明好暫停以后，這一個證明指的是白膜andM以及指的是背景圖片，那后面就需要跟上這個圖片的路徑，在UI里面后面加一個括號括號里面去跟上這個圖片的路徑。好，現在我們打開桌面，在桌面這里我已經準備了一個背景圖片，叫B機jPG，我們先看一下這個背景圖片，好現在我們需要把這個背景圖片作為我們的網頁背景，我們右擊重命名，然后去復制這個圖片的名字，因為這個圖片和我們的html文檔在一個路徑下面，所以我們通過直接去調用同等目錄下面的B級點gp就可以找到他。

　　我們打開W，然后在這個括號里面直接右擊粘貼這個背景圖片的名🥀字，然后點擊文件保存好，這個時候我們再次打開瀏覽器進行刷新，你就會發現我們網頁的背景圖片已經變成了我們剛才所展示的圖片好，這個就是💧修改背景顏色和背景圖片的方法，那么關于css的演示這一節課就給大家講到這里。

　　本文seo代碼入門之div+css由SEO講師團隊原創編輯，微信號：MBKFSEO666；我們專注于SEO線上培訓，所以專業。