CSS3

CSS3 –行內樣式、內聯樣式、外聯樣式、選擇器型別

C(cascade)SS(StyleSheet) 級聯樣式表

1. 行內樣式(優先顯示和覆蓋)：
<標籤 style="css樣式程式碼"></標籤>
  說明: html標籤通用屬性: style
  樣式例子:
  font-size: 文字大小    值 數字px
  color: 標籤內的文字顏色.
  font-family: 字型
  background-color:顏色  背景色
2. 內嵌樣式：
   	語法格式:
   	選擇器: 選擇標籤.   	<!--放在head中-->
   	<style type='text/css'>
   	選擇器{
           樣式屬性名:值;
           樣式屬性名:值;
       }
   	</style>
3. 外部引入樣式檔案：
    ①將公用的樣式css程式碼放在 css檔案(*.css)
    ②在需要使用樣式的html網頁中,引入外部樣式檔案
       <link rel="stylesheet" href="外部css檔案的路徑">
4. 選擇器型別:
   	① 標籤選擇器: 
   		標籤名{
   			css程式碼
   		}
   	② class選擇器 (類選擇器)
    使用：
   		①所有html標籤公共屬性 class="名字"
   		②使用class選擇器新增樣式
    語法:
       .class名字{
       	css程式碼
       }
    ③ ID選擇器:
    使用:
   	①所有html標籤都有id屬性名(id屬性值不能重複)
   	②使用id選擇器新增樣式
	語法：
       #id值{
        	css程式碼
       }
④ 偽類選擇器：
    	滑鼠移入選擇器:
   			css選擇器:hover{
    			css樣式
   			}
    	解釋: 當滑鼠移動到選擇器選擇的標籤上以後,才會生效樣式, 移出後,樣式消失.
    ⑤ 父子選擇器：
    	作用: 精確選擇子標籤
    	語法: 父標籤>子標籤
    		父標籤>子標籤{
    			css程式碼
   			}
注意: 行內樣式style屬性的方式,優先順序高於內嵌樣式的方式.
 

CSS3 –常見的CSS樣式

常用樣式屬性:
		①文字相關
			font-size:80px			字型大小
			font-family:隸書;		字型
			color:顏色			文字顏色
			text-decoration: 		none無下劃線 | underline有下劃線
		②邊框相關
			border:樣式 粗細 顏色	
			border:solid 2px red			
			width：寬
			height：高
			border-shadow:3px 3px yellow;
		③背景相關
background-image:url(圖片路徑);							背景圖片				 
			background-repeat:no-repeat|repeat|repeat-x|repeat-y	 	背景平鋪
			background-position:center;								背景對齊位置
			background-color:red;									背景顏色
		④滑鼠相關
			cursor：pointer|wait|move|auto
		⑤table相關
			border-collapse:collapse;  //表格單行框、去掉衝突的邊框
⑥補充樣式: 
			顯示: display
				值: inline  行內
					block  塊
					none   消失(不顯示), 元素佔用網頁空間變成0
				概念: 行級元素: 佔用空間是在行內部,顯示完不會換行. 
				 	塊級元素:  佔滿當前行  顯示完畢後,會換行
			列表樣式: 
				list-style-type: none; 取消列表的預設樣式
 

CSS3 –第三方樣式庫、柵格化佈局

（1）第三方樣式庫[學會檢視文件]
第三方廠商提供現成可用的樣式檔案
使用:①引入外部定義好的css樣式檔案
  	 	.xxxx{
   			css樣式程式碼
   		}
②在需要使用標籤使用樣式(class="xxxx")
## 草莓圖示庫
①引入css樣式庫
   	<!-- 引入草莓圖示庫的樣式檔案 -->
   	<link rel="stylesheet" href="caomei/style.css">
②使用
   	<span class="圖示樣式class名"></span>
 

BootStrap 樣式庫

weeter公司: 第三方封裝好css樣式庫.[元件庫,jquery外掛庫]
使用: 
①匯入bootstrap樣式相關檔案
   引入bootstrap.min.css(開法版的,壓縮後)
②在html通過link引入樣式
   <link rel="stylesheet" href="css/bootstrap.min.css">
③使用標籤的class名新增效果.
例如：
a.按鈕
標籤: 
a超連結
button
input
樣式:
class="btn"
按鈕顏色樣式
class="btn-default"
 			class="btn-primary "
按鈕大小:
class="btn-lg"
class="btn-xs"
b.文字
  文字顏色:
`<p class="text-success"></p>`
  文字背景色: 
`<p class="bg-danger"></p>`
c.圖片
圖片修飾
`<img src="girl.jpg" class="img-thumbnail" width="200px" alt="">`
d.表格
table標籤：
<table class="table table-bordered table-hover table-condensed">
    		table: bootstrap的表格效果
    		table-bordered: 邊框
    		table-hover: 滑鼠移入效果,背景加深
   		 table-condensed: 緊湊型
tr標籤(td)：
    	行背景色
    		.active	滑鼠懸停在行或單元格上時所設定的顏色
			.success	標識成功或積極的動作
			.info	標識普通的提示資訊或動作
			.warning	標識警告或需要使用者注意
			.danger	標識危險或潛在的帶來負面影響的動作
e.表單:
表單元素的標籤(input select textarea)
`<標籤標籤 class="form-control">`
（2）柵格佈局
核心:
①使用div標籤
②使用table佈局的思路(行  列)
使用步驟：
a.最外層div
   class="container": 佈局內容和網頁左右兩側,留白.
   class="container-fluid": 寬度佔用網頁100%, 適合做後臺管理系統.
b. 劃分行
   `<div class="row">`
c. 在行內部劃分單元格
   行內預設劃分12格,最多隻能使用12格.
   `<div class="col-md-1到12的數字">`