Brendan Abolivier - Club Elec
Konstantin Sidorenko - Digital Design
Balises ouvrantes/fermantes
<html>[mon contenu...]</html>
Balises auto-fermantes
<link rel="stylesheet" href="design.css" />
Squelette d'une page Web :
<!DOCTYPE html>
<html>
<head>
<title>Ma super page Web</title>
</head>
<body>
Hello world!
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Ma super page Web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="design.css" />
<script src="script.js"></script>
</head>
<body>
<section>
<h1>Ma section</h1>
<article>
<h2>Mon premier article</h2>
<p>Hello world!</p>
</article>
<article>
<h2>Mon second article</h2>
<p>Hello world!²</p>
</article>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
Hello world!
</body>
</html>
<section>
permet de fractionner une page<article>
permet de définir des éléments d'une section<p>
permet de définir un paragraphe<h1>
, <h2>
, <h3>
... en fonction de l'importance
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8" />
</head>
<body>
<section>
<h1>Ma section</h1>
<article>
<h2>Un premier article</h2>
<p>Hello world!</p>
</article>
<article>
<h2>Un second article</h2>
<p>Hello world!²</p>
</article>
</section>
<section>
<h1>Mon autre section</h1>
<article>
<h2>Encore un premier article...</h2>
<p>... encore "Hello world!"</p>
</article>
<article>
<h2>Et encore un second article</h2>
<p>Et un dernier "Hello world!" (ça devient répétitif)</p>
</article>
</section>
</body>
</html>
<a> ... </a>
<a href="http://www.example.com">Voir mon site</a>
<a href="page2.html">Aller à la page 2</a>
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8" />
</head>
<body>
<a href="http://www.duckduckgo.com">Quack</a>
</body>
</html>
<!-- [mon commentaire...] -->
<section>
<!-- Pemière section, sert à... -->
<h1>Ma section</h1>
<article>
<h2>Un premier article</h2>
<p>Hello world!</p>
</article>
<a href="http://www.example.com" id="monlien" target="_blank">Mon super lien</a>
class
identifie un élémentid
identifie de façon unique un élément<head></head>
<meta name="description" content="Mon superbe site !" />
<meta charset="utf-8" />
<head>
<title>Mon super site</title>
<meta charset="utf-8" />
<meta name="description" content="Bienvenue sur mon site ! :-)" />
<meta name="author" content="Brendan Abolivier" />
</head>
<span>
, <a>
)<div>
, <section>
, <h1>
)
h1 {
color: grey;
font-size: 150%;
}
#id {
height: 500px;
width: 75%;
margin: auto;
}
.class {
background-color: grey;
}
Le plus propre : séparer le CSS du HTML
<link rel="stylesheet" href="style.css" />
Un sélecteur peut être...
... un nom de balise (h1
)
... un attribut "id" (#id
)
... un attribut "class" (.class
)
Le texte : font-size
, text-align
, font-family
...
La couleur : color
, background-color
, background-image
, ...
Il y a plusieurs couleurs prédéfinies en CSS : blue
, grey
, green
, white
, black
, pink
, red
...
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="ex5.css" />
</head>
<body>
<section>
<h1>Ma section</h1>
<article class="article1">
<h2>Un premier article</h2>
<p>Hello world!</p>
</article>
<article class="article2">
<h2>Un second article</h2>
<p>Hello world!²</p>
</article>
</section>
<section>
<h1>Ma section</h1>
<article class="article1">
<h2>Encore un premier article...</h2>
<p>... encore "Hello world!"</p>
</article>
<article class="article2">
<h2>Et encore un second article</h2>
<p>Et un dernier "Hello world!" (ça devient répétitif)</p>
</article>
</section>
</body>
</html>
h1 {
color: red;
}
h2 {
text-align: center;
}
section {
background-color: grey;
}
.article1 {
color: white;
}
.article2 {
color: green;
}
sélecteur1 sélecteur2
: sélecteur2 dans sélecteur1
section article { ... }
sélecteur1sélecteur2
: sélecteur1 de type sélecteur2
article.article1 { ... }
section.section1 article { ... }
Certains éléments ne peuvent pas être sélectionnés par un sélecteur classique
a:hover {
color: pink;
}
Exemples : visited
, first-child
, last-child
, checked
...
Le navigateur appliquera toujours la règle la plus précise.
article
< article.maclasse
< section article.maclasse
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="ex7.css" />
</head>
<body>
<article>
<h2>Un article pas comme les autres</h2>
<p>Attention, cet article n'est pas dans une section !</p>
</article>
<section>
<h1>Ma section</h1>
<article id="top">
<h2>Un premier article</h2>
<p>Hello world!</p>
</article>
<article>
<h2>Un second article</h2>
<p>Hello world!²</p>
</article>
</section>
</body>
</html>
h1 {
color: red;
}
h2 {
text-align: center;
}
section {
background-color: grey;
}
section:hover {
background-color: pink;
}
section article#top {
color: green;
}
section article {
color: white;
}
width
, height
: Modifier la taille d'une balise blocksélecteur1[attribut=valeur]
: Sélectionner toutes les occurrences de sélecteur1
où l'attribut attribut
vaut valeur
position
+ left
/right
/bottom
/top
: Positionner relativement ou absolument un blockborder
: Ajouter une bordure à un blockanimation
: Animer un élémentmargin
, padding
: Ajouter des marges externes et internes (respectivement) d'un block