H5學習之11 body的background.div的background font的設置

<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">

    <title>aaa</title>

</head>
<body bgcolor="#7358ff" text="black"  >
<!--body標籤的 bgcolor屬性設置背景顏色,text屬性字體顏色,

重點:body標籤的背景圖片可以由 background屬性設置。  background="xxx.jpg"
但是body標籤設置 背景顏色,字體顏色,背景圖片 不要跟div弄混,不一樣的,
div需要在style裏設置。body也有style屬性,應該也可以跟div一樣用style設置

顏色值3種格式
第一種就是#ffffff 六位十六位表示RGB
第二種是直接以名字 black white
第三種是這樣 rgb(255,255,255)
-->

<div style="background-color: rgb(200,150,250);width:255px;height:255px">
    aaaa
</div>
<!--
div的背景顏色由style裏設置,可以直接寫在style屬性裏,但是一般都是在css文件裏設置
background-color:設置顏色
-->

<div style="color: blanchedalmond ;font-size:3em; font-family:Times;
font-style: oblique;  font-weight: 900;
background-image:url(68.jpg);width: 1000px;height: 1000px; ">
    aaa
</div>
<!--
            div的背景圖片 background-image:url(/a/b/xx.jpg)

            div的字顏色 color:black;

            div的字大小 font-size:100px;
            可以用px 也就是像素設置,但是一般都用em單位來設置字體大小, 1em=16像素
            1em 等於當前的字體尺寸。如果一個元素的 font-size  16 像素,那麼對於該元素,1em 就等於 16 像素。在設置字體大小時,em 的值會相對於父元素的字體大小改變。
            瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
            可以使用下面這個公式將像素轉換爲 empixels/16=em
            (注:16 等於父元素的默認字體大小,假設父元素的 font-size  20px,那麼公式需改爲:pixels/20=em            父元素也就是包含這個元素的元素
            在所有瀏覽器中均有效的方案是爲 body 元素(父元素)以百分比設置默認的 font-size 值:
            實例
            body {font-size:100%;}
            h1 {font-size:3.75em;}
            h2 {font-size:2.5em;}
            p {font-size:0.875em;}
            也就是說em並不是時刻都是16px

            其實這些都寫在了style裏,也就是等於是設置style的屬性,擁有style屬性的任何標籤都可以這樣設置,到時候都可以寫在CSS文件裏。

            字體:font-family:(Times, TimesNR, 'New Century Schoolbook',
                 Georgia, 'New York', serif;)設置字體
                 不是字體有這麼多,而是從第一個開始設置,第一個可以,就用第一個字體,不行就換下一個,最後一個值是都沒有
                 的話就用系統默認的字體格式。
                    字體名字有空格或者有其他符號時 需要加單引號或者雙引號。 但是在style屬性裏,因爲已經有了雙引號 就要用單,但是如果是style標籤,那就可以用雙引號

            文本是否傾斜:font-style:normal - 文本正常顯示
                       italic - 文本斜體顯示
                       oblique - 文本傾斜顯示

            文本粗細:font-weight:100 font-weight:normal/bold/lighter
            100-900代表了九級的粗度
            關鍵字 100 ~ 900 爲字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別,
            那麼這些數字就直接映射到預定義的級別,100 對應最細的字體變形,900 對應最粗的字體變形。
            數字 400 等價於 normal,而 700 等價於 bold
            使用小型的大寫字母來顯示: font-variant:normal/small-caps

 -->

</body>
</html>
具體效果如下:



代碼解釋如下:

設置了一下 body的背景顏色

<body bgcolor="#7358ff" text="black"  >
<!--body標籤的
bgcolor屬性設置背景顏色,text屬性字體顏色,
background="xx.jpg" 設置背景圖片
重點:body標籤的背景圖片可以由 background屬性設置。  background="xxx.jpg"
但是body標籤設置 背景顏色,字體顏色,背景圖片 不要跟div弄混,不一樣的,
div需要在style裏設置。body也有style屬性,應該也可以跟div一樣用style設置

顏色值有是那種格式,
第一種就是#ffffff 六位十六位表示RGB
第二種是直接以名字 black white
第三種是這樣 rgb(255,255,255)
-->
需要注意的就是body設置背景顏色 背景圖片 文字顏色 是不用寫在style裏的。顏色值的格式也需要注意一下。

而div則需要寫在style裏,具體的實現也不一樣。


還創建了兩個div,

<div style="background-color: rgb(200,150,250);width:255px;height:255px">
    aaaa
</div>
<div style="color: blanchedalmond ;font-size:3em; font-family:Times;
font-style: oblique;  font-weight: 900;
background-image:url(68.jpg);width: 1000px;height: 1000px; ">
    aaa
</div>

設置了第一個div的 背景顏色,長寬。都需要寫在style裏。

<!--
div的背景顏色由style裏設置,可以直接寫在style屬性裏,但是一般都是在css文件裏設置
background-color:設置顏色
-->

設置了第二個div的 背景圖片,字體屬性等值。

  div的背景圖片 background-image:url(/a/b/xx.jpg)

           div的字顏色 color:black;

           div的字大小 font-size:100px;
           可以用px 也就是像素設置,但是一般都用em單位來設置字體大小, 1em=16像素
           1em 等於當前的字體尺寸。如果一個元素的 font-size  16 像素,那麼對於該元素,1em 就等於 16 像素。在設置字體大小時,em 的值會相對於父元素的字體大小改變。
           瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
           可以使用下面這個公式將像素轉換爲 empixels/16=em
           (注:16 等於父元素的默認字體大小,假設父元素的 font-size  20px,那麼公式需改爲:pixels/20=em           父元素也就是包含這個元素的元素
           在所有瀏覽器中均有效的方案是爲 body 元素(父元素)以百分比設置默認的 font-size 值:
           實例
           body {font-size:100%;}
           h1 {font-size:3.75em;}
           h2 {font-size:2.5em;}
           p {font-size:0.875em;}
           也就是說em並不是時刻都是16px

           其實這些都寫在了style裏,也就是等於是設置style的屬性,擁有style屬性的任何標籤都可以這樣設置,到時候都可以寫在CSS文件裏。

           字體:font-family:(Times, TimesNR, 'New Century Schoolbook',
                Georgia, 'New York', serif;)設置字體
                不是字體有這麼多,而是從第一個開始設置,第一個可以,就用第一個字體,不行就換下一個,最後一個值是都沒有
                的話就用系統默認的字體格式。
                   字體名字有空格或者有其他符號時 需要加單引號或者雙引號。 但是在style屬性裏,因爲已經有了雙引號 就要用單,但是如果是style標籤,那就可以用雙引號

           文本是否傾斜:font-style:normal - 文本正常顯示
                      italic - 文本斜體顯示
                      oblique - 文本傾斜顯示

           文本粗細:font-weight:100 font-weight:normal/bold/lighter
           100-900代表了九級的粗度
           關鍵字 100 ~ 900 爲字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別,
           那麼這些數字就直接映射到預定義的級別,100 對應最細的字體變形,900 對應最粗的字體變形。
           數字 400 等價於 normal,而 700 等價於 bold
           使用小型的大寫字母來顯示: font-variant:normal/small-caps

-->


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章