當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

css3-2 CSS3选择器和文本字体样式

發布時間：2023/11/30 CSS 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3-2 CSS3选择器和文本字体样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9208734.html

總結

以上是生活随笔為你收集整理的css3-2 CSS3选择器和文本字体样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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