css學習筆記(未完待續)

來源:互聯網
上載者:User
1、某些字型有些電腦是無法顯示的,但是宋體與黑體都能顯示。
2、圖1
3、圖2 ,p是div的子項目,如果p和color屬性和div是一樣的話可以這樣寫:style="color:inherit",這句話不要也行,因為預設是繼承父節點的屬性的。記住:總是繼承離自己最近的標記的樣式。。。即:總是繼承離自己最近的父標記。
4、邊框:圖3 ,注意一般用第三種簡潔方法。
5、當同一個 HTML 元素被不止一個樣式定義時,會使用哪個樣式呢。
一般而言,所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中,其中數字 4 擁有最高的優先權。
瀏覽器預設設定
外部樣式表
內部樣式表(位於 <head> 標籤內部)
內聯樣式(在 HTML 元素內部)
因此,內聯樣式(在 HTML 元素內部)擁有最高的優先權,這意味著它將優先於以下的樣式聲明:<head> 標籤中的樣式聲明,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(預設值)。
6、屬性值 repeat 導致映像在水平垂直方向上都平鋪,就像以往背景映像的通常做法一樣。repeat-x 和 repeat-y 分別導致映像只在水平或垂直方向上重複,no-repeat 則不允許映像在任何方向上平鋪。
預設地,背景映像將從一個元素的左上方開始。請看下面的例子:
body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
7、為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同類型的值對於背景映像的放置稍有差異。
8、.bb{text-decoration:line-through}
a{
text-decoration:overline; text-decoration:underline;
}


<a href="#" class="bb">是否</a>
注意:會使用.bb。。如果有class的話就會使用class的css樣式。

9、<div> 是一個區塊層級元素,也就是說,瀏覽器通常會在 div 元素前後放置一個分行符號。



注意:div所謂的換行只是指的是隨著p、h1~H6等會自動換行的元素換行。。。。。。。。

9、普通文本(比如段落)的預設大小是 16 像素 (16px=1em)。1em 等於當前的字型尺寸。
10、可以為元素的內邊距設定百分數值。百分數值是相對於其父元素的 width 計算的,這一點與外邊距一樣。所以,如果父元素的 width 改變,它們也會改變。
11、樣式是邊框最重要的一個方面,這不是因為樣式控制著邊框的顯示(當然,樣式確實控制著邊框的顯示),而是因為如果沒有樣式,將根本沒有邊框。這是因為如果邊框樣式為 none,即邊框根本不存在,那麼邊框就不可能有寬度,因此邊框寬度自動化佈建為 0,而不論您原先定義的是什麼。由於 border-style 的預設值是 none,如果沒有聲明樣式,就相當於 border-style: none。因此,如果您希望邊框出現,就必須聲明一個邊框樣式。
CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式,包括 none。
例如,您可以為把一幅圖片的邊框定義為 outset,使之看上去像是“凸起按鈕”:
a:link img {border-style: outset;}


12、
如何使用捲軸來顯示元素內溢出的內容。。
<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>


<body>
<p>如果元素中的內容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示捲軸等行為。</p>


<div>
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll,不論是否需要,使用者代理程式都會提供一種滾動機制。因此,有可能即使元素框中可以放下所有內容也會出現捲軸。預設值是 visible。
</div>
</body>


</html>
13、
  clip 屬性剪裁絕對位置元素。
當一幅映像的尺寸大於包含它的元素時會發生什麼呢。"clip" 屬性允許您規定一個元素的可見尺寸,這樣此元素就會被修剪並顯示為這個形狀。
<html>
<head>
<style type="text/css">
img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>


<body>
<p>clip 屬性剪下了一幅映像:</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>


</html>
14、垂直柏拉圖像:
<html>


<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>


<body>


<p>
這是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位於段落中的映像。
</p> 


<p>
這是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位於段落中的映像。
</p>


</body>


</html>

15、
  絕對位置的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。
16、
 CSS中的一些元素是區塊層級元素,表示它們會自動另起一行。<li>預設應該是垂直方向上排列的,這就表示<li>是區塊層級元素
17、
 SS2 引入了一種新的簡單選取器 - 通配選取器(universal selector),顯示為一個星號(*)。該選取器可以與任何元素匹配,就像是一個萬用字元。
例如,下面的規則可以使文檔中的每個元素都為紅色:
* {color:red;}
這個聲明等價於列出了文檔中所有元素的一個分組選取器。利用通配選取器,只需敲一次鍵(僅一個星號)就能使文檔中所有元素的 color 屬性值指定為 red。
18、
   CSS 類別選取器

類別選取器允許以一種獨立於文件項目的方式來指定樣式。

該選取器可以單獨使用,也可以與其他元素結合使用。

提示:只有適當地標記文檔後,才能使用這些選取器,所以使用這兩種選取器通常需要先做一些構想和計劃。

要應用樣式而不考慮具體設計的元素,最常用的方法就是使用類別選取器。 修改 HTML 程式碼

在使用類別選取器之前,需要修改具體的文檔標記,以便類別選取器正常工作。

為了將類別選取器的樣式與元素關聯,必須將 class 指定為一個適當的值。請看下面的 HTML 程式碼:

<h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p>

在上面的代碼中,兩個元素的 class 都指定為 important:第一個標題( h1 元素),第二個段落(p 元素)。 文法

然後我們使用以下文法向這些歸類的元素應用樣式,即類名前有一個點號(.),然後結合通配選取器:

*.important {color:red;}

如果您只想選擇所有類名相同的元素,可以在類別選取器中忽略通配選取器,這沒有任何不好的影響:

.important {color:red;}

親自試一試 結合元素選取器

類別選取器可以結合元素選取器來使用。

例如,您可能希望只有段落顯示為紅色文本:

p.important {color:red;}

選取器現在會匹配 class 屬性包含 important 的所有 p 元素,但是其他任何類型的元素都不匹配,不論是否有此 class 屬性。選取器 p.important 解釋為:“其 class 屬性值為 important 的所有段落”。 因為 h1 元素不是段落,這個規則的選取器與之不匹配,因此 h1 元素不會變成紅色文本。

如果你確實希望為 h1 元素指定不同的樣式,可以使用選取器 h1.important:

p.important {color:red;}h1.important {color:blue;}

親自試一試 CSS 多類別選取器

在上一節中,我們處理了 class 值中包含一個詞的情況。在 HTML 中,一個 class 值中可能包含一個詞列表,各個詞之間用空格分隔。例如,如果希望將一個特定的元素同時標記為重要(important)和警告(warning),就可以寫作:

<p class="important warning">This paragraph is a very important warning.</p>

這兩個詞的順序無關緊要,寫成 warning important 也可以。

我們假設 class 為 important 的所有元素都是粗體,而 class 為 warning 的所有元素為斜體,class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作:

.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}

親自試一試

通過把兩個類別選取器連結在一起,僅可以選擇同時包含這些類名的元素(類名的順序不限)。

如果一個多類別選取器包含類名列表中沒有的一個類名,匹配就會失敗。請看下面的規則:

.important.urgent {background:silver;}

不出所料,這個選取器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此,如果一個 p 元素的 class 屬性中只有詞 important 和 warning,將不能匹配。不過,它能匹配以下元素:

<p class="important urgent warning">This paragraph is a very important and urgent warning.</p>

親自試一試

重要事項:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正確地處理多類別選取器。

19、與類不同,在一個 HTML 文檔中,識別碼選取器會使用一次,而且僅一次。不能再同一個文檔中多次使用。。。。

20、

有關後代選取器有一個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。

例如,如果寫作 ul em,這個文法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的嵌套層次多深。

因此,ul em 將會選擇以下標記中的所有 em 元素:

<ul>  <li>List item 1    <ol>      <li>List item 1-1</li>      <li>List item 1-2</li>      <li>List item 1-3        <ol>          <li>List item 1-3-1</li>          <li>List item <em>1-3-2</em></li>          <li>List item 1-3-3</li>        </ol>      </li>      <li>List item 1-4</li>    </ol>  </li>  <li>List item 2</li>  <li>List item 3</li></ul>
 
21、html > body table + ul {margin-top:20px;}

、這個選取器解釋為:選擇緊接在 table 元素後出現的所有兄弟 ul 元素,該 table 元素包含在一個 body 元素中,body 元素本身是 html 元素的子項目。22、

a:link {color: #FF0000}/* 未訪問的連結 */a:visited {color: #00FF00}/* 已訪問的連結 */a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */a:active {color: #0000FF}/* 選定的連結 */
<html><head><style type="text/css">a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}</style></head><body><p><b><a href="/index.html" target="_blank">這是一個連結。</a></b></p><p><b>注釋:</b>在 CSS 定義中,a:hover 必須位於 a:link 和 a:visited 之後,這樣才會生效。</p><p><b>注釋:</b>在 CSS 定義中,a:active 必須位於 a:hover 之後,這樣才會生效。</p></body></html>
 

偽類可以與 CSS 類配合使用:

a.red : visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的連結被訪問過,那麼它將顯示為紅色。23、

<html><head><style type="text/css">a.one:link {color: #ff0000}a.one:visited {color: #0000ff}a.one:hover {color: #ffcc00}a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}a.three:link {color: #ff0000}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}a.four:link {color: #ff0000}a.four:visited {color: #0000ff}a.four:hover {font-family: monospace}a.five:link {color: #ff0000; text-decoration: none}a.five:visited {color: #0000ff; text-decoration: none}a.five:hover {text-decoration: underline}</style></head><body><p>請把滑鼠移動到這些連結上,以查看效果:</p><p><b><a class="one" href="/index.html" target="_blank">這個連結改變顏色</a></b></p><p><b><a class="two" href="/index.html" target="_blank">這個連結改變字型大小</a></b></p><p><b><a class="three" href="/index.html" target="_blank">這個連結改變背景顏色</a></b></p><p><b><a class="four" href="/index.html" target="_blank">這個連結改變字型系列</a></b></p><p><b><a class="five" href="/index.html" target="_blank">這個連結改變文本裝飾</a></b></p></body></html>
23、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">input:focus{background-color:yellow;}</style></head><body><form action="form_action.asp" method="get">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="Submit" /></form><p><b>注釋:</b>如果已規定 !DOCTYPE,那麼 Internet Explorer 8 (以及更高版本)支援 :focus 偽類。</p></body></html>
24、
虛擬元素

W3C:"W3C" 列指示出該屬性在哪個 CSS 版本中定義(CSS1 還是 CSS2)。

屬性 描述 CSS
:first-letter 向文本的第一個字母添加特殊樣式。 1
:first-line 向文本的首行添加特殊樣式。 1
:before 在元素之前新增內容。 2
:after 在元素之後新增內容。 2
25、
偽類

W3C:"W3C" 列指示出該屬性在哪個 CSS 版本中定義(CSS1 還是 CSS2)。

屬性 描述 CSS
:active 向被啟用的元素添加樣式。 1
:focus 向擁有鍵盤輸入焦點的元素添加樣式。 2
:hover 當滑鼠懸浮在元素上方時,向元素添加樣式。 1
:link 向未被訪問的連結添加樣式。 1
:visited 向已被訪問的連結添加樣式。 1
:first-child 向元素的第一個子項目添加樣式。 2
:lang 向帶有指定 lang 屬性的元素添加樣式。 2

25、 CSS 尺寸屬性

CSS 尺寸屬性允許你控制元素的高度和寬度。同樣,還允許你增加行間距。

屬性 描述
height 設定元素的高度。
line-height 設定行高。
max-height 設定元素的最大高度。
ma
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.