### css常見屬性
- color:red/rgb(255,0,0)/#f00;
    + 註意，如果有a鏈接，必須在a鏈接中設置字體的顏色；在外面設置a鏈接中的字體顏色，無效；
- font:400 14px/28px "宋體 微軟雅黑"；
    + font-weight:400; bold->700;
    + font-size:14px;
    + line-height:28px;
    + font-family:"宋體"
- background:url("相對地址") no-repeat left top red;
    + background-image:url();
    + background-repeat:no-repeat; repeat-x; repeat-y;
    + background-position:0 0； left top;
    註意：background中的精靈圖(雪碧圖)，主要通過修改位置和寬高來展現圖片；
- 字體是否傾斜
    + font-style:italic 傾斜／ normal 正常；
- 下劃線和刪除線
   + text-decoration: line-through; 刪除線；
   + text-decoration: none; 去除下劃線；
   + text-decoration: underline;添加下劃線；
   
### css中的選擇器：
- 1.標簽選擇器：div p ul li dt dd em i u del strong b input label from table
    + 缺點：只能進行共性的操作，無法個性操作；
- 2.class選擇器和 3.ID：
    + `.class名`,同一個頁面能有無數個相同的class名；
    + `#id名`，同一個頁面只能有一個ID名；（ID名是不能重復的）
    + 在真正的開發過程中，class是用來設置樣式的，id是用來獲取元素；
```
<div class="div1 div2 div3" id="div1"></div>
```
- 4.後代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)
- 5.子選擇器：div > p(選擇div容器下的兒子)；兼容IE7+；
- 6.交集選擇器: div.div1
- 7.並集選擇器：div,p
- 8.通配符*：代表所有的元素；
- 9.序選擇器：兼容IE8+;
    + div > p:first-child
    + div > p:last-child
- 10.下一個兄弟選擇器 ul li+li{} 兼容IE7+

### 開發常用的瀏覽器
- chrome
- IE7~11
- firefox;
   
### CSS的繼承性和層疊性
- 以font開頭的屬性都能夠繼承；line-height
- color可以繼承
- text開頭的也可以繼承，比如text-align;

### css權重
- !important權重無窮大；（少用為好）
- id的權重大於class的權重；

### css盒子模型
- css盒子模型由5部分：
    + 內容的寬高+padding+border+margin;
- 單行文本的居中：height = line-height
- 多行文本的居中，padding和line-height
- padding：
    + padding是內邊距
    + padding的顏色和內容的顏色一致；background-color填充的是border以內的顏色；
    + padding是復合值
        padding:30px; ->pl30; pt30;pr30;pb30;
        padding:20px 30px; ->上下為20px 左右30px;
        padding:10px 20px 30px; -> 上10px 左右20px 下30px;
        padding:10px 20px 30px 10px; 上 右 下 左；
        
        如果現設置padding:30px;
        再設置padding-left:10px;
        請問最後的值各是多少？
        左10px; 其他都是30px;
- margin：外邊框
- border:
    + border:1px solid #000;
    + border-width
    + border-style：solid（實體）,dashed（虛線）,dotted（點）
    + border-color
### 行內元素和塊級元素
- p標簽雖然是文本標簽，但是，它可以當容器來使用，p標簽內一定不能放div; p塊元素；他獨占一行；
- 文本元素：p span a i em u b strong img
- 容器級：div li dt dd h級（不建議）
- 除了p，所有的文本元素，都是行內元素； 
- 所有容器級別的元素，都是塊元素
- 塊和行內元素的相互轉化
    + display：inline; //行內
    + display:inline-block;//行內塊；
    + display：block; //塊
- 關於定位：大部分情況，建議的是:父相子絕（父親：相對定位，兒子：絕對定位）   
- 關於脫離文檔流的方法
   + 浮動 float:left; float:right;
   + 絕對定位 position:absolute;
   + 固定定位 position:fixed;
   + 重點：1）父相子絕 2）行內元素一點脫離文檔流，就可以設置寬高了；
   + 註意：行內元素，一旦脫離文檔流，雖然能設置寬高，但是，如果不設置寬的話，會默認跟內容一樣寬；而塊級元素，如果不設置寬度的話，默認跟父級一樣塊，沒有父級的話，默認跟屏幕一樣寬；
- 清除浮動的方法：
    1. clear:both (clear:left 和 clear:right)
    2. over-flow:hidden;（他是溢出隱藏，但是可以用來清除浮動）
    3. 偽類清除浮動
    ul:after{
        height:0;
        content:"";
        display:block;
        clear:both;
    }
### 最基本的開發，首先必須創建的項目結構
 - images文件夾：放切好的圖片
 - css文件夾：放置css文件：index.css
 - index.html文件
### 項目開發細節：
- www.baidu.com/favicon.ico+enter鍵；
- PS中的快捷鍵
    + m:虛線框；
    + 選中需要的圖片後，ctrl+c; ctrl+n;ctrl+v;
    + 保存圖片：ctrl+alt+shift+s
-














   
   
   
   

css常見屬性