CSS基礎知識（概念、塊級元素、行內元素、選擇器）

時間 2019-11-12

標籤 css 基礎知識概念元素選擇器欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站CSS基礎知識（概念、塊級元素、行內元素、選擇器）php

1、CSS概念css

全稱爲Cascading Style Sheets（層疊樣式表），支持專有的文件 - 擴展名爲".css"html

做用：將HTML的結構(HTML標籤即html)與樣式(顯示的樣式即css)進行分離瀏覽器

² CSS語法結構佈局

語法格式：選擇器{ 屬性名稱: 屬性值; 屬性名稱: 屬性值; }網站

² CSS 註釋spa

用來解釋代碼，且可隨意編輯它，瀏覽器會忽略它。格式：/* 內容 */htm

2、如何使用CSSblog

內聯樣式

經過HTML元素的style屬性實現(<body>中)，即<p style="css屬性 : css屬性值">get

注：HTML的結構與樣式未有效分離，且這種CSS樣式只針對當前元素有效

外聯樣式

a.在 <head> 元素定義 <style>元素，即 <style type="text/css">

選擇器{屬性名 : 屬性值 }

</style>

b.先定義CSS式的文件，後在HTML 頁面中經過<link>元素引入外部css文件

即<link href="css文件路徑" rel="文件類型，其固定值是stylesheet" type="text/css" />

【注：內聯樣式的優先級別高於外聯樣式】

3、塊級元素

概念: 獨佔頁面中一行(下一個塊級元素在新的一行)

*<h1>、<p>、<ul>和<table>等元素，具備良好的語義化（具體的元素具備具體的含義）

【注：<p>標籤中不能包含任何塊級元素】

*<div>元素：自己不具有任何的含義做用。 <div></div>必須設置高度，不然沒法顯示

做用：實現頁面的佈局(相似於<table>表格元素)

4、行內(內聯)元素

概念: 不會獨佔一行(只佔文本內容的區域)；如<td>、<a>和<img>等元素

注: 若在一行中不能容納全部的元素，則會換到下一行，繼續自左向右排列。

<a>標籤中不能包含<a>標籤，但能夠包含其餘任何元素

【通常都是塊級元素中包含行內元素】

<span>元素：自己不具有任何含義。特色：當行內元素佔滿頁面的整個寬度，自動換行

eg: <span></span>

eg: <span></span><span></span>

5、CSS的選擇器

² 常見選擇器

Ø ID選擇器

經過 HTML 頁面元素的id屬性值進行定位，其語法結構爲 #ID

Ø 類(class)選擇器

經過HTML頁面元素的class屬性值進行定位，語法結構爲 .class

注：不能用純數字或者數字開頭來定義類名；不建議使用漢字來定義類名

Ø 元素選擇器

經過HTML頁面元素的元素名進行定位，語法結構爲 元素名

Ø 屬性選擇器

經過 HTML 頁面元素的屬性進行定位，語法結構爲 [屬性名]。

【選擇器的優先級：內聯樣式 > ID選擇器 > 類選擇器和屬性選擇器 > 元素選擇器】

【!important - 將當前選擇器的優先級別設置最高(打亂優先級別的順序)---不建議使用】

² 關係選擇器

Ø 後代選擇器

指根據目標元素匹配後代元素

格式：目標元素後代元素 eg: #t1 div {color : red; }

Ø 子元素選擇器

指根據目標元素匹配子級元素

格式：目標元素 > 子元素 eg: #t1 > div {color : red; }

Ø 相鄰兄弟選擇器

指根據目標元素匹配下一個相鄰兄弟元素

格式：目標元素 + 下一個相鄰兄弟元素 eg: #t1 + div {color : red; }

² 組合選擇器

* 第一種 - 交集結果（多個選擇器並列使用，中間沒有任何分隔）

* 第二種 - 並集結果（多個選擇器並列使用，中間使用" , "分隔）

u 通配符選擇器（*）

做用:匹配當前 HTML 頁面中的全部元素 eg: * {color:red;}

問題:匹配的速度不是很快(頁面元素的數量和複雜程度)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。