CSS每日学习笔记（3）
8.1.2019
1.CSS偽類：用于向某些選擇器添加特殊的效果。
偽類的語法：
selector : pseudo-class {property: value}
CSS 類也可與偽類搭配使用。
a.red : visited {color: #FF0000}
?
<a class="red" href="css_syntax.asp">CSS Syntax</a>
?
2. first-child 偽類可以用來選擇元素的第一個子元素。
提示：最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。（實際會選取第一個該元素—p）
注釋：必須聲明?<!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。
?
3. :lang 偽類使你有能力為不同的語言定義特殊的規則。
在下面的例子中，:lang 類為屬性值為en的 q 元素定義引號的類型：
q:lang(en)
? {
? quotes: '"' '"' "'" "'";
? }
<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
輸出："This is a 'big' quote"
?
4. CSS偽元素：用于向某些選擇器添加特殊的效果。
偽元素的語法：
selector:pseudo-element {property:value;}
CSS 類也可以與偽元素配合使用：
selector.class:pseudo-element {property:value;}
?
| 屬性 | 描述 | CSS |
| :first-letter | 向文本的第一個字母添加特殊樣式。 | 1 |
| :first-line | 向文本的首行添加特殊樣式。 | 1 |
| :before | 在元素之前添加內容。 | 2 |
| :after | 在元素之后添加內容。 | 2 |
?
5. CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
height設置元素的高度；? line-height設置行高；? max-height設置元素的最大高度；max-width設置元素的最大寬度；? min-height設置元素的最小高度；? min-width設置元素的最小寬度；? width設置元素的寬度。
?
6. CSS 分類屬性允許你控制如何顯示元素，設置圖像顯示于另一元素中的何處，相對于其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。
| 屬性 | 描述 |
| clear | 設置一個元素的側面是否允許其他的浮動元素。 |
| cursor | 規定當指向某元素之上時顯示的指針類型。 |
| display | 設置是否及如何顯示元素。 |
| float | 定義元素在哪個方向浮動。 |
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。 |
| visibility | 設置元素是否可見或不可見。 |
?
7.導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的。以下例子中的代碼是用在垂直、水平導航欄中的標準代碼。
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
從列表中去掉圓點和外邊距：
ul
{
list-style-type:none;
margin:0;
padding:0;
}
注釋：list-style-type:none - 刪除圓點。導航欄不需要列表項標記。
把外邊距和內邊距設置為 0 可以去除瀏覽器的默認設定。
7.1若需構建垂直導航欄，添加
a
{
display:block;
width:60px;
}
解釋：
display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
width:60px - 塊元素默認占用全部可用寬度。我們需要規定 60 像素的寬度。
7.2若需構建水平導航欄，兩種方法，使用行內或浮動列表項。如果希望鏈接擁有相同的尺寸，就必須使用浮動方法。
行內列表項：規定<li>元素為行內元素
li
{
display:inline;
}
浮動列表項：為了讓所有鏈接擁有相等的寬度，浮動 <li> 元素并規定 <a> 元素的寬度：
li
{
float:left;
}
a
{
display:block;
width:60px;
}
?
8.創建透明圖像：使用opacity屬性
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性?opacity?來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用濾鏡?filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。
?
9. :hover 選擇器用于選擇鼠標指針浮動在上面的元素。:hover 選擇器可用于所有元素，不只是鏈接。
?
10.在圖像中創建透明框并加入文本：首先，我們創建一個 div 元素 (class="background")，它有固定的高度和寬度、背景圖像，以及邊框。然后我們在第一個 div 內創建稍小的 div (class="transbox")。"transbox" div 有固定的寬度、背景色和邊框 - 并且它是透明的。在透明 div 內部，我們在 p 元素中加入了一些文本。
?
11. 媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。
@media 規則使你有能力在相同的樣式表中，使用不同的樣式規則來針對不同的媒介。
媒介類型名稱對大小寫不敏感。
| 媒介類型 | 描述 |
| all | 用于所有的媒介設備。 |
| aural | 用于語音和音頻合成器。 |
| braille | 用于盲人用點字法觸覺回饋設備。 |
| embossed | 用于分頁的盲人用點字法打印機。 |
| handheld | 用于小的手持的設備。 |
| | 用于打印機。 |
| projection | 用于方案展示，比如幻燈片。 |
| screen | 用于電腦顯示器。 |
| tty | 用于使用固定密度字母柵格的媒介，比如電傳打字機和終端。 |
| tv | 用于電視機類型的設備。 |
?
12.盡量避免使用的東西：behaviors，behaviors 是一種通過使用 CSS 向 HTML 元素添加行為的方法。只有 Internet Explorer 支持 behavior 屬性。使用JavaScript?和?HTML DOM?替代。
?
復習CSS相關內容，準備開始學習JavaScript
轉載于:https://www.cnblogs.com/zccfrancis/p/11294951.html
總結
以上是生活随笔為你收集整理的CSS每日学习笔记（3）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何判断两个IP地址是不是处于同一网段？
- 下一篇： java并发编程-----深入剖析Thr