CSS 樣式(背景 文字 字型 盒模型)

2021-09-14 05:30:06 字數 2736 閱讀 5693

一、盒模型

盒模型就乙個盒子,在頁面上用html和css**生成,在預設的情況下,我們是看不到盒模型的,因為它是處於透明狀態,看不到它是什麼模樣,而盒模型是通過邊框來顯示

什麼是邊框?它是乙個屬性,它分別有三個值:margin、border、padding;另外還有對於盒模型一些其他設定,比如top、botton、left、right、center;

margin:外邊距;border:邊框;padding:內邊距;

border邊框是可以設定盒子的高寬度、樣式、顏色的乙個屬性。

操作css**

.div1

效果圖:

margin:外邊距:它是設定盒子與鄰邊的盒子的間距,

padding:內邊距:它是設定盒子與盒子裡面包括的內容的間距

二、背景

在乙個空頁面上,我們可以給它新增一些顏色或者,讓整個頁面看上去更有畫面感,它有4個設定屬性的值;它們分別是:背景顏色、背景、背景重複、背景位置,這4個值可以同時使用

(1)背景顏色:background-color 它包括很多態別,有顏色的英文名、十六進製制的顏色值、rgb(255,255,255)值。例如:

background-color: pink;//粉色 顏色的英文名寫法

background-color: #10fb65 //綠色 十六進製制的顏色值

background-color: rgb(0,1,2);//黑色 rgb(255,255,255);

(2)背景:background-image 設定背景要用url()來選擇所在的檔案位址,它可以覆蓋掉原本背景顏色,也可以只覆蓋一部分,這個根據所需條件來設定大小

操作css**:

.div1

.div2

效果圖:

(3)背景重複:background-repeat 用來設定是否重複,它還有4個值

repeat(縱橫同時重複),

no-repeat(不重複),

repeat-x(x軸方向重複)

repeat-y(y軸方向重複)

background: url(./248914-106.jpg) no-repeat; 這4個值只能設定在指定的背景後面

(4)背景位置:background-position 用來控制的位置,一開始都會顯示在瀏覽器的左上角,,通過這個屬性可以改變它的位置,其還有5個值來分別給他定位,

top、left、bottom、right、center:上、左、下、右、居中;

可以使用兩個值來定位,另外還有通過百分比、畫素來定位

三、字型

(1)color:用於控制字型顏色,它跟設定背景顏色的用法一樣;

操作css**:

.div2

效果圖:

(2)font-size:用來設定字型的大小,此處的字型大小分為相對字型大小和絕對字型大小。 還可以使用關鍵字。例如:

medium(中)、samle(小)、large(大)、 samller(最小)、larger(最大)等.

絕對字型大小:使用畫素(px),點(pt),皮卡(pc),英吋(in)來設定字型的大小,它們是絕對單位,設定多大就是多少,不會受到祖先元素的字型大小影響。

相對字型大小:使用百分比(%),em或者rem,這些單位的值是相小要相對該元素最近的「被設定過字型大小」的祖先元素來確定,比絕對字型大小的設定要複雜點。

備註:(2)以上**來自老師所發的文件。

(3)font-style:更換字型的樣式。

font-style:normal;/正常/

font-style:italic;/斜體/

font-style:oblique;/傾斜/

(4)font-weight:設定字型是否加粗,它有4種屬性值,

font-weight:normal;/正常/

font-weight:lighter;//

font-weight:bold;//

font-weight:bolder;/**/

還有一種簡寫方式:font-weight:10px;使用畫素來設定。

四、文字

(1)text-decoration:用於設定文字是否有修飾線。

text-decoration:none;/去掉下劃線/

text-decoration:underline;/下劃線/ ;

text-decoration:line-through;/中劃線/

text-decoration:overline;/上劃線/

(2)text-align:設定文字對齊,它有4個屬性值:

center:居中;left:左對齊;right:右對齊;justify:兩端對齊;

(3)text-shadow:該屬性用於設定的文字是否有陰影效果。color:想要設定的顏色。xoffset:陰影在x軸向上的偏移。yoffset:陰影在y軸向上的偏移,radius:陰影的模糊半徑。模糊半徑越大,看上去就越模糊。

操作css**:

.div2

效果圖:

(4)line-height:設定文字的行高,使文字處於當前盒模型的中心部分。跟居中很相似。

css背景,文字,字型

一 背景 1.background color,為元素設定背景色。p 預設為透明也可以用 00000十六進製制還可以用rgb來表示。2.background image,背景預設null,body.可以將背景放在任意位置。3.background repeat,背景重複 平鋪,body.引數分別為 ...

CSS溫故第二天 樣式 背景 文字 字型

頁面滿屏且無左右滾動條 body加入 margin 0 main主體設定width為100 即可自適應 測試通過主流瀏覽器 背景 background image url 位址 background color red fff 文字 text indent 2em 縮排 text align cen...

CSS樣式 盒模型

盒模型 border top border right border bottom border left margin top margin right margin bottom margin left margin 20px auto 40px 第乙個盒子與頂端相距20畫素,左右居中,第二個盒...