HTML基本布局結構

2021-09-29 13:05:33 字數 2631 閱讀 1395

html 元素之間的關係————血緣關係

父子關係 父元素 子元素 直接包含在元素內容

子孫關係 子元素 祖籍元素 隔多代的元素

兄弟關係 具有相同父元素

瀏覽器解析html元素順序

從輩分高的,到輩分低的元素

相同輩分之間,從上往下解析

注意:在html元素中;所有【相對】的單位,都是 子元素相對父元素

我是段落標籤

我是文字標籤字型變粗字型變粗斜體

斜體上標

下標刪除

src="" alt=""/>

src="" alt=""/>

src="" alt=""/>

影象上的星球,把它們放大。

/* css 語法

選擇器選擇器的作用:選中html元素;達到 結構的表現效果

屬性的作用:對被選中的html元素做哪些樣式的處理?

值決定每個樣式處理的程度

*//* 背景

2:小於背景 預設為【平鋪效果】

3:預設起始位置為左上角

/* 設定背景是否平鋪 */

background-repeat: no-repeat,no-repeat;

/*設定背景大小

值一:寬度是容器寬度的百分之幾

值二:高度為容器高度的百分之幾

背景寬度 = 容器寬度 x 值一

背景高度 = 容器高度 x 值二

*/background-size: 10% 10%,20% 20%;

/* 設定背景的位置

背景移動位置 = (容器寬度 - 背景寬度)x 值一 or 值二

*/background-position: 50% 50%;

/* 固定背景 */

background-attachment: fixed;

/* 預設值; */

/* background-attachment: scroll; */

/* background-attachment: local; */

}

/* 這裡css 語言 */

/* css 可以在 ***.css 檔案中寫;然後使用 link 標籤匯入 */

/* body */

/* css語法規則 */

/* 選擇器

選擇器的作用:【選中】html元素;對其進行樣式美化。

屬性 作用:具體做【什麼樣式】美化?

值:決定某個美化樣式的【具體程度】;

注意1: 選擇器只有;選中html作用;不進行;標籤的區分;或者唯一性的區分。

2: 屬性具有唯一性;屬性是不可變得

3: 值是可以改變的

4: 在同乙個選擇器內容;如果寫2個或2個以上屬性;最終使用的值;以最後乙個為主----樣式覆蓋

*//* border: 1px solid #ccc; */

/* 設定盒子盒子陰影 */

/* box-shadow: none; */

/*

內聯陰影:盒子內部陰影樣式

外聯陰影:盒子外部陰影樣式 ***

*//* box-shadow: 5px 5px 5px 5px #000 inset; */

/* 值1:水平位置

值2:豎值位置

值3: 模糊度

值4: 外延 (陰影放大)

值5: 陰影顏色

值6: 內建內部 或外部陰影

*//*

padding 內邊距 邊框與內容之間的距離

乙個值:上=右= 下= 左

兩個值:上下 左右

三個值 上 左右 下

四個值: 上 右 下 左

應用:拉開父容器與子容器 之間距離時候;會使用padding */*

#wraper

.pre

# css盒模型

box-shadow:none | [ , ]*
none:無陰影

length①:第 1 個長度值定義元素的陰影水平偏移值。正值,陰影出現在元素右側;負值,則陰影出現在元素左側

length②:第 2 個長度值定義元素的陰影垂直偏移值。正值,陰影出現在元素底部;負值,則陰影出現在元素頂部

length③:第 3 個長度值定義元素的陰影模糊值半徑(如果提供了)。該值越大陰影邊緣越模糊,若該值為0,陰影邊緣不出現模糊。不允許負值

length④:第 4 個長度值定義元素的陰影外延值(如果提供了)。正值,陰影將向四面擴充套件;負值,則陰影向里收縮

color:定義元素陰影的顏色。如果該值未定義,陰影顏色將預設取當前最近的文字顏色

inset:定義元素的陰影型別為內陰影。該值為空時,則元素的陰影型別為**影

html基本結構

1.html是一種超文字標記語言全稱為 hypertext mark up language 不是程式語言而是標記語言。html標籤要成對出現結束時需要加斜槓例如頭部標籤是主體標籤是 除了一些標籤,他們不是成對存在的 2.doctype是文件型別標記,該標記是將特定的標準通用或xml文件與文件型別定...

HTML基本結構

html簡介 hypertext markup language 超文字標記語言 hypertext markup language 標記語言 的三大元素 超連結,文字 html基本結構 html head title document title head body i am mossbaoo b...

HTML基本結構

html基本結構 html簡介 hypertext markup language 超文字標記語言 markup language 標記語言 的三大元素 html基本結構 i am mossbaoo 標準網頁的html標籤 1.html文件宣告 3.頁面編碼 utf 8 是多國語言編碼 推薦使用 g...