JavaEE學習日誌持續更新----> 必看！JavaEE學習路線（文章總彙）
CSS
CSS選擇器
基本選擇器
CSS基本選擇器：選擇器就是對HTML的作用
種類：
- 標籤元素選擇器：同名標籤有效
- ID選擇器：選擇器名字前加上#；標籤上，添加屬性id=“選擇器名”
- class選擇器，類選擇器：選擇器名字前加上；標籤上，添加屬性class=“選擇器名”
注意：儘量不要使用ID選擇器，如果需要使用ID選擇器，保證ID的屬性值具有唯一性。
原因：JavaScipt：對象document，方法getElementById(“one”)
把標籤變成對象，只要找到，就不找了。
優先級：id優先級高於class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*標籤元素選擇器，選擇器名字和標籤名相同*/
h1{
color: red;
}
/*ID選擇器*/
#one{
color: blue;
}
.two{
color: yellow;
}
</style>
</head>
<body>
<h1>123</h1>
<h2 id="one">123</h2>
<h3 class="two">123</h3>
</body>
</html>
屬性選擇器
格式：選擇器[屬性名=“屬性值”]{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type="text"]{
color: red;
}
input[type="password"]{
background-color: green;
}
</style>
</head>
<body>
<!--
CSS中的屬性選擇器
選擇器[屬性名="屬性值"]
-->
用戶名<input type="text" /><br />
密碼<input type="password" /><br />
</body>
</html>
包含選擇器
格式：
- 選擇器 選擇器{}
如果兩個選擇器是div 和span，則div的子標籤span纔有效 - 選擇器,選擇器{}
如果兩個選擇器是div 和span，則div和span都有效
代碼示例：選擇器 選擇器{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div span{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<div>
<span>div中的span</span>
</div>
<span>span</span>
</body>
</html>
選擇器,選擇器{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<div>
<span>div中的span</span>
</div>
<span>span</span>
</body>
</html>
僞元素選擇器
僞元素選擇器：主要用於超鏈接
四個狀態：沒點過，點過，鼠標懸浮，激活
樣式：固定順序 l-v-h-a
a:link{color: grey;text-decoration: none;}/*沒點過*/
a:visited{color: grey;text-decoration: none;}/*點過*/
a:hover{color: red;text-decoration: none;}/*鼠標懸浮*/
a:active{color: green;text-decoration: none;}/*激活*/
注意：
text-decoration: none;可以取消下劃線- 順序必須固定，否則可能會出錯
- 激活狀態爲鼠標下壓，但沒用鬆開時的狀態
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*順序不能錯！*/
a:link{color: grey;text-decoration: none;}/*沒點過*/
a:visited{color: grey;text-decoration: none;}/*點過*/
a:hover{color: red;text-decoration: none;}/*鼠標懸浮*/
a:active{color: green;text-decoration: none;}/*激活*/
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.tencent.com">騰訊</a>
</body>
</html>
CSS屬性
邊框屬性
CSS邊框屬性：border
border：同時設置四條邊
border-top，border-left，border-bottom，border-right：設置一條邊
可以設置邊框屬性值：粗細，顏色，樣式（實線，虛線，點劃線，雙實線）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*設置邊框 粗細，顏色，樣式（實線，虛線，點劃線，雙實線）*/
/*無順序*/
/*border-right: 5px yellow solid;*/
border: 10px solid gold;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
轉換屬性
轉換屬性：display
屬性值：
- none（不顯示）
- block（塊元素顯示）：把行元素轉換爲塊元素，霸佔一行
- inline（行元素顯示）：把塊元素轉換爲行元素，不會霸佔一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="display: none;">我是div</div><br />
<!--block（塊元素顯示） 霸佔一行-->
<span style="display: block;">我是span</span>123
<!--inline（行元素顯示） 不會霸佔一行-->
<div style="display: inline;">我是div2</div><br />
</body>
</html>
字體屬性
字體屬性：
- font-size：文本大小，瀏覽器默認16px
- font-family：字體
- color：顏色
- font-weight: bold：加粗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-family: 宋體;
font-size: 50px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
背景屬性
背景屬性：
- background-color 背景色
- background-image 背景圖
注意：
- 兩個一起寫，會保留背景圖，背景色不生效
- 如果圖片太小，則會出現很多張，來佔滿這個區域
- 如果寫在body中，則頁面會佔滿這張圖片或顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*body{
background-color: green;
background-image: url(img/btn.jpg) ;
}*/
div{
width: 200px;
height: 200px;
/*兩個一起寫，保留背景圖*/
background-color: blue;
background-image: url(img/btn.jpg) ;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
浮動屬性
CSS浮動屬性
浮動屬性：float 讓兩個div在同一行出現，讓div1漂浮起來
清除浮動：clear 不會跟隨上一個元素浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div style="float: left;">div1</div>
<div style="float: left">div2</div>
<div style="clear: both;">div3</div>
<br />
<div style="float: left;">div4</div>
<div style="float: left">div5</div>
<div>div6</div>
</div>
</body>
</html>
盒子模型
盒子模型：處理邊距
屬性：
- margin：外邊距
- padding：內邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height:200px;
border: 1px red solid;
margin-top:50px;
margin-left:100px;
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<!--
盒子模型：處理邊距
-->
<div>我是div</div>
</body>
</html>
其他寫法：
/*margin: 50px; 上下左右都爲50*/
/*margin: 10px 50px; 上下10 左右50*/
/*margin: 10px 20px 30px; 上10 下20 左右30*/
margin: 10px 20px 30px 40px;/*順時針，上右下左*/
想要將div定在瀏覽器中上方：可自動使用瀏覽器縮放
margin:0 auto;
註冊前端案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-image: url(img/bg.jpg);
}
/*註冊div*/
.form{
width:600px;
height:300px;
border: 1px black solid;
background-color: white;
margin: 0 auto;
margin-top: 100px;
}
.form span{
color:blue;
font-size:25px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="form">
<br />
<br />
<br />
<span>用戶註冊</span> <b> USERREGISTER</b>
<form action="#" method="post">
<table align="center">
<tr>
<td>用戶名</td>
<td><input type="text" placeholder="請輸入用戶名"></td>
<td></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" placeholder="請輸入密碼"></td>
<td></td>
</tr>
<tr>
<td>性別</td>
<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
<td></td>
</tr>
<tr>
<td>驗證碼</td>
<td><input type="text"></td>
<td><img src="img/checkcode.jpg"></td>
</tr>
<tr >
<td align="center" colspan="3"><input type="image" src="img/btn.jpg"></td>
<!--<td></td>
<td></td>-->
</tr>
</table>
</form>
</div>
</body>
</html>