css3_cheat_sheetv4.2.pdf

(711 KB) Pobierz

HTML5 Cheat Sheet

learn by doing

<DOCTYPE>

<HEAD>

<!DOCTYPE html PUBLIC "

-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type"

content="text/html; charset=UTF-8">

<link rel="stylesheet" href="style.css"

type="text/css">

<html xmlns="http://www.w3.org/

1999/xhtml" lang="en"

xml:lang="en">

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css">

<! DOCTYPE html>

<html lang="en">

<NAV>

A section of the page that links to

other pages on the site or to other

sections of that particular page

<HEADER>

A group of introductory or

navigational aids

<div id="navigation">

<ul>

<li>Home</li>

<li>About/li>

<li>Work</li>

<li>Shop</li>

<li>Contact</li>

</ul>

</div>

<div id="header">

<h1>OMG, Look at the

Zombies!</h1>

</div>

<header>

<h1>OMG, Look at the

Zombies!</h1>

</header>

<nav>

<ul>

<li>Home</li>

<li>About/li>

<li>Work</li>

<li>Shop</li>

<li>Contact</li>

</ul>

</nav>

<HGROUP>

<header>

<hgroup>

<h1>WeAreFamly</h1>

<h2>All your brains are

belong tous</h2>

</hgroup>

</header>

<SECTION>

A grouping of content based

around a theme

<section>

<header>

<h1>ACCBasketbalNews</h1>

</header>

<h2>UNC Beats Duke in Championship Game!

</h2>

<p>The Blue Devils are routed by the Tarheels

atCameron IndoorStadium.</p>

</section>

<div id="acc-news">

<h2>ACC Basketball

News</h2>

<h3>UNC Beats Duke in

Champsionship Game!</h3>

<p>The Blue Devils are routed

by the Tarheels at Cameron

Indoor Stadium.</p>

</div>

Produced by

Produced by

page 1 of 2

envylabs.com

nvylabs.com

973138167.118.png

973138167.129.png

973138167.140.png

973138167.151.png

973138167.001.png

973138167.012.png

973138167.023.png

973138167.034.png

973138167.045.png

973138167.056.png

973138167.067.png

973138167.075.png

973138167.076.png

973138167.077.png

973138167.078.png

973138167.079.png

973138167.080.png

973138167.081.png

973138167.082.png

973138167.083.png

973138167.084.png

973138167.085.png

973138167.086.png

973138167.087.png

973138167.088.png

973138167.089.png

973138167.090.png

973138167.091.png

973138167.092.png

973138167.093.png

973138167.094.png

973138167.095.png

973138167.096.png

973138167.097.png

973138167.098.png

973138167.099.png

973138167.100.png

973138167.101.png

973138167.102.png

973138167.103.png

973138167.104.png

973138167.105.png

973138167.106.png

973138167.107.png

973138167.108.png

973138167.109.png

973138167.110.png

973138167.111.png

973138167.112.png

973138167.113.png

973138167.114.png

973138167.115.png

973138167.116.png

973138167.117.png

973138167.119.png

973138167.120.png

973138167.121.png

973138167.122.png

973138167.123.png

973138167.124.png

973138167.125.png

973138167.126.png

973138167.127.png

973138167.128.png

973138167.130.png

973138167.131.png

973138167.132.png

973138167.133.png

973138167.134.png

973138167.135.png

973138167.136.png

973138167.137.png

973138167.138.png

973138167.139.png

973138167.141.png

973138167.142.png

973138167.143.png

973138167.144.png

973138167.145.png

973138167.146.png

HTML5 Cheat Sheet

HTML5 Cheat Sheet

learn by doing

<ARTICLE>

<ASIDE>

An independent, self-contained

composition

Content related to an article but

not critical to its understanding

<div id="acc-news">

<h2>ACC Basketball

News</h2>

<h3>UNC Beats Duke In

Championship Game!</h3>

<p>The Blue Devils are routed

by the Tarheels at Cameron

Indoor Stadium.</p>

</div>

<article>

<header>

<h1>UNC Beats Duke In

Championship Game</h1>

</header>

<p>The Blue Devils are routed by

the Tarheels at Cameron Indoor

Stadium.</p>

<aside>

<p>Former Duke Players Cry at

Game’s End</p>

</aside>

</article>

<section>

<header>

<h1>ACC Basketball

News</h1>

</header>

<article>

<header>

<h1>UNC Beats Duke In

Championship Game!

</h1>

</header>

<p>The Blue Devils are

routed by the Tarheels at

Cameron Indoor

Stadium.</p>

</article>

</section>

<FOOTER>

Includes information that closes out

a particular section

<div id="footer">

<h3>Talk to Me Goose</h3>

<p>© 2011 Maverick &

Goose Ventures.</p>

</div>

<footer>

<h3>Talk to Me Goose</h3>

<p>© 2011 Maverick &

Goose Ventures.</p>

</footer>

<FORMS>

New stuff:

- Input types

- email

- url

- number

- date

- color

- search

- Native placeholder text

<CANVAS>

Canvas is a section of your page

where you can use javascript to

create whatever you want.

<input type="email"

id="news-email"

placeholder="e.g. beer@aol.com"

required/>

<canvas width="400" height="325">

<p>Sorry, no soup for you!</p>

</canvas>

Produced by

Produced by

page 2 of 2

envylabs.com

nvylabs.com

973138167.147.png

973138167.148.png

973138167.149.png

973138167.150.png

973138167.152.png

973138167.153.png

973138167.154.png

973138167.155.png

973138167.156.png

973138167.157.png

973138167.158.png

973138167.159.png

973138167.160.png

973138167.161.png

973138167.002.png

973138167.003.png

973138167.004.png

973138167.005.png

973138167.006.png

973138167.007.png

973138167.008.png

973138167.009.png

973138167.010.png

973138167.011.png

973138167.013.png

973138167.014.png

973138167.015.png

973138167.016.png

973138167.017.png

973138167.018.png

973138167.019.png

973138167.020.png

973138167.021.png

973138167.022.png

973138167.024.png

973138167.025.png

973138167.026.png

973138167.027.png

973138167.028.png

973138167.029.png

973138167.030.png

973138167.031.png

973138167.032.png

973138167.033.png

973138167.035.png

973138167.036.png

973138167.037.png

973138167.038.png

973138167.039.png

973138167.040.png

973138167.041.png

973138167.042.png

973138167.043.png

973138167.044.png

973138167.046.png

CSS3 Cheat Sheet

learn by doing

BORDER-

RADIUS

BOX-SHADOW

-webkit-border-radius

-moz-border-radius

border-radius

-webkit-box-shadow

-moz-box-shadow

box-shadow

-webkit-border-top-left-radius

-webkit-border-top-right-radius

-webkit-border-bottom-left-radius

-webkit-border-bottom-right-radius

syntax: x y blur color

example:

box-shadow: 5px 5px #000;

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-radius-bottomright

-moz-border-radius-bottomleft

TEXT-SHADOW

-webkit-text-shadow

-moz-text-shadow

text-shadow

syntax: x y blur color

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

example:

text-shadow: 5px 5px #000;

example:

border-radius: 5px

-webkit-transition

-moz-transition

transition

TRANSITION

TRANSFORM

-webkit-transform

-moz-transform

transform

example:

transform: scale(1.5);

syntax:

css-property duration timing-function

scale(val)

rotate(val)

skew(val, [val])

translate(val, [val])

fx {

RGBA/HSLA

RGBA/HSLA

example:

transition: opacity .2s ease-in-out;

BACKGROUND

GRADIENTS

-webkit-gradient(type, point, [radius], point, [radius], color-stops);

example: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A4B183), to(#C2D19B));

-moz-linear-gradient([point or angle], color-stop, color-stop, [color-stop])

example: -moz-linear-gradient(19%, 75% 90deg, #A4B183, #C2D19B);

linear-gradient(color-stop, color-stop);

MULTIPLE

BACKGROUND

background:url(path_to_file) no-repeat right top, url(path_to_file) repeat center top;

FONTS

RGBA/HSLA

rgba(red, green, blue, opacity);

hsla(hue, saturation, lightness, alpha);

@font-face {

font-family: “Font Family Name”;

src: url(“path_to_file”);

format(“font_type”);

}

example:

background: rgba(208, 208, 198, 0.5);

973138167.047.png

973138167.048.png

973138167.049.png

973138167.050.png

973138167.051.png

973138167.052.png

973138167.053.png

973138167.054.png

973138167.055.png

973138167.057.png

973138167.058.png

973138167.059.png

973138167.060.png

973138167.061.png

973138167.062.png

973138167.063.png

973138167.064.png

973138167.065.png

973138167.066.png

973138167.068.png

973138167.069.png

973138167.070.png

973138167.071.png

973138167.072.png

973138167.073.png

973138167.074.png

Plik z chomika:

Inne pliki z tego folderu:

level2 - CSS3.mp4 (181429 KB)
level3 - header and nav.mp4 (173015 KB)
level1 - HTML.mp4 (167189 KB)
level4 - footers and forms.mp4 (180256 KB)
Three_For_Five.pdf (7112 KB)

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin