溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML基本的樣式設(shè)置有哪些

發(fā)布時(shí)間：2022-03-09 14:58:49 來(lái)源：億速云 閱讀：197 作者：iii 欄目：web開(kāi)發(fā)

今天小編給大家分享一下HTML基本的樣式設(shè)置有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

　　一、html基本結(jié)構(gòu)

　　<!doctype html>

　　<html>

　　<head>

　　<meta charset="utf-8"/>

　　<title></title>

　　</head>

　　<body></body>

　　</html>

　　注：html大小寫(xiě)都可以 但是不要出現(xiàn)這種的（hTml）要么全都大寫(xiě) 要么全都小寫(xiě) 所有的標(biāo)點(diǎn)符號(hào)都必須是英文狀態(tài)下的?。。∏杏洠?/p>

　?。octype 聲明文檔類型 千萬(wàn)不可以忘記

　　meta charset="utf-8" 防止出現(xiàn)亂碼（不寫(xiě)的話文件在瀏覽器里顯示 文字可能都是以亂碼形式出現(xiàn) 總之需要細(xì)心哦?。?/p>

　　接下來(lái)說(shuō)一下一些基本的樣式設(shè)置
 

　　1.font-size（字體大小）

　　eg.font-size:數(shù)值+px（單位） 例如16px

　　2.font-family:（字體）

　　有個(gè)保底字體Arial

　　多個(gè)字體用逗號(hào)隔開(kāi)

　　如果字體是以空格鏈接的，用單引號(hào)包裹，例如“微軟 雅黑”;

　　sans-serif ?可以讓字體變得比較圓潤(rùn)

　　serif ?  讓字體棱角分明

　　3.color （設(shè)置字體顏色） 可以直接用顏色名 eg.red

　　或者十六進(jìn)制編碼（#666666）

　　或者rgb（0,0,0）其中的值為0&mdash;&mdash;255 ?三原色

　　4.font-weight（字體加粗）bold 加粗 ?默認(rèn)值為normal

　　5.text-align （字體對(duì)齊方式） 有三個(gè)值，分別為left right center?

　　6.line-height（行高） ? 單行文本設(shè)置高度與容器高度一樣，可以實(shí)現(xiàn)垂直居中的效果。

　　7.text-decoration （設(shè)置下劃線樣式）underline（下劃） overline（上劃）line-through（中間劃） none（去除樣式）

　　8.text-indent（文本縮進(jìn)）eg. ?text-indent:5px

　　9.letter-spacing（字符間距）？

　　字符與字符之間橫向的間距

　　10.font-style（字體樣式）

　　italic ?斜體

　　normal  （默認(rèn)）

　　注：字體具有繼承的屬性，假如父級(jí)設(shè)置了文本樣式，子級(jí)如果不單獨(dú)設(shè)置屬于自己的文本樣式，那么默認(rèn)繼承父級(jí)的。
 

　　1.background-color（設(shè)置背景顏色） 樣式與前面字體一樣 ?

　　另外還可以用

　　rgba（222,222,222,.5） ?其中最后一個(gè)值可以設(shè)置背景顏色的透明度 具體的以后再跟大家細(xì)說(shuō)。

　　2.background-image （設(shè)置背景圖片） eg.background-image:url（" 1.jpg"）

　　url中寫(xiě)需要用的圖片的地址

　　假如圖片與html文件在同級(jí) ?那么直接寫(xiě)圖片的名字+后綴名

　　假如圖片在html文件的上一級(jí) 那么要在圖片前面加返回上一級(jí) ? 以此類推

　　3.background-position（背景位置）left center right

　　。4.background-repeat（背景重復(fù)）

　　repeat（既橫向重復(fù) 又縱向重復(fù)）

　　repeat-x（橫向重復(fù)）

　　repeat-y（縱向重復(fù)）

　　no-repeat（不設(shè)置重復(fù)）

　　5.background-size（背景大?。?/p>

　　eg.background:200px 300px ? ? width（寬度） heigh（高度）t的順序

　　注：背景不占空間？

　　背景區(qū)域可以顯示內(nèi)容

　　另外容器假如沒(méi)有高度的話 顯示不了背景圖片！

以上就是“HTML基本的樣式設(shè)置有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手