CSS 基本樣式

2021-09-05 18:20:52 字數 3568 閱讀 7336

css

樣式:

style

顏色相關樣式

backgroud-color(寫法類似於color)

backgroud-image:url(位址);

backgroud-repeat:repeat|no-repeat|repeat-x|repeat-y

margin 外間距

border 邊框

padding 內間距

style

="background

: #9cdcfe;

height

: 60px;

padding-left

: 60px;

border

: black 2px solid;

margin-bottom

: 10px

">

內容1div

>

style

="background

: #9cdcfe;

height

: 60px;

padding-left

: 60px;

border

: black 2px solid

">

內容2div

>

div

position:absolute; 絕對定位

左邊原點在左上角

left: x座標

top:y左邊

z-index:z座標 取值越大,越靠近上層

style

="background-color

:rgba

(0,255,0,0.5)

;width

: 100px;

height

: 100px;

position

: absolute;

left

: 0;

top: 0;

z-index

: 30

">

div>

style

="background-color

:rgba

(255,0,0,1)

;width

: 100px;

height

: 100px;

position

: absolute;

left

: 10px;

top: 0;

z-index

:20"

>

div>

字型大小:font-size

選擇字型:font-family(電腦上必須事先有這個字型)

傾斜:font-style: italic;

加粗:font-weight: bold;

貫穿線:text-decoration: line-through

下劃線:text-decoration: underline

style

="font-style

: italic;

font-weight

: bold

">

內容p>

style

="text-decoration

: underline

">

原價 998p

>

##顯示隱藏

display:none 隱藏

block 顯示

style

="display

: none

">

顯示資訊p

>

在裡定義乙個有名稱的樣式表,以後需要用樣式的時候使用class=「樣式名」

>

.c1style

>

class

="c1"

>

段落1p

>

名字的更專業名稱叫:選擇器(selector)

類選擇器

上面的例子使用的就是類選擇器

id選擇器

id的取值不能重複,id不能以數字開頭

>

.c1#p1

style

>

"p1"

>

段落2p

>

元素選擇器

span
>

aaaspan

>

>

bbbspan

>

>

cccspan

>

選擇器的優先順序

id選擇器》class選擇器》元素選擇器

同級選擇器後定義的優先順序高;

若樣式內部新增了!important,則樣式的優先順序最高

父子選擇器

/*找到乙個p標籤並且它的父親是div*/

div>p

祖先後代選擇器

祖先標籤 後代標籤

div p
>

>

>

段落1p

>

>

段落2p

>

div>

>

段落3p

>

div>

>

段落4p

>

偽類選擇器

按鈕 滑鼠移入改變樣式,滑鼠移出還原樣式

:hover

#btn1:hover
tr:hover
border

="1"

width

="100%"

>

>

>

atd>

tr>

>

>

btd>

tr>

>

>

ctd>

tr>

table

>

:frist 匹配選中的第乙個

:last 匹配選中的最後乙個

:focus 聚焦

CSS基本樣式

標籤選擇器 類選擇器 id選擇器 id具有唯一性 優先順序 id 類 id 字型型別 font family 字型大小 font size 字型風格 font style italic 斜體 字型粗細 font weight 定義粗體字元,範圍是100 900 文字顏色 color 水平對齊方式 t...

css樣式設計 基本樣式

盒子陰影 box shadow 盒子陰影 水平方向上陰影偏移量 垂直方向上陰影偏移量 模糊的程度 正值 陰影的外延伸 數值正負皆可 陰影的顏色 inset box shadow 0px 0px 10px red inset 顏色 表示顏色的方式 顏色名,英文 rgb red green blue 0...

css基本樣式格式

css就是全網頁統一樣式 注釋語句 css的三種樣式,內聯式,嵌入式,外部式 外聯式 優先順序為 內聯式 嵌入式 外部式 內聯式,就是直接在 中加入語句 例子,若是有多條語句在其中,可以在之間加入分號 style color red p style color red span 嵌入式,就是直接在s...