CSS基礎(chǔ)知識篇
第1章、CSS初步體驗
1、行內(nèi)樣式表的優(yōu)先級最高,其次是采用<link>標記的鏈接式,再次是位于<style></style>之間的內(nèi)嵌式,最后才是@import的導(dǎo)入式樣式表。link和style的優(yōu)先級是一樣的,取決于誰在前誰在后,還要考慮優(yōu)先級加權(quán)的情況。籠統(tǒng)的說link和style的優(yōu)先級誰高誰低是錯誤的。
2、濾鏡漸變filter只在IE瀏覽器下有效,并且在IE7中必須將安全級別設(shè)置成Medium.
第2章、CSS的基本語法
2、標記選擇器、類別選擇器、ID選擇器。聲明包含屬性和值兩部分。
3、在沒有定義選擇器的時候,各個HTML標記采用瀏覽器自身默認的顯示方式。
4、類別選擇器還有一種更直觀的使用方法:直接在標記聲明后接類別名稱,以此來區(qū)別該標記。類別名稱中包含標記和選擇器。
5、在HTML標記中,還可以同時給一個標記運用多個class類別選擇器,從而將兩個類別的樣式風格同時運用到一個標記中。
6、ID選擇器的使用基本和類別選擇器相似,不同之處在于ID選擇器只能在HTML頁面中使用一次,因此針對性更強。一個id最多只能賦予一個 HTML標記。
7、集體聲明、嵌套聲明。類別選擇器和ID選擇器都可以進行嵌套。還可以多層嵌套。
8、子標記會繼承父標記的所有樣式風格,并可以在父標記樣式風格的基礎(chǔ)上再產(chǎn)生新的樣式。
第3章、用CSS設(shè)置豐富的文字效果
9、通常文章正文中使用的是易讀性較強的serif字體,用戶長時間閱讀下不容易疲勞。而標題和表格則采用較醒目的sans-serif字體,他們需要顯著和醒目,但不必長時間盯著這些文字來閱讀。WEB設(shè)計及瀏覽器設(shè)置中也是推薦遵循此原則。
10、絕對單位及其含義
絕對單位 說明
in Inch,英寸
cm Centimeter,厘米
mm Millimeter,毫米
pt Point,印刷的點數(shù),在一般的顯示器中1pt相當于1/72inch
pc Pica,1pc=12pt
11、除了利用物理單位設(shè)定文字的絕對大小的方法,css還提供了一些絕對大小的關(guān)鍵字作為font-size的值,總共7個:xx- small,x-small,small,medium,large,x-large,xx-large.絕對大小在不同的顯示器中顯示效果有差異,因此不推薦使用。
12、px顯示大小與顯示器的大小及其分辨率有關(guān)。采用“%”或者“em”都是相對父標記而言的,如果沒有設(shè)定父標記的字體大小,則相對于瀏覽器的默認值。
13、文字效果可以同時賦值,只需用空格隔開即可。
第4章、用CSS設(shè)置圖片效果
當vertical-align的值為bottom或者sub時,IE與Firefox的顯示效果是不一樣的,所以建議盡量少使用瀏覽器顯示效果不一樣的屬性值。
第5章、用CSS設(shè)置網(wǎng)頁中的背景
豎排版語句“writing-mode:tb-rl”只有IE瀏覽器才支持,firefox瀏覽器并不支持該CSS屬性。
第6章、用CSS設(shè)置表格與表單的樣式
1、<table>標記中的summary屬性值用于概括整個表格的內(nèi)容,在用瀏覽器瀏覽頁面時,它的效果是不可見的,但對搜索引擎等則十分重要。
2、在HTML頁面中構(gòu)建表格框架時應(yīng)該盡量遵循表格的標準標記,養(yǎng)成良好的編寫習慣,并適當?shù)睦胻ab、空格和空行來提高代碼的可讀性,從而降低后期的維護成本。
3、通過CSS中定義奇數(shù)行和偶數(shù)行的樣式設(shè)置,增加易讀性,主要配合服務(wù)器的動態(tài)生成。
4、各個瀏覽器的顯示差異主要是顯示器的默認值不同導(dǎo)致的,通常的解決辦法是制定該值。
第7章、用CSS設(shè)置頁面和瀏覽器的元素
當前激活狀態(tài)“a:active”一般顯示的情況非常少,因此很少使用。
第8章、用CSS制作實用的菜單
1、IE對list-style-type的很多屬性支持不是很理想
2、“display:block”語句可以將超鏈接設(shè)置成塊元素。
第9章、CSS濾鏡的應(yīng)用
CSS+DIV美化和布局篇
第10章、理解CSS定位與DIV布局
1、<div>標記在HTML3.0時代就已出現(xiàn),但并不常用,<span>標記在HTML4.0時才被引進。<div>和<span>的作用都是獨立出各個區(qū)塊。區(qū)別在于,<div>是一個塊級(block- level)元素,它包圍的元素會自動換行。而<span>僅僅是一個行內(nèi)元素(inline elements),在它的前后不會換行。<span>沒有結(jié)構(gòu)上的意義,純粹是應(yīng)用樣式,當其他行內(nèi)元素都不合適的時候,就可以使用<span>元素。此外,<span>可以包含在<div>標記中,成為他的子元素,而翻過來則不行。
2、一個盒子模型由content(內(nèi)容)、border(邊框)、padding(間隙)和margin(間隔)4個部分組成。
3、在瀏覽器中,width和height的值都指的是width+padding或者height+padding的值。
4、Border的groove、insert、outset和ridge這幾個值,IE都支持得不夠理想。IE不對border的背景上色,而 firefox的作用域為content+padding+border。
5、Padding用于控制content與border之間的距離。Margin指的是元素與元素之間的距離、塊與塊之間的距離。
6、在css中可以用過設(shè)置塊元素的clear屬性清除對float的影響。
第11章、CSS+div布局方法剖析
第12章、CSS+div美化與布局實戰(zhàn)
1、文檔類型聲明用來說明文件使用的xHTML或者HTML是什么版本,分過渡型、嚴格型、框架型。這句代碼能夠使得IE瀏覽器能更加正確地解析 CSS語法。
2、 <script language=”javascript”>
var number = new Date().getSeconds() % 3 + 1; //隨機數(shù),從1到3
//隨機選擇CSS外部文件
document.write(‘<link href=”0′ + number.toString() + ’/0′ + number.toString() + ’.css” rel=”stylesheet” type=”text/css”>’);
</script>
這段代碼產(chǎn)生隨機數(shù),從而在刷新頁面的時候調(diào)用不同的外部樣式文件。
CSS混合應(yīng)用技術(shù)篇
第13章、CSS與JavaScript的綜合應(yīng)用
第14章、CSS與XML的綜合應(yīng)用
1、XML文件中的</br>標記,在HTML中它表示換行,在XML中僅是一個空標記,沒有任何意義。當將它的display屬性設(shè)置為block塊時,則可以起到換行的效果。
2、XML的數(shù)據(jù)默認都不是塊元素,而是行內(nèi)元素。所以在XML中有時需要將各個行都設(shè)置為塊,數(shù)據(jù)排列就會清晰很多。
3、Firefox等一些瀏覽器并不支持XML文件中行內(nèi)元素的width屬性,也不支持CSS常用的屬性覆蓋方法,因此顯示效果并不是很理想。
第15章、CSS與Ajax的綜合應(yīng)用
ajax不是單一的技術(shù),而是4種技術(shù)的集合。Javascript、CSS、DOM、XMLHttpRequest對象。Javascript像膠水一樣將各個部分粘合在一起,定義應(yīng)用的工作流和業(yè)務(wù)邏輯。
通過使用Javascript操作DOM來改變和刷新用戶界面,不斷地重繪和重新組織顯示給用戶的數(shù)據(jù),并且處理用戶基于鼠標和鍵盤的交互。
CSS為應(yīng)用提供了統(tǒng)一的外觀,并且為以編程方式操作DOM提供了強大的途徑。在Ajax中,CSS仍然是不可缺少的美術(shù)大師。
XMLHttpRequest對象則用來與服務(wù)器進行異步通信,在用戶工作時提交用戶的請求并獲取最新的數(shù)據(jù)。
Ajax的核心是Javascript對象XMLHttpRequest。
綜合案例篇
第16章、我的博客
第17章、小型工作室網(wǎng)站
第18章、企業(yè)網(wǎng)站
第19章、網(wǎng)上購物網(wǎng)站
第20章、旅游網(wǎng)站
(轉(zhuǎn)載)
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點擊舉報。