HTML分享05

文本屬性

(1)文本大小?

{font-size:12px/14px/16px;}

默認(rèn)16px,最小12px?

還有em單位 em單位是相對與父元素字體大小進(jìn)行取值 1em=父元素文字大小

單位還可以是pt,9pt=12px;

(2)字體類型

{font-family:字體1,字體2,;}

說明:

*當(dāng)字體是中文字體時需加引號;”宋體”

*當(dāng)英文字體中有空格時需加引號: 如“Times? New? Roman”;

Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial.

(3)字體加粗

{font-weight:bolder/bold/normal}

說明:

bolder(更粗的)/bold(加粗)/normal(常規(guī))

1)在css規(guī)范中把字體的粗細(xì)分為9個等級,分別從100-900,其中100對應(yīng)最輕的字體變形,而900對應(yīng)最重的字體變形。 100-500常規(guī)字體 600-900加粗字體

(4)字體傾斜

{ font-style:italic/oblique/normal;}

說明:

取值為:italic/oblique/normal italic和oblique都表示傾斜,不過oblique的幅度要大一點(diǎn)。但一般瀏覽器對它們的區(qū)分不是很明顯

(5)文本行高

{line-height:normal/數(shù)值;}

說明:

當(dāng)單行文本的行高等于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直方向居中對齊;

當(dāng)單行文本的行高小于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直中齊以上任意位置的定位;

當(dāng)單行文本的行高大于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直中齊以下任意位置的定位。

(IE6及以下版本存在瀏覽器兼容問題)盡量不要讓行高大于高度

(6)文本屬性的復(fù)合寫法

font:font-style? ?font-weight? ?font-size / line-height? ?font-family

說明:

按以上順序;size和family固定不可和其他屬性位置互換; *文字字體大小、行高、類型常用的屬性寫法

(7)文本

{color:顏色值;}

1、用十六進(jìn)制表示顏色值: 16進(jìn)制顏色代碼指定顏色的組成方式:前兩位表示紅色,中間兩位表示綠色,最后兩位表示藍(lán)色。把三個數(shù)值依次并列起來 ,以#開頭 0? 1? 2? 3? 4? 5? 6? 7? 8? 9? A? B? C? D? E? F 顏色模式:光色模式 FF 00 00(紅 綠 藍(lán));? ? ? ? 寫法:#faf7fc;

R? ? G? B

2、RGB 例如:color:#F00;

3、 color:rgba(0,255,255,0.6 ) 透明度? alpha

(8)文本對齊

水平對齊方式{text-align:left/right/center/justify;} 兩端對齊

垂直對齊方式{vertical-align:top/bottom/middle;} 上 中 下; inline-block;

(9)文本修飾

text-decoration:none/underline/overline/line-through/blink

說明:

none:沒有修飾

underline:添加下劃線

overline:添加上劃線

line-through:添加刪除線

(10)首行縮進(jìn)

{text-indent:value;}

說明: text-indent可以取負(fù)值; text-indent屬性只對第一行起作用

(11)字間距,詞間距

{letter-spacing:value;}

說明:控制英文字母或漢字的字距

word-spacing:value;

說明:控制英文單詞詞距

列表屬性

(1)定義列表符號

{list-style-type: }

說明:取值: disc(實(shí)心圓) circle(空心圓) square(實(shí)心方塊) none(去掉列表符號);

(2)使用圖片作為列表符號

{list-style-image:url(圖像路徑); }

說明:url(所使用圖片的路徑及全稱)

(3)定義列表符號的位置

{list-style-position: ;}

說明:取值: outside(外邊) inside(里邊);

(4)列表屬性簡寫

{list-style: ; }

說明:

可簡寫直接設(shè)置列表屬性值; 常用屬性: list-style:none;去掉列表樣式;

背景屬性

(1)背景顏色

語法:選擇符{background-color:顏色值;} 簡寫:background:color值;

(2)背景圖片設(shè)置

語法:background-image:url(背景圖片的路徑及全稱);

說明:

網(wǎng)頁上有兩種圖片形式:插入圖片、背景圖; 插入圖片:屬于網(wǎng)頁內(nèi)容,也就是結(jié)構(gòu)。

背景圖:屬于網(wǎng)頁的表現(xiàn),背景圖上可以顯示文字、插入圖片、表格等。

背景圖片的顯示原則? ? ?

1)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中;? ? ?

2)容器尺寸大于圖片尺寸,背景圖片將默認(rèn)平鋪,直至鋪滿元素;? ? ?

3)容器尺寸小于圖片尺寸,只顯示元素范圍以內(nèi)的背景圖。? ? ?

4)加載背景圖必須有容器區(qū)域;

(3)背景圖片平鋪設(shè)置

語法:選擇符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }

no-repeat:不平鋪

repeat:平鋪 (默認(rèn))

repeat-x:橫向平鋪

(4)背景圖片位置

語法:選擇符{background-position:水平方向?qū)傩灾? 垂直方向?qū)傩孕?}

水平方向值:left/center/right或數(shù)值

垂直方向值: top/center/bottom或數(shù)值

說明:

水平向右 垂直向下移動 是正數(shù)值

水平向左 垂直向上移動 是負(fù)數(shù)值

兩個值 :第一個值表示水平位置的值,? ? ? ? ? 第二個值表示垂直的位置。 *例如:當(dāng)兩個值都是center的時候?qū)懸粋€值就可以代表的是水平位置和垂直位置。

(5)背景圖的固定

語法:選擇符{background-attachment:scroll(滾動)/fixed(固定);}

說明:? ? fixed 固定,不隨內(nèi)容一塊滾動;? ? scroll:隨內(nèi)容一塊滾動

(6)背景屬性簡寫

語法:選擇符{background:屬性值1 屬性值2 屬性值3;}

背景縮寫: {background:#00ff00? url(背景圖片的路徑及全稱) no-repeat? center? top;}

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

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

  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時,所整理的筆記。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,477評論 0 7
  • 在CSS屬性中,字體和大小,子元素可以繼承父元素,但顏色不能 CSS核心屬性 一.CSS屬性組成和作用 1.每個c...
    迷茫o閱讀 377評論 0 0
  • [if !supportLists]1.[endif]html5文檔結(jié)構(gòu)由 和( )兩部分組成? A A. B. ...
    蔚藍(lán)指明閱讀 3,946評論 0 1
  • 1.標(biāo)簽 常用的單標(biāo)簽 < !— xx –>:注釋標(biāo)簽 快捷鍵:ALT+/ < br/>:換行標(biāo)簽 注釋:自動生成...
    無念丶無為閱讀 599評論 0 3
  • 目錄 Day01標(biāo)簽行元素 Day02表單元素css選擇器偽類選擇符行內(nèi)元素塊元素表格 Day03文本相關(guān)屬性列表...
    Moquyun閱讀 610評論 0 0

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