網頁基本樣式

2021-10-12 08:45:39 字數 2335 閱讀 6264

//文字

color 設定文字顏色

text-align 文字對齊方式 center居中 left居左 right居右 justify兩端對齊

text-indent 文字縮排

font-size 控制文字大小

line-height 當文字的行高和盒子的高度一致時,文字垂直居中

//文字的修飾

text-decoration 文字修飾none underline下劃線 overline上劃線 line-through刪除線 blink設定文字閃爍

font-weight 字重 bold加粗 bolder更粗 normal正常值 lighter更細的字型

單位為磅,預設為100-900之間。

font-style 字型風格 normal標準格式 italic傾斜 oblique傾斜(兩個傾斜任記乙個)

font-family 字型型別 後加宋體等等…

復合標籤(需要寫完整):font:italic bold 16px/1.5(1.5行高) 「黑體」

//列表

list-style-type列表風格型別 none disc實心圓 cricle空心圓 square實心正方形 decimal數字

list-style-image : none url(位址)

list-style-psoition:列表位置 inside裡面 outside外面

list-style-none 取消列表樣式

//**

border-collapse: separate預設值 collapse 邊框合併

border-spacing: xpx ypx **間隙

empty-cells(只針對空單元格)單元格邊框線的顯示或隱藏:hide隱藏 show顯示

table-layout: fixed(需要對**設定寬高) automatic(自動,不需要)

caption**標題

caption-side(僅限制caption標籤):top(**標題在上) side(**標題在下)

//網頁布局

//div高階盒子模型

margin外邊距 內容區content padding內邊距 border邊框

上top 下bottom 左left 右right

標準盒模型:

由內容區 + 內邊距padding + 邊框border

padding:1px 2px 3px 4px 分別 上 右 下 左

​ 1px 2px 上下1 左右2

​ 1px 2px 3px 上 左右 下

怪異盒模型

box-sizing:content-box(標準盒模型) border-box(怪異盒模型,來自ie)

標準盒模型計算方式

寬度w=padding(left/right)+border(left/right)

高度h=padding(top/bottom)+border(top/bottom)

怪異盒模型計算方式:

寬度=內容區+padding(left/right)+border(left/right)

高度=內容區+padding(top/bottom)+border(top/bottom)

max-width 最大寬度 min-width最小寬度

max-height 最大高度 min-height最小高度

border-style 邊框樣式 none dotted點線邊框 dashed虛線邊框 solid實線邊框 groove立體線 double雙實線 transparent透明值

border-color 邊框顏色

針對顏色根據需要可分別設定4個邊框顏色或者同時設定四個邊框的顏色

border-top-color :顏色;

border-bottom-color:顏色;

border-left-color:顏色;

border-right-color:顏色;

塊級元素、行內元素、行內塊元素之間的相互轉換:

display: inline(行內元素)inline-block(行內塊元素)block(塊級元素)none(沒有)

要將塊級元素轉換為行內塊元素,使塊級元素可在一行內顯示,若轉換為行內元素,則重疊

#f5f5f5灰色

margin:0 auto 讓盒子水平居中

清除預設樣式:*a

ul,li

網頁的預設樣式

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre li head table tr thea...

網頁樣式 DIV CSS初步

行內樣式 不推薦使用 內部樣式 寫在之間 外部樣式 連線式 先載入樣式表,收載入頁面 匯入式 一 基本選擇器 標籤選擇器 類選擇器 類名 id選擇器 id 二 符合選擇器 並集選擇器 用,隔開 交集選擇器 什麼都不用 後代選擇器 用空格隔開 一 劃分的大的區域一般用id選擇器 header main...

HTML CSS網頁樣式筆記

模板 後台資料庫模板 模板之家 原始碼之家 文字樣式 偽類列表 背景漸變色 盒子模型 display 浮動overflow z index 圖層 標籤名.類名 id名 span標籤大多用來突出主題類的字型 字型設定 font family 宋體 字型大小 font size 20px 字型粗細 fo...