前端基礎 CSS樣式

2021-08-16 11:00:25 字數 1198 閱讀 8899

#css樣式分為3種:

#優先順序:行內樣式》內嵌樣式》外部樣式

1.行內樣式:

"width: 300px;height: 300px;background: green">

2.內嵌樣式

head中間新增樣式:3.外部樣式

lesson.css樣式檔案:

div

#引用方式:

"stylesheet" href="lesson.css">

擴充套件:修改頁面頁籤的圖示:

"shortcut icon" href="image/test1.ico">

#1.萬用字元選擇器

* #2.標籤(tagname)選擇器

div

#3.class選擇器,一般給具有相同屬性的元素設定同乙個class

.box

#4.id選擇器,id具有唯一性

#box

#5. +是相鄰選擇器,操作的物件是該元素後的同級元素,只會針對乙個元素

div + p+p

#6.群組選擇器,對幾個相同熟悉的選擇器進行樣式設定,div和p都生效

div, p

#7. ~ 是兄弟選擇器:div後所有同級p元素生效

div ~ p

#8.>子代選擇器 :div所有子元素p生效,變成藍色

div > p

#9.後代選擇器:可以指定某一層級子元素生效,div的下面所有li元素樣式生效

div li

#10.偽選擇器

#a標籤:

a:link

a:visited

a:hover

a:active

#div標籤:

div

div:hover

div:hover p

#11.通用選擇器的優先順序:

選擇器優先順序:

(*)class類選擇器<(#)id選擇器

級別相同的選擇器,後面的樣式會覆蓋前面的

複雜後代選擇器:

1.先比id 再比class 再比tagname

2.id選擇器個數不相等,id越多,優先順序越高

3.id選擇器相同,則比class,在比tagname

# 快捷鍵:

ul>li*5 + tabl 快捷輸出5個li標籤

web前端 CSS樣式

一 樣式 a css cascading style sheet 層疊樣式表 b 樣式的引入方式 行內樣式 內容 內部樣式 在頁面頭部 外部樣式 在頁面頭部以link標籤鏈入 c 樣式的基本語法 1.選擇器 2.基本選擇器的種類 1.標籤選擇器 標籤名稱 同名標籤自動響應 2.類選擇器 類選擇器名稱...

前端css樣式規劃

images 背景 css 樣式檔案 js 指令碼檔案 temp 臨時檔案 global.css 全域性樣式 headfoot.css 頭部與底部樣式 index.css 首頁樣式 xx channel.css 頻道首頁頁面樣式 eg book channel.css,video channel.c...

CSS基礎樣式

css指層疊樣式表,它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同,則後面元素的樣式會覆蓋前面樣式。css樣式表由選擇器和宣告兩個部分組成,其中選擇器是通過名字來標識元素的,宣告用於定義元素的樣式。a 樣式表比較常見的有三種引入方式 1.行內樣式...