css初步詳解（CSS--基礎）

2023-05-07 23:27:53 2

一、CSS簡介

1.CSS是什麼

CSS，指的是Cascading Style Sheet（層疊樣式表），它是用來控制網頁外觀的一門技術。「HTML控制網頁的結構，CSS控制網頁的外觀，JavaScript控制網頁的行為」

2.CSS引入方式

外部樣式表

內部樣式表

行內樣式表

3.外部樣式表——指的是把CSS代碼和HTML代碼單獨放在不同的文件中，然後在HTML文檔中使用link標籤來引用CSS樣式表。

語法

說明：rel的取值是固定的，即"stylesheet"，表示引入的是一個樣式表文件（即CSS文件），type屬性的取值也是固定的，即「text/css」，表示這是標準的CSS，href屬性表示CSS文件的路徑

注意：link標籤是放在head標籤內的

4.內部樣式表——指的是把HTML代碼和CSS代碼放到同一個HTML文件中，其中，CSS代碼放在style標籤內，並且style標籤是放在head標籤內部的

語法

type=「text/css」 是必須添加的，表示這是標準的CSS

5.行內樣式表——與內部樣式表類似，也是把HTML代碼和CSS代碼放到同一個HTML文件中。不同的是內部樣式表的CSS是在「style標籤」內定義的，而行內樣式表的CSS是在「標籤的style屬性」中定義的

兩段代碼的實現效果是一樣的，都是定義三個div元素的顏色為紅色。

如果使用內部樣式表，樣式只需要寫一遍；但是如果使用行內樣式表，每個元素則必須單獨寫一遍

行內樣式表的缺點：代碼冗餘

二、CSS選擇器

1.選擇器是什麼——用一種方式把你想要的那個元素選中

只有把它選中了，你才可以為這個元素添加CSS樣式

2.最實用的五種選擇器

CSS選擇器的格式：

3.元素選擇器——選擇指定的相同的元素，而不會選擇其他元素，然後給相同的元素定義同一個CSS樣式

語法 div { width:100px; height:100px; }

上面例子中的p元素和span元素沒有被選中

4.id選擇器——為元素設置一個id屬性，然後針對設置了這個id的元素定義CSS樣式。注意：在同一個頁面中，不允許出現兩個相同的id。

說明：對於id選擇器，id名前面必須要加上前綴#，否則該選擇器無法生效

5.class選擇器——也就是「類選擇器」，可以對相同或者不同的元素定義相同的class屬性，然後針對擁有同一個class的元素進行CSS樣式操作

語法.box { width:100px; height:100px; }

class名前面必須要加上前綴.（英文點號），否則該選擇器無法生效

上面的例子是為不同的元素定義相同的class，從而可以同時操作它們的CSS樣式

6.後代選擇器——選擇元素內部中所有的某一元素，包括子元素和其他後代元素（如孫元素）

語法h3 p {width:100px; height:100px;}

說明：父元素和後代元素必須要用空格隔開，從而表示選中某個元素內部的後代元素

7.群組選擇器——同時對幾個選擇器進行相同的操作（效率高）

語法h3,p {width:100px; height:100px;

說明：對於群組選擇器，兩個選擇器之間必須要用英文逗號（,）隔開，不然群組選擇器就無法生效

三、字體樣式

1.字體樣式

類似於Word軟體中對於字體樣式的設置，我們可以知道CSS字體樣式的屬性有以下五種：

font-family——字體類型

font-size——字體大小

font-weight——字體粗細

font-style——字體風格

color——字體顏色

2.字體類型（font-family）

語法：font-family：字體1，字體2，...，字體N；

說明：font-family可以指定多種字體。使用多種字體時，將按從左到右的順序排列，並且以英文逗號（,）隔開。瀏覽器默認的字體類型一般是「宋體」

舉例：設置一種字體

舉例：設置多種字體

為元素設置多種字體的原因是：在有些字體沒有安裝的情況下，可以使用下一個字體，優先使用左邊的字體。

3.字體大小（font-size）——採用px為單位

語法font-size：像素值；

說明：實際上，font-size屬性取值有兩種，一種是「關鍵字」，如small，medium，large等。另外一種是「像素值」，如10px、16px、21px等。不過在實際開發中，關鍵字這種方式基本不會用

4.字體粗細（font-weight）

語法 font-weight：取值;

font-weight屬性取值有兩種：一種是100~900的「數值」；另外一種是「關鍵字」。

其中關鍵字取值有：normal（正常）、lighter（較細）、bold（較粗）、bolder（很粗）。對於實際開發來說，一般我們只會用到bold這一個屬性值，其他的幾乎用不上。

在實際開發中，不建議使用數值作為font-weight的屬性取值，一般使用關鍵字的bold屬性值

5.字體風格（font-style）

語法 font-style：取值；

font-style屬性取值有：normal（正常）、italic（斜體）、oblique（斜體）

從預覽效果可以看出，font-style屬性值為italic或oblique時，頁面效果是一樣的

但其實它們的區別在於：italic是字體的一個屬性，但並非所有的字體都有這個屬性。因此對於有italic屬性的字體，我們使用font-style：italic來實現斜體效果；對於沒有italic屬性的字體，我們使用font-style：oblique來實現。

6.字體顏色（color）

語法 color：顏色值;

color屬性取值有兩種：關鍵字 & 16進位RGB值

關鍵字 如red、green、blue等

16進位RGB值——類似於#FBF9D0形式的值

單純靠「關鍵字」，滿足不了實際開發的需求。因此引入了「16進位RGB值」

記：#000000是黑色，#FFFFFF是白色

7.CSS注釋

語法 /* 注釋的內容*/

注意：

小技巧：瀏覽器解析CSS是有一定順序的，後面樣式的會覆蓋前面的樣式。

四、文本樣式

文本樣式和字體樣式的區別：字體樣式針對的是「文字本身」的型體效果，而文本樣式針對的是「整個段落」的排版效果。字體樣式注重個體，文本樣式注重整體。

文本樣式屬性

text-indent ——首行縮進

text-align ——水平對齊

text-decoration ——文本修飾

text-transform ——大小寫

line-height ——行高

letter-spacing、word-spacing ——字母間距、詞間距

1.首行縮進（text-indent）

p元素的首行是不會自動縮進的，在HTML中我們常常使用空格代碼&nbsp來實現首行縮進，但是這種方式冗餘代碼很多；在CSS中，我們可以使用text-indent屬性來定義p元素的首行縮進。

語法 text-indent：像素值；

說明：初學CSS，建議使用像素（px）作為單位。

中文段落首行一般需要縮進兩個字符，設置首行縮進的像素值是字體大小的兩倍即可

2.水平對齊（text-align）——控制文本在水平方向上的對齊方式

語法 text-align：取值；

text-align屬性取值有：

left——左對齊（默認值）

center——居中對齊

right——右對齊。

在實際開發中，我們只會用到center這一個，其他兩個幾乎用不上。另外，text-align屬性不僅對文本有效，對圖片（img元素）也有效

3.文本修飾（text-decoration）——定義文本的修飾效果（下劃線、中劃線、頂劃線）

語法text-decoration：取值；

text-decoration屬性取值：

none——去除所有的劃線效果（默認值）

underline——下劃線（一般用於強調文章中的重點）

line-through——中劃線（一般用於促銷）

overline——頂劃線（極少用）

超連結（a元素）默認樣式有下劃線，可以使用text-decoration:none去除a元素的下劃線

4.大小寫（text-transform）——針對英文而言，中文不存在大小寫之分

語法 text-transform：取值；

text-transform屬性取值

none——無轉換（默認值）

uppercase——轉換為大寫

lowercase——轉換為小寫

capitalize——將每個英文單詞首字母轉換為大寫

5.行高（line-height）——控制每行文本的高度，與「行間距」是完全不一樣的概念

語法line-height：像素值；

6.間距（letter-spacing & word-spacing）

字間距（letter-spacing）——調整兩個字之間的距離

語法letter-spacing：像素值；

注意：每個中文漢字都被當成一個「字」，而每個英文字母也當做一個「字」

詞間距（word-spacing）——定義兩個單詞之間的距離（只針對英文單詞而言）

語法word-spacing：像素值；

在實際開發中，我們很少去定義中文網頁中的字間距以及詞間距，letter-spacing和word-spacing只會用於英文網頁。這兩個我們平時幾乎用不上

五、邊框樣式

1.邊框樣式屬性

邊框寬度（border-width）：取值是一個像素值

邊框外觀（border-style）：none（無樣式）、dashed（虛線）、solid（實線）

邊框顏色（border-color）：關鍵字、16進位RGB值

想要為一個元素定義邊框樣式，必須要同時設置這三個屬性才會有效果

簡寫形式：border：2px solid red；

2.局部樣式

一個邊框元素其實有四條邊（上、下、左、右）前面我們學習的是四條邊的整體樣式，現在來學習對某一條邊進行單獨設置。

上邊框（border-top）

border-top-width: 2px;

border-top-style: solid;

border-top-color: red;

下邊框（border-bottom）

border-bottom-width: 2px;

border-buttomstyle: solid;

border-buttom-color: red;

左邊框（border-left）

border-left-width: 2px;

border-left-style: solid;

border-left-color: red;

右邊框（border-right）

border-right-width: 2px;

border-right-style: solid;

border-right-color: red;

簡寫形式：border-right：2px solid red;

去除下邊框：（以下三個是等價的）

六、列表樣式

1.列表項符號（list-style-type）

在HTML中，我們使用type屬性來定義有序列表和無序列表的列表項符號，但是我們說過，結構和樣式應該是分離的，所以在CSS中，我們將使用list-style-type屬性來定義列表項符號

語法list-style-type：取值；

說明：list-style-type屬性是針對ol或者ul元素的，而不是li元素。

list-style-type屬性取值（有序列表）

decimal——阿拉伯數字：1，2，3…（默認值）

lower-roman——小寫羅馬數字：i、ii、iii…

upper-roman——大寫羅馬數字：I、II、III…

lower-alpha——小寫英文字母：a、b、c…

upper-alpha——大寫英文字母：A、B、C…

list-style-type屬性取值（無序列表）

disc——實心圓●（默認值）

circle——空心圓○

square——正方形■

去除列表項符號

語法list-style-type：none；

2.列表項圖片（list-style-image）——使用圖片來代替列表項符號

語法list-style-image：url（圖片路徑）；

在實際開發中，我們會使用更為高級的字體圖標（iconfont）技術來實現列表項圖片

七、表格樣式

1.表格標題位置（caption-side）

語法caption-side：取值；

caption-side屬性取值：

top——標題在頂部（默認）

bottom——標題在底部

如果想要定義表格標題的位置，在table或caption這兩個元素的CSS中定義caption-side屬性

2.表格邊框合併（border-collapse）——去除表格加入邊框後單元格之間的空隙

語法border-collapse：取值；

border-collapse屬性取值：

separate——邊框分開，有空隙（默認值）

collapse——邊框合併，無空隙

border-collapse屬性也是在table元素中定義的table{border-collapse: collapse;}

3.表格邊框間距（border-spacing）

語法border-spacing：像素值；

border-spacing屬性也是在table元素中定義的table{border-spacing：8px;}

八、圖片樣式

1.圖片大小——使用width和height這兩個屬性來定義圖片的大小

語法

在實際開發中，需要使用多大的圖片，就用Photoshop製作多大的圖片。不建議使用一張大圖片，然後再藉助width和weight來改變大小。

2.圖片邊框

語法border：1px solid red；

在「邊框樣式」中我們已經詳細介紹了border屬性

3.圖片對齊

水平對齊

語法text-align：取值（left、center、right）；

注意：圖片的水平對齊不是在img元素中定義的，是在父元素中進行水平對齊的

text-align屬性一般只用於兩個地方：文本水平對齊和圖片水平對齊

垂直對齊

語法vertical-align：取值；

vertical-align屬性取值

top（頂部對齊）

middle（中部對齊）

baseline（基線對齊）

bottom（底部對齊）

4.文字環繞——初識float

圖文混排，指的是文字環繞著圖片進行布局

語法img{float：取值；}

float屬性取值

left——元素向左浮動

right——元素向右浮動

九、背景樣式

1.背景顏色（background-color）

語法 background-color：顏色值（關鍵字、16進位RGB值）；

兩種顏色取值

color&background-color的區別：

color屬性用於定義「文本顏色」，而background-color屬性用於定義「背景顏色」

2.背景圖片（background-image）

語法 background-image：url（圖片路徑）；

說明：跟引入圖片（即image標籤）一樣，引入背景圖片也需要給出圖片路徑才可以顯示

注意：我們需要為div元素添加width和height，背景圖片才會顯示出來

3.背景圖片重複（background-repeat）

語法background-repeat：取值；

background-repeat屬性取值：

repeat——在水平方向和垂直方向同時平鋪（默認值）

repeat-x——只在水平方向（x軸）上平鋪

repeat-y——只在垂直方向（y軸）上平鋪

no-repeat——不平鋪

注意：元素的寬度和高度必須大於背景圖片的寬度和高度，才會有重複效果

4.背景圖片的位置（background-position）

語法background-position：像素值/關鍵字；

像素值——要設置水平方向和垂直方向的值（像素值）

例如background-position：12px 24px;表示背景圖片與該元素左上角的水平方向距離為12px，垂直方向距離為24px。水平距離和垂直距離這兩個數值之間要用空格隔開

關鍵字——也要同時設置水平方向和垂直方向的值（關鍵字）

語法background-position：水平距離 垂直距離；

關鍵字取值

top left——左上

top center——靠上居中

top right——右上

left center——靠左居中

center center——正中

right center——靠右居中

bottom left——左下

bottom center——靠下居中

bottom right——右下

5.背景圖片固定（background-attachment）——定義背景圖片是隨元素一起滾動還是固定不動

語法background-attachment：取值；

scroll——隨元素一起滾動（默認值）

fixed——固定不動

十、超連結樣式

1.超連結偽類

默認情況下：字體為藍色，帶有下劃線。

滑鼠點擊時：字體為紅色，帶有下劃線。

滑鼠點擊後：字體為紫色，帶有下劃線。

在CSS中，我們可以使用「超連結偽類」來定義超連結在滑鼠點擊的不同時期的樣式。

語法

注意：定義這四個偽類，必須按上面的順序進行，否則瀏覽器無法正常顯示這四種樣式

link樣式表示的是a元素從未被訪問過。

2.深入了解超連結偽類

我們沒有必要定義四種狀態下的樣式，在實際開發中，我們只會用到兩種狀態：未訪問時狀態和滑鼠經過狀態。而對於未訪問狀態，我們可以直接對a元素定義，沒必要使用a:link。

語法

事實上，對於超連結偽類來說，我們只需要記住a:hover這一個就夠了，因為在實際開發中也只會用到這一個。

3.深入了解：hover

hover偽類不只限用於a元素，hover偽類可以定義任何一個元素在滑鼠經過時的樣式！

語法 元素：hover{...}

4.滑鼠樣式

瀏覽器滑鼠樣式——cursor（11種）

語法cursor：取值；

cursor屬性取值（常用的三種）

default（默認值）——滑鼠默認樣式

pointer——滑鼠手狀樣式

text——滑鼠文本樣式

自定義滑鼠樣式

語法cursor：url（圖片地址），屬性值；

說明：這個「圖片裡地址」是滑鼠圖片地址，其中滑鼠圖片後綴名一般都是.cur，可以使用Photoshop來製作。

十一、盒子模型

頁面中，所有的元素都可以看成一個盒子

1.盒子模型的組成部分

內容區——CSS盒子模型的中心

內邊距——內容區和邊框之間的距離

外邊距——兩個盒子之間的距離

邊框

2.寬和高（width和height）

元素的寬度和高度是針對內容區而言的。

只有塊元素才可以設置width和height，行內元素是無法設置width和height的

3.邊框（border）

簡寫形式（寬度、外觀，顏色）

border：1px solid red；

4.內邊距（padding）

內邊距分為四個方向：上、右、下、左（順時針方向）

padding-top：像素值；

padding-right：像素值；

padding-bottom：像素值；

padding-left：像素值；

padding簡寫形式

padding：像素值；表示四個方向的內邊距

padding：像素值1 像素值2；表示上下、左右邊距

padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（順時針）

5.外邊距（margin）

外邊距分為四個方向：上、右、下、左（順時針方向）

margin-top：像素值；

margin-right：像素值；

margin-bottom：像素值；

margin-left：像素值；

外邊距指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。只有當我們加入其它元素當參考對象時，才能看到效果。

當既有父元素，也有兄弟元素時，則這個方向的margin就是相對於兄弟元素而言，如果沒有兄弟元素，則相對於父元素而言

margin簡寫形式與padding一樣

二十二、浮動布局

1.正常文檔流&脫離文檔流

正常文檔流——默認情況下的HTML文檔結構

脫離文檔流——脫離正常文檔流，使用浮動和定位去改變

2.浮動——float

float屬性取值

left——元素向左浮動

right——元素向右浮動

3.清除浮動——clear

clear屬性取值

left——清除左浮動

right——清除右浮動

both——同時清除左浮動和有浮動（常用）

二十三、定位布局

浮動布局比較靈活，但是不容易控制

定位布局精準定位頁面中的元素，但是缺乏靈活性

布局定位的四種方式：

固定定位（fixed）

相對定位（relative）

絕對定位（absolute）

靜態定位（static）——默認情況下

這四種方式都是通過position屬性來實現的

1.固定定位：fixed——指的是被固定的元素不會隨著滾動條的拖動而改變位置

語法：

position：fixed；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊

2.相對定位：relative——指的是該元素的位置是相對於它的原始位置計算而來的

語法：

position：relative；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是該元素的原始位置

3.絕對定位：absolute（使用最廣泛）

語法：

position：absolute；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊；

一個元素變成了絕對定位元素，這個元素就完全脫離文檔流了，即這個元素浮於其他元素上面，獨立出來

總結：默認情況下，固定定位和絕對定位的位置是相對於瀏覽器而言，而相對定位的位置是相對原始位置而言。

————————————————

版權聲明：本文為CSDN博主「MOSIMIN」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/mosimin_980920_/article/details/95595571