資訊專欄INFORMATION COLUMN
摘要：在之前我們學(xué)了種選擇器和三種樣式的引入，學(xué)習(xí)選擇器就是為了更好的選擇文本，學(xué)習(xí)的引入是為了使文本增加各種樣式和屬性，下面我們簡單來學(xué)習(xí)一下為文本加樣式和一些屬性和屬性值文本的樣式顏色文本對齊方式文本修飾宋體什么都沒有宋體是上劃線
? ? ? 在之前我們學(xué)了6種選擇器和三種CSS樣式的引入，學(xué)習(xí)選擇器就是為了更好的選擇文本，學(xué)習(xí)CSS的引入是為了使文本增加各種樣式和屬性，
下面我們簡單來學(xué)習(xí)一下為文本加樣式和一些屬性和屬性值：
1.文本的樣式? ? text
（1）顏色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color：red/blue/pink/···；
（2）文本對齊方式? ? ? ? ? ? ? ? ? ? ? ? ? ? ?text-align:left/center/right/justify;
（3）文本修飾? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-decoration:none/overline/underline/line-through;(none ?什么都沒有 ?overline 是上劃線 line-through 刪除線 underline下劃線)
? (4)文本縮進(jìn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-indent:20px;
2.字體? ? ? ? ? ? ? font
?（1）大小? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size:20px;
?（2）顏色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:red; （注：不能寫成font-color:red;因為是錯的)
?（3）形狀? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-style:normal/italic/oblique/indherit;(怕你們不懂，給你們找來張解釋圖）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? （4）字形? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?font-family:"微軟雅黑";
? （5）加粗? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?font-weight:bold;后面也能跟數(shù)字
? ? ? ? ?400是正常 ?比400大是加粗 比400小 是變細(xì) 不帶px
3.背景? ? ? ? ? ? ? ? ? ?background? ? ? ? ? ? ? ? ? ? ? ? ?
? （1）背景顏色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-color:red;可以簡寫成background:red;
? （2）背景圖片? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-image:url("路徑");可以簡寫成background:url();
? （3）背景平鋪? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-repeat:no-repeat/repeat-x/repeat-y;
? ? ?1.平鋪 瀏覽器默認(rèn)就平鋪；
2.不平鋪?no-repeat；
? 3.平鋪x軸或y軸 background-repeat:repeat-x/repeat-y;
?
? （4）背景大小? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? background-size:100% 100%; （第一個100%是x軸上的值，第二個100%是y軸上的值）
background-size：屬性值； 有哪些寫法？
可以設(shè)置具體的數(shù)字大小 ?200px ?200px；也可設(shè)置成?auto??自適應(yīng)（一般做屬性值）i?
? ? ? ? ? ? ? ? ? （普及：body是自適應(yīng)的高，不是固定值，所以給body設(shè)置背景大小時，要留心height，也就是高度的問題）
? （5）背景位置? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-position:100px 100px;?
background-position：屬性值；? ?也是坐標(biāo)軸 向下為正 向右為正數(shù)
有哪些寫法？
也可以設(shè)置具體的數(shù)字大小，如：100px 100px；
?
還可以寫成百分比，如50% 50%就是居中，還可以寫成英文單詞（top/left/right/bottom/center)，如:left left就是左上角
? ? ? ? 背景簡寫：
? ? ? ?
（注：背景大小不能簡寫）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?4.邊框? ? ? ? ? ?border? ? ? ? ? ? ? ? ? ? ? ? ?
? （1）邊框顏色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?brider-color: red;
? （2）邊框粗細(xì)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?border-width: 1px;
? （3）邊框樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?border-style;soild/dashed;（實線/虛線）
? （4）邊框圓角? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?border-radius:50%;（屬性值是具體的數(shù)字或百分比）
? ? ? 邊框簡寫：
? ? ? ?
邊框圓角 ?border-radius ?后面的值是具體的數(shù)字 或百分比
? ? ?
（注：邊框圓角不能簡寫）
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1804.html
摘要：宋體雪碧圖宋體我們的宋體和宋體中有三個屬性可以向服務(wù)器發(fā)送請求，宋體。宋體類型，客戶端和服務(wù)器之間的暗號，根據(jù)拓展名而定。注內(nèi)容包含圖片和文字 background-position ?雪碧圖 我們的html和css中有三個屬性可以向服務(wù)器發(fā)送請求，src href url。 overflow (1)?值hidden 超出就隱藏 (2)?值scroll ?出現(xiàn)滾動條 vis...
摘要：宋體可以繼承的屬性有哪些宋體系列宋體系列宋體的值的問題宋體四個值的順序是宋體左上宋體右上宋體右下宋體左下。宋體在宋體下宋體為負(fù)讓元素居中，前提是知道元素的寬高。宋體如宋體正常狀態(tài)宋體宋體設(shè)值時1.transparent 透明的 2.placeholder 提示語 寫頁面 搞清結(jié)構(gòu)層次， 保證模塊化，讓他們之間不能受到影響 (1)元素性質(zhì) (2)標(biāo)準(zhǔn)流 浮動帶來的脫離文檔流撐不起父級的高度...
摘要：宋體二宋體瀏覽器瀏覽器和瀏覽器之間是由差距的，這個差距是由瀏覽器自身的內(nèi)核決定的。宋體每個瀏覽器都有自己的前綴，主要解決宋體中的兼容問題。宋體是彈性子元素在彈性容器中所占的份數(shù)。一 單位 1.px 就是一個基本的單位 像素 2.em 也是一個單位 用父級元素的字體大小乘以em前面的數(shù)字。如果父級沒有就繼承上一個父級直到body，如果body沒有那就默認(rèn)是16px。 3.rem 也是一個單位，...
摘要：層疊行選不中的情況下，走繼承性。繼承性的權(quán)重為。選中情況下，首先需要考慮權(quán)重的問題，誰的權(quán)重大，就選誰的樣式屬性。如果權(quán)重相同，因為后者會覆蓋前者，所以誰的樣式屬性在后面，就選擇誰的樣式屬性。在上一章中，我們又引出了一個知識點： margin的問題 margin：0 auto；（上下為0，左右自適應(yīng)）會解決元素的居中問題（auto 自適應(yīng)）前提是給這個元素設(shè)置width 同時，我們又要學(xué)習(xí)新...
摘要：而第一個依然存在，所以就會疊加。宋體行級加只要加了，這個元素就會脫離標(biāo)準(zhǔn)文檔流行級元素加了，脫離了標(biāo)準(zhǔn)文檔流，會變得塊不像塊，行不像行，能設(shè)置快高，能并排排列，則也不用給行級標(biāo)簽加了，沒有意義。在前面，我們學(xué)習(xí)了標(biāo)準(zhǔn)文檔流，但在實際制作的過程中，用標(biāo)準(zhǔn)文檔流書寫顯然是不現(xiàn)實的，因此，我們來了解幾種脫離標(biāo)準(zhǔn)文檔流的方法： 1.float 浮動 float：left/right；（左浮/右浮） ...
閱讀 1542·2021-11-04 16:10
閱讀 2793·2021-09-30 09:48
閱讀 2843·2019-08-29 11:31
閱讀 1584·2019-08-28 18:22
閱讀 3233·2019-08-26 13:44
閱讀 1324·2019-08-26 13:42
閱讀 2850·2019-08-26 10:20
閱讀 759·2019-08-23 17:00
