03、html基礎學習筆記三---CSS中三種選擇器

阿新 • • 發佈：2018-12-26

CSS中三種選擇器：標籤選擇器、類選擇器、ID選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
        <style>
            /*CSS層疊樣式表：增強網頁樣式並將樣式與內容分離的標籤性語言。樣式的規則都寫在<style></s tyle>標籤內部：由選擇器、屬性、屬性值構成*/
            /*選擇器有：標籤選擇器（使同類標籤樣式一致）、類選擇器(想定義其中的某個標籤為其他樣式)、ID選擇器(用法與class選擇器基本相同，但在HTML頁面中只能使用一次，一般用在劃分網頁時候)*/ 

            p{font-family: "微軟雅黑";/*字型型別*/
            font-size: 24px;
            color: red; 
            text-align: center;/*字型對齊方式*/
            font-weight: bold;/*定義字型粗細*/
            }  /*標籤選擇器  應用於網頁中一樣的標籤，如這裡是p標籤，則應用於所有p標籤*/
            .author{font-size: 14px;color:#CCCCCC;font-style: italic;} /*類選擇器 需在類名前加點號 單獨應用於使用該類的標籤 格式：class=""*/ 

            #timu{font-size: 30px;font-family: "粗體";color: green;text-align: center;}/*ID選擇器 需在ID前加# 單獨應用於使用該ID的標籤 格式：id=""*/
            body{background-color: aqua; /*設定背景顏色*/
                background-image: url(img/picture.jpg);/*設定背景圖片*/
                background-repeat: no-repeat;/*背景影象重複的方式*/
                background-position 
: top;/*背景影象的位置*/
                }
        </style>
    </head>
    <body>
        <h2 id="timu">靜夜思</h2>
        <p class="author">作者:李白 唐朝大詩人</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>舉頭望明月</p>
        <p>低頭思故鄉</p>
    </body>
</html>

03、html基礎學習筆記三---CSS中三種選擇器

CSS中三種選擇器：標籤選擇器、類選擇器、ID選擇器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

Html基礎學習筆記（1）

一個HTML檔案是有自己固定的結構 <html> <head>...</head> <body>...</body> </html> 講解 1 <html><html/

jQuery 學習筆記（3）（內容選擇器、attr方法、prop方法，類的操作）

節點 lec ddc 方法 pty 全部如果一個所有內容選擇器： 1、$("div:empty"): 空的div元素 2、$("div:parent"): 非空div元素 3、$("div:contains(text)"): 包含 text 文本（指定文本）的div

Java 基礎學習筆記 —— 集合框架中的Map

引言前兩篇文章我們介紹了集合中的列表和佇列，接下來要介紹的也是一個使用非常廣泛的類——Map。 Map儲存了一對對的鍵值對映關係，每一個鍵在Map中都是唯一的。Map預設使用Object.equals來判斷是否包含某個鍵，所以我們要儘量避免使用equals

Java 基礎學習筆記 —— 集合框架中的Set

引言繼上篇文章講過了Java中的Map之後，接下來我們會關注另外一種集合型別——Set。 Set直譯就是集合的意思，代表中不存在重複元素的一個組合。這個定義與我們上篇文章要中介紹的Map中的key定義一致。在Map中，Key也是唯一的。所以Set也大多包含

Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

type write number article mat 我們 content ace val 計劃按例如以下順序完畢這篇筆記： Java程序猿的JavaScript學習筆記（1——理念） Java程序猿的JavaScript學習筆記（2——屬性復制和繼承） Jav

CSS基礎語法(二) CSS的9種選擇器

字體 justify ren style 發生關鍵字 title 地址 last 樣式表的選擇器 1.類選擇器根據HTML標簽的class屬性選擇樣式應用的屬性 .類值{ … } 2.ID選擇器根據HTML標簽的ID屬性選擇樣式應用的元素 #id值{ … } 3

CSS基礎語法(二) CSS的9種選擇器

1.類選擇器根據HTML標籤的class屬性選擇樣式應用的屬性 .類值{ … } 2.ID選擇器根據HTML標籤的ID屬性選擇樣式應用的元素 #id值{ … } 3.標籤選擇器根據HTML標籤選擇樣式應用的屬性

web前端學習（五）JQuery學習筆記部分（2）-- JQuery選擇器和事件

1、選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <scri

[持續更新]CSS3學習筆記（一）偽類選擇器&自定義字型&背景圖片

CSS3學習筆記 1. 偽類選擇器 CSS3之前的偽類共有：::first-line,::first-letter, :after, :before, :hover, :active, :visited, :focus, :link,:first-child, :l

css3筆記系列-3.css中的各種選擇器詳解，不看後悔系列

最詳細的css3選擇器解析選擇器是什麼？　　比較官方的解釋：在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素。最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本

CSS中常用的選擇器及三大特性

**1.標籤選擇器** 標籤名{ 屬性名：屬性值 } 例如： div{ width：100px； } **2.通用選擇器** *{ 屬性名：屬性值 } 例如： *{ margin：0； padding：0； } 效能極低，常用於清楚預設樣式，測試使用 **3.類選擇器** 給標籤用class命

CSS的九種選擇器

1、標籤選擇器：指使用HTML的某個標籤。 p{color:blur;font-size:14px;} 2、ID選擇器：首先給要新增樣式的標籤設定一個唯一的ID名稱，然後在css中使用“#”來定義樣式 #menu{ background-color: #8080

HTML中四種選擇器

1.類選擇器class：“.class” 2. id 選擇器：“#id” 3.派生選擇器：“p strong” 4.屬性選擇器：“[title] / [title=te]” 程式碼如下： <!

CSS中多個選擇器之間有無空格的區別

#content.div {color:#f00;} #content .div {color:#f00;}第一行：表示ID是content並且同時類名是div的選擇器,此時才能生效第二行：表示ID是content下子節點元素中含有類名為div的選擇器,此時才能生效

CSS的五種選擇器

元素選擇器格式：標籤名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值

CSS中的id選擇器和類選擇器的用法

這幾天正在學習html+css+js 下面是今天學習的一個小例項，但是不是很瞭解這幾種語言，所以在選擇器上出現了一些錯誤。以下是記錄 <!DOCTYPE html> <ht

css中的類選擇器多關鍵字的相容問題

當我們在使用類選擇器的時候，經常會使用多個關鍵字來給一個元素新增樣式。如下所示： CSS程式碼： <span style="font-size:18px;">p.warning.help {background: red;}</span> HTML

CSS中的ID選擇器和類選擇器區別及用法

W3C標準這樣規定的，其一：在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class 其二：當頁面中用到js或者要動態呼叫物件的時候，要用到id 控制頁面總共有四種方式行內方式、內嵌方式、連結方式、匯入方式，通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓

# html+css基礎學習筆記－選擇器介紹

選擇器分類：標籤選擇器：標籤名{}，作用於所有此標籤。類選擇器： .class{}，在標籤內定義class=”“，屬圖形結構。 ID選擇器：#ID{}, 在標籤內定義id=”“，有嚴格的一一對應關係。子選擇器：.span>li{}，作用於父元素

03、html基礎學習筆記三---CSS中三種選擇器

相關推薦