css基礎知識整理

2022-08-22 12:24:10 字數 2419 閱讀 7971

1、css分類樣式分為3類:內聯、內嵌、外部

(1)內聯:寫在標籤裡面,樣式為style="   "

舉例說明:

我是第一行h

執行樣圖:

style="寬度為100畫素,高度為110畫素,背景是綠色"。給這乙個div標籤定css樣式。

(2)內嵌:在裡面內嵌在head內部body外部*/

即舉例:

我是洋洋1

我是洋洋2

我是洋洋3

執行樣圖:

內部有乙個class=lianxi   點class即賦予所有class等於練習的內容背景紅色,高100畫素,寬100畫素字型為黃色。

(3)外部,單獨建乙個css檔案

舉例說明:

也是在裡面

2、選擇器:class、id、復合選擇、屬性、偽類

(1)class,選擇class屬性時用點.xx,根據class的名來篩選元素,並且用class屬性選擇可以有相同的重複的名字

如:我是洋洋1

我是洋洋2

我是洋洋3

選擇class等於lianxi時是點lianxi,這樣我是洋洋的內容就被選擇了,然後就可以給我是洋洋的內容新增屬性。

例如(2)id根據id名來篩選唯一元素,不能有相同的名字,用#加要的id名

即我是洋洋1

我是洋洋2

我是洋洋3

例如#lianxi1,這樣賦予屬性時是給我是洋洋1賦予的

(3)復合中逗號表並列,空格代表後代,大於號代表全部div>p即div中所有的p元素。

舉例說明:#yang,#yang2

div,p 所有的p標籤

(4)a標籤的四個偽類:a:link未訪問的標籤、a:visited已訪問的標籤、a:active以選中的標籤、a:hover滑鼠劃過時

舉例:a:link

a:visited

a:active

a:hover

效果圖:

4、樣式:背景、字型、對齊方式、邊界邊框、顯示隱藏、列表(無序、有序)、格式布局

(1)背景background \

background-image:url(foot-bg.jpg);背景

background-color背景顏色

background-position背景位置

(2)字型

fonf-family字型樣式

font-size字型大小

font-style:italic字型傾斜

font-wight字型粗細

text-decoration:(1)underline下劃線(2)overline上劃線(3)line-through刪除線(4)none去掉線

(3)對齊方式

text-align:center水平對齊方式

line-height行高

text-indent縮排單位畫素

line-height(調節文字的垂直方式,通過設定行高的大小)與vertical-align(調節行內元素的垂直對齊方式)

(4)邊界邊框margin外邊距與padding內邊距(bored1px solid red代表粗細與顏色)

margin上右下左只能調節左右margin-left與margin-right

padding加了內邊距元素會變大,

背景、字型、對齊、邊框舉例:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

#name

.class

style

>

head

>

<

body

>

<

div

id="name"

>

無限歌謠季

div>

<

div

class

="class"

>我想和你唱

div>

body

>

html

>

css基礎知識整理

1 什麼是css?css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整體排版等,而且還可以針對不同的瀏覽器...

CSS基礎知識整理二

下面是定義乙個盒子的border div下面是定義乙個盒子的寬度,其寬度由padding left padding right margin left margin right border left border right和自己本身物體的寬度組成 div 以上案例中div的寬度為232px 乙個...

css基礎知識整理篇

某個大神整理的面試題 內容 content 填充 padding 邊界 margin 邊框 border content部分把border和padding算進去了1 id選擇器 myid 2 類選擇器 myclassname 3 標籤選擇器 div,h1,p 4 相鄰選擇器 h1 p 5 子選擇器 ...