w3school-CSS

CSS Syntax : Syntax  p {property : value ; property : value}

CSS Selector

• element div{}
• id  #id{}
• class .class{}  /  div.class{}
• Grouping Selector h1, h2, p{}

CSS three way to insert CSS

• External Style Sheet : <link rel="stylesheet" type="text/css href="mystyle.css">
• Internal Style Sheet  :  p{color : red}
• Inline Styles : <h1 style="color : red"> 

CSS Background
Background Color body{background-color : #b0c4de;}
Background Image body{background-image : url("bkImage.png");}
Background Image Repeat background-repeat : repeat-x;
Background Image no repeat background-repeat : no-repeat
Background Image Position background-position : right top ;
Background ShortHand Property : background : #ffffff url("pic.jpg") repeat-x;
Background fixed : background-attachment : fixed;


CSS Text

• color 
• color : red  
• color : #ffffff  
• color : rgb(122,255,255);
• Alignment
• text-align : left;
• text-align : center;
• text-align : justify;    (each line have same width)
• decoration   (線)
• text-decoration : overline;
• text-decoration : none;  (通常用來移除超連結的線)
• text-decoration : line-through;
• text-decoration : underline;
• Transformation
• text-transformation : uppercase;
• text-transformation : lowercase;
• text-transformation : capitalize;
• Identation (第一行的留白寬度)
• text-ident : 50px;
• space between characters : letter-spacing : -3px;
• space between lines : line-height : 70%;
• direction : 
• direction : rtl; (從右邊長出來)
• uinicode-bidi : bidi-override;  (方向相反)
• increase the white space between the words : word-spacing : 30px;
• disable wrapping :  white-space : nowrap;  (不自動換行)
• text shadow : text-shadow : 2px 2px #FF0000   (水平，垂直，顏色)

CSS Font

• Font-family
• style
• font-style : normal;
• font-style : italic;
• font-style : oblique;
• Size  font-size : 40px;
• boldness : font-weight : 600;
• variant : font-variant : small-caps;

CSS Links

• color : #FF0000;
• state :
• link : a:link{color:#FF0000;}
• visited : a:visited{#00FF00;}
• hover  :  a:hover{#000000}
• active :   a:active{#0000FF;}
• create link box

CSS Lists

• Markers
• list-style-type : circle;
• list-style-type : square;
• list-style-type : upper-roman;
• list-style-type : lower-alpha;
• list-style-image : url("marker.jpg");

CSS Box Model

• width
• padding
• border
• margin

CSS border

• border-style : solid;
• border-top-style : dotted;
• border-color : red;
• border-width : 10px;

CSS Margin

• margin-top : 10px;
• margin-bottom : 10px;
• margin-left : 10px;
• margin-right : 10px;
• shorthand :  margin : 10px  15px;  (上下10px, 左右15px)

CSS Display and Visibility

• Hidding a Element
• visibility : hidden;   //Element 不見，但layout 位置還在
• display : none;         //Element不見，連layout 位置都不在
• inline : display : inline;
• block : display : block;

CSS Positioning
Fixed : position : fixed;   (不管卷軸怎麼動，都會在那裏)
Relatived : position : relative;  (相對原本位置移動)
Absolute : position : absolute;
Overlapping Element : z-index : -1;
Set the shape of element : clip : rect(10px,90px,10px,10px);
overflow : scroll  /  hidden / auto  ;
change the cursor : cursor : pointer;
clear : clear : both;     //利用<h1> 把float 關掉，達到換行


CSS Align
Center Aligning Using the margin Property margin-left : auto;  / margin-right : auto;
Left and Right Aligning Using the position Property : position:absolute; / right:0px;