HTML CSS樣式實例分析

今天小編給大家分享一下HTML CSS樣式實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　一、css

　　1.什么是css？

　　Cascading Style Sheet 級聯樣式表

　　改變樣式的一個工具，說白了，就是為了讓我們的頁面好看，

　　HTML底層封裝了css這樣一個工具。

　　2.怎么使用css

　　a、style 風格、樣式

　　這個關鍵詞寫到標簽內部，可以修改標簽的樣式

　　注意：寫在標簽內部！也就是>里面

　　3.css樣式，分為三種

　　a、行內樣式表

　　<p style="color:#0FC">111111111111</p>

　　其中：style="color:#0FC"就是改變當前這個標簽的樣式。

　　b、內部樣式表

　　選擇器：告訴程序，我們要改變誰的樣式。

　　id選擇器：

　　1、在標簽內加上id屬性

　　2、在寫之前，要加上#

　　類選擇器：

　　1、在標簽內加上class屬性

　　2、類選擇器，寫之前，要加上。

　　注意：以。開頭

　　標簽選擇器：

　　注意：

　　1、style里面要寫上type屬性，標識這是改變css

　　2、選擇器后面要加上一對{} ，

　　3、每一句改變樣式之后，要加上;

　　c、外部樣式表

　　寫在我們網頁的外面

　　1、新建一個css

　　2、在css中寫上相對應的樣式

　　3、將css樣式導入網頁

　　a、<link href="1.css" rel="stylesheet" type="text/css" />

　　b、<style type="text/css"> @import url（"css路徑"）; </style>

　　d、樣式表的優先級

　　行內樣式表>內部樣式表>外部樣式表

　　e、選擇器的優先級

　　id選擇器>類選擇器>標簽選擇器

　　f、并集選擇器

　　通過一個詳細的描述或者說地址來查找某一個或者某一組相對應的標簽

　　p,#id,.class{}

　　會改變所有p、id和class所覆蓋的標簽樣式，中間用英文輸入法的“，”號隔開

　　g、交集選擇器

　　h4.cecond{}

　　會先查找h4標簽，再查找所有h4標簽里面的類名為second的標簽修改屬性

　　中間沒有任何東西進行連接

　　h、后代選擇器

　　會根據所寫的標簽或者選擇器，進行一層一層的查找，直到最后查找到所需要的標簽，中間用“ ”隔開

　　小結：

　　標簽選擇器是直接應用于所有的HTML標簽

　　類選擇器可以在頁面中多次使用

　　id選擇器在頁面中只能使用1次

　　i、css屬性

　　1、字體樣式：

　　font-style： 設置字體風格

　　font-weight： 設置字體粗細

　　font-size： 設置字體尺寸

　　font-family： 設置字體系列

　　font： 把以上所有的設置全部設置在一個屬性中

　　2、文本樣式：

　　color： 設置字體顏色

　　line-height： 設置行高

　　text-align： 設置文本的對齊方式

　　text-decoration：設置文本的裝修，例如：underline、none、line-through

　　3、背景屬性：

　　background-color： 設置背景顏色

　　background-image: 設置背景圖片

　　background-position：設置背景的位置

　　background-repeat： 設置背景的填充方式

　　background 設置背景，把以上所有的設置全部設置在一個屬性中

　　4、列表屬性：

　　list-style-image： 將列表設置為列表標識

　　list-style-type： 設置列表的標識類型，disc實心圓，circle空心圓，

　　square正方形

　　list-style： 把以上所有的設置全部設置在一個屬性中

　　5、超鏈接的偽類

　　a:link{ 未訪問的鏈接

　　color:#F00;

　　}

　　a:visited{ 已訪問的鏈接

　　color:#6F6;

　　}

　　a:hover{ 鼠標懸浮改變樣式

　　color:#FCC;

　　}

　　a:active{ 鼠標長按改變樣式

　　background-color:#0FF;

　　}

　　6、cursor屬性

　　url 設置自定義鼠標樣式

　　default 默認光標

　　pointer 超鏈接的指針

　　wait 程序正在忙

　　help 指示可用的幫助

　　text 指示文本

　　crosshair 十字型

　　move 可移動指針

　　7、盒子模型

　　a、什么是盒子模型？

　　把相對應的元素放入到一個容器中，可以進行相對應的處理

　　移動或者處理這個盒子模型的同時，整個在盒子模型中的元素都會跟著

　　被處理。

　　邊距：

　　內邊距：

　　padding：top,left,right,bottom

　　外邊距：

　　margin：top,left,right,bottom

　　b、浮動

　　什么是浮動？

　　其實原理就是align

　　浮動的屬性：

　　left： 左浮動

　　right： 右浮動

　　none： 不浮動

　　clear屬性： 清除浮動，both全部清除

　　c、overflow屬性

　　當有元素溢出時，應如何處理

　　visible 默認的

　　auto 自動的

　　hidden 隱藏

　　scroll 加上滾動條

　　d、iframe標簽

　　內聯框架。

　　可以導入其他東西。

　　<iframe src="1.html" width="1366px" height="200" scrolling="no"

　　frameborder="0">

　　src：導入其他的頁面路徑

　　width：調整導入的頁面的寬度，px是單位，可以不加，默認就是px

　　height：調整導入的頁面的高度

　　scrolling：是否顯示滾動條

　　frameborder：是否顯示邊框，1表示顯示，0表示不顯示

　　e、position屬性

　　定位。

　　相對定位：

　　relative，相對他原來的位置，進行移動。

　　絕對定位：

　　absolute，

　　fixed

　　定位到網頁的某個地方，一直不變。

　　static

　　偏移值的設定

　　X軸（left、right 屬性）與Y軸（top、bottom屬性）

　　可取值：像素或百分比

以上就是“HTML CSS樣式實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。