Html5, css3, js, jQuery

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

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éra
proprié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;}
}

animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
…

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

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”);
});

Html5, css3, js, jQuery

Contenu connexe

Similaire à Html5, css3, js, jQuery

Html5, css3, js, jQuery