文字設(shè)置 ?
? 相關(guān)的屬性介紹:
? ? ? ? 1.font-weight ? ?文字著重
? ? ? ? 2.font-style ? ? ? 文字傾斜
? ? ? ? 3.font-size ? ? ? ?文字大小(一般設(shè)置為偶數(shù))
? ? ? ? 4.font-family ? ? 字體(中文默認(rèn)宋體)
? ? ?5.line-height ? ? 行高 ? (加粗是因?yàn)檫@個(gè)屬性比較重要)
? ? ?6.文字的復(fù)合樣式
? ? ? ? font:font-style |? font-weight | font-size/line-height | font-family(需要注意的是文字的復(fù)合樣式是需要按照順序來(lái)設(shè)置的 )(我嘗試的將font-style |? font-weight可以相互換位置,但是最好按照順序來(lái)寫避免不必要的麻煩)!
(記憶口訣 ?s -w-s -l-f ?是我是理發(fā))
解釋行高:
單獨(dú)解釋行高是因?yàn)樾懈弑容^特殊,行高:指的是文字在一行中所占的位置
通過行高的設(shè)置,可以控制文字在上下二個(gè)方向的位置,將行高和高度設(shè)置一樣可以將文字在標(biāo)簽中處于居中位置.
當(dāng)我們遇到多行文字如何測(cè)量行高的問題?
首先 1 .確定文字的大小
? ? ? ? ?2 .計(jì)算出上下二行文字之間的距離除以2
? ? ? ? ? ? ? ?這里除以2之后分2種情況
? ? ? ? ? ? ? ? 2.1 ?當(dāng)行高是奇數(shù) ? 上面的xpx ? 下面的 x+1 px ? ?下面的比上面多一個(gè)像素.
? ? ? ? ? ? ? ? 2.2 當(dāng)行高是偶數(shù)的時(shí)候,那么上下的值是一樣的. ??
? ? ? ? p{line-height:2em;}
文本設(shè)置
text-align ? ? ? ?1.right ?2.left 3.center ?文本對(duì)齊方式 (可以將塊元素內(nèi)的文本和圖片等居中顯示)
{如果被設(shè)置元素為文本涣易、圖片等行內(nèi)元素時(shí)牛柒，水平居中是通過給父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)的赋兵。}
text-indent ? ? ?1.px單位 ?2.em 單位(根據(jù)字體自動(dòng)計(jì)算大小) 首行縮進(jìn)?
text-decoration ?1.underline ?2.none ?下劃線設(shè)置
letter-spacing ? ? 1.px ? 字母間距
word-spacing ? ? 1.px ? 單詞間距
white-spacing ? ? 強(qiáng)制不換行
常用的屬性 text-indent可以控制文本在左右的位置,結(jié)合上面line-height可以控制文字上下的位置,這樣文字的上下左右位置就都可以控制了!
特殊效果:
原價(jià)上的刪除線使用下面代碼就可以實(shí)現(xiàn)：
.oldPrice{text-decoration:line-through;}
常識(shí)概念:?
?1.一個(gè)空格有多大? ? ? ?宋體的字體的一半大
2.測(cè)量文字的大小 ? ? ?從上到下
3.文字的大小 ? 并不一定是16px大小,不同的瀏覽器不同.
水平居中設(shè)置-定寬塊狀元素
當(dāng)被設(shè)置元素為塊狀元素時(shí)用 text-align：center 就不起作用了华匾，這時(shí)也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
這一小節(jié)我們先來(lái)講一講定寬塊狀元素踱侣。(定寬塊狀元素：塊狀元素的寬度width為固定值瓦糟。)
滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的椒楣。我們來(lái)看個(gè)例子就是設(shè)置div這個(gè)塊狀元素水平居中：
html代碼：
我是定寬塊狀元素，哈哈闰靴，我要水平居中顯示彪笼。
css代碼：
div{? ? border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/? ? ? ? width:200px;/*定寬*/margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */}
也可以寫成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設(shè)置的。
水平居中總結(jié)-不定寬塊狀元素方法（一）
在實(shí)際工作中我們會(huì)遇到需要為“不定寬度的塊狀元素”設(shè)置居中传黄，比如網(wǎng)頁(yè)上的分頁(yè)導(dǎo)航杰扫，因?yàn)榉猪?yè)的數(shù)量是不確定的，所以我們不能通過設(shè)置寬度來(lái)限制它的彈性膘掰。(不定寬塊狀元素：塊狀元素的寬度width不固定章姓。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
加入table標(biāo)簽
設(shè)置display: inline方法：與第一種類似，顯示類型設(shè)為行內(nèi)元素识埋，進(jìn)行不定寬元素的屬性設(shè)置
設(shè)置position:relative和 left:50%：利用相對(duì)定位的方式凡伊，將元素向左偏移50%，即達(dá)到居中的目的
第二種方法：改變塊級(jí)元素的 display 為 inline 類型（設(shè)置為行內(nèi)元素顯示）窒舟，然后使用text-align:center來(lái)實(shí)現(xiàn)居中效果系忙。
一個(gè)android自學(xué)前端之路:如有不正確的地方歡迎指正!!
這里我給大家推薦簡(jiǎn)單容易上手理解的學(xué)習(xí)html+css的視頻地址
(免費(fèi))前端初窺
歡迎添加作者qq群 一起學(xué)習(xí)交流!
微信群:
