HTML快捷鍵+tab鍵自動補齊

• 直接鍵入標簽名稱
• 加類名 div.className
• 加id名 div.idName
• 父子關(guān)系 ul>li
• 兄弟關(guān)系 img+a
• $符號,會從0-n自動填充 (div.className$)*6
• *符號,會復(fù)制同類多個標簽 ul>li*6

CSS快捷鍵+tab鍵自動補齊

文字屬性

• font-style
  • fs font-style: italic;
  • fsn font-style: normal;
• font-weight
  • fw font-weight:;
  • fwb font-weight: bold;
  • fwbr font-weight: bolder;
• font-size
  • fz font-size:;
  • fz30 font-size: 30px
• font-family
  • ff font-family: ;
• font縮寫
  • font: style weight size family;
  • font: italic bold 10px "楷體";

ps注意點:

1. 在這種縮寫格式中有的屬性值可以省略sytle可以省略,weight可以省略
2. 在這種縮寫格式中style和weight的位置可以交換
3. 在這種縮寫格式中有的屬性值是不可以省略的,size不能省略,family不能省略
4. size和family的位置是不能順便亂放的,size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最后

文本屬性

• text-decoration

  • td text-decoration: none;
  • tdu text-decoration: underline;
  • tdl text-decoration: line-through;
  • tdo text-decoration: overline;

• text-align

  • ta text-align: left;
  • tar text-align: right;
  • tac text-align: center;

• text-indent

  • ti text-indent:;
  • ti2e text-indent: 2em;

顏色屬性

• color
  • c color: #000;

ps注意點:顏色的取值有4種方式

1. 英文單詞.如white, black, blue, green, red等等
2. rgb三原色.其中r(red 紅色) g(green 綠色) b(blue 藍色)
3. rgbg.a(alpha)代表透明度
4. 16進制.如 #fff, #f12345

CSS的顯示模式

• display
  • di display: inline;
  • db display: block;
  • dib display: inline-block;

ps注意點:

1. 塊級元素(block)
   • 獨占一行
   • 如果沒有設(shè)置寬度, 那么默認和父元素一樣寬
   • 如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示
2. 行內(nèi)元素(inline)
   • 不會獨占一行
   • 如果沒有設(shè)置寬度, 那么默認和內(nèi)容一樣寬
   • 行內(nèi)元素是不可以設(shè)置寬度和高度的
3. 行內(nèi)塊級元素(inline-block)
   • 為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素

背景顏色

• background-color
  • bc background-color: #fff;

背景圖片

• background-image
  • bi background-image: url();

背景平鋪

• background-repeat
  • bgr background-repeat:
  • bgrx background-repeat: repeat-x;
  • bgry background-repeat: repeat-y;
  • bgrn background-repeat: no-repeat;

ps注意點:

1. repeat 默認, 在水平和垂直都需要平鋪
2. no-repeat 在水平和垂直都不需要平鋪
3. repeat-x 只在水平方向平鋪
4. repeat-y 只在垂直方向平鋪

背景關(guān)聯(lián)

• background-attachment

• ba background-attachment:;
• bas background-attachment: scroll;
• baf background-attachment: fixed;

背景連寫

• background縮寫(背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式)
  • bg+ background: #fff url() 0 0 no-repeat;

ps背景圖片和插入圖片的區(qū)別

1. 背景圖片僅僅是一個裝飾, 不會占用位置
   插入圖片會占用位置
2. 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置;插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
3. 插入圖片的語義比背景圖片的語義要強, 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片

邊框

• border
  • bdt border-top:;
  • bdr border-right:;
  • bdb border-bottom:;
  • bdl border-left:;
  • bd+ border: 1px solid #000;
• border-xx-xx
  • btw border-top-width:;
  • bts border-top-style:;
  • btc border-top-color: #000;

ps類似的還有border-direction-attribute

外邊距

• padding
  • pt padding-top:;
  • pr padding-right:;
  • pb padding-bottom:;
  • pl padding-left:;

內(nèi)邊距

• margin
  • mt margin-top:;
  • mr margin-right:;
  • mb margin-bottom:;
  • ml margin-left:;

浮動

• float
  • fl float: left;
  • fr float: right;

定位

• psa position: absolute;
• ps position: relative;