❗HTML引入CSS的三种常用方式汇总❗
引言
CSS對(duì)于HTML來(lái)說(shuō)就像是女生的化妝品，通過(guò)CSS的修飾后，網(wǎng)頁(yè)元素會(huì)更加豐富美觀，但是使用CSS之前的首要需求就是如何在HTML代碼中加入CSS代碼，這里就簡(jiǎn)單列舉一下三種常用方法；
ps：由于作者規(guī)劃以后往java后端發(fā)展，所以對(duì)于前端的知識(shí)只是了解了部分主要內(nèi)容，以應(yīng)用為主，所以如果有錯(cuò)誤請(qǐng)各位及時(shí)指正！
內(nèi)聯(lián)定義方式
因?yàn)槊總€(gè)元素都有style屬性，所以可以直接在某個(gè)元素中加入css代碼，僅作用于該元素，這樣就可以精確控制一個(gè)HTML元素的表現(xiàn)，這樣每份css樣式只控制單個(gè)HTML元素；
格式為：style="property1:value1;property2:value2;property3:value3;"
示例代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css內(nèi)聯(lián)定義方式</title></head><body><!--直接在元素中加入css代碼，每個(gè)元素都有style屬性--><div style="width: 400px; height: 400px; background-color: cornflowerblue;border-width: 10px; border-style: groove; border-color: coral;"></div><br><!--上面的border寫法可以簡(jiǎn)化--><div style="width: 300px; height: 300px; background-color: aquamarine; border: 1px crimson solid;"></div></body> </html>樣式塊
這種方法通過(guò)選擇器來(lái)決定某樣式對(duì)那些元素起作用，分為很多種選擇器，這里就只針對(duì)三種常見(jiàn)的介紹了，分別是：
- id選擇器
- 標(biāo)簽選擇器
- 類選擇器
下面就分別介紹：
id選擇器
通過(guò)對(duì)id屬性來(lái)對(duì)不同的元素進(jìn)行區(qū)分，具有針對(duì)性，只針對(duì)某一個(gè)id；
格式為：#idValue{........}
示例代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css之id選擇器</title><!--這里同樣需要style，type后面是固定格式，記住即可--><style type="text/css">/*id選擇器*/#llll {color: cadetblue; font-size: large;}</style></head><body><!--這里id設(shè)置為llll--><span id="llll">啦啦啦啦啦啦</span></body> </html>標(biāo)簽選擇器
css樣式對(duì)某個(gè)元素進(jìn)行作用，是所有的該元素；
格式為：E{......}
示例代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css之標(biāo)簽選擇器</title><style type="text/css">/*標(biāo)簽選擇器*/div {background-color: cornflowerblue;border: brown 10px groove;width: 300px;height: 300px;}</style></head><body><!--css作用于這些div標(biāo)簽--><div ></div><div ></div><div ></div><div ></div></body> </html>類選擇器
類選擇器是指定css樣式對(duì)具有指定class屬性的元素起到作用
格式為：[E].classValue{......}
示例代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css樣式塊</title><style type="text/css">/*類選擇器，這里對(duì)所有'lei'類起作用*/.lei {border: darkorchid 5px ridge;}</style></head><body><!--這里的input元素和select元素都屬于'lei'這個(gè)類--><input type="text" class="lei" /><br><select class="lei"><option value="ps">小學(xué)</option><option value="ms">初中</option><option value="hs">高中</option></select></body> </html>引入外部獨(dú)立的css文件
這種方法相對(duì)前兩種就更加靈活，通過(guò)一個(gè).css文件來(lái)對(duì)某元素進(jìn)行的操作；
注意：這里介紹的方法是推薦使用的，還有一種方法通過(guò)@import導(dǎo)入外部樣式文件，不推薦這種方法，因?yàn)楹芏酁g覽器并不支持這種導(dǎo)入方式；且這兩種方法的效果是一樣的；
在HTML文件中通過(guò)link元素引入外部文件，
格式為：<link type="text/css" rel="stylesheet" href="css樣式文件的URL(統(tǒng)一資源定位器)"
注：這里的type和rel是固定格式，記住；
示例代碼：
css文件：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>引入外部獨(dú)立css文件</title><!--通過(guò)link對(duì)css文件進(jìn)行連接，rel和type是固定寫法--><link rel="stylesheet" type="text/css" href="css03.css" /></head><body><a href="http://www.baidu.com" target="_blank" style="color: #0000CD;" >百度</a><span id="baidu" >百度</span></body> </html>總結(jié)
這三種方法是主要的三種方法，也是常用的，
再提一種方法是：內(nèi)部css樣式，這種方法不建議使用，這里就了解一下，為了和后面的js進(jìn)行比較；
格式為：
其他方法就不介紹了（畢竟博主也不是專門發(fā)展前端的，對(duì)后端已經(jīng)基本可以了）；
再總結(jié)一下三種方法：
- 內(nèi)聯(lián)定義方式
- 樣式塊
- 引入外部獨(dú)立的css文件
歡迎大家的點(diǎn)評(píng)！
總結(jié)
以上是生活随笔為你收集整理的❗HTML引入CSS的三种常用方式汇总❗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [Java基础] sort方法-----
- 下一篇： 2017年html5行业报告,云适配发布