Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Base HTML & CSS

Nick Chan
November 03, 2013
Programming
0
85

Base HTML & CSS

***************************************
* Normalize.css
***************************************
Download: http://necolas.github.io/normalize.css/

Usage:
Put the CSS file on the website's

***************************************
* Modernizr
****************************************
Download: http://modernizr.com/

Usage:
Put the JavaScript file on the website's

Sample:
If you want to use multiple background, your CSS may look like this:

#nice {
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}

But some old browsers don't support, your CSS may change to this:

/* For old browsers */
#nice {
    background: url(background-one.png) top left repeat-x;
}
/* Use the class provided by Modernizr*/
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

***************************************
* Adobe Edge Code CC
****************************************
Download: http://html.adobe.com/edge/code/

***************************************
* Brackets.io
****************************************
Download: http://brackets.io/

Nick Chan

November 03, 2013
Tweet

Other Decks in Programming

See All in Programming
Code Reviews
bkuhlmann
4
900
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Milestoner
bkuhlmann
1
410
Java 22 Overview
kishida
1
190
Going beyond Apache Parquet's default settings
xhochy
0
130
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Git Rebase
bkuhlmann
11
1.6k
Implementing Design Systems in Swift
seyfoyun
1
460
2 週間で Twitter Bot を作ってみた
contour_gara
0
770

Featured

See All Featured
KATA
mclloyd
16
12k
Writing Fast Ruby
sferik
622
60k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
A better future with KSS
kneath
231
16k
What the flash - Photography Introduction
edds
64
11k
The Invisible Side of Design
smashingmag
294
49k

Transcript

  1. Base HTML & CSS Nick

  2. HTML DOCTYPE? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    HTML DOCTYPE XHTML DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > HTML5 DOCTYPE <!DOCTYPE html>

  3. <body> SAMPLE CODE <style type="text/css"> .text-layer { font-family: Monaco, "Courier

    New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; } </style> <body> <h1 style="color:red">Juhu Kinners</h1> <div id="elem_id"></div> <div class="text-layer bg-red"></div> </body>

  4. <h1> <h1> ~ <h6> h1 h2 h2 h3 h3

  5. attr id Attribute id <div id="elem_id"></div> Identity of HTML Element

    • It is the only • Always use in JavaScript

  6. attr class Attribute class <div class="text-layer bg-red"></div> Styling the HTML

    Element • It can be many • Each class match with their css in stylesheet .text-layer { font-family: Monaco, "Courier New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; }

  7. <table> VS <div>

  8. <table> VS <div> <table> Base usage <table> <tr> <td>row1 column1</td>

    <td>row1 column2</td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 row1 column2 row2 column1 row2 column2

  9. <table> VS <div> <table> colspan <table> <tr> <td colspan=”2”> row1

    column1 + row1 column2 </td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 + row1 column2 row2 column1 row2 column2

  10. <table> VS <div> <table> rowspan <table> <tr> <td rowspan=”2”> row1

    column1 + row2 column1 </td> <td>row1 column2</td> </tr> <tr> <td>row2 column2</td> </tr> <tr> <td>row3 column1</td> <td>row3 column2</td> </tr> </table> row1 column1 + row2 column1 row1 column2 row2 column2 row3 column1 row3 column2

  11. <table> VS <div> Tips for using <table> • When the

    container has margin or padding, do not set table in 100% width • Do not try to set the height, if you want to make it flexible <table width=”100%”> padding <table width=”auto”> padding

  12. <table> VS <div> Why <div> ? • Easy to control

    • No any extra css • Default display “Block” <div id=”1” style=”position: absolute”> <div id=”4” style=”position: absolute”> <div id=”2” style=” position: absolute”> <div id=”3” style=” position: absolute”> <div id=”1” style=” position: relative”> <div id=”2” style=” position: relative”> <div id=”3” style=” position: relative”> <div id=”4” style=” position: relative”> <div id=”5” style=” position: relative”> <div id=”6” style=” position: relative”>

  13. <table> VS <div> So... • Not too much customize •

    Seems simple • Have a some format <table> • Lots of customize • Complex layout • Not in same format <div>

  14. margin & padding

  15. margin & padding margin content margin

  16. margin & padding padding content padding

  17. About transparent

  18. About transparent Cross browser /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */ filter: alpha(opacity=50); /* Good browsers */ opacity: 0.5;

  19. Cross Browser Solutions

  20. Cross Browser Solutions Cross browser http://necolas.github.io/normalize.css/ CSS Normalize.css http://modernizr.com/ Modernizr

  21. Cross Browser Solutions Cross browser http://html.adobe.com/edge/code/ Helpful Tools Adobe Edge

    Code CC http://brackets.io/ Brackets

  22. <END/>