HTML標簽屬性與CSS樣式的示例分析

這篇文章將為大家詳細講解有關HTML標簽屬性與CSS樣式的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　定義：超文本標記語言

　　Hypetext Markup Language

　　特點：

　　不需要編譯，直接由瀏覽器執行

　　是一個文本文件

　　必須用htm或html作文件后綴

　　對大小寫不敏感，HTML或html都可以

　　<DOCTYPE html 必須放到文檔第一行

　　<!DOCTYPE>聲明不是標簽

　　html標簽的屬性

　　語法：<標簽名 屬性名1=”屬性值1” 屬性名2=”屬性值2” &hellip;>自己的文本</標簽名>

　　CSS定義：Cascading Style Sheets 層疊樣式表

　　CSS的作用：

　　結構和樣式 &ndash; css分離的方式，便于后期的維護和改版

　　可以用多套樣式，使得網頁有任意樣式切換的效果

　　使得頁面載入更快，降低服務器的成本

　　行內樣式外部樣式內部樣式

　　在標簽內部添加css樣式

　　單獨把樣式寫到CSS文件中，在html文件中引入CSS文件

　　外部樣式就是新建一個文檔，里面全寫css，然后通過link 插入到html代碼中

　　作用：使得網頁的表示層和結構層能夠進行徹底分離

　　link 用于定義文檔和外部資源的關系

　　rel=”stylesheet” relationship關系

　　type=”text/css” 定義css樣式文件的類型

　　href=”index.css” 引用的具體文件

　　內部樣式寫在html結構內部，寫于head標簽中

　　CSS選擇器就是用來找到需要添加樣式的標簽或位置

　　常用的選擇器有：

　　標簽選擇器： 此為內部樣式、標簽選擇器修改文本樣式的方式

　　-類選擇器：標簽內部加入class=""，class的屬性值必須為字母數字，且首位必須為字母， class的屬性在style標簽中前面須加符號"."

　　id選擇器：id的寫法與class一致，但id的屬性是唯一的，且在style標簽

　　CSS中標簽樣式的屬性

　　背景樣式 background

　　1.background-color： 顏色值 顏色作為背景顏色

　　2.background-image： 圖片位置 圖片作為背景圖片

　　3.background-repeat： repeat repeat-x repeat-y no-repeat 背景圖片的重復方向

　　4.background-attachment： 背景是否隨著滾動條滾動

　　1.Fixed 文字滾動，背景圖片不隨著滾動

　　2.scroll 背景圖片隨著文字一起滾動

　　5.background-position： 背景圖像的起始位置

　　1.top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right

　　如果只定義了一個值，那么第二個值將是center 默認值 0% 0%

　　2.x% y% 第一個值是水平 第二個值是垂直

　　左上角：0% 0% 右下角：100% 100%如果規定了一個值另一個值就是50%

　　background 背景樣式的值是復合了屬性值的組合，在實際應用中，可在background后按順序依次寫入五個屬性值

　　Div的樣式設置

　　div大小、背景設置

　　div溢出效果展示，換行、滾動條顯示

　　div邊框、輪廓設置

　　盒子模型

　　超出div寬度和高度的文字或者圖片進行隱藏處理

　　超出div寬度和高度的文字或者圖片增加滾動條

　　overflow屬性設置：

　　visible: 默認溢出

　　hidden： 隱藏溢出內容

　　scoll: 加滾動條

　　auto： 按需顯示滾動條

　　Div的輪廓包含輪廓和邊框兩部分

　　CSS輪廓：outline屬性

　　作用：繪制于元素周圍的一條線，位于邊框外緣的外圍，可起到突出元素的作用

　　dashed ：虛線框

　　dotted：點狀

　　soild：實線

　　double：雙線

　　none：無線

　　CSS邊框：border屬性

　　作用：設置div邊框的邊線寬度，顏色，虛線，實線等樣式css屬性

　　邊框可設置的邊：border-left border-right border-top border-bottom

　　dashed：虛線框

　　dotted：點狀

　　soild：實線

　　double：雙線

　　none：無線

　　盒子模型用來改變間距，一般用于塊級標簽

　　盒子屬性：

　　width: 寬度

　　height： 高度

　　border： 邊框

　　margin： 外邊距 盒子與盒子之間的距離

　　padding： 內邊距 內容與邊框之間的距離

　　margin與padding的屬性：

　　margin/padding：0px 0px 0px 0px;

　　內外邊距的方向： 上 右 下 左

　　注：

　　1.當margin/padding: 0px 0px;時

　　則第一個值代表上下邊距，第二個值代表左右邊距；

　　2.當margin/padding： 0px 0px 0px;時

　　則第一個值代表上邊距，第二個值代表左右邊距，第三個值代表下邊距；

　　3.當margin/padding：0px;時

　　則代表所有邊距為同一個數值

　　box-sizing的padding部分多出的產生：

　　content-box:寬高之外的元素的內邊距和邊框，默認益處的效果

　　border-box:已設定的寬高減去內邊距得到的內容的寬高

　　定位機制

　　（標準）文檔流，脫標流（脫離標準文檔流 &ndash; float、position：absolute）

　　文檔流：

　　1、空白折疊現象 （行級標簽寫在同一行）

　　2、高矮不齊，底邊對齊

　　3、自動換行，一行寫滿，換行寫

　　left: 向左浮動

　　right： 向右浮動

　　none： 不浮動

　　崩塌效果：

　　當父級盒子沒有設置寬高范圍時，父級盒子的范圍將會隨著子級范圍而被撐開

　　當父級盒子設置寬高范圍時，會對子級范圍進行約束

　　當子級元素全部設置浮動，而父級沒有寬高范圍時，父級崩塌

　　clear：both/left/right

關于“HTML標簽屬性與CSS樣式的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。