CSS基礎選擇器、文本屬性、引入方式及Chorme調試工具

CSS基礎

1.1 CSS簡介

CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱. 有時我們也會稱之為 CSS 樣式表或級聯樣式表。
CSS 是也是一種標記語言 CSS 主要用于設置 HTML 頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。 CSS 讓我們的網頁更加豐富多彩，布局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮，讓頁面布局更簡單。

總結:

HTML 主要做結構,顯示元素內容.
CSS 美化 HTML ,布局網頁.
CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即結構 ( HTML ) 與樣式( CSS ) 相分離。

1.1.1 CSS的語法規范

使用HTML時，需要遵從一定的語法規范，CSS也是如此。CSS規則由兩個主要的部分構成：選擇器以及一條或者多條聲明

選擇器是用于指定CSS樣式的HTML標簽，花括號內是對該對象設置的具體樣式
屬性和屬性是以“鍵值對”的形式出現
屬性是對指定的對象設置的樣式屬性，例如字體大小，文本顏色等
屬性和屬性值之間用英文“：”分開
多個“鍵值對”之間用英文“；”進行區分

所有的樣式，都包含在

1.1.2 CSS代碼風格

1.樣式格式書寫

2.樣式大小寫風格

3.樣式空格風格

1.2 CSS基礎選擇器

1.2.1 標簽選擇器

書寫步驟

在標簽標簽的上面寫上style標簽
在

1.2.2 類選擇器

在我們使用標簽選擇器的時候發現一個問題就是使用標簽選擇器能把改標簽的樣式全部改變，但是我們如果想把該標簽的某一個元素改變樣式呢？這時候我們該怎么做呢？這時候我們就要用到類選擇器

1.注意事項

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名（自定義，我們自己命名的）。
可以理解為給這個標簽起了一個名字，來表示。
長名稱或詞組可以使用中橫線來為選擇器命名。
不要使用純數字、中文等命名，盡量使用英文字母來表示。
命名要有意義，盡量使別人一眼就知道這個類名的目的

1. 給改該標簽一個class

2.樣式用點定義

3.代碼示例

    <style>/* 類選擇器口訣: 樣式點定義  結構類(class)調用  一個或多個 開發最常用*/.red {color: red;}.star-sing {color: green;}.memeda {  color: pink;}.pink {color: pink;}</style>
</head>
<body><ul><li class="red">冰雨</li><li class="red">來生緣</li><li>李香蘭</li><li class="memeda">生僻字</li><li class="star-sing">江南style</li></ul><div class="red">我也想變紅色</div><div class="pink">我想要變成粉色</div>
</body>

4.效果展示

1.2.3 多類名選擇器

1.多類名的使用方式

2.多類名的使用優點

可以把一些標簽元素相同的樣式(共同的部分)放到一個類里面.
這些標簽都可以調用這個公共的類,然后再調用自己獨有的類.
從而節省CSS代碼,統一修改也非常方便.

3.多類名的使用案例

代碼

 <style>.red {color: red;}.box {width: 100;font-size: 35px;}.pink {color: pink;}</style>
</head>
<body><!-- 多類名使用方式1.在標簽class屬性中寫多個類名2.多個類名中間必須用空格分開 --><div class="box red ">劉德華</div>
<div class="box red ">公孫離</div>
<div class="box red ">西施</div>
<div class="box pink">公孫離</div></body>

效果圖

1.2.4 id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。 HTML 元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以“#" 來定義。

1.語法

2.id 選擇器和類選擇器的區別

類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。
id 選擇器好比人的身份證號碼，全中國是唯一的，不得重復。
id 選擇器和類選擇器最大的不同在于使用次數上。
類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經常和 JavaScript 搭配使用。

3.代碼示例

style>/*id選擇器的口訣：樣式#定義，結構id調用，只能調用一次，別人切勿使用*/#pink {
color: pink;}
</style>
</head>
<body><div id="pink">邁克爾.杰克遜</div>
</body>

1.2.5 通配符*

在 CSS 中，通配符選擇器使用“*”定義，它表示選取頁面中所有元素（標簽）。

1. 語法

通配符選擇器不需要調用，自動就給所有的元素使用樣式
特殊情況才使用，后面講解使用場景(以下是清除所有的元素標簽的內外邊距)

2.使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符選擇器</title><style>* {color: pink;}/* *這里*號把所有標簽html body div span li 等等的標簽都改為了紅色 */</style>
</head>
<body><div>我的</div><span>我的</span><ui><li>還是我的</li></ui>
</body>
</html>

4.選擇器總結

1.3 CSS文本屬性

CSS Fonts (字體)屬性用于定義字體系列、大小、粗細、和文字樣式（如斜體）。

1.3.1 字體系列

各種字體之間必須使用英文狀態下的逗號隔開
一般情況下,如果有空格隔開的多個單詞組成的字體,加引號.
盡量使用系統默認自帶字體，保證在任何用戶的瀏覽器中都能正確顯示
最常見的幾個字體：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

1. 代碼示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>font-famlity的使用</title><style>.kaiti {font-family: "微軟雅黑";}.weiruanyahei {font-family: 'Times New Roman', Arial, Helvetica, sans-serif;}p {font-family: "宋體";}</style>
</head>
<body><h4>字體的使用</h1><p class="kaiti">哈哈哈哈</p><p class="weiruanyahei">我的小貓暴脾氣</p>
</body></html>

2.效果展示

1.3.2 字體大小

px（像素）大小是我們網頁的最常用的單位
谷歌瀏覽器默認的文字大小為16px
不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小
可以給 body 指定整個頁面文字的大小