CSS
Sommaire
Flux et positionnements
L'élément relative est positionné par rapport a lui même et l'élément en absolute par rapport a un élément déjà positionné.
Le div central d'un site peut être positionné en tant que float ou relative puisque qu'il n'est pas retiré du flux (le footeur sera donc poussé). Mais en aucun cas en absolute.
Positionné à partir d'un autre élément positionné ou de l'élément de plus haut niveau (balise html)
Les éléments absolute sont sorties du flux : les autres éléments prennent la place laissé vacante.
relative
L'élément ainsi positionné est décalé par rapport à sa position normale dans le flux.
Les autres éléments se comportent comme si l'élément se trouvait à son emplacement d'origine dans le flux normal.
fixed
Positionner par rapport au navigateur
Couleurs
Désignation
- en toute lettre : red, black, white, blue
- par code RGB : #AF87A0
- fonction rgba pour la transparence: rgba(27, 26, 25, 0.5);
Couleur du text
- Le texte en lui même
color: red;
- Sous le texte
text-shadow: red 0.18em 0.17em 0.18em;
Selecteurs
Tag HTML
h1{
}
- Sélection multiple: avec virgule
h1,h2,h3{
}
Class
Caractère .
.aldo{
}
Select all
div.test {
}
Id
Une Id identifie de manière unique un élément
Caractère #
#uniq{
}
fonctions css
calc
Permet de realiser des calculs (pour positionner des elements)
Cas d'utilisation
Image de fond fixe
background: url("background.jpg") no-repeat center center fixed;
background-size:cover;
Centrer un div
{
margin-left: auto;
margin-right: auto;
}
Bordure d'un tableau HTML appartenant a une classe
<html>
<head>
<title></title>
<style>
table.styled{
border:1px solid red;
}
table.styled td{
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<h2>No style</h2>
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>
<h2>styled</h2>
<table class="styled">
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>
</body>
</html>