從零開始學習html(八)CSS選擇器——上

来源:http://www.cnblogs.com/guxinglang/archive/2017/05/09/6796959.html
-Advertisement-
Play Games

一、什麼是選擇器? 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>選擇器</title> 6 <style type ...


一、什麼是選擇器?

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>選擇器</title>
 6 <style type="text/css">
 7 body{
 8     font-size:12px;
 9     color:red;    
10 }
11 </style>
12 </head>
13 <body>
14 <p>慕課網(IMOOC)是學習編程最簡單的免費平臺。慕課網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視頻教程等課程資源。它富有交互性及趣味性,並且你可以和朋友一起編程。</p>
15 </body>
16 </html>
什麼是選擇器

每一條css樣式聲明(定義)由兩部分組成,形式如下:

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”,“選擇器”指明瞭{}中的“樣式”的作用對象,也就是“樣式”作用於網頁中的哪些元素。

比如代碼編輯器中第7行代碼中的“body”就是選擇器。

二、標簽選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 
 8 
 9 
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時,我還是一個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
17     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
18 </body>
19 </html>
標簽選擇器

標簽選擇器其實就是html代碼中的標簽。如代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下麵代碼:

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用:為p標簽設置12px字型大小,行間距設置1.6em的樣式。

來試試,為標題“勇氣”添加樣式,把h1標簽預設的粗體樣式去掉並將字體顏色設置為紅色

1、在編輯器的第7行,輸入h1{

2、在編輯器的第8行,輸入font-weight:normal;

3、在編輯器的第9行,輸入color:red;

4、在編輯器的第10行,輸入}

 

font-weight:normal;/*去掉粗體樣式*/

 

三、類選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 .stress{
 8     color:red;
 9 }
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時,我還是一個<span class="stress">膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
17     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
18 </body>
19 </html>
類選擇器

類選擇器在css樣式編碼中是最常用到的,如代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。

語法:

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

註意:

1、英文圓點開頭

2、其中類選器名稱可以任意起名,但不能以數字開頭(但不要起中文噢)

使用方法:

第一步:使用合適的標簽把要修飾的內容標記起來,如下:

<span>膽小如鼠</span>

第二步:使用class="類選擇器名稱"為標簽設置一個類,如下:

<span class="stress">膽小如鼠</span>

第三步:設置類選器css樣式,如下:

.stress{color:red;}/*類前面要加入一個英文圓點*/

 來試試,為第二段文字中的“公開課”三個文字設置為綠色

1.在編輯器的第16行,輸入:

<span class="setGreen">公開課</span>

2.在編輯器的第10-12行,輸入:

.setGreen{
   color:green;
}

標簽選擇器針對的是html自帶的標簽(p,h1),類選擇器是可以自定義的(利用span class=""設定一個類)

四、ID選擇器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識html標簽</title>
 6 <style type="text/css">
 7 #stress{
 8     color:red;
 9 }
10 
11 </style>
12 </head>
13 <body>
14     <h1>勇氣</h1>
15     <p>三年級時,我還是一個<span id="stress">膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
16     <p>到了三年級下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
17 
18 </body>
19 </html>
ID選擇器

在很多方面,ID選擇器都類似於類選擇符,但也有一些重要的區別:

1、為標簽設置id="ID名稱",而不是class="類名稱"。

2、ID選擇符的前面是井號(#)號,而不是英文圓點(.)。

代碼編輯器中就是一個ID選擇符的完整實例。

來試試,為第二段文字中的“公開課”三個文字使用ID選擇器的方式設置為綠色

1.在編輯器的第16行,輸入:

<span id="setGreen">公開課</span>

2.在編輯器的第10-12行,輸入:

#setGreen{
   color:green;
}

五、類和ID選擇器的區別

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>類和ID選擇器的區別</title>
 6 <style type="text/css">
 7 .stress{
 8     color:red;
 9 }
10 .bigsize{
11     font-size:25px;
12 }
13 #stressid{
14     color:red;
15 }
16 #bigsizeid{
17     font-size:25px;
18 }
19 </style>
20 </head>
21 <body>
22     <h1>勇氣</h1>
23     <p>三年級時,我還是一個<span class="stress">膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
24     <p>到了<span class="stress bigsize">三年級</span>下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
25      <p>到了<span id="stressid bigsizeid">三年級</span>下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
26     
27 </body>
28 </html>
類和ID選擇器的區別

學習了類選擇器和ID選擇器,我們會發現他們之間有很多的相似處,是不是兩者可以通用呢?

我們不要著急先來總結一下他們的相同點和不同點:

相同點:可以應用於任何元素
不同點:

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

下麵代碼是正確的:

 <p>三年級時,我還是一個<span class="stress">膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>

而下麵代碼是錯誤的:

 <p>三年級時,我還是一個<span id="stress">膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>

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

下麵的代碼是正確的(完整代碼見代碼編輯器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px。

下麵的代碼是不正確的(完整代碼見右側代碼編輯器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px的作用。

 

id就像身份證號碼,是唯一的,該身份證號碼就能代表你。一個人不能有兩個身份證號碼,也不能一個身份證號碼表示兩個人。

而class就像昵稱,該昵稱也能代表你。一個人可以有多個昵稱,也可以多個人用同個昵稱。   那麼時候用id,什麼時候用class?
W3C標準這樣規定的,在同一個頁面內,不允許有相同名字的id對象出現,但是允許相同名字的class。   這樣,一般網站分為頭,體,腳部分,因為考慮到它們在同一個頁面只會出現一次,所以用id,   其他的,比如說你定義了一個顏色為red的class,在同一個頁面也許要多次用到,就用class定義。   另外,當頁面中用到js或者要動態調用對象的時候,要用到id,所以要根據自己的情況運用。   class用.
id用#

class可以重名

id不行
  成熟網站里,你很少看到css里用id選擇器的,都是用class,id選擇器留給寫js的人用,這樣避免衝突。   id是用於一個特定的樣式的(唯一性),並且只能使用一次。class是用於一組相同樣式的(相似性),可以使用多次。   不應該用使用次數來說明,應該說id只能指定唯一元素,而class可以指定多個元素,將這些元素劃分為一類。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 題目描述 最近,Elaxia和w的關係特別好,他們很想整天在一起,但是大學的學習太緊張了,他們 必須合理地安排兩個人在一起的時間。Elaxia和w每天都要奔波於宿舍和實驗室之間,他們 希望在節約時間的前提下,一起走的時間儘可能的長。 現在已知的是Elaxia和w**所在的宿舍和實驗室的編號以及學校的 ...
  • 1、簡介 這一篇文章主要介紹的是http協議下載時的斷點續傳,詳細到各個步驟。主要步驟有:DNS查找、TCP三次握手、http請求發送、TCP協議數據傳輸、暫停後的狀態、繼續下載、TCP三次握手、http請求發送、數據傳輸、。。。、下載成功發送http響應信息、TCP四次握手斷開連接。 2、原理知識 ...
  • 在Python中,通常有這幾種方式來表示時間:1)時間戳 2)格式化的時間字元串 3)元組(struct_time)共九個元素。由於Python的time模塊實現主要調用C庫,所以各個平臺可能有所不同。 UTC(Coordinated Universal Time)即格林威治天文時間,為世界標準時... ...
  • 讀取核心配置文件 核心配置文件是指在resources根目錄下的application.properties或application.yml配置文件,讀取這兩個配置文件的方法有兩種,都比較簡單。 先創建一個簡單的springBoot程式,可以參考: "http://www.cnblogs.com/l ...
  • 聲明:因為運行環境是基於Linux系統的,在做此框架之前需要做一些前期的環境準備工作CentOs下安裝Tomcat7網上很多實例,因為博客後期作為框架的原生教程,故這邊做詳細的安裝記錄,我這邊已經下載好了Tomcat7,通過ssh已經上傳到指定的目錄,這裡直接講解安裝的過程。1. 安裝tomcat通 ...
  • Ex1: Vrsense 選 37.4 mV 在第一張圖 Rsense 選 50 mΩ 在第二張圖 37.4 / 50 = 748 mA Ex2: Vrsense 選 44.2 mV 44.2 / 50 = 884 mA Rsense 是可變動的。 ...
  • alert提示框由於外觀不太友好,所以一般都不用alert了。 我在這裡使用bootstrap的樣式,寫了一個可以單獨顯示消息,也可以確認取消的提示框。 使用的外觀如下: 一:單獨顯示消息: 二:確認和取消: 單獨顯示消息的方法傳遞類型,信息,顯示時間以及回掉函數。其中通過重載可以只傳遞信息。 確認 ...
  • Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...