4：css 選擇器的概念

Css要控制頁面元素的顯示形式，必須通過一定的方法，指定到該元素。

比如，

1:id選擇器， 就是，給頁面上的元素起一個不重復的id,

然后css, 通過? #id? ，就能控制該元素。

這個概念稱為css選擇器。

?

類選擇器:

用法:? 頁面里有<class="類名">來聲明類

Css里, 用點+類名來選擇這一類的元素.? 例: .className{}

標簽選擇器:

因為html有很多種標簽,如h1,p,div ,img,這樣標簽在頁面里構成很多元素.

css可以通過標簽名來選定頁面內標簽對應的元素.

比如:

P{}, 會對頁面里所有的P標簽生效

Div{},img{} ,則會對頁面里所有的div,img生效.

?

派生選擇器

通過元素的上下級關系來進行選擇,(像地區由大到小的選擇一樣)

比如:

#header img{

}

#header ul {

}

則意味著分別選中#header元素下面的所有img元素和ul元素.

群選擇器

例如:

#header, .intro {}

則意味著, 括號內的css 同時對 #header, .intro 生效.

?

偽類選擇器:

偽類選擇器,選擇不是某一種元素,而是某種元素的某種狀態

對于鏈接,我們可以針對的4種狀態來設置顯示效果.

?鏈接沒被點擊過 :link

?鏈接被點擊過 : visited

?鼠標放在鏈接上 :hover

?鼠標點擊的瞬間 :active

?

順序: l v, h, a

??

通配選擇器: * {}, 通配頁面上所有元素(效率低,用的較少)

?

5：Css 基本寫法

選擇器 {

屬性:值;

}

?

ü?P:?段落

ü?H(1-6):?1-6號標題,文字越來越小

ü?Pre:?保持源碼的原樣格式輸出

?

有一些內容類型,是div是表達不出來的

比如?要求你在頁面內

引入超鏈接,引入一幅圖片,?或者一個flash,或者一段視頻

A?超鏈接,?用法<a?href?=""?title=""?target="">文字或圖片</a>

Img?引入圖片,?用法?<img?src="xxx.gif"?alt="圖片的文字標簽"?title="提示文字"?/>

Flash

Wmv,?這兩個標簽,目前各種瀏覽器的引入方式不一樣,

因此,相相對來說,兼容性較好的引入代碼如下:

　　　　<object type="application/x-shockwave-flash" data="88.swf" width="400" height="300">

　　　　　　<param name="movie" value="88.swf" /> ???????

　　　　</object>

?

　　　　<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="300">

　　　　　　<param name="autoStart" value="false" />

　　　　　　<param name="URL" value="php.wmv" />

　　　　　　<embed autostart="true" src="php.wmv" type="video/x-ms-wmv" width="400" height="300" controls="ImageWindow" console="cons"> </embed>

?　　　　</object>

?

ul無序列表,ol有序列表

有序列表與無序列表?(都是塊狀元素)

<ul>

<li>這是列表項</li>

</ul>

?

<ol>

<li>這是有序列表項</li>

</ol>

?

通過css能控制列表的3個屬性:

List-style-type?:?列表項的顯示標志

List-style-image:?用于替換顯示標志的圖片.

List-style-postion:inside/outside?,顯示標志與列表內容的位置關系

?

注意:

雖然列表有3種屬性,可以方便設置,

但是,我們實際使用中,往往把list-style-type?設為?none;

原因是:不同瀏覽器對于列表的渲染差別很大,

因此要通過css初始化,強制他們保持一致.

?

基本語法:(以3行2列為例)

<table>

<tr><td>?</td><td>?</td></tr>

<tr><td>?</td><td>?</td></tr>

<tr><td>?</td><td>?</td></tr>

</table>

?

CSS屬性控制:

對于table:

?

Border-collapse:?邊框是否融合.

可選值:?separate(表格與表格相互獨立的邊框,默認值)

Collapse,(表格之間的邊框共用).

?

Border-spacing:?邊框間距

用法:?border-spaing:?xpx?ypx?(給兩個像素值,分別代表單元格在x,y軸的距離)

?

Empty-cells:?空表格是否顯示.

可選值:?hide,?show?,默認是hide

?

注意:?如果border-collapse值為?collapse時,?border-spacing,和empty-cells?自動失效.

?

想讓空表格顯示的處理方式:

1:在空單元格里加一個空白符"?";

2:讓表格邊框融合?collapse

?

合并列,合并行的小技巧

1、先把合并后,要消失的td刪除掉
2、數一數留下的td要跨幾行,或幾列
3、再通過rowspan="N",或者colspan="N"

表格的適用范圍:

顯示格式化數據

不適用于頁面布局

轉載于:https://www.cnblogs.com/cnmice/archive/2013/03/08/2949754.html

總結

以上是生活随笔為你收集整理的HTMLCSS 第三天 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。