前言：“ 永遠不要沉溺在安逸裏得過且過，能給你遮風擋雨的，同樣能讓你不見天日，只有讓自己更加強大，才能真正撐起一片天。”
你好，我是夢陽辰！快和我一起走進CSS的世界吧！
01.CSS概述
1.什麼是CSS?
CSS（Cascading Style sheet):層疊樣式表語言。
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用於描述網頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲於HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。
CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用於描述網頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲於HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。
2.CSS的作用：
修飾HTML頁面，設置HTML頁面中的某些元素的的樣式，讓HTML頁面更好看。
HTML還是主體，CSS依賴HTML。CSS存在就是修飾HTML,所以新建的文件還是xx.html文件。
如果不做前端，別人寫的CSS樣式要能看懂。
02.MTML中使用CSS的三種方式
1.在標籤內部使用style屬性來設置元素的CSS樣式，這種方式稱爲內聯定義方式。
語法格式：
<標籤 style="樣式名：樣式值；樣式名：樣式值；..."></標籤>
關於css樣式名：可以下載相關的幫助文檔。
例如：
<body>
<div style="width: 200px;height:300px; background-color: #ffff2c;display: block;border:2px solid red;" ></div>
</body>
2.在head標籤中使用style塊，這種方式被稱爲樣式塊方式。
語法格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*第一種id選擇器*/
#usernameErrorMsg{
color: #d91414;
font-size: 18px;
}
/*第二種標籤選擇器*/
div{
background-color: #ff0000;
border :2px solid black;
width :100px;
height :100px;
}
/*類選擇器,只要是這個類名都起作用*/
.myclass{
border :2px solid black;
width: 500px;
height: 33px;
}
</style>
</head>
<body>
<!--設置字體大小爲12px,顏色爲紅色-->
<span id="usernameErrorMsg">用戶名不能爲空</span>
<div></div>
<div></div>
<div></div>
<input type="text" class="myclass"/>
<br><br><br>
<select class="myclass">
<option>專科</option>
<option>本科</option>
<option>博士</option>
</select>
</body>
</html>
3.鏈入外部樣式表文件（將樣式寫到一個獨立的xxx.css文件中）
這種方式最常用
語法格式：
<link type="text/css" rel="stylesheet" href="css文件的路徑"/>
這種方式容易維護，維護成本較低。
xxx.css文件
在html文件中引入。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css-->
<link rel ="stylesheet" type ="text/css" href="fada.css">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">快點擊我</span>
</body>
</html>
03.列表樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>中國
<ul>
<li>北京</li>
<li>上海</li>
<li>重慶</li>
</ul>
</li>
<li>美國</li>
<li>俄國</li>
</ul>
</body>
</html>
04.絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
#div1{
background-color: red;
border: 2px black solid;
width :300px;
height:300px;
position :absolute;/*絕對定位*/
left:122px;
top:122px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
結語： “路漫漫其修遠兮，吾將上下而求索”。繼續加油吧！別忘了素質三連！
歡迎關注公衆號【輕鬆玩編程】回覆就“計算機資源”獲取更多精彩。
