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

CSS

CSS基础(基础选择器+字体文本相关样式)

發布時間：2024/1/1 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础(基础选择器+字体文本相关样式) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

目錄

前言

一、css的語法規則

?二、css引入方式

三、基礎選擇器

四、字體和文本樣式

字體樣式

文本樣式

line-height行高

前言

層疊樣式表(Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

一、css的語法規則

?二、css引入方式

內嵌式：CSS 寫在style標簽中

外聯式：CSS 寫在一個單獨的.css文件中?

?行內式：CSS 寫在標簽的style屬性中

?CSS常見三種引入方式的特點區別有哪些:

三、基礎選擇器

選擇器的作用：選擇頁面中對應的標簽，方便后續設置樣式。

1.標簽選擇器

結構：標簽名 { css屬性名：屬性值； }

作用：通過標簽名，找到頁面中所有這類標簽，設置樣式

注意點：

(1). 標簽選擇器選擇的是一類標簽，而不是單獨某一個

(2). 標簽選擇器無論嵌套關系有多深，都能找到對應的標簽

<!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 {color: red;}</style> </head><body><p><div>這是第一個盒子</div><div>這是第二個盒子</div></p> </body></html>

2. 類選擇器

結構：.類名 { css屬性名：屬性值； }

作用：通過類名，找到頁面中所有帶有這個類名的標簽，設置樣式

注意點：

(1). 所有標簽上都有class屬性，class屬性的屬性值稱為類名（類似于名字）

(2). 類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或者中劃線開頭

(3). 一個標簽可以同時有多個類名，類名之間以空格隔開

(4). 類名可以重復，一個類選擇器可以同時選中多個標簽

<!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>/* 類選擇器網頁里面使用非常多*/.red {color: red;}.font {font-size: 50px;}</style> </head><body><div class="red font">這是第一個盒子</div><div>這是第二個盒子</div><div class="red">這是第三個盒子</div><p class="red">我是段落標簽,里面的字是紅色</p> </body></html>

3. id選擇器

結構：#id屬性值 { css屬性名：屬性值； }

作用：通過id屬性值，找到頁面中帶有這個id屬性值的標簽，設置樣式

注意點：

(1). 所有標簽上都有id屬性

(2). id屬性值類似于身份證號碼，在一個頁面中是唯一的，不可重復的！

(3). 一個標簽上只能有一個id屬性值

(4). 一個id選擇器只能選中一個標簽

<!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>#red {color: red;font-size: 100px;}#red2 {color: red;}</style> </head><body><h1 id="red">這是第一個一級標題</h1><h1 id="red2">這是第二個一級標題</h1> </body></html>

4. 通配符選擇

結構：* { css屬性名：屬性值； }

作用：找到頁面中所有的標簽，設置樣式?

注意點：

(1).開發中使用極少，只會在極特殊情況下才會用到

(2).在基礎班小頁面中可能會用于去除標簽默認的margin和padding

<!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>/* 通配符選擇器 * */* {color: red;}</style> </head><body><p>段落標簽</p><h1>標題標簽</h1><div>盒子標簽</div><span>小盒子標簽</span><strong>加粗</strong><em>傾斜</em><ins>下劃線</ins><del>刪除線</del><a href="#">超鏈接標簽</a><ul><li>1</li><li>2</li><li>3</li></ul> </body></html>

5.類與id的區別?

class類名與id屬性值的區別

class類名相當于姓名，可以重復，一個標簽可以同時有多個class類名
id屬性值相當于身份證號碼，不可重復，一個標簽只能有一個id屬性值

類選擇器與id選擇器的區別

類選擇器以 . 開頭
id選擇器以 # 開頭

四、字體和文本樣式

字體樣式

字體大小：font-size

屬性名：font-size
取值：數字 + px
注意點：
谷歌瀏覽器默認文字大小是16px
單位需要設置，否則無效

字體粗細：font-weight

屬性名：font-weight
取值：
關鍵字：

純數字：100~900的整百數：

注意點：
不是所有字體都提供了九種粗細，因此部分取值頁面中無變化。
實際開發中以：正常、加粗兩種取值使用最多。
字體樣式：font-style
屬性名：font-style
取值：
正常（默認值）：normal
傾斜：italic

字體類型：font-family

無襯線字體（sans-serif）

特點：文字筆畫粗細均勻，并且首尾無裝飾

場景：網頁中大多采用無襯線字體

常見該系列字體：黑體、Arial

?襯線字體（serif）

?特點：文字筆畫粗細不均，并且首尾有筆鋒裝飾

?場景：報刊書籍中應用廣泛

常見該系列字體：宋體、Times New Roman

?等寬字體（monospace）

?特點：每個字母或文字的寬度相等

?場景：一般用于程序代碼編寫，有利于代碼的閱讀和編寫

?常見該系列字體：Consolas、fira code

屬性名：font-family
常見取值：具體字體1,具體字體2,具體字體3,具體字體4,...,字體系列
渲染規則：
1. 從左往右按照順序查找，如果電腦中未安裝該字體，則顯示下一個字體
2. 如果都不支持，此時會根據操作系統，顯示最后字體系列的默認字體
注意點：
1. 如果字體名稱中存在多個單詞，推薦使用引號包裹
2. 最后一項字體系列不需要引號包裹
3. 網頁開發時，盡量使用系統常見自帶字體，保證不同用戶瀏覽網頁都可以正確顯示

字體類型：font屬性連寫

屬性名：font (復合屬性)
取值： ?font : style weight size family;
省略要求：
只能省略前兩個，如果省略了相當于設置了默認值
注意點：
如果需要同時設置單獨和連寫形式
要么把單獨的樣式寫在連寫的下面
要么把單獨的樣式寫在連寫的里

文本樣式

1. 文本縮進：text-indent

屬性名：text-indent
取值：
數字+px
數字+em（推薦：1em = 當前標簽的font-size的大小）

2. 文本水平對齊方式：text-align

屬性名：text-align
取值：

注意點：
如果需要讓文本水平居中，text-align屬性給文本所在標簽（文本的父元素）設置

3. 文本修飾：text-decoration

屬性名：text-decoration
取值：

? 注意點：
開發中會使用 text-decoration : none ; 清除a標簽默認的下劃線

文本樣式總結：

line-height行高

作用：控制一行的上下行間距
屬性名：line-height
取值：
數字+px
倍數（當前標簽font-size的倍數）
應用：
1. 讓單行文本垂直居中可以設置 line-height : 文字父元素高度
2. 網頁精準布局時，會設置 line-height : 1 可以取消上下間距
行高與font連寫的注意點：
如果同時設置了行高和font連寫，注意覆蓋問題
font : style weight size/line-height family ;

應用：

案例一：卡片居中

<!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;}.box {width: 234px;height: 300px;background-color: #fff;/* 盒子居中 */margin: 0 auto;}div {/* 文字居中 */text-align: center;}img {width: 160px;}.one {/* 字體大小 */font-size: 14px;/* 高度 */height: 25px;}.two {font-size: 12px;color: #ccc;height: 30px;}.three {font-size: 14px;color: #ffa500;}</style> </head><body><div class="box"><img src="./img/car.jpg" alt=""><div class="one">九號平衡車</div><div class="two">成年人的玩具</div><div class="three">1999元</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>.box {/* 寬 */width: 800px;/* 盒子水平居中 */margin: 0 auto;}h1 {/* 文字水平居中 */text-align: center;}.center {text-align: center;}.gray {/* 文字顏色 */color: #808080;}.blue {color: #87ceeb;}a {/* 下劃線 */text-decoration: none;}.indet {/* 縮進 */text-indent: 2em;}</style> </head><body><div class="box"><h1>《自然》評選改變科學的10個計算機代碼項目</h1><p class="center"><span class="gray">2077年01月28日14:58</span><span class="blue">新浪科技</span><a href="#">收藏本文</a></p><hr><p class="indet">2019年，事件視界望遠鏡團隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發光環形物體的圖像并不是傳統的圖片，而是經過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區的射電望遠鏡所得到的數據，研究人員進行了數學轉換，最終合成了這張標志性的圖片。研究團隊還發布了實現這一壯舉所用的編程代碼，并撰文記錄這一發現，其他研究者也可以在此基礎上進一步加以分析。</p><p class="indet">這種模式正變得越來越普遍。從天文學到動物學，在現代每一項重大科學發現的背后，都有計算機的參與。美國斯坦福大學的計算生物學家邁克爾·萊維特因“為復雜化學系統創造了多尺度模型”與另兩位研究者分享了2013年諾貝爾化學獎，他指出，今天的筆記本電腦內存和時鐘速度是他在1967年開始獲獎工作時實驗室制造的計算機的1萬倍。“我們今天確實擁有相當可觀的計算能力，”他說，“問題在于，我們仍然需要思考。”</p><p class="indet">如果沒有能夠解決研究問題的軟件，以及知道如何編寫并使用軟件的研究人員，一臺計算機無論再強大，也是毫無用處的。如今的科學研究從根本上已經與計算機軟件聯系在一起，后者已經滲透到研究工作的各個方面。近日，《自然》（Nature）雜志將目光投向了幕后，著眼于過去幾十年來改變科學研究的關鍵計算機代碼，并列出了其中10個關鍵的計算機項目。</p><p class="indet">最初的現代計算機并不容易操作。當時的編程實際上是手工將電線連接成一排排電路來實現的。后來出現了機器語言和匯編語言，允許用戶用代碼為計算機編程，但這兩種語言都需要對計算機的架構有深入的了解，使得許多科學家難以掌握。20世紀50年代，隨著符號語言的發展，特別是由約翰·巴克斯及其團隊在加州圣何塞的IBM開發的“公式翻譯”語言Fortran，這種情況發生了變化。利用Fortran，用戶可以用人類可讀的指令來編程，例如x= 3 + 5。然后由編譯器將這些指令轉換成快速、高效的機器代碼。</p></div> </body></html>

總結

選擇器的作用：選擇頁面中對應的標簽，方便后續設置樣式。

text-align : center 能讓?文本、span標簽、a標簽、 input標簽、img標簽居中

?注意點： 1. 如果需要讓以上元素水平居中， text-align : center 需要給以上元素的父元素設置

如果需要讓div、p、h（大盒子）水平居中可以通過margin : 0 auto ; 實現

注意點：

?如果需要讓 div、p、h（大盒子）水平居中，直接給當前元素本身設置即可
margin：0 auto 一般針對于固定寬度的盒子，如果大盒子沒有設置寬度，此時會默認占滿父元素的寬度拓展標

總結

以上是生活随笔為你收集整理的CSS基础(基础选择器+字体文本相关样式)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：常用电源电路设计
下一篇：【CSS基础】基础选择器+字体文本相关样