先端知識点まとめ——CSS

先端知識点まとめ——CSS
1.CSSの概要
1.CSSとは?

CSS：Cascading Style Sheets     ，     （  ：   ）

2.作用

  HTML       

3.HTMLとCSSの関係

HTML：       
CSS：    （  ）   

4.HTMLとCSSの間の使用原則

W3C      CSS     HTML       

2.CSS文法規範
1.CSSスタイルの使い方(ポイント)

 1.    
          
     ： CSS     HTML     
     ：
     
     ：
      1.          
      2.              
      3.               
           CSS        ：
      1.           
          ：color
     ：      （  ）
      2.           
          ：background
     ：      （  ）
      3.           
          ：font-size
     ： px pt      
    ex：font-size:30px;
     
      2.    
               
      
        ：           
   ：                    （                  ）
     ：           
div,p,h1,span,a,img
   {}
ex：div{}
    p{}
    ：
      {
          ；
   }
ex:
div{
   color:red;
   font-size:20px;
}
p{
  color:blue;
}
h1{...}


 3.    
              ，         （***.css   ），
    .css         ，        .css  。
       ：
       1.       ，       
   2.           
     
        
     

3.CSSスタイルフィーチャー

1.   
            （             ）
             
  

     
p
  
2.    
               ，         ，               
  div{
     color:red;
  }
  div{
     font-size:20px;
  }
  div{
     background:gray;
  }
  
3.   
           ，                   
          ：
                     
                  (    )
                        

4.        
  !important  ：
          
   !important        ，         ，          
  ex:
    color:red !important;

4.CSSベースセレクタ(ポイント)

1.      
                     
2.     
  1.     
      ：            
  ：*{    }
    ，    
ex:
  *{
    color:red;
    font-size:40px;
  }

2.エレメントセレクタ

      ：       （ ）     
  ：    {    }
ex：
  div{}
  p{}
  span{}  

3.クラスセレクタ

      ：               (         )
  ：     class      
  ：
   1.  
     .  {    }
       ：
       1.       ，             
       2.          （&,^,%,$,#,@）
       3.    （_,-）
   2.  
     

        ：
       1.     
                    
       ：
     

       2.     
                    
                       
       ：    .    {    }
        ex:div.text{color:red;}
      
dddd
      
d1d1d1

4.idセレクタ

  ：    ID     （    ）
  ：#id {    }
ex:
  

  #one{
    color:red;
  }

5.群组选择器

  ：                   
  ：   1,   2,   3,...{    }
 ex:
   div,#main,.mycolor,p.text{color:red;}
      ：
 div{color:red};
 #main{color:red};
 .mycolor{color:red};
 p.text{color:red};

6.子孫セレクタ

  ：             （    ）
  ：   1    2    3{    }

7.子セレクタ

  ：       （      ）      
  ：   1>   2{    }

8.擬似クラスセレクタ

  ：             
  ：
           ：    
      ：     {    }
1.    
     :link            
 :visited           
2.    
     :hover               
 :active            （   ，   ，        ）
 :focus             （       ）

3.       
    ：            ，         。
         ：1
    ：  10
     ：10
ID    ：100
    ：  1000

          ，    
    ，       

5.寸法と外枠
1.単位

1.    
  1.px：  
    1024*768
  2.in:  
    1in=2.54cm
  3.pt： (1pt=1/72in)
               
  4.cm:  
  5.mm:  
  6.em:          (     2em)
  7.rem:   （          ，html\body）

2.    （    ）
  1.    
    red,blue,gray,green,yellow,black....
  2.rgb(r,g,b)
    r:0-255
g:0-255
b:0-255
  3.rgba(r,g,b,alpha)
    alpha:   ，   0-1     ，   ，      
  4.#rrggbb
     6 16     \        
0-9 A-f
#000000:  
#ffffff:  
#eeeeee:  
#ff11aa
  5.#rgb        
    #000:  
#fff:  
#f1a

2.寸法属性

1.  
            
2.  
  1.  
    width:  
min-width:    
max-width:    
  2.  
    height：  
min-height:    
max-height:    
3.               
  1.              
    div,p,h1,h2..h6,ul,ol,dl,    
  2.    width height             
    img,table
  3.         
            （    ，   ）
  4.               
    a,span,b,i,u,s 

3.オーバーフロー処理

    ，        ，         ，        。
  ：overflow,overflow-x,overflow-y
  ：
   1.visible
        ，   ，    
   2.hidden
        ，         ，       
   3.scroll
          ，   ，  
   4.auto
       ，            

   

4.外枠

1.    
  1.    
    border:width style color;
     width:     ， px      
     style:     
         ：
         solid:  
     dotted:    ( )
     dashed:    ( )
     color:     
           ：      
     transparent:   
       ：
           ：border:0; border:none;
       


  2.    
              
  ：border-  :width style color;
      ：top/bottom/left/right
                      

  
  3.     
                
  ：border-width/style/color: ；
  ex:border-width:3px;
     border-style:dotted;
     border-color:red;

  4.        
                  
  ：
  border-  -  ： ；
    ：top/bottom/left/right
    ：width/style/color
  ex：
    border-left-color:blue;
    border-right-style:solid;
    border-bottom-width:6px;
2.    
             
    ：border-radius
    ：
        1. px      
        2.    %      （50%）

      ：
     border-top-left-radius:   
 border-top-right-radius:   
 border-bottom-left-radius:   
 border-bottom-right-radius:   
3.    
   ：box-shadow
   ：h-shadow v-shadow blur spread color inset
    h-shadow:            ，      
         ：      
         ：      
v-shadow:            ，      
         ：      
         ：      
blur:      ，    ，       ， px      （   ）
spread:     ，                ，   px      （   ）
color:    （   ）
inset:            （   ）

 
4.  
            ，           
    ：
     outline:width style color;
 widht:     
 style:       
      ：solid/dotted/dashed
 color:     

      ：
       outline:none/0;

6.ボックスモデル
1.ボックスモデルとは

   ：box model,             ，   ，              。
   ：            
   ：              
        ：
             =     +    +     +width;
         =     +    +      +height

7.外距離
1.外距離とは

             ，     
                    

2.文法

  ：
   margin               
   margin-top/bottom/left/right         
  ：
   1.    ， px   
   2.    
                
 margin-left:
      ，       
      ，       
 margin-top:
      ，       
      ，       
   3.   %
          ，           （50%）
   4.   auto
              （            ）
 
    ：
    1.margin:value
          
2.margin:v1 v2;
  v1:     
  v2:     
3.margin:v1 v2 v3;
  v1:    
  v2:     
  v3:    
3.margin:v1 v2 v3 v4;
                  （     ）

3.外付け要素

body,h1~h6,p,ul,ol,dl,dd,pre
  CSS Reset(css  )   ，           
 body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre{
    margin:0;
 }

4.外付け距離の特殊効果

1.     
             ，        ，                  。
               ，        。
2.      
        ，           ，           。
      1.        
  2.           
  
2. d2        div,id="d3",      100*100，        
3.  d3      50px,     。
       ：
    1.         
    ：          
2.                     
    ：          
3.              ，     (table)
                  
     1.           （img  ）
 2.     ，        ，           

8.内側の余白
1.内側マージンとは

2.文法

  ：
   padding         
   padding-top/bottom/left/right        
  ：
       px      
       %    
    ：
      1.padding:value;          
  2.padding:v1 v2; 
    v1:     
    v2:     
  3.padding:v1 v2 v3;
    v1: 
    v2:  
    v3: 
  4.padding:v1 v2 v3 v4;
                    （   ）

9.属性:box-sizing
≪アクション｜Action｜oraolap≫:ボックス・モデルの計算方法を指定します.

  ：
   1.content-box
        ，              
       =    +     +     +width;
       =    +     +     +height;
   2.border-box
          ，   border  padding  
       =width(   border padding)
       =height(   border padding)
 

3.背景属性背景:単一の色または画像の塗りつぶし要素1.背景色

  ：background-color
  ：      
  ：                   

2.背景画像

  ：background-image
  ：url(     );
ex:background-image:url(a.jpg);

3.背景画像のタイリング

  ：background-repeat
  ：
   repeat    ，       
   no-repeat    （       ）
   repeat-x         
   repeat-y         

4.背景画像サイズ

  ：background-size
  ：
   1.width/height  (ex:200px 300px)
   2.width%/height%  (ex:50% 50%           )
   3.cover
             ，                   。
   4.contain
             ，                 

5.背景画像固定

  ：               ，        ，               。
  ：background-attachment
  ：
   1.scroll    ，  
   2.fixed   

6.背景画像の位置付け

  ：            
  ：background-position
  ：
   1.x y       （px）
     x:
            
       ，    
       ，    
 y:
            
       ，    
       ，    
   2.x% y%
     0% 0%        
 100% 100%        
 50% 50%         
   3.   
 x:left/center/right
 y:top/center/bottom
 ex:background-position:right top;
 
  

7.背景略記属性

                
  ：background
  ：color url() repeat attachment position
ex：
  background:gray url(a.jpg);
  ：
                ，        。

8.グラデーション
1.グラデーションとは

                    。

2.グラデーションの要因

1.  ：           
2.            （    ）

3.グラデーション分類

1.    
             
2.    
             
3.    
                     

4.グラデーションの詳細

1.    
    ：background-image
    ：linear-gradient(angle,color-point1,color-point2,....);
    1.angle
              
    ：
    1.   
      to top          
      to bottom          
      to left          
      to right          
    2.   
     0deg       ，   to top
     90deg       ，   to right
     180deg       ，   to bottom
     270deg       ，   to left
    2.color-point
    ：        
    ：           ，       
  ex:
    1.red 0%
                      
    2.green 50%
                 ，      
    3.blue 200px
            200px    ，      
2.    
    ：
  background-image:radial-gradient([size at position],
  color-point1,color-point2,...);
  size at position: 
      size:  ， px      
  position:      
       1.x y     
       2.x% y%         
       3.   
         x:left,center,right
     y:top,center,bottom
  ex：
    100px at right top 
            
3.    
  1.      
    background-image:repeating-linear-gradient
    (angle,color-point1,color-point2,...);
color-point:          （px）,       %
  2.      
    background-image:repeating-radial-gradient
    ([size at position],color-point1,color-point2,...);

9.ブラウザ互換性

                 
           ，              ，          
Firefox:-moz-
Chrome & Sagari:-webkit-
Opera:-o-
IE:-ms-

2.テキスト書式設定属性1.フォント属性

1.    
    ：font-family
    ：    ，         
  ex：
  font-family:"    ",Arial,"  ";
2.    
    ：font-size
    ： px pt      
3.    
    ：font-weight
    ：
     1.bold   （b,hn）
 2.normal   
 3.value       （   ）
   400-900
   400：   normal
   900：   bold
4.    
    ：font-style
    ：
     1.normal      
 2.italic     
5.      
            ，             
     ：font-variant
     ：
      1.normal   
  2.small-caps        
6.      
    ：font
    ：style variant weight size family;
    ：
           ，    family  ，    。
font:12px;   
font:12px "  ";   

 

2.テキスト形式

1.    
    ：color
    ：      
2.    
    ：    ，  ，            。
    ：text-align
    ：left/center/right/justify(    )
3.    （  ）
    ：text-decoration
    ：
    none:       
underline:     
overline:     
    line-through:     
4.  
    :         
    ：                ，                       。
    :line-height
    ： px     
5.      
    ：text-indent
    ： px      
6.    
    ：text-shadow
    ：h-shadow v-shadow blur color;

10.表
1.表の共通属性

1.    ：padding
2.    ：border
3.    ：width,height
4.       ：font-*,text-*,line-height
5.    ：  ，  ，  
6.vertical-align
    ：             
    ：
     top:   
 middle:    
 bottom:   
   ：    ，         
     1.     400*400，4 4 ;
 2.         100*100,    ;
 3.             1px solid #000;
 4.             20px;
 5.              15px。

2.表の特殊属性

1.    
    ：border-collapse
    ：
     1.separate
      ，       
 2.collapse
       
2.    
    ：                   
    ：border-spacing
    ：
    1.     ：          
2.    ：
             
             
  ：          ，        ， border-collapse:separate ，border-spacing   。
    

3.表のタイトル位置

  ：caption-side
  ：
    1.top:   ，         
2.bottom:         

4.表示規則

  ：                ，     td       。
  ：table-layout
  ：
   1.auto
        ，       ，              。
   2.fixed
           ，           
      VS      ：
    1.      
  1.           
  2.     ，      （  ）
  3.           （  ）
  4.             
    2.      
  1.             
  2.             （  ）
  3.            
  4.          （  ）

11.位置決め-フローティング位置決め
1.位置決め

  ：                

2.位置決めの分類

       ，        ：
   1.     （       ）
   2.    
   3.    
   4.    
   5.    

3.位置決めの詳細

1.     
          ，            
  1.               
  2.                     
  3.                ，        
  4.                            

        ：             
2.    
  1.     &  
    1.        ，        （      ），            。
2.                 ，              。
3.         ：               。
  2.  
      ：float
  ：
   1.left
        ，                        
   2.right
        ，                        
   3.none
        ，        

12.フローティングによる特殊効果
1.エレメントが浮動するとブロックレベルのエレメントになります

2.親要素がすべてのフローティング要素を表示できない場合、最後の要素は改行されますが、引っかかる可能性があります.3.要素が一旦浮動すると、幅は内容を主とする(幅が指定されていない場合).4.テキスト、行内要素、行内ブロック要素は周回的に配列されており、フローティング要素が下に押されるのではなく、フローティング要素を巧みに避けることができます.
13.フローティングによる影響のクリア
エレメントがフローティングすると、後続のエレメントに一定の位置影響(後続のエレメントが上位に位置する)が与えられます.後続のエレメントが影響を受けたくない場合(位置を補正したくない場合)、フローティングをクリアすることでプロパティを解決できます.clear値:

 1.left
                       
 2.right
                       
 3.both
                         
 4.none
      ，           

14.フローティング要素が親要素の高さに与える影響
1.要素の高さはすべてフローティングされていない要素の高さを基準とし、フローティング要素はページの高さを占めない

             ：
    1.          
    ：             
2.        
    ：              ，           
3.      overflow
    ：hidden auto
    ：             ，       
4.     ，      (  )，    clear:both;

15.表示
1.表示方式

1.       
                （  ，  ，   ）
2.  
    ：display
    ：
     1.none      -  
     ：     ，       
 2.block
                
     ：
          ，      
 3.inline
                
     ：
             
                
               
 4.inline-block
                 
     ：
               ，        
 5.table
              
     ：
             
              
            

2.効果を表示

1.  /  
    ：visibility
    ：
      1.visible:   ，    
  2.hidden:     -  
    ：display:none visibility:hidden   
        display:none       
    visibility:hidden      
2.   
    ：opacity
    ：0.0（    ）~1.0（     ）     
3.        
    ：vertical-align
    ：
     1.     
     ：top/bottom/middle
 2.  （img）   
     ：
      top： 
      bottom： 
      middle：  
      baseline:    ，   

16.カーソル
1.作用

           ，     

2.文法

  ：cursor
  ：
    1.default:   
2.pointer:   
3.crosshair: +
4.text: I
5.wait:   
6.help:   
   ：
       div  ，      div  ，         。

17.リスト
1.リスト項目タグ

  ：list-style-type
  ：
   1.none
   2.disc
   3.circle
   4.square

2.リスト項目画像

  ：              
  ：list-style-image
  ：url(    );

3.リスト項目の位置

  ：            ，  li  
  ：list-style-position
  ：
   1.outside    ，      li   
   2.inside      li  

4.リスト属性の略記

  ：list-style
  ：type url() position;
    ：list-style:none;
       ：
               ，          。

18.位置決め
相対位置決め、絶対位置決め、固定位置決め1.位置決め関連属性

  ：position
  ：
   1.static:  ，   
   2.relative:    
   3.absolute:    
   4.fixed:    

2.オフセット属性

top/bottom/left/right
             
ex:
  top:150px       150px
  left:20px       20px
  right:-150px       150px
  ：
                 

3.位置決めの詳細

1.    
  1.       
                     
  2.    
              
  3.  
      position:relative;
                    
      left:10px;
      top:10px;
2.    
  1.       &  
    1.             -      
2.                ，    ，              。
3.            ，         body         
4.                
  2.  
    position:absolute;
             
  3.    
    1.        
2.    
  4.  ：
    1.     -       
2.             

  5.    
                 ，              
  ：z-index
  ：      ，       
      ：
  1.                  （z-index）
  2.     ，z-index  ，              
3.    
  1.       
                  ，              ，        。
  2.  
    position:fixed;
        
    ：
    1.              body            。
2.              
3.            -