Post on 17-Jul-2015
Contenu
<element attribut=“valeur”>Contenu</element>
<element attribut=“valeur” />
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>
<link />
<meta />
<script>
<style>
<header>
<nav>
<footer>
<section>
<article>
<aside>
<div>
<span>
<h1>...<h6>
<p>
<blockquote>
<q>
<sup>
<sub>
<strong>
<a>
<br />
<pre>
<ul>
<ol>
<li>
<table>
<caption>
<tr>
<th>
<td>
<thead>
<tbody>
<tfoot>
<form>
<input />
<textarea>
<select>
<option>
<img />
<video>
<audio>
<source>
<!-- … -->
http://41mag.fr/liste-des-balises-html5
…
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> <link rel="stylesheet" href="url" type="text/css"> <style type="text/css"> ... </style> </head> ...</html>
Générale sélecteur {propriété: valeur;
}
Multiples sélecteurs sélecteur, sélecteurN {propriété: valeur;
}
Propriétés “combinées” sélecteur {propriété: valeur valeurN;
}
*
élément
#id
élément.maclasse
.maclasse
élément1 élément2
élément1 > élément2
élément1 + élément2
élément1 ~ élément2
[attribut]
[attribut=mavaleur]
[attribut*=mavaleur]
[attribut^=mavaleur]
[attribut$=mavaleur]
élément[attribut]
élément:first-child
élément:last-child
élément:nth-child(n)
élément:nth-last-child(n)
élément:first-of-type
élément:last-of-type
élément:only-child
élément:only-of-type
élément:not(sélecteur)
élément:active, élément:focus, élément:hover
élément:link
élément:visited
élément:checked
élément:before
élément:after
élément::first-line
élément::first-letter
élément {-webkit-propriété: valeur; // Chrome, Safari, Android...-moz-propriété: valeur; // Mozilla-ms-propriété: valeur; // Microsoft (Internet Explorer)-o-propriété: valeur; // Opérapropriété: valeur; // Toujours finir par la déclaration
}
font-size
font-family
font-style
font-weight
text-decoration
text-align
@font-face
display
float
position: relative
position: absolute
position: fixed
width, height
margin, padding
white, black, green…
#FFFFFF, #000000, #008000
rgb(255,255,255), rgb(0,0,0)...
rgba(0,0,0,1), rgba(0,0,0,0.5)...
color
border-color
background-color
background-color
background-image
background-repeat
background-position
background-size
background-image: gradient(...)…
transition-property
transition-duration
transition-timing-function
transition-delay
transform: fonction(valeur);
transform-origin: x y;
@keyframe monAnim
@-webkit-keyframes monAnim
@keyframes monAnim {
from {propriété: valeur1; propriétéN: valeur1;}to {propriété: valeur2; propriétéN: valeur2;}
}
@keyframes monAnim {0% {propriété: valeur1; propriétéN: valeur1;}25% {propriété: valeur2; propriétéN: valeur2;}50% {propriété: valeur3; propriétéN: valeur3;}100% {propriété: valeur4; propriétéN: valeur4;}
}
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
…
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media condition opérateur conditionN {...}
@media only screen and (min-width: 300px) {...}
…
<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body></html>
<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body></html>
instruction1;instruction2;
var myVar;myVar = 5;var myVar = 5;
int, string, boolean, array...
+, -, *...
=, +=, -=...
++, --
==, <, >...
&&, ||, !
if (condition) { instruction1;}else{ instruction2;}
while (condition) { instruction1;}
do { instruction1;} while (condition);
for (initialisation, condition, incrémentation) { instruction1;}ex:for (i = 0; i<5; i++) { a += i;}
function myFct (arguments) { instruction1; return x;}
myFunction(valeurs_arguments);
Ex: document.getElementById(“id”)...
<button id=”id” onclick=”maFonction”>
document.getElementbyId(“id”).onclick(this.addClass(“class”));
<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript"src=”url_fichier_jquery”></script> </body></html>
$(“sélecteur”)
$(“sélecteur”).fonction();ex: $(“#id”).addClass(“ab”);$("p").on("click", function() { alert($(this).text());});
document.getElementById(“content”).classList.add('wrap');
$(“#content”).addClass(“wrap”);
$( "sélecteur" ).animate(propriétés, durée, function() { // What to do after animation complete });
$( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { alert(“Done”); });