問題
- 什么是css?
- 為什么會有css？
- css和HTML怎么樣結合？
css (what)
這是W3School給的定義
W3school的定義
** 百度百科 **：
Cascading Style Sheets(層疊樣式表縮寫)。是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
css優點 （why）
主要為了彌補html的不足
- HTML的缺陷：
- 不能夠適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
- CSS 優點：
1.使數據和顯示分開
2.降低網絡流量
3.使整個網站視覺效果一致
4.使開發效率提高了
具體實現（how）
首先看整個的思維導圖
整個需要了解的幾大方面
在了解了什么是css，之后最想了解的便是它是如何運用到html中去的。
格式：
標簽選擇器 { 屬性名稱：屬性值} (中間以分號；隔開)
三種方式：
三種使用方式
- 外部樣式表，需要在寫在當前html文件之外的單獨的一個文件以.css為擴展名的文件,具體實現如上圖思維導圖
- 內部樣式表 , 一般寫在<head>標簽中，用<style>標簽包裹
- 行級樣式表，寫在標簽的內部，用" "引用
選擇器
選擇器記憶
選擇器可總結為兩大類：** 基本選擇器 和擴展選擇器**
基本選擇器
基本選擇器
基本選擇器又分為：
1，標簽選擇器
2，類選擇器
3，ID選擇器
4，通用選擇器
簡單例子
<html>
<head>
<title>css基本選擇器</title>
<style type="text/css">
/**通用選擇器**/
*{
font-size:30px;
color:yellow;
}
/**基本選擇器**/
p{ color:red;
font-family:幼圓;}
/**類選擇器**/
.bluefont{
color:blue;
}
/**ID選擇器**/
#id1{
color:green;
font-size:50px;
}
</style>
</head>
<body>
<p>這是寫的第一個css樣式標簽</p>
<p>p的普通選擇器標簽</p>
<label class="bluefont">label的類選擇器標簽</label><br>
<i id="id1">i的ID選擇器標簽</i>
</body>
</html>
效果圖
上述簡單的例子有一些選擇器沖突 ，所以就產生了優先級，另外還有屬性互補原則。
選擇器的優先級別
擴展選擇器
基本分三類選擇器：
1，組合選擇器
2，關聯選擇器
3，偽類選擇器
擴展選擇器
Demo:
<html>
<head>
<title>css基本選擇器</title>
<style type="text/css">
/** 組合選擇器 **/
h1,h2,#one{
font-size:30px;
color:green;
}
/**關聯選擇器**/
h3 span p{
color:red;
}
/**偽類選擇器
1，靜態偽類
靜態只能用于超鏈接
2，動態偽類
適用于各種標簽
**/
a:link{color:red;}
a:visited{color:yellow;}
a:hover{color:#FF00FF}
a:active{color:green}
a.two:link{color:red}
a.two:visited{color:green}
a.two:hover{font-size:150%}
input:focus{background-color:#ff9999;
border:1px solid red;}
label:hover{color:green;}
/* 二者只能用一個*/
/**label:active{color:red;}**/
</style>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<label id="one">label的類選擇器標簽</label><br>
<h3><span><p>這是關聯選擇器里面的p標簽</p></span></h3>
<p >這是不在關聯選擇器中的p標簽</p>
<a href="01css.html">這是一個嵌入偽類選擇器的超鏈接</a><br><br>
<a class="two" href="01css.html">這是一個class為two的偽類選擇器的超鏈接</a><br><br>
請輸入<input value="a"></input><br>
<label>你好，明天</label>
</body>
</html>
運行結果
運行結果
各種屬性
這些屬性其實就只需要記幾個常用的就行了，不記得了，等要用的時候再查表
基本屬性
文本屬性
背景屬性
字體文字屬性
其他
至此，CSS的學習告一段落，基本都是從W3School那里學習得來，只不過自己用思維導圖整理了一下，另外自己也實現了，有個印象，想提升則需要在項目中去歷練。
