專欄鏈接 link

下面進行專欄介紹

本專欄是自己學前端的征程，純手敲的代碼，自己跟著黑馬課程學習的，并加入一些自己的理解，對代碼和筆記
進行適當修改。希望能對大家能有所幫助，同時也是請大家對我進行監督，對我寫的代碼進行建議，互相學習。

開始嘍

CSS定義

層疊樣式表，是一種樣式表語言，用來描述HTLML文檔的呈現（美化內容）。

書寫位置

title標簽下方添加style雙標簽，style標簽里書寫CSS代碼。

示例

<title>CSS初體驗</title>
<style>
/*選擇器{}*/
p{
/*CSS屬性*/color：red;
}
</style>

注意

屬性名和屬性值成對出現->鍵值對

CSS引入方式

內部樣式表：學習使用

CSS代碼寫在style標簽里面

外部演示表：開發使用

CSS代碼寫在單獨的CSS文件中（.css）
在HTML使用link標簽引入

代碼示例

<link rel=”stylesheet href=”./my.css>

行內樣式

配合javaScript使用
CSS寫在標簽的style屬性值里

代碼示例

<div style=”color=red;font-size:20px;”>這是div標簽</div>

選擇器

作用

查找標簽，設置樣式

基礎選擇器

標簽選擇器
類選擇器
id選擇器
通配符選擇器

標簽選擇器

使用標簽名作為選擇器->選中同名標簽設置相同的樣式。

舉例

p,h1,div,a,img…

特點

選中同名標簽設置相同的樣式，無法差異化同名標簽的樣式

類選擇器

作用

查找標簽，差異化設置標簽的顯示效果

步驟

定義類選擇器-> .類名
使用類選擇器->標簽添加class=”類名”

<style>
/*定義類選擇器*/
.red{
color:red;
}
</style><!--使用類選擇器-->
<div class=”red”>這是div標簽</div>

強調

一個類選擇器可以給多個標簽使用
一個標簽可以有多個類名，class屬性值寫多個類名，類名間用空格隔開

注意

類名自定義，不能純數字或中文，盡量用英文命名

開發習慣

類名見名知意，多個單側可以用-連接，例如news-hd

id選擇器

作用

查找標簽，差異化設置標簽的顯示效果

場景

id選擇器一般配合JavaScript使用，很少用來設置CSS格式

步驟

定義id選擇器->#id名
使用id選擇器->標簽添加id=”id名”

規則

同一個id選擇器再一個頁面只能使用一次

通配符選擇器

作用

查找頁面所有標簽，設置相同樣式

  ：  * ，不需要調用，瀏覽器自動查找頁面所有標簽，設置相同的樣式

范例

*{
color：red;
}

新屬性

屬性名	作用
width	寬度
height	高度
background-color	背景色

字體大小

屬性名

font-size

屬性值

文字尺寸，PC端網頁最常用的單位px

示例

p{font-size:30px;
}

字體粗細

屬性名

font-weight

屬性值

數字（開發使用）
正常400 加粗700

關鍵字

正常normal 加粗 bold

字體樣式（是否傾斜）

作用

清楚文字默認的傾斜效果

屬性名

font-style

屬性值

正常（不傾斜）：normal
傾斜：italic