WEB前端CSS基礎選擇器

2020-12-14 博客實驗室

選擇器(重點)

要想將CSS樣式應用於特定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。

圖片來自網絡,如有侵權聯繫刪除,謝謝

如上圖所以,要把裡面的小黃人分為2組,最快的方法怎辦?

很多, 比如 一隻眼睛的一組,剩下的一組

選擇器幹啥的? 選擇標籤用的

這就用到基礎選擇器組:

CSS基礎選擇器

標籤選擇器(元素選擇器)

標籤選擇器是指用HTML標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下:

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。

標籤選擇器 可以把某一類標籤全部選擇出來 div span

類選擇器

類選擇器使用「.」(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤調用的時候用 class=「類名」 即可。

類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標籤

小技巧:

1.長名稱或詞組可以使用中橫線來為選擇器命名。 2.不建議使用「_」下劃線來命名CSS選擇器。

輸入的時候少按一個shift鍵; 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的) 能良好區分JavaScript變量命名(JS變量命名是用「_」)

3.不要純數字、中文等命名, 儘量使用英文字母來表示。

命名是我們通俗約定的,但是沒有規定必須用這些常用的命名。

案例:

圖片來自網絡,如有侵權聯繫刪除,謝謝

<head>

<meta charset="utf-8">

<style>

span { font-size: 100px; }

.blue { color: blue; }

.red { color: red; }

.orange { color: orange; }

.green { color: green; }

</style>

</head>

<body>

<span>G</span>

<span>o</span>

<span>o</span>

<span>g</span>

<span>l</span>

<span>e</span>

</body>

多類名選擇器

我們可以給標籤指定多個類名,從而達到更多的選擇目的。

圖片來自網絡,如有侵權聯繫刪除,謝謝

注意:

樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。 各個類名中間用空格隔開。

多類名選擇器在後期布局比較複雜的情況下,還是較多使用的。

<div>亞瑟</div>

<div>劉備</div>

<div>安其拉</div>

<div>貂蟬</div>

類名選擇器 :

< div class=「nav」> 這個 div 的名字 就是 nav nav 就是 div 這個 div 也是 nav

< 人 class = 紫霞仙子 > 我們想要吧div 找到 div {} .nav {}

id選擇器

id選擇器使用「#」進行標識,後面緊跟id名,其基本語法格式如下:

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中,id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定,在同一個頁面內,不允許有相同名字的id對象出現,但是允許相同名字的class。

類選擇器(class) 好比人的名字, 是可以多次重複使用的, 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼, 全中國是唯一的, 不得重複。 只能使用一次。

id選擇器和類選擇器最大的不同在於 使用次數上。

圖片來自網絡,如有侵權聯繫刪除,謝謝

通配符選擇器

通配符 選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼,使用通配符選擇器定義CSS樣式,清除所有HTML標記的默認邊距。

* { margin: 0; /* 定義外邊距*/ padding: 0; /* 定義內邊距*/ }

注意:

這個通配符選擇器,就像我們的電影明星中的夢中情人, 想想它就好了,但是它不會和你過日子。

原文地址:https://blog.basnit.com/90.html

相關焦點

  • 11 - 前端開發 - CSS 選擇器
    DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS 選擇器</title> <style type="text/css"> li{color: red}</style></head>
  • Web前端學習第22課,理解CSS標識選擇器、類選擇器和屬性選擇器
    它們分別是:標籤選擇器、標籤分組選擇器、上下文選擇器(也叫祖先後代選擇器)。標籤選擇器就是以HTML文檔的標籤名作為選擇器。標籤分組選擇器,也叫逗號選擇器,它可以選擇多個標籤,並且為這多個標籤元素設置一個相同的樣式。上下文選擇器,也就是空格選擇器,空格後面是要選擇的目標元素,空格前面是限定這個元素必須包含某個祖先元素的情況下,這個元素才被選中。
  • 好程式設計師web前端培訓分享HTMLCSS學習之CSS基礎
    好程式設計師web前端培訓分享HTMLCSS學習之CSS基礎,CSS(cascading style sheet) 漢譯為層疊樣式表,是用於控制網頁樣式 WEB標準中的表現標準語言,在網頁中主要對網頁信息的顯示進行控制。
  • (02)CSS 選擇器詳解 | CSS
    前言:本篇行文順序為,在第一部分介紹「 HTML 文檔樹結構」,在完全理解這個「樹結構」的基礎上,才可以很好地掌握文章下邊緊接著的兩個大選擇器(組合選擇器和偽類選擇器)。因為只有有了這個「結構樹」,我們本篇討論的「選擇器」才能夠起作用。又是很大、很雜、很基礎、很重要的知識點,屬必掌握項。
  • web前端怎麼樣才能入門
    web前端怎麼樣才能入門,首先我們要從什麼是初級web前端工程師說起:按照我的想法,我把前端工程師分為了入門、初級、中級、高級這四個級別:入門級別指的是了解什麼是前端(前端到底是什麼其實很多人還是不清楚的
  • Web前端入門新人必看,怎樣使用CSS修改HTML的樣式
    一、CSS的起源當web開發還是一項新技術的時候,無論定義網頁內容還是定義網頁樣式,都是使用的HTML語言,HTML的內容和樣式沒有區分開,如古老的HTML樣式:Css樣式其中color表示顏色,center讓文字居中,不是目前規範的書寫形式,而且舊的HTML標籤都是大寫的,web開發人員還需要來回切換大小寫,所以很多人認識到了這種開發方式並不理想
  • CSS基礎:基礎和語法
    CSS語法CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素。在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。h1 {color:red; font-size:14px;}
  • 自學web前端怎麼學?web前端學習路線css屬性
    自學web前端技術,如果才能找到一份web前端的工作。按照現在的招聘標準來看,無論你去哪個公司面試,你只需要滿足他們公司的需求就可以。找到一份web前端工作需要掌握的內容如下:首先是html,css這些簡單的靜態布局這是最基本的學習內容,不在多說。
  • 盤點web前端動畫技術,css動畫是通過什麼實現的?
    網頁架構(html)、網頁樣式(css)、JavaScript之前的關係眾所周知網頁前端由網頁架構(html)、網頁樣式(css)、網頁互動(JavaScript)三部分組成,對於新手來說理解他們之前的關係有些困難,我們可以把網頁前端比成一座房子,html代表房子的基礎和架構、css表示房子的裝修風格是中式、歐式還是其他風格的,JavaScript代表這個房子中能夠產生交互的東西,比如門和窗戶它們都有打開和關閉的動作。
  • 前端Web-CSS語法全解1
    CSS概述(1)CSS概念: 層疊樣式表(Cascading Style Sheets)css可以用來為網頁創建樣式表,通過樣式表可以對網頁進行裝飾。主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體等所謂層疊,可以將整個網頁想像成是一層一層的結構,層次高的將會覆蓋層次低的而css就可以分別為網頁的各個層次設置樣式
  • CSS核心基礎 一些常見的選擇器的使用 小白教程
    DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>ID選擇器</title><styletype="text/css">
  • Web前端:1、HTML&CSS概述及結構
    02CSS概述全稱Cascading Style Sheets(層疊樣式表),定義html文檔的樣式;是頁面表現的基礎——外部樣式表(link在html的head中)<link rel="stylesheet" href="css地址"><--功能與特點:復用、維護-->——內部樣式表(style在html的head中)
  • Web前端學習第20課,如何為HTML元素編寫CSS樣式表
    本節課主要有關CSS兩個方面的問題:css樣式規則怎麼寫以及寫在哪裡的問題。1.CSS的寫法規則CSS 寫法規則由兩部分構成:選擇器,以及一條或多條屬性聲明。選擇器是您需要設置樣式的 HTML 元素。每條聲明由屬性和值組成。
  • 【乾貨】各大網際網路公司前端筆試面試題–HTML,CSS篇
    整理分享出來希望更多的前端er共同進步吧,不僅適用於求職者,對於鞏固複習前端基礎更是大有裨益。而更多的題目是我一路以來收集的,也有往年的,答案不確保一定正確,如有錯誤或有更好的解法,還請斧正。前面幾題是會很基礎,越下越有深度。1.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
  • web前端開發面試題一之(html,css)
    前端還是一個年輕的行業,新的行業標準, 框架, 庫都不斷在更新和新增,正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話:「每18至24個月,前端都會難一倍」,這些變化使前端的能力更加豐富、創造的應用也會更加完美。所以關注各種前端技術,跟上快速變化的節奏,也是身為一個前端程式設計師必備的技能之一。Doctype作用?標準模式與兼容模式各有什麼區別?
  • HTML+CSS:css選擇器介紹之標籤選擇器、類選擇器以及ID選擇器
    上篇文章給大家說了css的三種不同的引入方式,今天給大家說一下css的三種選擇器:標籤選擇器、類選擇器和ID選擇器。那麼有人就會問了,什麼是選擇器?我們寫的css樣式聲明(定義)由兩部分組成,形式如下:選擇器{ 樣式;},在{}之前的部分就是「選擇器」,「選擇器」指明了{}中的「樣式」的作用對象,也就是「樣式」作用於網頁中的哪些元素。比如我們之前寫的span{ color:#f00; }中的span就為一個選擇器。
  • css 常用選擇器
    在HTML(標準通用標記語言下的一個應用)中,根元素永遠是HTMLcss關係選擇器:E F{} 選擇所有被E元素包含的F元素。css屬性選擇器E[att]{} 選擇具有att屬性的E元素。E[att=」val」]{} 選擇具有att屬性且屬性值等於val的E元素。
  • 好程式設計師web前端培訓分享HTML/CSS部分面試題
    好程式設計師web前端培訓分享HTML/CSS部分面試題。準備參加web前端面試的小夥伴們一起看一看吧,希望能夠對大家有所幫助! 4個部分一起構成了css中元素的盒模型。 2、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
  • 零基礎轉行Web前端需要如何去學才更高效
    web前端開發要學的知識內容涉及的會很寬泛,雖然說主要是html、css和JavaScript這些基礎知識點,但學前端開發除了要學這些基礎知識外,學員還要進行延伸和深入的去學,而且網際網路時代不斷發展,掌握了這些新技術、新技能,在職場的競爭力必然會翻倍提升。
  • Web前端學習第19課,簡單了解CSS層疊樣式表
    <p><b>要設為粗體的文字</b></p>(3) 使用樣式表來設置如果你需要更多了解和學習web前端基礎知識,請參考下面的書籍。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔,你就可以同時改變站點中所有頁面的布局和外觀。由於允許同時控制多重頁面的樣式和布局,你能夠為每個 HTML 元素定義樣式,並將之應用於你希望的任意多的頁面中。如需進行全局的更新,只需簡單地改變樣式,然後網站中的所有元素均會自動地更新。