CSS的多種引用
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS的使用</title>
<!-- 內(nèi)部樣式苞七，寫在head的style元素中,次樣式可以被當(dāng)前頁面的元素復(fù)用
tyle="text/css”申明書寫的文本類型" -->
<style type="text/css">
h2{
color:blue
}
</style>
<!-- 外部樣式豫领，寫在.css文件中喊熟，并通過link元素引入到當(dāng)前頁面，此文件中的樣式
可以被多個界面所復(fù)用 rel:申明引入的文件是樣式表文件怜浅， type:申明引入的內(nèi)容是CSS文本
href：申明引入的文件路徑和文件-->
<link rel="stylesheet" type="text/css" href="a.css"/>
</head>
<body>
<!-- 內(nèi)聯(lián)樣式卸載元素的style屬性里面，此樣式無法重復(fù)使用 -->
<h1 style="color:red">CSS的使用</h1>
<h2>3種用法</h2>
<p>1、內(nèi)聯(lián)樣式</p>
<p>2位他、內(nèi)部樣式</p>
<p>3吧黄、外部樣式</p>
</body>
</html>
CSS的選擇器
<doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS選擇器</title>
<style type="text/css">
/*元素選擇器部服，可以選中頁面上置頂?shù)乃性?/
h3{
color:pink;
}
/*類選擇器，可以選中頁面上所有據(jù)某某些共性的元素*/
.male{
color:green;
}
/*id選擇器拗慨，可以選中頁面上指定id的唯一元素*/
#d1{
font-size:40px;
}
/*選擇器組廓八，可以選中一組選擇器所對應(yīng)的的元素并集*/
.male,h3{
background-color:#ccc;
}
/*派生選擇器*/
/*后代選擇器，選中子孫
選擇器1(父) 選擇器2(子)*/
p b{
color:red;
}
/*子元素選擇器 只選中兒子
選擇器1(父)>選擇器2(子*/
p>b{
font-size:40px;
}
/*偽類選擇器 選擇器：偽類*/
/*選擇是否訪問過的狀態(tài)超鏈接*/
a:visited{
color:red;
}
a:link{
color:blue
}
/*選中激活狀態(tài)(鼠標(biāo)正在點擊)*/
#btn1:active{
background-color:red;
}
/*選擇鼠標(biāo)懸停的元素*/
img:hover{
width:500px;
height:400px;
}
/*選中獲取焦點的元素(光標(biāo)參數(shù))*/
#t1:focus{
background-color:yellow;
}
</style>
</head>
<body>
<h1 class="male">程老師</h1>
<h2 class="male">李老師</h2>
<h3>姣姣老師</h3>
<div id="d1">
李老師讓程老師介紹對象赵抢，
程老師毛遂自薦
</div>
<p>
北京市海定區(qū)<u><b>北三環(huán)</b></u>西甲路18號<b>中鼎大廈</b>B8
</p>
<p>
<a >w3c</a>
<a >sina</a>
</p>
<p>
<input type="button" value="放大" id="btn1">
</p>
<p>
<img src="../images/pig.png">
</p>
<p>
<input type="text" id="t1">
</p>
</body>
</html>
CSS的border邊框
<doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>border邊框</title>
<style type="text/css">
/*style：
--solid實線 dashed:虛線 dotted:點狀線 double：雙線 */
/*單邊設(shè)置*/
h1{
border-left:15px solid blue;
border-bottom:5px double blue;
}
/*統(tǒng)一設(shè)置*/
p{
border:1px dashed red;
}
/*vverflow:內(nèi)容溢出設(shè)置：
visible：溢出剧蹂，默認
hidden：隱藏
scroll：滾動條，無論是否超出范圍都添加滾動條
auto:根據(jù)內(nèi)容判斷是否加滾動條烦却，用的很多*/
div{
border:1px solid red;
width:300px;
height:55px;
overflow:visible;
}
</style>
</head>
<body>
<h1>程程</h1>
<p>嬌嬌老師</p>
<div>
故夫知效一官宠叼，行比一鄉(xiāng)，德合一君其爵，而征一國者冒冬，其自視也亦若此矣。
而宋榮子猶然笑之摩渺。且舉世譽之而不加勸简烤，舉世非之而不加沮，定乎內(nèi)外之分摇幻，
辯乎榮辱之境横侦，斯已矣挥萌。彼其于世，未數(shù)數(shù)然也丈咐。雖然瑞眼，猶有未樹也。
夫列子御風(fēng)而行棵逊，泠然善也伤疙。旬有五日而后反。彼于致福者辆影，未數(shù)數(shù)然也徒像。
此雖免乎行，猶有所待者也蛙讥。若夫乘天地之正锯蛀，而御六氣之辯，以游無窮者次慢，
彼且惡乎待哉旁涤？故曰：至人無己，神人無功迫像，圣人無名劈愚。
</div>
</body>
</html>
