【CSS基础】基础选择器+字体文本相关样式
生活随笔
收集整理的這篇文章主要介紹了
【CSS基础】基础选择器+字体文本相关样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 1.CSS基礎選擇器
- 1.1 標簽選擇器
- 1.2 類選擇器
- 1.3 id選擇器
- 1.4 通配符選擇器
- 1.5 基礎選擇器總結
- 2.CSS字體樣式
- 2.1 字體大小
- 2.2 字體粗細
- 2.3 字體樣式（是否傾斜）
- 2.4 字體系列 font-family
- 2.5 字體font相關屬性的連寫
- 2.6 字體屬性總結
- 3.CSS文本樣式
- 3.1 文本縮進
- 3.2 文本水平對齊方式
- 3.3 文本修飾
- 3.4 行間距（行高）
- 3.5 文本顏色
- 3.6 小例子
- 4.CSS引入方式
- 5.綜合案例
1.CSS基礎選擇器
1.1 標簽選擇器
標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式。
語法：
標簽名 {屬性1: 屬性值1;屬性2: 屬性值2;屬性3: 屬性值3;... }作用：
通過標簽名，找到頁面中所有這類標簽，設置樣式
注意點：
標簽選擇器選擇的是一類標簽，而不是單獨某一個
標簽選擇器無論嵌套關系有多深，都能找到對應的標簽
1.2 類選擇器
如果想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽，可以使用 類選擇器 。
CSS 語法：
.類名 {屬性1: 屬性值1;... }HTML 語法：
<div class="red">變紅色</div>類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個 . 號顯示。
作用：
通過類名，找到頁面中所有帶有這個類名的標簽，設置樣式
注意：
1.3 id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 # 來定義。
語法：
#id名 {屬性1: 屬性值1;... }注意：
id 選擇器和類選擇器的區別：
- 類選擇器 (class) 好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用
- id 選擇器好比人的身份證號碼，全中國是唯一的，不可重復（同一個 id 選擇器只能調用一次）
- id 選擇器和類選擇器最大的不同在于使用次數上
- 類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經常和 JavaScript 搭配使用
再次強調：同一 id 只能定義一次，同一 id 選擇器也只能調用一次！（對于 CSS 修改樣式來說，最好使用類選擇器，id 選擇器主要與后面的 JS 搭配使用）。
1.4 通配符選擇器
在 CSS 中，通配符選擇器使用 * 定義，它表示選取頁面中所有元素（標簽）。
語法：
* {屬性1: 屬性值1;... }- 通配符選擇器不需要調用，自動就給所有的元素使用樣式
- 特殊情況才使用，后面講解使用場景
1.5 基礎選擇器總結
| 標簽選擇器 | 可以選出所有相同的標簽，比如：p | 不能差異化選擇 | 較多 | p {color: red;} |
| 類選擇器 | 可以選出 1 個或者 多個 標簽 | 可以根據需求選擇 | 非常多 | .nav {color: red;} |
| id 選擇器 | 一次只能選擇 1 個標簽 | ID 屬性只能在每個 HTML 文檔中出現一次，也只能調用一次 | 一般和 js 搭配 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標簽 | 選擇的太多，有部分不需要 | 特殊情況使用 | * {color: red;} |
- 每個基礎選擇器都有使用場景，都需要掌握
- 如果是修改樣式，類選擇器是使用最多的
2.CSS字體樣式
2.1 字體大小
CSS 使用 font-size 屬性定義字體大小。
p {font-size: 20px; }- px（像素）大小是我們網頁的最常用的單位
- 谷歌瀏覽器默認的文字大小為：16px
- 不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小
- 可以給 body 指定整個頁面文字的大小
2.2 字體粗細
CSS 使用 font-weight 屬性設置文本字體的粗細。
p {font-weight: bold; }| normal | 默認值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100-900 | 400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意這個數字后面不跟單位 |
- 學會讓加粗標簽（比如 h 和 strong 等）變為不加粗，或者讓其他標簽加粗
- 實際開發時，我們更喜歡用數字表示粗細
2.3 字體樣式（是否傾斜）
CSS 使用 font-style 屬性設置文本的風格。
p {font-style: normal; }| normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style: normal; |
| italic | 瀏覽器會顯示斜體的字體樣式 |
注意： 平時我們很少給文字加斜體，反而要給斜體標簽 (em、i) 改為不傾斜字體。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 傾斜 */font-style: italic;}em {/* 正常的, 不傾斜 */font-style: normal;}</style> </head> <body><div>div文字</div><em>em</em> </body> </html>2.4 字體系列 font-family
屬性名： font-family
常見取值： 具體字體1,具體字體2,具體字體3,具體字體4,…,字體系列
- 具體字體：“Microsoft YaHei”、微軟雅黑、黑體、宋體、楷體等……
- 字體系列：sans-serif、serif、monospace等……
渲染規則：
注意點：
如果字體名稱中存在多個單詞，推薦使用引號包裹
最后一項字體系列不需要引號包裹
網頁開發時，盡量使用系統常見自帶字體，保證不同用戶瀏覽網頁都可以正確顯示
2.5 字體font相關屬性的連寫
屬性名： font (復合屬性)
取值：
- font : style weight size family;
省略要求：
- 只能省略前兩個，如果省略了相當于設置了默認值
注意點：
- 使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，并且各個屬性間以空格隔開
- 不需要設置的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用
2.6 字體屬性總結
| font-family | 字體 | 實際工作中按照團隊約定來寫字體 |
| font-weight | 字體屬性 | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜是 italic 不傾斜是 normal 工作中我們最常用 normal |
| font-size | 字號 | 我們通常用的單位是 px 像素，一定要跟上單位 |
| font | 字體連寫 | 1、字體連寫是有順序的不能隨意換位置，2、其中字號和字體必須同時出現 |
3.CSS文本樣式
3.1 文本縮進
text-indent 屬性用來指定文本的第一行的縮進，通常是將段落的首行縮進。
div {text-indent: 10px; }通過設置該屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。
p {text-indent: 2em; }em 是一個相對單位，就是當前元素 (font-size) 1 個文字的大小，如果當前元素沒有設置大小，則會按照父元素的 1 個文字大小。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {/* text-indent: 50px; *//* 首行縮進2個字的大小 *//* 默認字號: 16px ; 32 *//* text-indent: 40px;font-size: 20px; *//* em: 一個字的大小 */text-indent: 2em;font-size: 40px;}</style> </head> <body><p>2019年，事件視界望遠鏡團隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發光環形物體的圖像并不是傳統的圖片，而是經過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區的射電望遠鏡所得到的數據，研究人員進行了數學轉換，最終合成了這張標志性的圖片。研究團隊還發布了實現這一壯舉所用的編程代碼，并撰文記錄這一發現，其他研究者也可以在此基礎上進一步加以分析。</p> </body> </html>3.2 文本水平對齊方式
text-align 屬性用于設置元素內文本內容的水平對齊方式。
div {text-align: center; }| left | 左對齊（默認值） |
| rigth | 右對齊 |
| center | 居中對齊 |
注意點：
- 如果需要讓文本水平居中，text-align屬性給文本所在標簽（文本的父元素）設置
水平居中方法總結 text-align : center
text-align : center 能讓哪些元素水平居中？
注意點：
- 如果需要讓以上元素水平居中， text-align : center 需要給以上元素的父元素設置
3.3 文本修飾
text-decoration 屬性規定添加到文本的修飾，可以給文本添加 下劃線、刪除線、上劃線 等。
div {text-decoration: underline; }| none | 默認，沒有裝飾線（最常用） |
| underline | 下劃線，鏈接 a 自帶下劃線（常用） |
| overline | 上劃線（幾乎不用） |
| line-through | 刪除線（不常用） |
注意點：
- 開發中會使用 text-decoration : none ; 清除a標簽默認的下劃線
3.4 行間距（行高）
作用： 控制一行的上下行間距
屬性名： line-height
取值：
- 數字+px
- 倍數（當前標簽font-size的倍數）
應用：
行高與font連寫的注意點：
- 如果同時設置了行高和font連寫，注意覆蓋問題
- font : style weight size/line-height family ;
3.5 文本顏色
color 屬性用于定義文本的顏色。
div {color: red; /*定義字體顏色*/ background-color: pink /*定義背景顏色*/ }| 預定義的顏色值 | red，green，blue，black，white，gray |
| 十六進制 | #FF0000，#FF6600，#29D794（每兩位對應：#紅R綠G藍B） |
| RGB 代碼 | rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) |
注意： 開發中最常用的是十六進制。
3.6 小例子
內容垂直居中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 552px;height: 400px;background-color: pink;/* background-color: green; */text-align: center;/* 文字是單行的 *//* 垂直居中技巧: 設置行高屬性值 = 自身高度屬性值 */line-height: 400px;font-size: 61px;}</style> </head> <body><div>文字</div> </body> </html>標簽水平居中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;margin: 0 auto;}</style> </head> <body><div></div> </body> </html>4.CSS引入方式
內嵌式： CSS 寫在style標簽中
- 提示：style標簽雖然可以寫在頁面任意位置，但是通常約定寫在 head 標簽中
外聯式： CSS 寫在一個單獨的.css文件中
- 提示：需要通過link標簽在網頁中引入
| rel | 定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為 “stylesheet”，表示被鏈接的文檔是一個樣式表文件 |
| type | 定被鏈接文檔的 MIME 類型，該屬性最常見的 MIME 類型是 “text/css”，該類型描述樣式表，目前的瀏覽器已經支持省略 “type” 屬性 |
| href | 定義所鏈接外部樣式表文件的 URL，可以是相對路徑，也可以是絕對路徑 |
行內式： CSS 寫在標簽的style屬性中
- 提示：不推薦使用，之后會配合js使用
5.綜合案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 800px;height: 600px;background-color: pink;margin: 0 auto;}h1 {text-align: center;}/* 類選擇器,設置段落居中 */.center {text-align: center;}.color1 {color: #808080;}.color2 {color: #87ceeb;font-weight: 700;}a {text-decoration: none;}.suojin {text-indent: 2em;}</style> </head> <body><div><h1>Linux系統編程之守護進程、線程</h1><p class="center"><span class="color1"> 2022-9-05 18:24</span><span class="color2">Jay Chou</span><a href="#">原文鏈接</a></p><hr><p class="suojin">守護進程（Daemon Process），也就是通常說的Daemon(精靈)進程，是 Linux 中的后臺服務進程，通常獨立于控制終端并且周期性地執行某種任務或等待處理 某些發生的事件。一般采用以 d 結尾的名字。Linux 后臺的一些系統服務進程，沒有控制終端，不能直接和用戶交互。不受用戶登錄、注銷的影響，一直在運行著，他們都是守護進程。如：預讀入緩輸出機制的實現；ftp 服務器；nfs 服務器等。 創建守護進程，最關鍵的一步是調用 setsid 函數創建一個新的 Session，并成為 Session Leader。</p><p class="suojin">多個進程的集合就是進程組，也稱之為作業。BSD 于 1980 年前后向 Unix 中增加的一個新特性。代表一個或多個進程的集合。每個進程都屬于一個進程組。在waitpid函數和 kill 函數的參數中都曾使用到。操作系統設計的進程組的概念，是為了簡化對多個進程的管理。</p><p class="suojin">線程是輕量級的進程（LWP：light weight process），在 Linux 環境下線程的本質仍是進程。在計算機上運行的程序是一組指令及指令參數的組合，指令按照既定的邏輯控制計算機運行。操作系統會以進程為單位，分配系統資源，可以這樣理解，進程是資源分配的最小單位，線程是操作系統調度執行的最小單位。</p></div></body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #f5f5f5;}.goods {width: 234px;height: 300px;background-color: #fff;/* 標簽居中 */margin: 0 auto;/* 內容居中 */text-align: center;}img {width: 160px;}.title {font-size: 14px;line-height: 25px;}.info {font-size: 12px;color: #ccc;line-height: 30px;}.view {font-size: 14px;color: #ffa500;}</style> </head> <body><!-- div用來網頁布局,一個界面可能使用無數次,原則:如果使用div,盡量使用類名控制樣式 --><div class="goods"><img src="C:/Users/LH/Pictures/Jay/jay.jpg" alt=""><div class="title">周杰倫</div><div class="info">Jay Chou</div><div class="view">love you forever</div></div> </body> </html>總結
以上是生活随笔為你收集整理的【CSS基础】基础选择器+字体文本相关样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cfg桩设备型号_武威CFG桩设备-施工
- 下一篇： CSS盒子模型 - 弹性盒模型