css常見屬性

標籤：width   one   repeat-y   項目結構   repeat   並集   rom   after   ott   

### 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常見屬性