【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桩设备-施工
- 下一篇: CentOS镜像说明(附下载地址)