css美化網頁基礎內容與盒子模型

2021-10-13 12:48:23 字數 995 閱讀 8031

字型 文字 和 background

字型屬性

font-family 型別

font-size 大小

font-style風格

font-weight 粗細

font: italic bolder 20px 「宋體」;(color不能寫在font裡面)

文字屬性

color red

text-align 設定元素水平對齊方式right

text-indent 設定首行文字的縮排25px

text-height設定文字的行高20px

text-decoration 設定文字的裝飾none/underline/overline(上劃線)/line-through(刪除線)

文字排版

left right center justify(文字兩端對齊)

vertical-align垂直對齊方式

屬性:middle top bottom

偽類選擇器

a:hover / a:active/ a:link/ a:visited

list 列表屬性

list-style:none/disc/square/circle/decimal

設定背景

background-color

background-image:url(路徑) no-repeat

背景定位

background-position

.title

盒子模型

border:1px solid red;

外邊距margin margin-top margin-right margin-bottom margin-left

網頁居中對齊:margin:0px auto;

內邊距padding padding-left padding-right padding -top padding-bottom

border-radius 製作特殊圖形

div

CSS基礎 盒子模型

width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度,當內容超出寬度和高度之後,不會自動填充擴...

CSS開發基礎 CSS盒子模型

在此可以填充內容 div body html 顯示結果如下 通過改變width height padding margin的值改變顯示結果,還可以設定margin left margin right等值,每乙個值下面都是一串的設定,通過除錯可以發現整個圖形的現實是有上 下 左 右不同的塊組成的,可以...

CSS基礎 背景樣式與盒子模型

在我們的程式設計過程中,經常不光會使用到設定字型樣式,還會用到設定背景顏色,背景等樣式,今天我們就來學習一下關於背景的樣式設定 1.背景顏色 background color 顏色這個屬性我們為我們的標籤設定背景顏色,其中我們有三種屬性值的書寫方式 1.預定義的顏色表示 red,blue,green...