HTML CSS樣式實(shí)例分析

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

　　一、css

　　1.什么是css？

　　Cascading Style Sheet 級(jí)聯(lián)樣式表

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

　　HTML底層封裝了css這樣一個(gè)工具。

　　2.怎么使用css

　　a、style 風(fēng)格、樣式

　　這個(gè)關(guān)鍵詞寫到標(biāo)簽內(nèi)部，可以修改標(biāo)簽的樣式

　　注意：寫在標(biāo)簽內(nèi)部！也就是>里面

　　3.css樣式，分為三種

　　a、行內(nèi)樣式表

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

　　其中：style="color:#0FC"就是改變當(dāng)前這個(gè)標(biāo)簽的樣式。

　　b、內(nèi)部樣式表

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

　　id選擇器：

　　1、在標(biāo)簽內(nèi)加上id屬性

　　2、在寫之前，要加上#

　　類選擇器：

　　1、在標(biāo)簽內(nèi)加上class屬性

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

　　注意：以。開頭

　　標(biāo)簽選擇器：

　　注意：

　　1、style里面要寫上type屬性，標(biāo)識(shí)這是改變css

　　2、選擇器后面要加上一對(duì){} ，

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

　　c、外部樣式表

　　寫在我們網(wǎng)頁(yè)的外面

　　1、新建一個(gè)css

　　2、在css中寫上相對(duì)應(yīng)的樣式

　　3、將css樣式導(dǎo)入網(wǎng)頁(yè)

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

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

　　d、樣式表的優(yōu)先級(jí)

　　行內(nèi)樣式表>內(nèi)部樣式表>外部樣式表

　　e、選擇器的優(yōu)先級(jí)

　　id選擇器>類選擇器>標(biāo)簽選擇器

　　f、并集選擇器

　　通過一個(gè)詳細(xì)的描述或者說地址來查找某一個(gè)或者某一組相對(duì)應(yīng)的標(biāo)簽

　　p,#id,.class{}

　　會(huì)改變所有p、id和class所覆蓋的標(biāo)簽樣式，中間用英文輸入法的“，”號(hào)隔開

　　g、交集選擇器

　　h4.cecond{}

　　會(huì)先查找h4標(biāo)簽，再查找所有h4標(biāo)簽里面的類名為second的標(biāo)簽修改屬性

　　中間沒有任何東西進(jìn)行連接

　　h、后代選擇器

　　會(huì)根據(jù)所寫的標(biāo)簽或者選擇器，進(jìn)行一層一層的查找，直到最后查找到所需要的標(biāo)簽，中間用“ ”隔開

　　小結(jié)：

　　標(biāo)簽選擇器是直接應(yīng)用于所有的HTML標(biāo)簽

　　類選擇器可以在頁(yè)面中多次使用

　　id選擇器在頁(yè)面中只能使用1次

　　i、css屬性

　　1、字體樣式：

　　font-style： 設(shè)置字體風(fēng)格

　　font-weight： 設(shè)置字體粗細(xì)

　　font-size： 設(shè)置字體尺寸

　　font-family： 設(shè)置字體系列

　　font： 把以上所有的設(shè)置全部設(shè)置在一個(gè)屬性中

　　2、文本樣式：

　　color： 設(shè)置字體顏色

　　line-height： 設(shè)置行高

　　text-align： 設(shè)置文本的對(duì)齊方式

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

　　3、背景屬性：

　　background-color： 設(shè)置背景顏色

　　background-image: 設(shè)置背景圖片

　　background-position：設(shè)置背景的位置

　　background-repeat： 設(shè)置背景的填充方式

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

　　4、列表屬性：

　　list-style-image： 將列表設(shè)置為列表標(biāo)識(shí)

　　list-style-type： 設(shè)置列表的標(biāo)識(shí)類型，disc實(shí)心圓，circle空心圓，

　　square正方形

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

　　5、超鏈接的偽類

　　a:link{ 未訪問的鏈接

　　color:#F00;

　　}

　　a:visited{ 已訪問的鏈接

　　color:#6F6;

　　}

　　a:hover{ 鼠標(biāo)懸浮改變樣式

　　color:#FCC;

　　}

　　a:active{ 鼠標(biāo)長(zhǎng)按改變樣式

　　background-color:#0FF;

　　}

　　6、cursor屬性

　　url 設(shè)置自定義鼠標(biāo)樣式

　　default 默認(rèn)光標(biāo)

　　pointer 超鏈接的指針

　　wait 程序正在忙

　　help 指示可用的幫助

　　text 指示文本

　　crosshair 十字型

　　move 可移動(dòng)指針

　　7、盒子模型

　　a、什么是盒子模型？

　　把相對(duì)應(yīng)的元素放入到一個(gè)容器中，可以進(jìn)行相對(duì)應(yīng)的處理

　　移動(dòng)或者處理這個(gè)盒子模型的同時(shí)，整個(gè)在盒子模型中的元素都會(huì)跟著

　　被處理。

　　邊距：

　　內(nèi)邊距：

　　padding：top,left,right,bottom

　　外邊距：

　　margin：top,left,right,bottom

　　b、浮動(dòng)

　　什么是浮動(dòng)？

　　其實(shí)原理就是align

　　浮動(dòng)的屬性：

　　left： 左浮動(dòng)

　　right： 右浮動(dòng)

　　none： 不浮動(dòng)

　　clear屬性： 清除浮動(dòng)，both全部清除

　　c、overflow屬性

　　當(dāng)有元素溢出時(shí)，應(yīng)如何處理

　　visible 默認(rèn)的

　　auto 自動(dòng)的

　　hidden 隱藏

　　scroll 加上滾動(dòng)條

　　d、iframe標(biāo)簽

　　內(nèi)聯(lián)框架。

　　可以導(dǎo)入其他東西。

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

　　frameborder="0">

　　src：導(dǎo)入其他的頁(yè)面路徑

　　width：調(diào)整導(dǎo)入的頁(yè)面的寬度，px是單位，可以不加，默認(rèn)就是px

　　height：調(diào)整導(dǎo)入的頁(yè)面的高度

　　scrolling：是否顯示滾動(dòng)條

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

　　e、position屬性

　　定位。

　　相對(duì)定位：

　　relative，相對(duì)他原來的位置，進(jìn)行移動(dòng)。

　　絕對(duì)定位：

　　absolute，

　　fixed

　　定位到網(wǎng)頁(yè)的某個(gè)地方，一直不變。

　　static

　　偏移值的設(shè)定

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

　　可取值：像素或百分比

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