css基本樣式與元素選擇器

1.什麼是css？

層疊樣式表（Cascading Style Sheets，簡寫CSS），是一種用來為HTML文檔添加樣式（字型、間距、位置、顔色、角度等顯示效果）的計算機語言

HTML是内容的展示，CSS是内容的裝飾

2.css的引用方式

2.1行内樣式

在開始标簽的内部可以設定一個叫做style的屬性，屬性的雙引号記憶體放該元素代碼的CSS樣式。

2.2内部樣式（隻能在目前文檔使用）

在head标簽中間建立一個style标簽，該标簽内部存放的就是網頁檔案中的CSS代碼

CSS中的代碼注釋格式采用的是：/* 注釋文字* /

2.3外部樣式

在head标簽中間建立一個link标簽，通過href屬性設定外部CSS檔案位址。

rel是relationship的縮寫（指定目前文檔與被連結文檔的關系）rel=“stylesheet”表示我們引用的是一個樣式表（CSS）檔案

3.css代碼的基本格式

3.1元素/标簽命名的基本格式

網頁中除去DTD标簽和注釋标簽外，皆可稱呼為元素，元素即是标簽，标簽即是元素

class命名：誰都可以取，可以取任意次 ID命名（#）：隻能是唯一的，一旦被使用了一次，其他人再也不能用

(一)網頁内容類

标題: title

摘要: summary

箭頭： arrow

商标： label

網站标志： logo

轉角/圓角： corner

橫幅廣告： banner

子菜單： subMenu

搜尋： search

搜尋框： searchBox

登入： login

登入條：loginbar

工具條： toolbar

下拉： drop

标簽頁： tab

目前的： current

清單： list

滾動： scroll

服務： service

提示資訊： msg

熱點：hot

新聞： news

小技巧： tips

下載下傳： download

欄目标題： title

熱點： hot

加入： joinus

注冊： regsiter

指南： guide

友情連結： friendlink

狀态： status

版權： copyright

按鈕： btn

合作夥伴： partner

投票： vote

左右中：left right center

(二)注釋的寫法:

/* Footer */

内容區

/* End Footer */

(三)id的命名:

(1)頁面結構

容器: container

頁頭：header

内容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導航

導航：nav

主導航：mainnav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

标題: title

摘要: summary

(3)功能

标志：logo

廣告：banner

登陸：login

登入條：loginbar

注冊：regsiter

搜尋：search

功能區：shop

标題：title

加入：joinus

狀态：status

按鈕：btn

滾動：scroll

标簽頁：tab

文章清單：list

提示資訊：msg

目前的: current

小技巧：tips

圖示: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載下傳：download

投票：vote

合作夥伴：partner

友情連結：link

版權：copyright

(四)class的命名:

(1)顔色:使用顔色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字型大小,直接使用"font+字型大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目标的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)标題欄樣式,使用"類别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫，除非一看就明白的單詞.

推薦的 CSS 書寫順序

//顯示屬性

display

list-style

position

float

clear

//自身屬性

width

height

margin

padding

border

background

//文本屬性

color

font

text-decoration

text-align

vertical-align

white-space

other text

content

3.2css樣式設定的基本格式

選擇器：選擇元素的器具或是工具

class命名的元素使用: . + 元素名稱，來找到一個元素

id命名的元素使用: # + 元素名稱，來找到一個元素

或是直接寫上标簽的名稱：如，div,p,h1等也可以直接找到元素

聲明塊：存放一個元素具體的樣式代碼

單條樣式代碼的設定格式為：

樣式名稱:樣式值;

樣式名稱+冒号+樣式值+分号

注：所有符号皆為英文符号，不得使用中文符号

4.css基本樣式

位置樣式複合寫法：四個值上右下左

三個值上右左下

兩個值上下右左水準居中 margin：100px auto 0 ;

一個值指四個方向清楚預設邊距 margin：0;

*通配符：指所有的便簽，但是會加重浏覽器解析負擔，不利于頁面優化

rgb指顔色 rgba指透明顔色

5.常用複合選擇器的使用

5.1交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為标簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

5.2并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗号連接配接而成的

任何形式的選擇器（包括标簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

5.3後代元素選擇器

後代元素選擇器是一個空格，空格前後各有一個選擇器

作用是：找到空格前的選擇器所選中的元素的後代元素中符合空格後選擇器的要求的元素

5.4子代選擇器

子代元素選擇器是一個大于号，大于号前後各有一個選擇器

作用是：找到大于号的選擇器所選中的元素的子元素中大于号後選擇器的要求的元素

5.5相鄰元素選擇器

相鄰元素選擇器是一個**+号，作用是：找到加号前的選擇器所選中的元素**緊跟其後第一個符合+号後選擇器選中的元素

5.6兄弟元素選擇器

兄弟元素選擇器是一個**号**，作用是：找到**号前的**選擇器所選中的元素緊跟其後所有符合~号後的選擇器選中的元素

css基本樣式與元素選擇器