前端---CSS介紹一
css能夠使網頁元素的樣式更加豐富，讓網頁的內容和樣式拆分開，CSS是Cascading Style Sheets的首字母的縮寫，意思是層疊樣式表，html只負責文檔的結構和內容，內容的表現形式交給CSS，html文檔變得更加簡潔。
css基本語法：
選擇器：{屬性：值；屬性：值}
如：
div{
width:100px;
height:100px;
background:gold;
}
css引入方式：
1：內聯式：通過標簽<style>屬性，在標簽上直接寫樣式：
<style="width:100px;height:100px;">.....</style>
2：嵌入式：通過style標簽，在網頁上創建嵌入式的樣式表
<style>
div{
width:100px;
height:100px‘
}
</style>
3:外鏈式:通過link標簽，鏈接外部樣式文件寫到頁面中
<link rel="stylesheet" type="text/css" href="css文件地址">
CSS選擇器：
1：標簽選擇器，一般用於通用的設置
div{ color:red}
....................
<div>這是第一個div</div>
<div>這是第二個div</div>
2:類選擇器：通過類名來選擇元素，一個類可應用於多個元素，一個元素可以使用多個類
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
.................
<div class="blue">....</div>
<h3 class="blue big ">.....</h3>
<p class="blue big box">.....</p>
3:層級選擇器：主要應用在標簽嵌套的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器，可以與標簽選擇器結合使用。
.con{width:300px;height:80px;background:red}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
........................
<div class="con">
<span>....</span>
<a href="#" class="pink">.......</a>
<a href="#" class="gold">......</a>
</div>
<span>........</span>
<a href="#" class="pink">.....</a>
4:id選擇器，使用"#名字"表示
<style>
#red{
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="red">
</div>
</body>
常用的布局樣式屬性：
width:設置元素的寬度
height:設置元素的高度
background:設置元素的背景顏色或背景圖片
border:設置元素的四周邊框，（border:1px solid red;(solid:表示實心線，dotted:點線；double:雙線；dashed:虛線)）
也可以拆分寫成四個邊的寫法
border-top:設置頂邊邊框
border-left:設置左邊邊框
border-right:設置右邊邊框
border-bottom:設置底邊邊框
background-image:url(img地址)
background-repeat:repeat-y;
例如：
div{
width: 1000px;
height: 300px;
/* background: red; 設置背景顏色 */
background-image: url(../img/banner.jpg);
background-repeat: repeat-x;
/* repeat-y: 背景圖片豎著放
no-repeat:圖片只會出現一次*/
background-repeat: repeat-y;
}
padding:設置元素包含的內容和元素邊框的距離，即為內邊距，同樣可以拆分為：padding-top,padding-right,padding-bottom,padding-right;
float設置元素浮動，浮動可以讓塊元素排列在一起，浮動分為左浮動，有浮動，float:left; float:right;
小於號：< 大於號：> 縮進：$nbsp;
margin：外邊距
/* 1個參數表示上下左右
2個參數表示上下,左右
3個參數表示上,左右,下
4個參數表示上,右,下,左*/
margin: 10px 20px 40px 50px;（順時針）
音頻鏈接：<audio src="音樂地址...." controls="controls">XXXXX</audio>
文本常用的樣式屬性一：
color:設置文字的顏色
font-size:設置文字的大小
font-family:設置文字的字體。如：font-family:"微軟雅黑";
font-weight:設置文字是否加粗，font-weight:bold;設置加粗。 font-weight:normal;不加粗
line-height:設置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px
text-decoration:設置文字的下劃線，text-decoration:none;將文字的下劃線去掉
text-align:設置文字水平對齊方式，如：text-align:center;設置水平居中
text-indent:設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24
樣式中的註釋：
/* 設置頭部的樣式*/
//使用p標簽，系統會自動增加16px，如果想要對齊，需要將margin重新設置為0
p{
margin: 0;
}
........................
<boby> <p>0000000</p></boby>
span標簽與div標簽的區別：
span標簽表示一個透明的盒子，作用和div差不多，但使用span不會自動換行，div可以自動換行
form:設置表單，action表示動作，需要設置提交到哪裏的url地址，method：請求方法，get和post，name作用是把當前端的數據再提交到後臺服務器的時候，需要把name的屬性一起提交
<form action="http://www.baidu.com" method="get">
用戶名:<input type="text" name="usr"/><br />
密碼:<input type="password" name="pwd" /><br />
<input type="submit" value="提交" />
</form>
常用的表單元素：
<label>:標簽為表單元素定義文字標註
<input>標簽定義通用的表單元素
type屬性：
“text”:定義單行文本輸入框
"password":定義密碼輸入框
"radio"：定義單選框
"checkbox":定義復選框
"file":定義上傳文件
"submit“:定義提交按鈕
"reset":定義重置按鈕
"button"定義一個普通按鈕
<value>屬性定義表單元素的值
<name>屬性，定義表單元素的名稱，此名稱是提交數據時的鍵名
<textarea>定義多行文本輸入框
<select>定義下拉表單元素。<option>與<select>標簽配合使用
例子：
<body>
用戶名:<input type="text" /><br />
密碼:<input type="password" /><br />
<label>性別:</label>
<!-- 定義name屬性，每次只可以點擊一個，否則兩個都可選擇，checked:默認值 -->
<input type="radio" name="sex"/ checked="checked">男
<input type="radio" name="sex" />女
<label>興趣愛好:</label>
<input type="checkbox" />籃球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球<br />
<label>請上傳你的玉照:</label><input type="file" /><br />
<label>自我介紹:</label><textarea></textarea><br />
<label>請選擇城市:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>廣州</option>
</select><br />
<input type="submit" value="提交" />
<input type="button" value="普通按鈕" />
<input type="reset" value="重置"/>
</body>
返回頂部實例：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="top">1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<a href="#top">返回頂部</a>
</body>
</html>
前端---CSS介紹一