HTML學習筆記(三)

2021-07-26 18:13:12 字數 2385 閱讀 3374

二常用樣式

三看著更舒服的hello world

"css/style.css" rel="stylesheet"

type="text/css">

href指向.css檔案位置。

type="text/css">* 

style>

*表示所有元素都應用該樣式

style="color:#333"

;margin:auto;>

可以使用 background-color 屬性為元素設定背景色。

把body的背景設定為黑色:

style="background-color:black;">

body>

等價於

style="background-color:#000;">

body>

background-img用於設定元素背景,例如為div設定乙個背景

url裡面的值為的相對位置。

如果需要在頁面上對背景影象進行平鋪,可以使用background-repeat屬性,也可以利用 background-position屬性改變影象在背景中的位置。

例如,將div中的背景居中顯示:

利用background-size:cover;可以實現背景的拉伸。

如果想讓背景不隨文件滾動而滾動,可以用background-attachment:fixed

2.文字

元素的文字熟悉,是對元素內容的文字進行修飾。

例如

p

該樣式採用元素選擇器,所有段落文字進行修飾,color規定文字顏色,font-size規定文字大小,text-indent設定首行縮排,text-align設定文字對齊方式,text-decoration規定文字修飾例如下劃線。

3.位置與大小

css中的通過尺寸屬性控制元素大小:

通過位置屬性控制元素位置:

position屬性常用屬性值:

4.框模型

height與width設定的是元素內容的大小

padding設定的是元素內容到邊框的距離,稱為內邊距。

margin設定的是元素其他元素距離該元素邊框的最小值,稱為外邊距。

通常將margin設定為auto來實現元素的水平居中。

原始碼如下:

lang="zh-cn">

hello worldtitle>

charset="utf-8" />

rel="stylesheet"

href="style/style.css" />

src="js/jquery-3.1.1.min.js">

script>

type="text/css">

p .hide

style>

head>

style="margin:auto;width:800px;">

hello worldh1>

hello world ,中文意思:你好,世界。世界上的第乙個程式就是hello world,由brian kernighan創作。p>

hello world起源h3>

「hello, world"程式是指在計算機螢幕上輸出「hello,world」這行字串的電腦程式,「hello, world」的中文意思是「世界,你好」。這個例程在brian kernighan 和dennis m. ritchie合著的《the c programme language》使用而廣泛流行。因為它的簡潔,實用,幷包含了乙個該版本的c程式首次出現在2023年brian kernighan所撰寫的《programming in c: a tutorial》

最初的hello worldh3>

最初的"hello, world"列印內容有個標準,即全小寫,有逗號,逗號後空一格,且無感嘆號。不過沿用至今,完全遵循傳統標準形式的反而很少出現。p>

src=""

alt="這張不能正常顯示"

class="hide" />

div>

body>

html>

html學習筆記(三)

1.div左右布局 1.1 css 樣式 div.left div.content 2.引用 3.city 北京上海 深圳廣州 內容顯示區域 2.使用frameset標籤 需要在body標籤外使用 此時分界線是可以拖動的,在fragme 標籤中新增noresize noresize 屬性設定分解線不...

HTML學習筆記(三)

1.html 樣式例項 背景顏色 background color 屬性為元素定義了背景顏色 this is a paragraph.特別注意,此處修改了底紋顏色 2.html 樣式例項 字型 顏色和尺寸 font family color 以及 font size 屬性分別定義元素中文字的字型系列...

HTML學習筆記(三) HTML 元素

html 文件是由 html 元素定義的。html 元素指的是從開始標籤 start tag 到結束標籤 end tag 的所有 開始標籤 元素內容 結束標籤 this is a paragraph this is a link 注釋 開始標籤常被稱為開放標籤 opening tag 結束標籤常稱為...