前端學習筆記一 HTML(6)初識CSS

2021-10-07 20:52:37 字數 4458 閱讀 3211

開始第。。六篇。

其實本來想以這篇內容作為css學習開個頭的,仔細想想學css的重點是要在單獨為網頁的樣式設計建立個樣式表,而本篇筆記只講述如何為網頁的一段內容設計樣式。因此還是歸入第一部分的學習中。

第八個示例,就管它叫初見css。

**如下:

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1"

>

>

華為簡介

title

>

head

>

>

style

="color

:gray;

margin

: auto;

width

: 500px;

">

style

="text-align

: center;

">

style

="background-color

: gray;

color

: white;

font-size

: 24px;

">

華為技術****

span

>

p>

>

華為技術****成立於2023年,總部位於中國廣東省深圳市龍崗區。

華為是

>

全球領先的資訊與通訊技術(ict)解決方案**商,

b>

專注於ict領域,堅持穩健經營、持續創新、開放合作,

在電信運營商、企業、終端和雲計算等領域構築了端到端的解決方案優勢,

為運營商客戶、企業客戶和消費者提供有競爭力的ict解決方案、產品和服務,

並致力於實現未來資訊社會、構建更美好的全聯接世界。

>

2023年,華為首超全球第一大電信裝置商愛立信,排名《財富》世界500強第315位。

b>

截至2023年底,華為有17多萬名員工,華為的產品和解決方案已經應用於全球170多個國家,

服務全球運營商50強中的45家及全球1/3的人口。

p>

>

style

="color

: aqua;

">

2023年8月,華為在"2016中國企業500強"中排名第27位。

span

>

style

="color

: aquamarine;

">

2023年6月6日,《2023年brandz最具價值全球品牌100強》公布,華為名列第49位。

span

>

2023年7月22日美國《財富》雜誌發布了最新一期的世界500強名單 ,華為排名第61位。

2023年《中國500最具價值品牌》華為居第六位。

style

="color

: orangered;

">

12月18日,世界品牌實驗室編制的《2018世界品牌500強》揭曉,華為排名第58位。

span

>

p>

>

style

="color

: skyblue;

">

2023年2月,沃達豐和華為完成首次5g通話測試 ;2023年8月9日,華為正式發布鴻蒙系統。

span

>

2023年8月22日,2019中國民營企業500強發布,華為投資控股****以7212億營收排名第一。

2023年12月15日,華為獲得了首批」2019中國品牌強國盛典年度榮耀品牌的殊榮」。

p>

div>

body

>

html

>

執行結果如圖:

就是一篇帶有多種文字格式的文章。

插播一條關於區塊元素的知識點:

html裡大部分html元素都是塊級元素內聯元素。這種元素在瀏覽器顯示時,通常會以新行開始或結束。

例如前面提到過的p段落標籤,類似的還有標題h標籤,ul或ol列表標籤和table**標籤等。

其餘不會以新行開始結束的標籤則稱為內聯標籤,例例如b加粗標籤,td列元素標籤,img標籤等。

開始講解新的標籤:

當需要為網頁內的一段內容或該段內容裡的部分內容設計樣式的時候,一般會把這段內容插進

,因為table的本職工作是作為**。我目前覺得不必如此拘泥於形式。

塊級元素的容器標籤是div,相對應的,內聯元素也有容器標籤。當只需要針對一段文字內容進行樣式設計的時候,就可以把該段文字放入span標籤的內容內;當需要對一整塊內容的部分文字內容設計樣式的時候,則需要在div塊標籤的內容裡的文字段內嵌入span容器標籤並把指定文字放入span標籤的內容內。

另外,div和span標籤可以巢狀

前面提了這麼多遍的設計樣式,具體到底要怎麼設計呢。

利用style樣式屬性

屬性的內容為乙個個以分號隔開的一條或多條宣告組成,宣告的格式為"屬性:值"。

其實在之前的學習中就涉及過樣式的設計了,比如說設計的寬度,只不過當時是直接以宣告作為標籤的屬性來設計。在學習了樣式屬性之後就需要把這個屬性塞進樣式屬性的屬性值裡面。

例如示例**的這一行

style

="color

:gray;

margin

: auto;

width

: 500px;

">

就設定了這篇文字在網頁內佔據的寬度為500畫素。

至於利用樣式屬性能夠怎樣能夠對網頁內的文字,或者排版進行什麼樣的設計,即針對上述內容能夠進行設定的屬性有哪些,直接列個**讓你記住有點不現實,因為實在是太多了。只能夠在學習的過程中遇到什麼設計需求,就學習相對於的屬性即屬性值對應的內容。

針對本次筆記的示例中用到的屬性有(建議結合示例學習):

(1)針對div標籤的內容進行樣式設計:

屬性說明

值background-color

該內容塊的背景顏色

顏色名(如white, red等)或顏色的6十六進製制名(如#000000,#ffffff等)

margin

設定容器本身在網頁內的位置

auto:網頁頂端垂直居中,等

width

這一塊內容所佔據的寬度

以px或百分比為單位的任意正整數

(2)針對span標籤的內容進行字型或背景設計

屬性說明

值background-color

該文字段的背景顏色

顏色名(如white, red等)或顏色的6十六進製制名(如#000000,#ffffff等)

color

該文字段的文字顏色

顏色名(如white, red等)或顏色的6十六進製制名(如#000000,#ffffff等

(3)針對p段落標籤的樣式設計:

屬性說明

值text-align

設定容器的內部元素的對齊方式

left(居左);center(居中);right(居右)等

其實就這幾個**裡列舉的這幾個屬性真的只是冰山一角,但是飯要一口一口吃,慢慢來。況且就算是這幾個屬性的內部都內含玄機。

就比如說align,很容易發現網頁裡的內容在大部分情況下的位置都不會是簡單的垂直居中那麼簡單,但又不能指望乙個屬性的值裡能夠詳細定義一塊內容的位置。

會出現這種情況是因為margin屬性其實是一種「縮寫」屬性,真正要詳細定義一塊內容的位置是由margin-top/ margin-bottom/ margin-left/ margin-right四個屬性來定義的,分別定義了這一塊內容與網頁頂端/底部/左邊框/右邊框之間的距離(不過通常左右間距只用定義其中乙個),以px或百分比為單位。

前端學習筆記(一)HTML基礎

charset utf 8 documenttitle head body html 常規標籤 標籤 屬性 屬性值 屬性 屬性值 空標籤 標籤 屬性 屬性值 說明 3.寫在 中的第乙個單詞叫做標記,標籤,元素。4.標記和屬性用空格隔開。屬性和屬性值用等號連線,屬性值必須放在 號內。5.乙個標記可以沒...

C 學習筆記(一),初識C

乙個簡單的c 程式 首先,通過乙個簡單的程式,了解一下c 中函式的基本結構,c 輸入輸出語句和注釋的方法形式 include 包含輸入輸出流 簡單主函式 讀取兩個數,求和並將結果輸出 乙個函式包含四個部分 返回型別 本例中的int 函式名 本例中的main 乙個括號包含的形參列表 可以為空,本例中m...

前端學習(一) Html

html全稱hypertext mackeup language,超文字標記語言 標記就相當於你在本子上對重點部分進行的螢光筆塗鴉,利用特殊的東西對重點的東西標記出來 至於語言 自己想 如果你用的是pycharm,那你就輸入乙個!然後緊接著乙個tab,就出來了 如果你用的是sublime,那你就輸入...