1 什麼是CSS？CSS的作用是什麼？
CSS英文全稱：Cascading Style Sheet，是層疊樣式表，不屬於編程語言；
CSS的作用：CSS是HTML的化妝品，可以讓HTML變的更炫酷，是專門來修飾HTML的
CSS在哪裏編寫？CSS代碼是嵌入在HTML中的，沒有HTML代碼，CSS代碼是無效的
2 CSS主要掌握以下內容：
4.1 CSS註釋：在style體內使用/**/
4.2 在HTML中嵌入CSS代碼
(1) 第一種方式：內聯嵌入方式
A、語法：style="樣式名1:樣式值1; 樣式名2:樣式值3;"
B、在HTML中，大部分標籤都有style屬性，在該屬性中高可用設置該標籤的CSS樣式
C、示例一：style屬性完成a標籤的樣式：讓其有下劃線，有鼠標懸停效果手型
a、字體下劃線：text-decoration:underline
b、鼠標懸停手勢效果：cursor:hand;(該樣式IE中支持，FireFox中不支持)
c、鼠標懸停手勢效果：cursor:pointer;(該樣式都支持，兼容性強)
<a style="text-decoration:underline; color:blue; cursor:pointer;">百度</a>
D、實例二：
<html>
<head>
<title>CSS樣式_內聯嵌入式</title>
</head>
<body>
<a href="#" style="text-decoration:none;">電影</a> 
<a href="#" style="text-decoration:none;">奇葩說</a> 
<a href="#" style="text-decoration:none;">德雲社</a> <br/>
<img id="img1" src="img/1.jpg" width="500px" height="300px"/>
</body>
</html>
(2) 第二種方式：定義內部樣式塊對象
在head標籤中添加：<style type="text/css"></style>在style內部編寫
A、標籤選擇器：標籤名{}
a、標籤選擇器：整個頁面所有該標籤都使用這個樣式
a{
cursor:pointer;
color:blue;
text-decoration:underline;
}
b、示例：使用標籤選擇器實現字體沒有下劃線
a{
text-decoration:none;
}
B、id選擇器：#idName{}
a、只對該id的標籤使用這個樣式
#google{
cursor:pointer;
color:blue;
text-decoration:underline;
}
C、類選擇器：.myclass{}
a、樣式作用於有該類的標籤
.myclass{
cursor:pointer;
color:blue;
text-decoration:underline;
}
<html>
<head>
<title>CSS樣式_內部樣式塊</title>
<style type="text/css">
/* 標籤選擇器：頁面中所有a標籤使用以下樣式 */
a{
text-decoration:none;
}
/* id選擇器：將頁面中id爲Img1的標籤修改如下樣式 */
#img1{
width:300px;
height:200px;
}
/* 類選擇器：將頁面中樣式類型爲myclass的字段顏色改爲紅色 */
.myclass{
color:red;
}
</style>
</head>
<body>
<h1>刮刮視頻</h1><br/>
<a href="#" >電影</a> 
<a href="#" >奇葩說</a> 
<a href="#" >德雲社</a> <br/>
<a href="#" class="myclass">籃球公園</a>
<a href="#" class="myclass">網球</a>
<br/><br/>
<img id="img1" src="img/2.png" />
<br/><br/>
<img id="img2" src="img/1.jpg" width="500px" height="300px"/>
<br/><br/>
</body>
</html>
(3) 第三種方式：鏈入外部樣式文件
A、在head標籤中：<line rel=stylesheet href="1.css" type="text/css">
B、@import指令引入外部樣式表。@import指令必須放在樣式表 <style type = "text/css">@import url(1.css);</style>
1.css代碼：
/*
標籤選擇器：頁面中所有a標籤使用以下樣式
*/
a{
text-decoration:none;
}
/*
id選擇器：將頁面中id爲Img1的標籤修改如下樣式
*/
#img1{
width:300px;
height:200px;
}
/*
類選擇器：將頁面中樣式類型爲myclass的字段顏色改爲紅色
*/
.myclass{
color:red;
}
html代碼：
<html>
<head>
<title>CSS樣式_鏈入外部樣式文件</title>
<link rel=stylesheet href="1.css" type="text/css">
</head>
<body>
<h1>刮刮視頻</h1><br/>
<a href="#" >電影</a> 
<a href="#" >奇葩說</a> 
<a href="#" >德雲社</a> <br/>
<br/><br/>
<img id="img1" src="img/2.png" />
<br/><br/>
</body>
</html>
(4) web前端開發中最難的是：解決各大瀏覽器之間的兼容問題
希望對你有幫助，祝你有一個好心情，加油！
若有錯誤、不全、可優化的點，歡迎糾正與補充！