CSS技術初學習

2021-10-18 14:37:58 字數 3740 閱讀 5568

在標籤的 style 屬性上設定」key:value value;」,修改標籤樣式。

需求 1:分別定義兩個 div、span 標籤,分別修改每個 div 標籤的樣式為:邊框 1 個畫素,實線,紅色。

>

style

="border

: 1px solid red;

">

div 標籤 1div

>

style

="border

: 1px solid red;

">

div 標籤 2div

>

style

="border

: 1px solid red;

">

span 標籤 1span

>

style

="border

: 1px solid red;

">

span 標籤 2span

>

body

>

在 head 標籤中,使用 style 標籤來定義各種自己需要的 css 樣式。 格式如下:

***

多個宣告:如果要定義不止乙個宣告,則需要用分號將每個宣告分開。

雖然最後一條宣告的 最後可以不加分號(但盡量在每條宣告的末尾都加上分號)

需求 2:分別定義兩個 div、span 標籤,分別修改每個 div 標籤的樣式為:邊框 1 個畫素,實線,紅色

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

type

="text/css"

>

divspan

style

>

head

>

>

>

div 標籤 1div

>

>

div 標籤 2div

>

>

span 標籤 1span

>

>

span 標籤 2span

>

body

>

html

>

把 css 樣式寫成乙個單獨的 css 檔案,再通過 link 標籤引入即可復用。

使用 html 的標籤 匯入 css 樣 式檔案。

1.css檔案

建立乙個.css檔案,不再需要標籤。

div

span

2.html 檔案**:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

link 標籤專門用來引入 css 樣式**

rel=

"stylesheet"

type

="text/css"

href

="1.css"

/>

head

>

>

>

div 標籤 1div

>

>

div 標籤 2div

>

>

span 標籤 1span

>

>

span 標籤 2span

>

body

>

html

>

標籤名選擇器的格式是:

標籤名

type

="text/css"

>

divspan

style

>

div 標籤 1

加乙個 # ,後面表示id的屬性值

type

="text/css"

>

#id001

#username

style

>

div 標籤 1

div 標籤 2

加乙個 .,後面表示類的屬性值

type

="text/css"

>

.class01

.username

style

>

div 標籤 class01

div 標籤

組合選擇器的格式是:

選擇器 1,選擇器 2,選擇器 n

組合選擇器可以讓多個選擇器共用同乙個 css 樣式**。

type

="text/css"

>

.class01 , #id01

style

>

case1:只有div標籤才能使用class01樣式

div.class01

case2: 當乙個標籤,其有兒子標籤div,兒子標籤div又有兒子標籤span時,則此標籤才可使用class01樣式

.class01 div span

id相當於人的身份證,不可以重複

class相當於人的名稱可以重複

乙個html標籤只能繫結乙個id名稱

乙個html標籤可以繫結多個class名稱

id選擇器是以#開頭

class選擇器是以.開頭

字型顏色 color:red;

顏色可以寫顏色名如:black, blue, red, green 等

顏色也可以寫 rgb 值和十六進製制表示值:如 rgb(255,0,0),#00f6de,如果寫十六進製制值必 須加#

寬度width:19px;

寬度可以寫畫素值:19px;

也可以寫百分比值:20%;

高度height:20px;

高度可以寫畫素值:19px;

也可以寫百分比值:20%;

背景顏色

background-color:#0f2d4c

字型樣式

color:#ff0000;字型顏色紅色

font-size:20px; 字型大小

紅色 ,1 畫素,實線邊框

border:1px solid red;

div 居中

margin-left: auto;

margin-right: auto;

文字居中

text-align: center;

超連線去下劃線

text-decoration: none;

**細線

table

td,th

列表去除修飾

ul

初學CSS 學習筆記

常用選擇器 css指的是層疊樣式表 cascading style sheets 通過樣式 style 來修飾html元素,使元素樣式的定義更加簡潔高效,從逐條修改元素樣式中解放出來。例 style background color green 好好學習,天天向上0 div 例 divstyle 例...

CSS技術學習小計

css cascading style sheet 層疊樣式表單 是用於 增強 控制網頁樣式並允許樣式資訊於網頁內容分離的一種標記語言。css定義的規則具體如下 選擇器在上述的樣式規則種,選擇器用於指定css樣式作用的html物件,花括號內的屬性是對該物件設定的具體樣式。其中,屬性和值以 鍵值對 的...

初學CSS樣式

今天學了三個樣式表,邊學邊練正好給了我喘息的時間,這樣的節奏我還是挺適應的,學會使用這些方法等,內部樣式表 內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性...