Les premières règles CSS bureau

On va appliquer les premières règles aux éléments de la page

Body, header et nav

Body
Choix d'une famille de police avec une graisse légère. Un fond gris clair.
```
body {
	font-family: Roboto;
	font-weight: 300;
	background: #dfdfdf;
}
```
Header
Un header qui couvre toute la largeur de la fenêtre de navigation, en noir, avec une hauteur de 50px et une position fixe qui le place en haut à gauche de la fenêtre.
```
header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 50px;
	z-index: 10;
	background: #000;
}
```
Navigation
La balise nav a un identifiant "principale". la règle qui la cible va définir une graisse bold :
```
nav#principale {
	font-weight: 700;
}
```
Navigation - logo
L'élément de la liste qui contient le logo en arrière-plan a une largeur et une hauteur de la taille du logo sans répétition de fond.
```
li#logo {
	width: 126px;
	height: 23px;
	background: url(../images-site/logo-haut.png); background-repeat: no-repeat;
}
```

Règle Media query

Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.

Dans le fichier CSS version bureau, on va déclencher une Media query pour le comportement du menu principal sur la version bureau.

Création d'une Media query

Note: La règle Media query doit être écrite et comporte deux accolades dans lesquelles toutes les règles CSS vont être écrites.
Composer la règle
Dans le code ci-dessous, on indique la taille des écrans qui vont respecter les styles. Il s'agit d'écrans dont la largeur minimale est de 769px. Donc les phablettes et les écrans de bureau.
```
* - - - CSS Styles phablettes et bureau  - -  - - - -- */
@media (min-width: 769px) {

}
```
La liste qui structure le menu
Le texte sera centré.
```
ul#menu {
		text-align: center;
	}
```
Les éléments de liste
Ils sont de type bloc donc les uns sous les autres. On les fait passer en ligne tout en gardant leur propriété de bloc. Ainsi, on donne une hauteur de ligne égale à la hauteur du header (50px) pour qu'il soient au centre verticalement.
```
ul#menu li {
		display: inline-block;
		line-height: 50px;
	}
```
Figure: Un menu horizontal
Les liens
Les liens sont tranformés en élément bloc afin de pouvoir par la suite les remplir d'une couleur de fond. On les sépare avec une marge intérieure, on les passe en blanc et on enlève le soulignement.
```
ul#menu li a {
		display: block;
		padding: 0 20px;
		color: #FFF;
		text-decoration: none;	
	}
```
Figure: Menu finalisé
Les liens des menus survolés
On veut qu'un lien survolé ait un fond blanc et que le texte soit bleu.
```
ul#menu li.items a:hover {
	background: #FFF;
	color: #00a1f2;
}
```
Figure: Lien du menu survolé
Marquer la page active
Pour rappel, dans notre menu, un élément de liste correspond forcément à la page où l'internaute sera. Il faut que dans le code HTML on reconnaisse cet item en lui donnant un nom de classe "active" par exemple. on peut créer une règle pour le cibler?
```
ul#menu li.active a {
		background: #FFF;
		color: #00a1f2;
}
```
Figure: Le menu Accueil est la page active, Connection est survolé