CSS學習筆記－－基礎（一）

一、認識CSS

CSS的全稱爲“層疊樣式表（Cascading Style Sheets）”，主要用於定義HTML內容在瀏覽器的顯示樣式。比如：文字的大小、顏色、字體大小、字體粗細等。

p{
font-size:12px;
color:red;
}

使用CSS的一個好處就是通過定義某個樣式，在網頁的不同地方使用到該樣式之後，就會在不同的地方顯示相同的效果。另一個好處則是：定義一次，即可在其它地方擁有一樣的效果，大大簡化了代碼。

<!DOCTYPE html>

<html>

<style type="text/css">
       span{
       color:red;
       }
</style>

<head>

<title>CSS使用的好處</title>

<style type="text/css">

span{color: red;}

</style>

</head>

<span style="font-family: Arial, Helvetica, sans-serif;"><body></span>

<p>

使用<span>CSS</span>的一個好處就是通過定義某個樣式， 在網頁的不同地方使用到該樣式之後， 就會在不同的地方顯示<span>相同的效果</span>。 另一個好處則是： 定義一次， 即可在其它地方擁有一樣的效果，大大<span>簡化了代碼</span>

</p>

</body>

</html>

這段代碼的效果如下：

我們可以看到， CSS極大的簡化了代碼，如果我們不使用CSS，就需要在每個<span>標籤中把代碼都寫一遍，另外，只要需要顯示紅色的效果，我們就可以在想要使用此效果的地方，直接使用該標籤就好了。是不是很方便呢？？

那麼，我們看看CSS的語法： CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成：

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素；

聲明：在英文大括號“{ }”中的部分就是聲明，聲明又由屬性和值組成，屬性和值之間使用冒號(:) 分割開來，當有多條聲明時，每條聲明之間使用分號(;)分割開來。

例如：

p{
color:red;
font-size:12px;
}

需要注意的是：

1.最後一條聲明，或者該樣式中只有一條聲明時，分號（;）可以不寫，但爲了美觀和便於修改，書寫代碼時都會加上；

2.爲了便於閱讀，我們會將每一條聲明單獨寫一行，如上代碼；

CSS的三種寫入樣式：內聯式、嵌入式、外部式

根據CSS樣式的書寫位置，我們將CSS的樣式寫入分爲：內聯式、嵌入式、外部式三種

1.內聯式：把CSS代碼直接寫在HTML標籤中，如下代碼：

<p style="color:red">設置紅色文字</p>

需要注意的是，內聯式CSS樣式需要寫在style=" " 的雙引號中，多個CSS樣式可以寫在一起，之間也使用分號（;）隔開；

<p style="color:red ;  font-size:12px">這是內聯式多個樣式設置</p>

2.嵌入式：把代碼寫在<style type="text/css"></style>標籤之間，如下代碼：

<style type="text/css">
span{
    color:red;
}
</style>

需要注意的是：嵌入式CSS樣式必需寫在標籤<style type="text/css"></style>中，而<style></style>標籤，一般放在<head></head>標籤中。

3.外部式：寫在一個單獨的文件中，這個文件以".css"爲擴張名存儲，在<head></head>標籤內使用<link>標籤將CSS文件鏈接到HTML文件內，代碼如下：

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

需要注意的是：css樣式文件名稱以有意義的英文字母命名；

rel="stylesheet" type="text/css" 是固定的寫法，不可以修改

內聯式、嵌入式、外部式三種CSS樣式的優先級

對於使用同一個元素同時使用了三種方法設置CSS樣式，最終會顯示哪個效果呢？這裏就需要優先級來解答。

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

雖然我們做了優先級的排序，但是需要注意的是：嵌入式 > 外部式需要一個前提：嵌入式的位置一定要在外部式的後面。因此我們也不難看出，三種順序的先後順序總結起來只有一個：那就是－－在權值相同的情況下，使用就近原則（離被設置的元素越近優先級就越高）。

CSS中的選擇器

每一條CSS樣式聲明由兩部分組成，形式如下：

選擇器{

樣式;

}

在大括號({ })之前的部分就叫做選擇器，選擇器指明瞭大括號（{ }）的樣式的作用對象，也就是CSS樣式作用於網頁中的哪些元素。標籤選擇器其實就是html大碼中的標籤。

1.類選擇器

類選擇器在CSS樣式編碼中是最常用到的。語法如下：

.類選擇器名稱{css樣式代碼;}

需要注意的是：1.是以英文形式的圓點( . ) 開頭的

2.類選擇器大的名稱可以隨意起，但要注意不要使用中文

類選擇器的使用方法：

1.使用合適的標籤把要修飾的內容標記出來；如：<span>hello</span>

2.使用class="類選擇器名稱"爲標籤設置一個類；如：<span class="選擇器名稱"> hello </span>

3.設置類選擇器的樣式，如： .spanstyle { color: red; }

2.ID選擇器

ID選擇器和類選擇器類似，但以井號（#）開始。語法如下：

#ID選擇器名稱{CSS樣式代碼;}

ID選擇器的使用：

1.ID選擇器使用時，爲標籤設置 id＝" ID選擇器名稱"，而不是class＝ “類選擇器名稱”;如：<span id="ID選擇器名稱"> hello </span>

2.ID選擇器的聲明是以井號（#）號開始，而不是點(.)

3.類選擇器與ID選擇器的額異同點對比

1.相同點：可以應用於任何元素

2.不同點：

1> ID選擇器只能在文檔中使用一次。在一個html文檔中，ID選擇器只能使用一次，而且僅一次，而類選擇器則可以使用多次。

例如下面的代碼是正確的：

<p>ID選擇器<span class="stress">只能在文檔中使用一次</span>。在一個html文檔中，ID選擇器只能使用一次， 而且僅一次， 而類選擇器則可以<span class="stress">使用多次</span>。</p>

而下面的代碼則是錯誤的：

<p>ID選擇器<span id="stress">只能在文檔中使用一次</span>。在一個html文檔中，ID選擇器只能使用一次， 而且僅一次， 而類選擇器則可以<span id="stress">使用多次</span>。</p>

2> 可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。ID選擇器則不可以實現（不能使用ID詞列表）。

如下代碼是正確的：

.stress{
    color:red;
}

.fontsize{
   font-size:30px;
}

<p>ID選擇器只能在文檔中使用一次。在一個html文檔中，ID選擇器只能使用一次， 而且<span class="stress fontsize">僅一次</span>， 而類選擇器則可以使用多次。</p>

下面的代碼則是不正確的：

#stress{
    color:red;
}

#fontsize{
    font-size:30px;
}

<p>ID選擇器只能在文檔中使用一次。在一個html文檔中，ID選擇器只能使用一次， 而且<span id="stress fontsize">僅一次</span>， 而類選擇器則可以使用多次。</p>

4.子選擇器

子選擇器即大於符號(>)，用於選擇置頂標籤元素的第一代子元素。如下代碼：

.food>li{
    border:1px solid red;
}

這行代碼會使class名爲food下的子元素li 加入紅色邊框樣式。如下代碼和效果圖：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.food>li{
	border:1px solid red;
}
</style>
</head>
<body>
<ul class="food">
 	<li>水果
 	<ul>
 		<li>蘋果</li>
 		<li>香蕉</li>
 		<li>西瓜</li>
 	</ul>
 	</li>
 	<li>蔬菜
 	<ul>
 		<li>白菜</li>
 		<li>蘿蔔</li>
 		<li>生菜</li>
 	</ul>
 	</li>
 </ul>
</body>
</html>

效果圖：

5.包含（後代）選擇器

包含選擇器，即加入空格，用於指定標籤元素下的後輩元素。如下代碼：

.first span{
color:red;
}

包含選擇器與子選擇器的區別：子選擇器是指它的直接後代，或者可以理解爲作用於他的第一代後代。而包含選擇器是作用於元素的所有後代元素。後代選擇器通過空格來進行選擇，而子選擇器通過大於（>）進行選擇。

下面看看包含選擇器的代碼和效果：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.food li{
		border:1px solid red;
	}
	</style>
</head>
<body>
<ul class="food">
 	<li>水果
 	<ul>
 		<li>蘋果</li>
 		<li>香蕉</li>
 		<li>西瓜</li>
 	</ul>
 	</li>
 	<li>蔬菜
 	<ul>
 		<li>白菜</li>
 		<li>蘿蔔</li>
 		<li>生菜</li>
 	</ul>
 	</li>
 </ul>
</body>
</html>

效果如下：

6.通用選擇器

通用選擇器是功能最強大的選擇器。它使用一個（*）號指定，它的作用是匹配html中所有標籤元素；代碼如下

* {
    Color:red;
}

7.僞類選擇符

僞類選擇符允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如給html中的一個標籤元素的鼠標滑過狀態設置字體的顏色：

a:hover{
    color:red;
}

關於僞類選擇符，可以兼容所有瀏覽器的就是a標籤上使用:hover。其實:hover可以放在任意的標籤上，但兼容性不是很好，因此比較常用的還是a:hover的組合。

代碼及效果：

<!DOCTYPE html>
<html>
<head>
	<title>僞類選擇符</title>
	<meta charset="utf-8">
	<style type="text/css">
		a:hover{
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
<h1>關於僞類選擇符</h1>
<p>
關於僞類選擇符，可以兼容所有瀏覽器的就是a標籤上使用:hover。 其實:hover可以放在任意的標籤上， 但<a href="www.baidu.com">兼容性</a>不是很好， 因此比較常用的還是a:hover的組合。
</p>
</body>
</html>

正常情況下顯示如下圖：

當鼠標指向這幾個字的時候，顯示如下圖：

8.分組選擇符

分組選擇器可以爲html中的多個標籤元素設置同一個樣式。代碼如下：

h1,span{

    color:red;
}

以上代碼等價於以下的代碼：

h1{
   color:red;
}

span {
    color:red;
}

CSS學習筆記－－基礎（一）

自學編程兩個月，現在我月入 4 萬元

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

百度安全多篇議題入選Blackhat Asia以硬技術發現“芯”問題

Google Chrome驅動程序 124.0.6367.62（正式版本）去哪下載？

block 回調函數(程序塊)

iOS KVC和KVO開發模式

iOS開發引用第三方庫出現duplicat…

iOS 中KVC、KVO、NSNotificat…

IOS用openurl打開設置選項 ==…

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結