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;
- 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;
- 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;
