1、CSS(層疊樣式表):描述元素的皮膚壁袄,美化頁面类早。
2、CSS使用方式:內(nèi)聯(lián)嗜逻、頁面嵌入和外部引用涩僻。
2.1、內(nèi)聯(lián)
<input type ="text" style="background-color: Red;border-color: Green" />
2.2栈顷、頁面嵌入
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{background-color: Red;border-color: Green}
</style>
</head>
所有input標(biāo)簽都被設(shè)置成該樣式逆日。
2.3、外部引用
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
3萄凤、CSS計量單位:px(像素)室抽、30%(百分比)、em(相對單位)等靡努。
4坪圾、將光標(biāo)設(shè)置成圖標(biāo)樣式。圖標(biāo)格式必須是".cur"或"ani"格式才行惑朦。
例如:
<body style="cursor:url(tt.ani)"></body>
5兽泄、樣式選擇器:標(biāo)簽選擇器、class選擇去器漾月、id選擇器病梢。
對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器。
5.1梁肿、標(biāo)簽選擇器(對于指定的標(biāo)簽采用統(tǒng)一的樣式)
例如:
input{border-color: Yellow;color: Red;}
5.2蜓陌、class選擇器
定義一個命名的樣式觅彰,然后在用到它的時候設(shè)置元素的class屬性為樣式的名稱,還可以同時設(shè)置多個class护奈,名稱之間加空格缔莲。
例如:
<!--定義-->
.warning{backgroud: Yellow;}
.highlight{font-size: xx-large;cursor: help;}
<!--使用-->
<div class="warning">你好</div>
<div class="warning highlight">我好</div>
<div class="highlight">大家好</div>
標(biāo)簽+class選擇器
class選擇器也可以針對不同的標(biāo)簽,實現(xiàn)同樣的樣式名對于不同的標(biāo)簽有不同的樣式霉旗,只要在樣式名前加標(biāo)簽名即可。
例如:
<!--定義-->
input.accountno{text-align: right;color: Red;}
label.accountno{font-style: italic;}
<!--使用-->
<input class="acountno" type="text" value="111"/>
<label class="acountno">222</label>
5.3蛀骇、id選擇器
為指定id的元素設(shè)置樣式厌秒,id前加#。
例如:
<!--定義-->
#username
{
font-size: xx-large;
}
<!--使用-->
<input id="username" type="text" value="liujf"/>
5.4擅憔、其他選擇器(不常用)
- 關(guān)聯(lián)選擇器:
例如:
P strong{background-color: Yellow;}
表示P標(biāo)簽內(nèi)的strong標(biāo)簽內(nèi)的內(nèi)容使用的樣式鸵闪。
- 組合選擇器:
同時為多個標(biāo)簽設(shè)置一個樣式。
例如:
h1,h2,input{background-color: Green;}
- 偽選擇器:
為標(biāo)簽的不同狀態(tài)設(shè)置不同的樣式暑诸。
a:visited:超鏈接點擊過的樣式 蚌讼。
a:active:選中超鏈接時的樣式。
a:link:超鏈接未被訪問時的樣式个榕。
a:hover:鼠標(biāo)移到超鏈接時的樣式篡石。
例如:
a:visited{text-decoration: none;}
a:active{text-decoration: none;}
a:link{text-decoration: none;}
a:hover{text-decoration: underline;}