CSS網頁美化元素屬性介紹

2022-08-22 05:57:14 字數 3066 閱讀 5559

css

html 的塊標籤:

div 標籤: 預設佔一行,自動換行

span 標籤: 內容顯示在同一行

css概述:

cascading style sheets : 層疊樣式表

紅磚, 抹了一層水泥, 白灰

主要用作用:

用來美化我們的html頁面的

html 決定網頁的骨架 ,css 化妝

將頁面的html和美化進行分離

div ,division ,分隔,區域

css 的簡單語法: ​ 在乙個 style 標籤中 , 去編寫 css 內容 , 最好將 style 標籤寫在這個 head 標籤中.

元素選擇:

元素的名稱

id選擇器:

以#號開頭 id 在整個頁面中必須是唯一的s

#id的名稱

類選擇器:

以 . 開頭

.類的名稱

css 的引入方式:

外部樣式 : 通過 link 標籤引入乙個外部的 css 檔案

內部樣式: 直接在style標籤內編寫 css **

行內樣式: 直接在標籤中新增乙個style屬性, 編寫css樣式

css 浮動 : 浮動的元素會脫離正常的文件流,在正常的文件流中不佔空間,

下面的元素會占用上面浮動元素的空間,設定了浮動屬性的元素會脫離標

準文件流的控制,移動到其父元素中指定位置的過程,

float屬性:

left

right

clear屬性: 清除浮動

both : 兩邊都不允許浮動,同時清除兩邊的浮動

left: 左邊不允許浮動

right : 右邊不允許浮動

overflow : hidden ,清除子元素浮動對父元素的影響。

流式布局

css的優先順序 :

標記選擇器權重1,類選擇器權重10,id 選擇器權重100,

按照選擇器搜尋精確度來編寫: 行內樣式 > id選擇器 > 類選擇器 > 元素選擇器

就近原則: 哪個離得近,就選用哪個的樣式 。

css中的其它選擇器

選擇器分組 : 選擇器1 , 選擇器2

屬性選擇器:

a[title]

a[titile='aaa']

a[href][title]

a[href][title='aaa']

後代選擇器: 爺爺選擇器 孫子選擇器 找出所有的後代

子元素選擇器: 父選擇器 > 兒子選擇器

偽類選擇器: 通常都是用在 a 標籤上 ,超連結

css的盒子模型: 萬物皆盒子 順時針 : 上右下左

內邊距: pandding

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px; 上下左右都是10px

padding:10px 20px; 上下是10px 左右是20px

padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px

padding: 10px 20px 30px 40px; 上右下左, 順時針的方向

外邊距: margin

margin-top:

margin-right:

margin-bottom:

margin-left:

css 絕對定位: 依據最近已經定位的父元素進行定位,若果所有父元素都沒有定位,則根據 body 根元素定位。

position: absolute

top: 控制距離頂部的位置

​left: 控制距離左邊的位置

CSS美化網頁元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

CSS3美化網頁元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

css美化元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...