HTML:屬性

字體樣式

i.font-size:設(shè)置字體大小

  1. font-size:100px;//單位是像素
    
  2. font-size:1em;//單位是em,1em=16px,瀏覽器默認(rèn)字體大小是16px
    

ii.font-weight:設(shè)置字體加粗

  1. font-weight:bold;
    
  2. font-weight:900;//值的范圍是100~900,數(shù)字越大,字體越粗
    
  3. font-weight:normal;//正常(不加粗)
    

iii.font-style:設(shè)置字體風(fēng)格(傾斜)

  1. font-style:italic;//傾斜的角度比較大
    
  2. font-style:oblique;//傾斜的角度較小
    
  3. font-style:normal;//不傾斜
    

iv.font-family:設(shè)置字體系列

font:設(shè)置字體所有樣式
i. 順序:字體傾斜-》字體粗細(xì)->字體尺寸-》字體系列
ii若要使用font屬性,必須指定字體尺寸和字體系列,其他的可以省略

文本屬性

a)文本修飾:text-decoration
i. underline;//定義文本的下劃線
ii. line-through;//中劃線
iii. overline;//上劃線
iv. none;//去掉下劃線

b)文本對齊方式(水平位置):text-align
i. left;//設(shè)置文本水平居左
ii. center;//居中
iii. right;//居右

a)文本的行高:line-height

b)設(shè)置文本水平垂直居中:
i. Height與line-height一起使用并且要設(shè)置相同的值,可以設(shè)置文本垂直居中
ii.
a)設(shè)置文本縮進(jìn):text-indent
text-indent:2em;//1em=16px
b)設(shè)置單詞之間的間距:word-spacing

c)設(shè)置字母之間的間距: letter-spacing

d)設(shè)置文本自動換行時的處理方法:word-break值描述
normal 使用瀏覽器默認(rèn)的換行規(guī)則。
break-all 允許在單詞內(nèi)換行。
keep-all 只能在半角空格或連字符處換行。
e)設(shè)置是否允許長單詞或url換到下一行:word-wrap
normal 只在允許的斷字點換行(瀏覽器保持默認(rèn)處理)。
break-word 在長單詞或 URL 地址內(nèi)部進(jìn)行換行。

列表屬性

a) list-style-type//設(shè)置列表類型樣式
b) list-style-image//設(shè)置列表樣式為圖片
c) list-style-position//設(shè)置列表縮進(jìn)
d) list-style://設(shè)置列表的一系列樣式
list-style:none;
list-style一系列樣式

圖片與文字的垂直對齊方式:vertical-align

a) top;//設(shè)置文字居圖片的上方
b) middle;//中間
c) bottom;//底部

邊框?qū)傩?/h5>

a) 設(shè)置邊框樣式:border-style
1.border-style:solid//實線
2.border-style:dashed//虛線
3.border-style:dotted;//點劃線
4.border-style:double;//雙劃線
a)設(shè)置邊框?qū)挾龋篵order-width
b)設(shè)置邊框的顏色:border-color
border:1px solid blue;“三劍客”
border//設(shè)置邊框一系列樣式

為元素添加圓角樣式:border-radius
a) -webkit-border-radius:蘋果;谷歌等一些瀏覽器認(rèn),因為他們都用的是webkit內(nèi)核;
b) -moz-border-radius:moz這個屬性 主要是專門支持Mozilla Firefox 火狐瀏覽器的CSS屬性。
背景屬性

a) background-color://設(shè)置背景顏色
b) background-image:url(‘圖片地址’);//引入背景圖片
c) background-repeat://設(shè)置背景圖片是否平鋪
i. no-repeat;//不平鋪
ii.repeat-x;//沿著x軸水平平鋪
iii. repeat-y;//沿著y軸垂直平鋪

d)background-size://設(shè)置背景圖片的尺寸
i. background-size:100px 80px;//第一個值是寬度,第二個值是高度
ii.background-size:cover;// 把背景圖像擴(kuò)展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。

e)background-postion://設(shè)置引入背景圖片的位置
i.background-position:bottom right;
1.第一個值(top,center,bottom),第二個值(left,center,right)
ii. Background-position:100px 80px;(x,y)

  1. 第一個值是x軸:水平方向
  2. 第二個值是y軸:垂直方向
  3. (-x,-y)代表相反方向

f)background-attachment://設(shè)置背景圖片是否隨著頁面滾動
i.fixed;//設(shè)置背景圖片固定(不隨瀏覽器滾動)
ii.scroll;//設(shè)置圖片滾動(默認(rèn)值)

g)background://設(shè)置背景的一系列屬性
屬性值順序(color->image->repeat->attachment->position),可以省略其中某個設(shè)置

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一,HTML有N多標(biāo)簽,根據(jù)顯示的類型,主要可以分為3大類 1,塊級標(biāo)簽 獨占一行的標(biāo)簽 能隨時設(shè)置寬度和高度(比...
    張不二01閱讀 812評論 0 4
  • CSS背景 background-color:red background-image:url('paper.gi...
    專注寒冰三千歲閱讀 388評論 0 2
  • 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數(shù)值就...
    小丶楓閱讀 721評論 0 0
  • @keyframes 規(guī)定動畫。 3 animation 所有動畫屬性的簡寫屬性,除了 animation-pla...
    gtt21閱讀 978評論 0 0
  • 1.字體屬性:(font) 大小{font-size:x-large;}(特大)xx-small;(極小)一般中文...
    ancientear閱讀 500評論 0 2

友情鏈接更多精彩內(nèi)容