吉言軍's Note: 5月 2015

2015年5月17日星期日

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;

2015年5月14日星期四

w3school-Bootstrap

Bootstrap 3

CDN

1、add the HTML doctype :

<!Doctype html>
<meta charset="UTF-8">

2、Bootstrap is mobile first

<meta name="viewport" content = width="device-width",initial-scale=1 >

3、containers

Bootstrap Grid System 12columns
1、class="row"
2、class="col-sm-4" (最大12)

xs (for phones)
sm (for tablets)
md(for desktop)
lg(for larger desktop)

Bootstrap dropdown-toggle
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
Menu<span class="caret"></span>
<ul class="dropdown-menu role="menu"" >

Bootstrap Table

Basic : < table class="table";>
zebra-stripe : <table class="table table-stripes";>
Border table : <table class="table table-bordered";>
Hover Rows : <table class="table table-hover";>

Bootstrap Image