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變成紅色,字體大小變成50px --><div class="red font">這是第一個盒子</div><!-- 第二個div不變色 --><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）
- ?襯線字體（serif）
- ?等寬字體（monospace）
- 屬性名：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基础】基础选择器+字体文本相关样