Css詳解PPT.ppt

1、CSS概述,目 錄,CSS是什么 為什么要使用CSS CSS 中盒狀模型 CSS語法 引入CSS的4種方式 CSS選擇器 CSS的繼承和優(yōu)先級 常見樣式介紹 學習方法,需要具備的基礎(chǔ)知識,在繼續(xù)學習之前，你需要對下面的知識有基本的了解： HTML XHTML,HTMLproperty: value; 示例: p color : red; font-weight : bold; #dataCell text-align : center; ,引入CSS的4種方式,行內(nèi)引入 段落文本 內(nèi)嵌引入 樣式代碼 外部導入 import 樣式文件url; 外部鏈接 ,CSS 選擇器,含義及作用 通過CSS選

2、擇器定位哪些HTML元素需要應用樣式，及應用哪些樣式。 選擇器分類 基本選擇器 復合選擇器 特殊選擇器,基本選擇器,author Html標記選擇器 span font-size : 20px; 類別選擇器 . myClass color : #4499ee ; ID選擇器 #title font-family : 幼圓 ,復合選擇器,“交集”選擇器 div.divClass div#divId “并集”選擇器 div, h1#htitle, p.pClass 后代選擇器 div h1#htitle div, h1#htitle, p.pClass ,特殊選擇器,超鏈接標簽擁有特殊類型的選擇器

3、 a 為所有的超鏈接標簽設(shè)置樣式 a:link 普通狀態(tài)下的超鏈接樣式 a:visited 已經(jīng)點擊過的超鏈接樣式 a:hover 鼠標經(jīng)過該超鏈接時的樣式 a:active 鼠標點擊超鏈接時的樣式,常用的樣式屬性,內(nèi)嵌樣式-2 選擇器,根據(jù)選擇器的不同，內(nèi)嵌樣式又分為： HTML 選擇器 CLASS 類選擇器 ID 選擇器,/*-關(guān)鍵代碼-*/ P /*設(shè)置樣式：字體和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品種特

4、征方面： 1、蛋魚：蛋魚.。 2、龍睛：龍睛.。 3、高頭：高頭.。,內(nèi)嵌樣式-3 HTML選擇器,應用H2樣式,應用P樣式,內(nèi)嵌樣式-4 class類選擇器, .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用戶名 密 碼 ,CLASS類選擇器,應用類選擇器： class”類名“,類選擇器的定義格式為： .類名 樣式規(guī)則; , #fire color:red; font-size: 24px; 我是二級標題，火是這樣的 我是段落，火是這樣的 ,內(nèi)嵌樣式-5 ID選擇器,ID選擇器,ID選擇器的定義格式為： ID名

5、 樣式規(guī)則; ,應用ID選擇器：ID”ID名“, A /*設(shè)置超鏈接不帶下劃線*/ color: blue; text-decoration: none; /*文本修飾：無*/ A:hover /*鼠標在超鏈接上方停留時，帶下劃線 */ color: red; text-decoration:underline; /*文本修飾：下劃線*/ HEAD 俺是超鏈接，移過來我就顯示下劃線 ,內(nèi)嵌樣式-6 特殊的選擇器,HTML選擇器,特殊的偽類：A代表超鏈接，hover代表鼠標懸停,外部樣式,根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為： 鏈接（LINK ）外部樣式表 導入（import）外部樣式表,樣式文件

6、 P . ,網(wǎng)頁2,網(wǎng)頁3,網(wǎng)頁1,鏈接外部樣式表,使用LINK（鏈接）標簽 ，語法： ,第一步：創(chuàng)建樣式表文件newstyle.css,第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián),樣式文件： newstyle.css P . ,Onel.htm,another.htm,第三步：瀏覽查看各網(wǎng)頁,演示：鏈接樣式表示例,導入外部樣式表,使用import導入 ，語法： import 樣式表文件.css; ,操作步驟同鏈接樣式表,外部樣式文件,樣式的混合使用,行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常 需要混合使用： 有關(guān)整個網(wǎng)站統(tǒng)一風格的樣式代碼，放置在獨立的樣式文件*.css 某些樣式不同的頁

7、面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式 某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式,對于某個HTML標簽： 1）如果有多種樣式，如果規(guī)定的樣式?jīng)]有沖突，則疊加； 2）如果有沖突，則最先考慮行內(nèi)樣式表顯示，如果沒有，再考慮內(nèi)嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認樣式顯示；,內(nèi)嵌樣式,行內(nèi)樣式,某個HTML標簽, 層標簽,關(guān)鍵代碼 Z-index=1，我是第一層，我是容器，包含圖片段落 Z-index=2，我是第二層，包含圖片和段落 ,使用 Z index指定是哪一層,是塊級容器標簽，可以包含圖片、標題、段落、文字等,圖片,段落,top,left, 標簽,

8、所有韓款童裝10元/件起拍嘍 ,是行級容器標簽，不可以包含圖片、標題、段落等，只能包含文字內(nèi)容,CSS 盒狀模型,CSS 修飾頁面 DIV 層的時候，把一個 DIV 塊看作是一個有內(nèi)外邊框的盒子,CSS 盒狀模型,CSS樣式的繼承,繼承:子元素將繼承父元素所定義的樣式 作者:李白 p元素雖然沒有定義樣式，但會繼承其父元素div所定義的樣式 如果子元素定義了和父元素相同的樣式屬性，不同的樣式值，或者同一元素分別以不同的樣式選擇器定義了相同的樣式屬性，不同的樣式值，就涉及到樣式的優(yōu)先級問題,CSS樣式的優(yōu)先級原則,子元素的樣式會覆蓋父元素定義的相同樣式 同一元素不同樣式選擇器定義相同樣式時,優(yōu)先級為: s