CSS:層疊樣式表,用來(lái)控制HTML標(biāo)簽樣式
CSS的編寫格式是鍵值對(duì)形式的
如:color:red(冒號(hào)左邊是屬性名吓歇,冒號(hào)右邊是屬性值)
1>CSS的3中書寫格式
行內(nèi)樣式:(內(nèi)嵌樣式)直接在標(biāo)簽style屬性中書寫
<body style="color:red;">
<!--設(shè)置背景顏色-->
<body style="background-color: #b3d4fc;">
<!--行內(nèi)樣式-->
</body>
設(shè)置背景顏色
<body>
<!--行內(nèi)樣式-->
<div style="font-size: 30px; color:red; background-color: #b3d4fc">糖糖</div>
<p style="font-size: 24px; color:bisque; background-color: aqua">個(gè)人博客</p>
</body>
界面展示
頁(yè)內(nèi)樣式:在本網(wǎng)頁(yè)的style標(biāo)簽中書寫
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁(yè)內(nèi)樣式</title>
<!--頁(yè)內(nèi)樣式:符合統(tǒng)一樣式的應(yīng)用-->
<style>
div{
font-size: 30px;
color: red;
background-color: #b3d4fc;
}
p{
font-size: 24px;
color:rebeccapurple;
background-color: red;
}
</style>
</head>
<body>
<div>糖糖</div>
<p>個(gè)人博客</p>
</body>
</html>
界面展示
外部樣式:在單獨(dú)的CSS文件中書寫孽水,然后在網(wǎng)頁(yè)中用link標(biāo)簽引用
新建一個(gè)文件:index.css(固定名稱),新建的時(shí)候你是找不到css后綴的城看,選擇第一個(gè)新建file然后自己寫上css后綴就可以了
div{
color: darkred;
/*字體樣式*/
font-family: "Apple Braille";
font-size: 30px;
}
p{
color: #b3d4fc;
font-size: 24px;
}
需要用到的地方運(yùn)用外部樣式進(jìn)行引用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="dist/css/index.css">
</head>
<body>
<div>111111111111111111</div>
<p>2222222222222222222</p>
</body>
</html>
新建文件
界面效果
CSS樣式后兩者運(yùn)用最多女气,頁(yè)內(nèi)樣式就像我們?cè)诒绢愔袑懸粋€(gè)方法,本類調(diào)用测柠,而外部樣式就像是我們?cè)趯懸粋€(gè)類對(duì)象出來(lái)炼鞠,通過(guò)導(dǎo)入頭文件進(jìn)行調(diào)用里面的方法,而行內(nèi)樣式就像是最傻的辦法轰胁,在一個(gè)方法里面寫的東西谒主,雖然它傻,但是還是有特殊的地方要這樣寫赃阀,如果你想知道三個(gè)樣式或者同時(shí)運(yùn)用兩個(gè)樣式的結(jié)果霎肯。
-----------無(wú)情的分隔線------------
CSS樣式遵循的規(guī)律:
1.就近原則
2.疊加原則