css3-2?? CSS3選擇器和文本字體樣式
一、總結
一句話總結：是要記下來的，記下來可以省很多事。
?
1、css的基本選擇器中的:first-letter和:first-line是什么意思？
:first-letter選擇第一個單詞，:first-line選擇第一行
?
2、css的偽類選擇器有哪三種，分別是什么意思？
偽類選擇器:
:hover
:focus
::selection?? 所選的東西，比如文字
?
3、css字體設置4劍客是哪四個？
1.font-family 字體類型
2.font-size?? 字體大小
3.font-style? 字體樣式
4.font-weight 字體粗細
?
4、css中文本塊設置，必加的兩個屬性是什么？
overflow設置超出部分滾動條，wordbreak設置橫向wordbreak
15 overflow:auto; 16 word-break:break-all; ?
5、css的偽類選擇器中的p::selection是什么意思？
所選文字
11 p::selection{
12 background: #f00; 13 } ?
二、CSS3選擇器和文本字體樣式
1、相關知識
css選擇器:
? 常用選擇器
? 基本選擇器
? 層級選擇器
? 偽類選擇器
? 屬性選擇器
常用選擇器:
1.標簽
2.id
3.類
4.關聯
5.組合
基本選擇器:
? :first-child
? :first-letter
? :first-line
? :last-child
? :nth-child(2)
層級選擇器:
? a b
? a>b
? a+b
偽類選擇器:
:hover
:focus
::selection
屬性選擇器:
? [id]
? [id=use1]
? [name*=us]
? [name^=en]
? [name$=en]
常見的樣式屬性和值:
1.字體與顏色
2.背景屬性
3.文本屬性
4.邊框屬性
5.鼠標光標屬性
6.列表樣式
7.定位屬性
8.內外邊距
9.浮動和清除浮動
10.滾動條
11.顯示和隱藏
字體:
1.font-family 字體類型
2.font-size?? 字體大小
3.font-style? 字體樣式
4.font-weight 字體粗細
文本:
1.letter-spacing?? 字間距
2.word-spacing???? 詞間距
3.text-decoration? 下劃線
4.text-align?????? 對齊
5.text-indent????? 縮進
6.line-height????? 行高
7.color??????????? 顏色
8.word-break?????? 折行
?
2、代碼
word-break文字折行
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family:微軟雅黑; 9 } 10 11 div{ 12 width:500px; 13 height:100px; 14 border:2px solid #f00; 15 overflow:auto; 16 word-break:break-all; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 23 </div> 24 </body> 25 </html>
selection偽類選擇器
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 p::selection{ 12 background: #f00; 13 } 14 </style> 15 </head> 16 <body> 17 <h2>linux技術</h2> 18 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> </body> 19 </html>
?
?
?
?
?
?
?
?
?
?
