前端學習之CSS(01)概述及新增方式

2021-10-05 13:01:28 字數 2721 閱讀 5665

html:網頁的內容

css:內容的樣式

>

>

charset

="utf-8"

>

>

title

>

head

>

>

>

天使投資指早期投資,尤其指個人早期投資。p

>

>

vc,venture capital,所謂風險投資、創業投資,是相對靠前的非公開市場股權投資。p

>

>

pe, private equity,所謂私募資本、非公開市場資本,既是私募股權投資的統稱,又特指相對靠後的股權投資。p

>

body

>

html

>

加了css後:

lang

="en"

>

>

charset

="utf-8"

>

>

documenttitle

>

>

pstyle

>

head

>

>

>

天使投資指早期投資,尤其指個人早期投資。p

>

>

vc,venture capital,所謂風險投資、創業投資,是相對靠前的非公開市場股權投資。p

>

>

pe, private equity,所謂私募資本、非公開市場資本,既是私募股權投資的統稱,又特指相對靠後的股權投資。p

>

body

>

html

>

style

="color

: red;

">

天使投資指早期投資,尤其指個人早期投資。

p>

(二)內嵌樣式

將css**內嵌到當前頁面的head標籤部分。

>

>

charset

="utf-8"

>

type

="text/css"

>

pstyle

>

head

>

>

>

天使投資指早期投資,尤其指個人早期投資。p

>

body

>

html

>

用一對style標籤表示,type="text/css"表示當前的樣式是以css文本來規定的。

當前樣式只對當前頁面有效。

內嵌樣式的注意:

即使有公共css**,也是每個頁面都要定義的。

適合檔案很少,css**也不多的情況。

如果乙個**有很多頁面,每個檔案都會變大,後期維護難度也大。

>

>

charset

="utf-8"

>

rel=

"stylesheet"

type

="text/css"

href

="css/style.css"

/>

head

>

>

>

天使投資指早期投資,尤其指個人早期投資。p

>

body

>

html

>

>

>

charset

="utf-8"

>

rel=

"stylesheet"

type

="text/css"

href

="css/style.css"

/>

head

>

>

>

vc,venture capital,所謂風險投資、創業投資,是相對靠前的非公開市場股權投資。p

>

>

pe, private equity,所謂私募資本、非公開市場資本,既是私募股權投資的統稱,又特指相對靠後的股權投資。p

>

body

>

html

>

p
html01

html02

stely.css是定義css樣式,而html中的是引用css樣式。

引用語法:一對link標籤,表示進行乙個檔案的鏈結;rel屬性,指示的是我要鏈結到什麼型別的檔案;href屬性,即鏈結的位置。

頁面結構html**與樣式css**完全分離。

維護方便,直接更改css檔案中的**即可。

可以在同乙個html文件內部引用多個外部css樣式檔案,乙個外部css樣式檔案也可以被多個html檔案引用。

CSS 01學習筆記

css網頁美容師 讓html從樣式中脫離開來,實現html專注去做結構呈現,樣式交給css 作用 設定版面的布局和外觀顯示樣式 一 引入css樣式表 1 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性值3 內容style color red font size...

前端學習之css

1.html中的三種布局格式 a.標準流 網頁中預設的方式 b.浮動 c.定位 2.html的兩大元素 a.塊級元素 獨佔一行 div h1 h6 table p 有序無序列表 ol ul li 等等 b.內聯元素 和相鄰的內聯元素在同一行 a span image input 等等 文字1文字2 ...

前端學習之CSS 背景

通過 css 背景屬性,可以給頁面元素新增背景樣式。背景屬性可以設定背景顏色 背景 背景平鋪 背景位置 背景影象固定等。樣式名稱 background color定義元素的背景顏色 使用方式 其他說明 元素背景顏色預設值是 transparent 透明 使用方式 其他說明 實際開發常見於 logo ...