PHP基礎(chǔ)教程_零基礎(chǔ)學(xué)習(xí)PHP_PHP基礎(chǔ)教程_兄弟連PHP教程_CSS簡介

1、CSS簡介 網(wǎng)址： 電話：400 700 1307 CSS DHTML簡介 何為CSS(層疊樣式表) CSS的幾種設(shè)置方式 樣式規(guī)則的選擇器 樣式規(guī)則的注釋與有效范圍 用DreamWeaver產(chǎn)生CSS 樣式屬性詳解 DHTML 簡介 DHTML=HTML 腳本語言腳本語言 JavaScript + 層疊樣式表層疊樣式表 CSS 指定一個網(wǎng)頁 的元素 決定元素的大小 顏色和位置 操縱網(wǎng)頁的元素 DHTML 是制作是制作動態(tài)動態(tài) HTML 頁面的技術(shù)！頁面的技術(shù)！ DHTML 示例 閃爍文本 移動文本 消隱文本 設(shè)置屬性 這個段落應(yīng)用了樣式 這個段落按默認(rèn)樣式顯示 什么是樣式？ 指定顯示樣式 樣

2、式規(guī)則 何為層疊樣式表 CSS是Cascading Style Sheets的簡寫，它 除了可以輕松設(shè)置網(wǎng)頁元素的顯示位置和 格式處，甚至還能產(chǎn)生濾鏡，圖像淡化， 網(wǎng)頁淡入淡出的漸變效果。 簡而言之，CSS就是要對網(wǎng)頁的顯示效果實 現(xiàn)與Word一樣的排版控制。 常用的樣式屬性 屬 性CSS名稱說 明 顏色 color 文本屬性font-size字體大小 font-family字體 text-align文本對齊 邊框?qū)傩?(用于表 單元素) border-style邊框樣式 border-width邊框?qū)挾?border-color邊框顏色 定位屬性 (position) top頂部邊距（上邊距

3、） left左邊距 width寬度 height高度 z-indexz 軸索引號，用于層 CSS的幾種方式 內(nèi)聯(lián)樣式表(Inline styles) 嵌入樣式表(Embedded style sheets) 外部樣式表(Linked style sheets) 輸入樣式表(imported sytle sheets) 內(nèi)聯(lián)樣式表 您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣，那么請采用“行內(nèi) 樣式”。行內(nèi)樣式使用元素標(biāo)簽的 STYLE 屬性定義。 /*關(guān)鍵代碼-*/ 剩余時間：成交結(jié)束 新舊程度：全新 所 在 地：北京 寶貝數(shù)量：5 件 瀏 覽 量：220 次 另送價值50元的充電器套裝！

4、(一個充電器，兩節(jié)充電電池)可使用半年以 應(yīng)用樣式 P font-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我們的樣式絕對統(tǒng)一 嵌入樣式表 樣式表 樣式規(guī)則 所有的段落都采用 P 樣 式，保證樣式統(tǒng)一 行內(nèi)樣式表局限于某個標(biāo)簽，如果希望本網(wǎng)頁內(nèi)的所以 同類標(biāo)簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。 選擇器 用分號隔開 在標(biāo)簽對中定義的每條樣 式規(guī)則的基本格式如下： Selectorproperty:value; property:value; Selector:當(dāng)定義一條樣式規(guī)則時，必須指定受 這條樣式規(guī)則作用的網(wǎng)

5、頁元素。 property:指定那些將要被修改的樣式名稱，即 CSS屬性，如color、font-size等。 value:賦給property的值，即CSS屬性值。 樣式規(guī)則的選擇器 HTML selector Class selector ID selector 關(guān)聯(lián)選擇器 組合選擇器 偽元素選擇器 /*-關(guān)鍵代碼-*/ P /*設(shè)置樣式：字體和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品種特征方面： 1、蛋魚：蛋

6、魚.。 2、龍睛：龍睛.。 3、高頭：高頭.。 內(nèi)嵌樣式- HTML選擇器 HTML選擇器 應(yīng)用H2樣式 應(yīng)用P樣式 內(nèi)嵌樣式- class類選擇器 .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用戶名 密 碼 CLASS類選擇器 應(yīng)用類選擇器： class”類名“ 類選擇器的定義格式為： .類名 樣式規(guī)則; Class selector 要將一種HTML標(biāo)簽所創(chuàng)建的各處網(wǎng)頁元素分成幾類，需要將這個 HTML標(biāo)簽的class屬性設(shè)置為不同的值。 paragraph1 paragraph2 paragraph3 在

7、樣式表中，可以分別為某個HTML標(biāo)簽的各個類別定義樣式規(guī)則： p.stopcolor:red p.warningcolor:yellow 在樣式表中，可以為某個類別的所有HTML標(biāo)簽定義樣式規(guī)則： .blueonecolor:blue 藍(lán)色的題目 藍(lán)色的段落 #fire color:red; font-size: 24px; 我是二級標(biāo)題，火是這樣的我是二級標(biāo)題，火是這樣的 內(nèi)嵌樣式- ID選擇器 ID選擇器 ID選擇器的定義格式為： ID名 樣式規(guī)則; 應(yīng)用ID選擇器：ID”ID名“ ID selector ID屬性用來定義某一個特定的HTML元素，一個 網(wǎng)頁文件中只能有一個元素能使用某一I

8、D屬性值， ID Selector就是為樣式規(guī)則定義語名選擇具有某 一ID屬性值的HTML元素。 text here 在樣式表中，ID值為yellowone的HTML元素的 樣式規(guī)則定義語句如下： 選擇器聲明 關(guān)聯(lián)選擇器是指一個用空格隔開的兩個或更多的單一選擇器組成的字 符串，例如： P EMbackground:yellow .special emcolor:red; #top emcolor:blue p.top.top1 strongcolor:green 其中的“P EM”就是關(guān)聯(lián)選擇器，它表示段落中的強(qiáng)調(diào)文本 （標(biāo)簽對中的內(nèi)容）的背景為黃色，而其它地方出現(xiàn)的強(qiáng) 調(diào)文本則不受影響。 關(guān)

9、聯(lián)選擇器定義的樣式規(guī)則的優(yōu)先權(quán)比單一選擇器定義的樣式規(guī)則的優(yōu) 先權(quán)高，即使用在 P EMbackground:yellow的后面部分定義了如下樣式規(guī)則： EMbackground:green但是，在段落標(biāo)簽中定義的強(qiáng)調(diào)文本仍用黃 色背景。 組合選擇器 為了減少樣式表的重復(fù)聲明，可以在一條樣式規(guī)則定義語句中組合若干 個選擇器，每個選擇器之間用逗號（，）隔開。例如， H1, H2, H3, H4, H5, H6, TDcolor:red; 全局選擇器 希望頁面所有的標(biāo)記都使用同一種CSS樣式，又不希望逐個來生命，這時 候可以利用全局生命符號“*” 外部樣式 根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為： 鏈

10、接（link ）外部樣式表 導(dǎo)入（import）外部樣式表 樣式文件 P . 網(wǎng)頁2網(wǎng)頁3網(wǎng)頁1 鏈接外部樣式表 使用LINK（鏈接）標(biāo)簽 ，語法： 第一步：創(chuàng)建樣式表文件newstyle.css 第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián) 樣式文件：樣式文件： newstyle.css P . Onel.htmanother.htm 第三步：瀏覽查看各網(wǎng)頁 演示演示：鏈接樣式表示例樣式表示例 導(dǎo)入外部樣式表 使用import導(dǎo)入 ，語法： import 樣式表文件.css; import url(樣式表文件.css); 操作步驟同鏈接樣式表 導(dǎo)入樣式表 使用import聲明的例子語句如下： 外部樣式文件外

11、部樣式文件 樣式的混合使用 行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常 需要混合使用： 有關(guān)整個網(wǎng)站統(tǒng)一風(fēng)格的樣式代碼，放置在獨立的樣式文件*.css 某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式 某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式 對于某個HTML標(biāo)簽： 1）如果有多種樣式，如果規(guī)定 的樣式?jīng)]有沖突，則疊加； 2）如果有沖突，則最先考慮行 內(nèi)樣式表顯示，如果沒有，再 考慮內(nèi)嵌樣式顯示，如果還沒 有，最后采用外面樣式表顯示， 否則就按HTML的默認(rèn)樣式顯示； 內(nèi)嵌樣式內(nèi)嵌樣式 行內(nèi)樣式行內(nèi)樣式 某個HTML標(biāo)簽 樣式規(guī)則的注釋與有效范圍 樣式表中的注

12、釋 使用“/*要注釋的內(nèi)容*/”格式進(jìn)行注釋，注釋不能嵌 套，例如，“/*xxx/*yyy*/xxx*/”這樣的注釋是不允 許的。 樣式規(guī)則的繼承 所有嵌套在某個HTML標(biāo)簽中的HTML標(biāo)簽都會繼承外 層標(biāo)簽設(shè)置的樣式規(guī)則。 樣式規(guī)則的優(yōu)先級 ID選擇器CLASS選擇器HTML標(biāo)簽選擇器 內(nèi)聯(lián)樣式表嵌入樣式表鏈接樣式表 樣式屬性分類 CSS中的樣式屬性非常之多，大體上可以分為以 下幾類： 字體 文本 邊框 背景 列表 位置 布局 其它 字體 font-family：字體類型 font-size 絕對大小的設(shè)置為xx-small、x-small、small、medium、large、 x-lar

13、ge、xx-large中的任意一個，xx-small為最小取值，xx- large為最大取值。 相對大小的設(shè)置可以為larger或smaller. 絕對單位有：px、mm、 cm、 in、 pt、 pc. 相對單位有：em、ex、% color 三種表示方法：RRGGBB、rgb(R, G, B)、red. font-weight：字體粗細(xì) font-style：字體斜體 text-decoration：下劃線、頂劃線、刪除線、閃爍 text-transform：英文字母大小寫 font：合并設(shè)置字體樣式 例如，Pfont:italic bold 12pt Times, serif font-

14、family: 宋體宋體, sans-serif; font-weight: normal; color: #0000FF; font-style: normal; font-size: 12px; line-height: 140%; text-decoration: underline; 文本段落 text-align：段落水平對齊 設(shè)置值：center、right、left、justify vertical-align：段落垂直對齊 設(shè)置值：sub、super、top、middle、bottom、10px、 -10px、相對于元素行高屬性的百分比 letter-spacing：字母的間距

15、 word-spacing：單詞的間距 line-height：文本行高 text-indent：縮進(jìn)方式 white-space：排版方式 設(shè)置值：normal、pre、nowrap text-align: center; text-indent: 24px; (可為負(fù)數(shù)可為負(fù)數(shù)) display: block; 邊框、寬度與高度 border-width：邊框?qū)挾?(border-top-width、border-right-width、border-bottom-width、 border-left-width) 設(shè)置值：thin、medium、thick或數(shù)值 border-color

16、：邊框顏色 (border-top-color、border-right-color、border-bottom-color、 border-left-color) border-style：邊框樣式 (border-top-style、border-right-style、border-bottom-style、 border-left-style) 設(shè)置值：none、dotted、dashed、solid、double、groove、ridge、 inset、outset。 border：合并設(shè)置邊框樣式 (border-top、border-right、border-bottom、bor

17、der-left) 例如，A:activeborder:thick double red width：寬度 設(shè)置值：10px絕對值、50%相對值 height：高度 border-left-width: 1px; border-left-style: solid; border-left-color: #0000FF; 背景 background-color：背景顏色 background-color:transparent;/*透明色*/ background-image：背景圖片 例如，background- image:url(/logo.g

18、if) background-repeat：背景重復(fù)方式 設(shè)置值：no-repeat、repeat、repeat-x、repeat-y background-position：背景位置 設(shè)置值：left、center、right、20px 20px、20% 70%、top、 bottom background-attachment：固定或滾動背景 設(shè)置值：fixed、scroll background：合并設(shè)置背景樣式 例如，background:#00cc00 url(logo.jpg) no-repeat bottom right background-color: #CCCCCC; ba

19、ckground-image: url(img/bg.gif); background-repeat: repeat-x; background-position: center top; 頁面和瀏覽器元素的CSS 表格 表單 超鏈接 鼠標(biāo) 滾動條 控制表格 tablecaption-side:bottom; tableborder-collapse:collapse; tr:hovercolor:red; 控制表單 給input添加背景色 一條線的文本框 像文字一樣的按鈕 彩色的下拉框 類似Excel表格的表單 偽元素選擇器 偽元互選擇器是指對同一個HTML元素的各種狀態(tài)和其所 包括的部分內(nèi)

20、容是一種定義方式。例如，對于超鏈接標(biāo)簽 ()的正常狀態(tài)（沒有任何動作前）、訪問的狀態(tài)、 選中狀態(tài)、光標(biāo)移到超鏈接文本上的狀態(tài)，對于段落的首 字母和首行，都可使用偽元素選擇器來定義。 使用偽元素作為選擇器的樣式規(guī)則定義格式： HTML元素：偽元素屬性：值 常用的偽元素： a:link超鏈接的正常狀態(tài)（沒有任何動作前） a:visited訪問過的超鏈接狀態(tài) a:hover光標(biāo)移動到超鏈接上的狀態(tài) a:active選中超鏈接時的狀態(tài) p:first-line段落中的第一行文本 p:first-letter段落中的第一個字母 類選擇器與偽元素一起使用的格式： HTML元素.類名：偽元素屬性：值 鼠標(biāo)樣式cursor： bodycursor:pointer; 設(shè)置值：help、move、crosshair. 滾動條樣