css教程(htmlcss基礎(chǔ)教程主要內(nèi)容有哪些)
1.html css基礎(chǔ)教程主要內(nèi)容有哪些
html css基礎(chǔ)教程歸納如下：
第1、Html介紹
本章節(jié)主要講解html和css樣式的關(guān)系，以及html標(biāo)簽、html文件結(jié)構(gòu)、head標(biāo)簽，最后講解了在html中的注釋代碼的作用。
第2、認(rèn)識(shí)標(biāo)簽（第一部分）
學(xué)完這一章節(jié)將對(duì)標(biāo)簽的使用有了一些初步的認(rèn)識(shí)，可以使用標(biāo)簽制作出一篇簡(jiǎn)單的文章網(wǎng)頁(yè)。下一章節(jié)將進(jìn)一步學(xué)習(xí)另外一部分html標(biāo)簽。
第3、認(rèn)識(shí)標(biāo)簽（第二部分）
本章節(jié)主要講解列表、div及table標(biāo)簽使用，學(xué)完本章，可以在網(wǎng)頁(yè)上展示一些信息列表及表格數(shù)據(jù)，使網(wǎng)頁(yè)上的信息更加豐富
第4、認(rèn)識(shí)標(biāo)簽（第三部分）
本章節(jié)主要講解超鏈接標(biāo)簽、鏈接地址及圖片標(biāo)簽，學(xué)習(xí)完這一章節(jié)可以把分散的單獨(dú)的網(wǎng)頁(yè)用鏈接標(biāo)簽有效的組織起來(lái)，達(dá)到網(wǎng)頁(yè)之間可以相互跳轉(zhuǎn)的作用。
第5、與瀏覽者交互，表單標(biāo)簽
每天都在網(wǎng)上沖浪，如果沒(méi)有表單，人們就無(wú)法輸入自己的個(gè)人信息來(lái)買東西，本章節(jié)主要從表單的作用、表單元素講起，學(xué)習(xí)完本章，可以制出簡(jiǎn)單的用戶登陸、注冊(cè)頁(yè)面。
第6、開(kāi)始學(xué)習(xí)CSS，為網(wǎng)頁(yè)添加樣式
CSS是一個(gè)很神奇的東西，設(shè)計(jì)者可以通過(guò)修改樣式表的定義而使網(wǎng)頁(yè)呈現(xiàn)出完全不同的外觀。本章就開(kāi)始帶領(lǐng)大家來(lái)學(xué)習(xí)CSS樣式：先來(lái)認(rèn)識(shí)CSS樣式、了解CSS樣式的優(yōu)勢(shì)、最后講解CSS代碼語(yǔ)法和CSS注釋代碼。
第7、CSS樣式基本知識(shí)
這一章節(jié)主要講解與CSS樣式相關(guān)的基礎(chǔ)知識(shí)：CSS樣式的位置及相關(guān)的優(yōu)先級(jí)，為后面的CSS樣式具體學(xué)習(xí)打下基礎(chǔ)。
第8、CSS選擇器
本章主要介紹CSS的選擇器，通過(guò)學(xué)習(xí)本章，能對(duì)元素進(jìn)行樣式的設(shè)置
第9、CSS的繼承、層疊和特殊性
CSS中有一些概念是需要深刻理解的，此節(jié)開(kāi)始將介紹CSS中的一些非常重要的概念包括CSS的繼承、層疊和特殊性。
第10、CSS格式化排版
本章將詳細(xì)介紹網(wǎng)頁(yè)排版中主要格式化要素，幫助讀者把CSS技術(shù)與網(wǎng)頁(yè)編排緊密結(jié)合在一起，實(shí)現(xiàn)網(wǎng)頁(yè)實(shí)用性與欣賞性相結(jié)合，實(shí)現(xiàn)出設(shè)計(jì)效果。
第11、CSS盒模型
盒模型是CSS布局的基石，它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。本章將圍繞盒模型的概念、結(jié)構(gòu)、尺寸等基礎(chǔ)知識(shí)展開(kāi)研究，以便為后面的學(xué)習(xí)和日后網(wǎng)頁(yè)設(shè)計(jì)奠定扎實(shí)的基礎(chǔ)。
第12、CSS布局模型
現(xiàn)在可以用所需的知識(shí)進(jìn)行真正設(shè)計(jì)了，學(xué)習(xí)完本章節(jié)可以運(yùn)用所學(xué)習(xí)的知識(shí)實(shí)現(xiàn)網(wǎng)頁(yè)的多列布局，本章將圍繞流動(dòng)模型、浮動(dòng)模型、層布局模型等布局技術(shù)展開(kāi)研究，以便為后面制作復(fù)雜的網(wǎng)頁(yè)打下基礎(chǔ)。
第13、CSS代碼縮寫(xiě)，占用更少的帶寬
雖然CSS文件或者嵌入的CSS都純文本文件，為了減少css樣式代碼的編寫(xiě)量，代碼縮寫(xiě)是很有必要的。這樣可以使用戶訪問(wèn)網(wǎng)頁(yè)的時(shí)候占用更少的帶寬。
第14、單位和值
本章節(jié)對(duì)單位如顏色的單位和值等時(shí)行詳細(xì)講解。
第15、css樣式設(shè)置小技巧
本章節(jié)對(duì)在日常前端開(kāi)發(fā)中常用到css樣式設(shè)置小技巧進(jìn)行了講解。
2.DIV+CSS技術(shù)如何入門
CSS是Cascading Style Sheets（層疊樣式表單）的簡(jiǎn)稱。
更多的人把它稱作樣式表。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。
借助CSS的強(qiáng)大功能，網(wǎng)頁(yè)將在您豐富的想象力下千變?nèi)f化，越來(lái)越多的人在學(xué)習(xí)而很多初學(xué)者沒(méi)有一個(gè)頭緒，整理了一些學(xué)習(xí)的方法給大家。 一. CSS學(xué)習(xí)重在方法！ 學(xué)習(xí)任何東西都是一樣，從小學(xué)、中學(xué)、大學(xué)，除了學(xué)習(xí)知識(shí)外就是去學(xué)習(xí)方法！ 要想掌握CSS， 首先要學(xué)會(huì)HTML！ 再來(lái)談一下學(xué)習(xí)過(guò)程中的細(xì)節(jié)，因?yàn)橐粋€(gè)樣式它是不可能脫離HTML頁(yè)面的，HTML不與樣式結(jié)合的話， CSS就失去了存在的意義。
所以一般書(shū)中都會(huì)舉一個(gè)例子，然后讓你上機(jī)測(cè)試效果，這是筆者想讓你有對(duì)樣式表CSS有一個(gè)初步的印象，告訴你CSS能做什么。一個(gè)小例子：“麻雀雖小，五臟俱全”，你可能看不懂每一個(gè)語(yǔ)句的真正意思。
但是你可以記得例子的模式，以后在實(shí)踐中不斷地用，不斷用的過(guò)程就是不斷記的過(guò)程，所以不能恢心，不能總認(rèn)為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恒心，一定會(huì)到達(dá)終點(diǎn)的。 閱讀一本書(shū)，一般來(lái)說(shuō)第一次要先把整個(gè)書(shū)通讀一遍，不理解的也要往下看，在往下看的過(guò)程中你也許會(huì)找到那個(gè)問(wèn)題的答案。
看完后你有一個(gè)大概的印象，但一定有很多不明白的地方，沒(méi)關(guān)系，繼續(xù)往下看。第二遍你就要邊看邊做學(xué)習(xí)筆記了，把你認(rèn)為是重點(diǎn)的部分寫(xiě)上，還有，你覺(jué)得有疑問(wèn)的部分也要記下，帶著疑問(wèn)看下去，如果沒(méi)有答案，你可以去BBS上發(fā)一個(gè)貼子，好心人還是很多的，提示一句：“一定要學(xué)會(huì)如何去問(wèn)問(wèn)題！” 。
你還要上機(jī)去練習(xí)書(shū)上的例子，最讓你困惑的：“一是記不住，二是對(duì)概念的理解有誤（這一條可能是書(shū)譯的不好，另外就是你的理解不對(duì)）”，對(duì)于第一條你就要樹(shù)立信心，堅(jiān)持再堅(jiān)持下去。當(dāng)你到達(dá)終點(diǎn)時(shí)你回發(fā)現(xiàn)一切都是順理成章的事。
因?yàn)槟闩α?，努力了就?huì)有回報(bào)，有結(jié)果。 有好多人也看了，但是沒(méi)有什么進(jìn)步，主要有以下幾個(gè)原因： 原因一：壓力不夠，因?yàn)橛胁簧偃吮热缑拦W(xué)CSS，因?yàn)槭强磩e人學(xué)，所以學(xué)之，不學(xué)就沒(méi)優(yōu)勢(shì)！這樣的壓力是很小的，學(xué)不好還有美工這碗飯。
原因二：只是業(yè)余學(xué)習(xí)，這樣學(xué)還只是玩一玩，因?yàn)槟悴灰欢ǚ且赃@門技術(shù)吃飯。 原因三：方法不對(duì)，有的人只是在看教程，但他不動(dòng)手去做，我以前就是看的太多，做的太少，所以有了實(shí)踐你才能把理論的東西揉進(jìn)去。
二. 掌握CSS的四個(gè)學(xué)習(xí)階段 階段一：不去想瀏覽器的兼容性問(wèn)題的情況下能做出頁(yè)面，但頁(yè)面里到處用TABLE的 模式DIV寫(xiě)出的頁(yè)面。 階段二：想到了兼容性問(wèn)題，但無(wú)法提前預(yù)防，只會(huì)修補(bǔ)問(wèn)題，大量使用HACK技術(shù)（我對(duì)HACK技術(shù)只是知道，但用的很少） 階段三：可提前預(yù)防BUG，但樣式表中大量應(yīng)用了ID,CLASS,CSS譯過(guò)來(lái)是重疊樣式表，比如“DIV P SPAN”。
這句代碼是標(biāo)明DIV子元素中P的子元素SPAN，這樣寫(xiě)就可以定義SPAN的樣式了，不用在SPAN中加入CLASS了。這也就是CSS的優(yōu)點(diǎn)所在，為什么不好好利用而一定要定義一個(gè)CLASS呢！ 階段四：這一階段是最難的，良好的HTML語(yǔ)義結(jié)構(gòu)、合理的CSS、可重復(fù)利用的樣式。
良好的語(yǔ)義有這方面的文章，合理的CSS，這兩方面以后一定會(huì)寫(xiě)專題來(lái)研究。三. CSS初學(xué)者常見(jiàn)問(wèn)題： 第一個(gè)要求是縮圖的正下方要有個(gè)標(biāo)題。
作法相當(dāng)直接了當(dāng)：在你的 HTML 里放上圖片，接著一個(gè)斷行 （BR），再把標(biāo)題放在一個(gè)段落 （P） 里并且置中 （利用 CSS）。 接著要讓這些縮圖跟標(biāo)題成對(duì)地排列在瀏覽器窗口里。
使用表格排版時(shí)，這一對(duì)對(duì)的縮圖跟標(biāo)題會(huì)被分別放置在 TD 里。在使用 CSS 排版時(shí)，我們要把它們分別放置在 DIV 里。
為了讓它們能水平排列在窗口上，我們用 CSS 讓這些 DIV 往左浮動(dòng) （FLOAT）。 問(wèn)題1：學(xué)CSS應(yīng)該選什么樣書(shū)來(lái)讀？ 先推薦幾本：《CSS權(quán)威指南》《網(wǎng)站重構(gòu)》《網(wǎng)站布局實(shí)錄》《HTML參考大全》 問(wèn)題2：用什么軟件編輯CSS代碼？ 只要已經(jīng)能達(dá)到會(huì)手寫(xiě)的程度，用什么軟件都可以，推薦使用DreamWeaver外掛TopStyle（最新版本是Pro V3.12）。
問(wèn)題3：先寫(xiě)HTML還是先寫(xiě)CSS？ 網(wǎng)上有很多種答案：先寫(xiě)HTML后寫(xiě)CSS；先寫(xiě)CSS后寫(xiě)HTML；兩者同時(shí)寫(xiě)。兩者一起寫(xiě)更適合初學(xué)者，先寫(xiě)CSS或者先寫(xiě)HTML對(duì)于初學(xué)者都不是恰當(dāng)?shù)玫姆椒ā?/p>
如果讓一個(gè)人編寫(xiě)代碼，你告訴他先寫(xiě)HTML，寫(xiě)完后 HTML不能修改了，然后你寫(xiě)CSS，如果他可以寫(xiě)出來(lái)，那這個(gè)人一定是一個(gè)水平非常高的Builder了！所以對(duì)于初學(xué)者，多數(shù)情況下建議同時(shí)編寫(xiě)，具體說(shuō)一下步驟： 先要把站點(diǎn)建好，目錄建好，比如我們建好文件夾CSS,IMAGES，這兩個(gè)是最其本的，然后新建一個(gè)HTML文件，一個(gè)style.css一個(gè)空 的樣式表，把HTML頁(yè)連接到這個(gè)外部樣式表。 然后我們先寫(xiě)HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，這些 布局部分包括外套部分，頭部分，中間部分，左，中，右，版權(quán)部分等。
寫(xiě)好這些后，這時(shí)你可以到樣式表中寫(xiě)樣式，或者你在接著寫(xiě)布局里的部分，拿頭部為例，在頭部寫(xiě)入LOGO部分，NAV部分也同樣加入ID或CLASS。其它同理。
為。
3.CSS怎么學(xué)
css可以分為：內(nèi)部樣式，行內(nèi)樣式，外部樣式，內(nèi)部樣式：是在做網(wǎng)頁(yè)的<head></head>；中<style type="type-css">；填寫(xiě)你想寫(xiě)的東西</style>
行內(nèi)樣式：在<div><table><td><tr>；就是在這些中例如：<td style="">；這種格式
外部樣式：在外面寫(xiě)一個(gè)CSS為后綴名的文件，通過(guò)在<head>；里面<link rel="stylesheet" href="你寫(xiě)的文件名" type="text/css">
以上就是css的總介紹
4.誰(shuí)給個(gè)關(guān)于CSS的初學(xué)教程
樓主你好，首先很榮幸能得到你的邀請(qǐng)回答你的問(wèn)題
其次，對(duì)于樓主想要的教程，也有一些，但可能不符合你的味口，可能看了半天仍無(wú)收獲
然而我推薦樓主一個(gè)新手學(xué)習(xí)css的不錯(cuò)的方法，希望能夠幫到你！
方法如下：
1.從局部出發(fā)：從一個(gè)小的部分的樣式寫(xiě)起，目的是讓你熟悉css樣式的元素有哪些，那些元素都有一些什么作用，怎么樣使用這些元素，以及div+css的屬性有哪些？等等這一步是基礎(chǔ)！
比如，我有一個(gè)層，里面包括標(biāo)題列表還有背景圖片，層的寬度高度這些屬性，還要設(shè)置標(biāo)題列表的字體樣式顏色等等，能用的屬性都用上，從一個(gè)小的層，實(shí)現(xiàn)各種能表現(xiàn)出來(lái)的形式；
2.整體布局很重要：有了第一步基礎(chǔ)，你可以嘗試布局框架，把網(wǎng)頁(yè)分成一塊一塊，先把框框?qū)懞?，各瀏覽器中測(cè)試不要錯(cuò)位了，可以先用不同的背景顏色看效果，不錯(cuò)位就行，框架ok了之后，這樣你的而已應(yīng)該就沒(méi)問(wèn)題了，你可以嘗試更多方式寫(xiě)布局，兩欄式，三欄式等都可以.
3.把整體跟局部結(jié)合，也就是把你第一步中的基礎(chǔ)東西寫(xiě)好，往框架的層里面填充就好了！所以第一步很關(guān)鍵！
建議反復(fù)用這三步多加練習(xí)，你的css技術(shù)一定會(huì)上一臺(tái)階的！
另外推薦樓主一個(gè)不錯(cuò)的網(wǎng)站
多去學(xué)習(xí)，相信你會(huì)成功！
5.div+css教程教程
CSS/DIV頁(yè)面布局設(shè)計(jì)
/category/css-div-web-design
CSS/DIV網(wǎng)頁(yè)設(shè)計(jì)視頻教程目錄
2007年05月01日 星期二
歡迎您來(lái)到前沿視頻教室，下面列出的是CSS/DIV網(wǎng)頁(yè)設(shè)計(jì)視頻教程列表，我們還會(huì)不斷地推出相關(guān)的課程， 如果您有興趣，歡迎您常來(lái)這里看一看！
CSS基礎(chǔ)知識(shí)與核心概念
CSS初探 - CSS基本知識(shí) - 第1課
CSS基本語(yǔ)法與核心概念 - CSS基本知識(shí) - 第2課
設(shè)置豐富的文字效果 - CSS基本知識(shí) - 第3課
CSS/DIV布局專題講解
設(shè)置圖片效果 - CSS/DIV專題講解 - 第1課
設(shè)置網(wǎng)頁(yè)背景 - CSS/DIV布局專題講解 - 第2課
設(shè)置表格與表單的樣式 - CSS/DIV布局專題講解 - 第3課
設(shè)置頁(yè)面和瀏覽器的元素 - CSS/DIV布局專題 - 第4課
用CSS制作漂亮的菜單- CSS/DIV布局專題講解 - 第5課
CSS濾鏡的應(yīng)用 - CSS/DIV布局專題講解 - 第6課
理解CSS定位與div布局 - CSS/DIV布局專題講解 - 第7課
CSS排版 - CSS/DIV布局專題講解 - 第8課
網(wǎng)頁(yè)變幻 - CSS/DIV布局專題講解 - 第9課
CSS與其他技術(shù)
CSS與Javascript的綜合應(yīng)用 - CSS與其他技術(shù) - 第1課
CSS與XML的綜合運(yùn)用 - CSS與其他技術(shù) - 第2課
CSS與AJAX的綜合應(yīng)用 - CSS與其他技術(shù) - 第3課
CSS/DIV綜合實(shí)踐
博客設(shè)計(jì)DIY - CSS/DIV綜合實(shí)踐 - 第1課
小型工作室 - CSS/DIV綜合實(shí)踐 - 第2課
公司網(wǎng)站 - CSS/DIV綜合實(shí)踐 - 第3課
購(gòu)物網(wǎng)站設(shè)計(jì) - CSS/DIV綜合實(shí)踐 - 第4課
旅游觀光網(wǎng)站設(shè)計(jì) - CSS/DIV綜合實(shí)踐 - 第5課
