當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

前端——CSS笔记

發布時間：2023/10/11 综合教程 58 老码农

生活随笔收集整理的這篇文章主要介紹了前端——CSS笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。

p{

   font-size:12px;

   color:red;

   font-weight:bold;

}

使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字體、字號或者顏色等。

CSS代碼語法

css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。

聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔，如下所示

CSS注釋代碼

就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來標明（Html中使用)。就像下面代碼：

從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種

內聯式css樣式，直接寫在現有的HTML標簽中

內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中（多條css樣式代碼設置可以寫在一起，中間用分號隔開），如下面代碼：

<p style="color:red；font-size:12px">這里文字是紅色。</p>

嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。如下面代碼實現把三個<span>標簽中的文字設置為紅色：

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。如右邊編輯器中的代碼。

外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下面代碼：

<link href="base.css" rel="stylesheet" type="text/css" />

優先級：內聯式 > 嵌入式 > 外部式

注意：

1、css樣式文件名稱以有意義的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定寫法不可修改。

3、<link>標簽位置一般寫在<head>標簽之內。

什么是選擇器？

選擇器{

    樣式;

}

在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。比如下面代碼編輯器代碼中的“body”就是選擇器。

標簽選擇器

類選擇器

ID選擇器

類和ID選擇器的區別

相同點：可以應用于任何元素
不同點：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

正確：

.stress{

    color:red;

}

.bigsize{

    font-size:25px;

}

<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>

錯誤：

#stressid{

    color:red;

}

#bigsizeid{

    font-size:25px;

}

<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>

子選擇器

還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。

包含(后代)選擇器

包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼：

.first  span{color:red;}

總結：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：

* {color:red;}

偽類選擇符

它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：

a:hover{color:red;}

（關于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了）

分組選擇符

繼承（有繼承性標簽和非繼承性標簽）

特殊性

下面是權值的規則：

標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的代碼：

p{color:red;} /*權值為1*/

p span{color:green;} /*權值為1+1=2*/

.warning{color:white;} /*權值為10*/

p span.warning{color:purple;} /*權值為1+1+10=12*/

#footer .note p{color:yellow;} /*權值為100+10+1=111*/

注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。

層疊

內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。

重要性

p{color:red!important;}

樣式優先級為：瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式，但記住!important優先級樣式是個例外，權值高于用戶自己設置的樣式。

文字排版--字體

用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體。
現在一般網頁喜歡設置“微軟雅黑”，如下代碼：（第一個兼容性較好）

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微軟雅黑";}

文字排版--字號、顏色

body{font-size:12px;color:#666}

文字排版--粗體

p span{font-weight:bold;}

文字排版--斜體

p a{font-style:italic;}

<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>

元素分類

在了解CSS布局之前，在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

常用的內聯元素有：

常用的內聯塊狀元素有：

元素分類--塊級元素

什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。

a{display:block;}

元素分類--內聯元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素，從而使 div 元素具有內聯元素特點。

 div{

     display:inline;

 }

......

<div>我要變成內聯元素</div>

內聯元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

小伙伴們你們觀查一下右側代碼段，有沒有發現一個問題，內聯元素之間有一個間距問題，這個問題在本小節的 wiki 中有介紹，感興趣的小伙伴可以去查看。

友情參考鏈接：http://www.cnblogs.com/Wxtrkbc/p/5620935.html

總結

以上是生活随笔為你收集整理的前端——CSS笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Linux+Tomcat+Jdk1.8+
下一篇： Kubernetes-Service介绍