CSS樣式表如何制作更方便_CSS制作有哪些方法
做博客類的設(shè)計(jì)一款自己的主題就非常有成就感,但CSS就格外顯示的重要。下面由學(xué)習(xí)啦小編為大家整理的CSS制作方法,希望大家喜歡!
CSS制作方法
1.細(xì)致構(gòu)思網(wǎng)頁(yè)框架
很多初學(xué)者犯一個(gè)錯(cuò)誤,那就是網(wǎng)頁(yè)的基本框架還沒(méi)有定義好,就開(kāi)始著手思考CSS樣式,這是造成CSS樣式混亂的一個(gè)重要原因。應(yīng)該細(xì)致,精密的構(gòu)思出整個(gè)網(wǎng)頁(yè)的框架,并將其畫在紙上或是畫在VISIO里,嚴(yán)格的定義出來(lái)。這樣我們才有足夠的章法去規(guī)劃CSS樣式表。
2.使用規(guī)范的名稱與良好的注釋習(xí)慣
有些時(shí)候,我們做的網(wǎng)頁(yè)可能完成后會(huì)很久不動(dòng),也可能會(huì)交給其他人打理,那這事兒可能就麻煩了。沒(méi)有一個(gè)良好的命名規(guī)范與注釋的話,很可能造成自己或維護(hù)的人完全不知道里面寫的這是什么意思,還需要從頭去認(rèn)真的研究一番,耗時(shí)耗力。
因此,不論是為了我們自己還是為了日后維護(hù)的人,都應(yīng)該盡可能的使用規(guī)范的名稱來(lái)定義每一個(gè)類或者ID
3.從外至里,從上至下,從左至右
與其說(shuō)這是制定規(guī)范CSS的基本方向,不如說(shuō)是制定規(guī)范網(wǎng)頁(yè)的基本方法。我們?cè)跇?gòu)思網(wǎng)頁(yè)時(shí)一般都是按照這樣的思路來(lái)劃分區(qū)域,而在CSS中勢(shì)必也應(yīng)按照這樣的順序來(lái)書寫并按照區(qū)域加上注釋,以便在我們?nèi)蘸蟮木S護(hù)中更容易尋找某個(gè)定義的類或者ID。
4.補(bǔ)充的樣式盡可能做到頁(yè)面與表現(xiàn)完全分離
有時(shí)候我們?cè)谕瓿烧麄€(gè)頁(yè)面后,仍然需要添加一些樣式,對(duì)其進(jìn)行修改,此時(shí),我們一定要避免直接在頁(yè)面寫“style=”,而一定要做到頁(yè)面與表現(xiàn)分離,耐心的將補(bǔ)充的樣式寫進(jìn)樣式表。方便日后的維護(hù)。
CSS的垃圾行為
1、隱藏文本中的CSS代碼,這是個(gè)很老套的SEO黑帽方法了,在頁(yè)面中利用CSS代碼,讓某些關(guān)鍵詞隱藏起來(lái),訪客看不到,只讓搜索引擎看到,借此來(lái)增加關(guān)鍵詞的密度,提升排名,這種方法已經(jīng)過(guò)時(shí)了,搜索引擎已經(jīng)很容易判斷出來(lái)了。
2、利用CSS某種樣式,添加隱藏文字,設(shè)定某個(gè)格式元素的“display”屬性為“none”,或者將其顯示位置超出屏幕范圍,然后在此格式元素下添加大量蘊(yùn)含豐富關(guān)鍵詞,借此提高網(wǎng)站排名。
3、CSS沒(méi)有外置,網(wǎng)站頁(yè)面中出現(xiàn)大量的CSS代碼,大量的CSS代碼集中在網(wǎng)頁(yè)中,而網(wǎng)頁(yè)中的CSS代碼更是困擾著搜索引擎的耐性,不厭其煩的搜索你網(wǎng)站中的正文,這種方法對(duì)網(wǎng)站排名的影響,可想而知。
黑帽方法下的CSS利用,雖然,這些元素在瀏覽器下不可見(jiàn),訪客可能不會(huì)覺(jué)察到網(wǎng)頁(yè)中字句的存在,而對(duì)搜索引擎來(lái)說(shuō)這些不可見(jiàn)的CSS元素與頁(yè)面的正常組成部分沒(méi)有區(qū)別,所以,不要以為刻意的利用CSS做這些黑帽的行為。
而對(duì)于無(wú)意而為之的CSS垃圾行為,那就需要稍加注意了,不要讓代碼大量出現(xiàn)在網(wǎng)頁(yè)中,讓蜘蛛更快的訪問(wèn)到網(wǎng)站正文,抓取到頁(yè)面,實(shí)現(xiàn)長(zhǎng)期有效的網(wǎng)站優(yōu)化效果,前提是確保優(yōu)化中避免使用各類spam技術(shù),即使無(wú)意中使用了類似的技術(shù),網(wǎng)站遲早要被搜索引擎懲罰甚至被封,所以,對(duì)于一切的垃圾優(yōu)化行為都不要去做。
用div+css模板打造QQ站
1.選擇網(wǎng)站主題,確定網(wǎng)站目標(biāo)關(guān)鍵字
以前做站雖然知道有關(guān)鍵字這么一說(shuō),但是沒(méi)有深刻的理解,對(duì)關(guān)鍵字的效果也沒(méi)有概念。一個(gè)網(wǎng)站的關(guān)鍵字基本上可以確定了流量的最大上限,因此選擇網(wǎng)站主題和關(guān)鍵字一定要選有人氣的,不愿做的兵永遠(yuǎn)不是好兵,做站也一樣。
我的目標(biāo)關(guān)鍵字是QQ網(wǎng)名,QQ站的人氣勢(shì)眾所周知的。當(dāng)然我選擇關(guān)鍵字也要有一定的策略,目前我的主打得關(guān)鍵字是QQ情侶網(wǎng)名和QQ網(wǎng)名大全,打算等網(wǎng)站發(fā)展到一定階段再向QQ網(wǎng)名過(guò)渡。這也是目前比較流行的做法,沒(méi)辦法現(xiàn)在做站的人太多了,競(jìng)爭(zhēng)也太激烈了,每個(gè)關(guān)鍵字都已經(jīng)有好多人在做了。
2.選擇合適的div+css模板
因?yàn)镼Q網(wǎng)名是文字類為主的站,因此我選了款以文字為主的div+css模板?,F(xiàn)在有很多div+css的免費(fèi)模板資源,你只要去百度和google搜一下div+css模板就可以找到許多,一般都提供圖片預(yù)覽或者在線DEMO瀏覽,因此選擇起來(lái)還是很方便的。
我是在我自己之前的那個(gè)網(wǎng)頁(yè)設(shè)計(jì)類的網(wǎng)站上找的模板,因此也沒(méi)費(fèi)太多工夫。考慮到QQ站是娛樂(lè)休閑類,就選了一款帶多款css切換的模板,打算以后加上皮膚切換的功能,可以給人一些新鮮感。
3.選div+css模板需要考慮以下兩個(gè)因素:
?。?)選擇適合自己網(wǎng)站主題風(fēng)格的模板
如果是文字類的站就不要選那種全部是圖片組成的模板,相反如果是圖片站當(dāng)然不要選那種整個(gè)模板都沒(méi)幾個(gè)圖的模板。一般來(lái)講,好的模板網(wǎng)站都會(huì)給出模板的用途和分類,比如博客模板,企業(yè)模板等。另外顏色和風(fēng)格也要符合自己網(wǎng)站特點(diǎn),這個(gè)就要看站長(zhǎng)個(gè)人的口味和判斷了。
(2)選模板最好要選那種帶內(nèi)頁(yè)和導(dǎo)航頁(yè)模板
因?yàn)樵S多模板只是提供主頁(yè)的模板,因此如果你不具備一定的網(wǎng)頁(yè)div+css設(shè)計(jì)能力的話,即使模板再好看你也最好不要去用,否則首頁(yè)做出來(lái)了,內(nèi)頁(yè)卻需要花費(fèi)大量精力去自己設(shè)計(jì),而且很容易和主頁(yè)風(fēng)格出入很大,效果就大打折扣了。
4.選擇合適的CMS系統(tǒng)
我用的是織夢(mèng)CMS系統(tǒng),也是目前比較流行的CMS系統(tǒng)之一,是PHP語(yǔ)言的,還有一些像帝國(guó)CMS等也都不錯(cuò)。另外比較簡(jiǎn)單的asp有無(wú)憂cms(只適合簡(jiǎn)單的網(wǎng)站結(jié)構(gòu),沒(méi)有專題,友情鏈接等功能模塊,第三方的插件也幾乎沒(méi)有,使用前一定要考慮清楚)。選好CMS系統(tǒng)后一定要仔細(xì)看官方的使用說(shuō)明和幫助,即使需要消耗一定的時(shí)間也要仔細(xì)看,省得以后繞彎路。
5.修改div+css模板打造QQ站
選好模板和cms系統(tǒng)后,接下來(lái)就是將織夢(mèng)的模板標(biāo)簽加入到所選擇的div+css模板中去。這一步非常消耗時(shí)間和精力,一定要有耐性,而且要多測(cè)試效果,特別是記得要在IE不同版本和FF中預(yù)覽,看看是否都能正確顯示。