2017-9-19-css（二）

時間 2019-11-12

標籤 css 欄目 CSS 简体版

原文原文鏈接

屬性選擇器

1.匹配全部具備egon屬性的元素，不考慮它的值。
[egon] {
color: red;
}
2.匹配全部標籤p屬性爲alex的元素不考慮值。 
p[alex]{
color: red;
}

3.匹配全部alex屬性等於「hello1」的元素。
[egon="hello1"]{
color: darkorange;
}

僞類選擇器

 a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

 a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
 a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
 a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
 僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
 a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        
 a:link {color: #FF0000} /* 未訪問的連接 */
        
 a:visited {color: #00FF00} /* 已訪問的連接 */
        
 a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
        
 a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

 1 style 裏的代碼
 2 
 3          #a1:link{
 4               color: darkorange;
 5           }
 6         #a1:hover{
 7             color: cyan;
 8         }
 9         #a1:active
10         {
11             color: yellow;
12         }
13         #a1:visited{
14             color: chocolate;
15         }
16 
17 
18 body裏的代碼
19 <a href="" id="a1">welcome to oldboy</a>

示例代碼

選擇器的優先級

內嵌> id > class > element

樣式的繼承

 body {
            font-size: 25px;
        }
        

.c1{
         color: cyan;
    }


<div class="c1">樣式的繼承</div>

.c1就繼承了body類中的樣式，字體都會變成25px。

文本的其餘屬性

font-size: 10px;

line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除連接的下劃線

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px; 首行縮進150px

letter-spacing: 10px; 字母間距

word-spacing: 20px; 單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫

浮動的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9         }
10 
11         .r1{
12             width: 300px;
13             height: 100px;
14             background-color: #7A77C8;
15             float: left;
16         }
17         .r2{
18             width: 200px;
19             height: 200px;
20             background-color: wheat;
21             /*float: left;*/
22 
23         }
24         .r3{
25             width: 100px;
26             height: 200px;
27             background-color: darkgreen;
28             float: left;
29         }
30     </style>
31 </head>
32 <body>
33 
34 <div class="r1"></div>
35 <div class="r2"></div>
36 <div class="r3"></div>
37 
38 
39 
40 </body>
41 </html>

示例代碼

magin和padding

margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding:           用於控制內容與邊框之間的距離；   
Border(邊框):     圍繞在內邊距和內容外的邊框。
Content(內容):   盒子的內容，顯示文本和圖像。

1. 二二二
2. 二十二
3. CSS(二十二)
4. 二週二次課
5. Matlab：二維圖（二）
6. 二十二反射
7. 打卡二十二
8. jQuery EasyUI(二十二)
9. Java基本語法二二二
10. 二叉樹（二）線索二叉樹
更多相關文章...
• Hibernate的二級緩存 - Hibernate教程
• MySQL BIT、BINARY、VARBINARY、BLOB（二進制類型） - MySQL教程
• RxJava操作符（二）Transforming Observables
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。