====== TD2 - Initiation à CSS ======
Inspiré du cours de Gaëtan Rey.
** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome **
===== Prélude : Rendre accessible sa page web =====
Ouvrez le logiciel ''FileZilla'' présent dans le répertoire réseau ''R:'' : il s'agit d'un client FTP, un logiciel capable de se connecter à un serveur en utilisant le protocole FTP, afin de transférer des fichiers.
Renseignez les informations suivantes :
* Hôte : linserv3
* Login : votre identifant
* Password : votre mot de passe
* Port : 22
Lancez la connection, vous devriez voir des répertoires dans site distant.
Créez un dossier ''web'' (clic droit dans Site distant, puis Créer un répertoire), ouvrez le et transférez les pages du dernier TD dedans.
Vous devriez pouvoir y accéder au sein de l'université à partir de l'adresse suivante : http://linserv1/users/etudiant/n/nomIdentifiant/web/ où **nomIdentifiant** correspond à votre identifiant.
L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
A votre avis, pourquoi l'URL est-elle différente dans l'université ?
===== CSS : Introduction =====
Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
L'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (x)html. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.
Ainsi, les avantages des feuilles de style sont multiples :
* La structure et la présentation du document sont gérées dans des fichiers séparés.
* La conception d'un document se fait sans se soucier de la présentation.
* La présentation est uniformisée (plusieurs pages (X)HTML peuvent faire référence aux mêmes feuilles de styles).
* Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
* La lisibilité des pages (X)HTML est améliorée puisqu’elles ne contiennent plus de balises ni d'attributs de présentation.
==== Inclusion de CSS ====
Toutes les instructions de mises en forme seront contenues dans un fichier CSS identifiable par son extension ''.css''.
Le fichier (X)HTML contenant la structure du document doit alors contenir une référence vers le fichier CSS.
Par exemple, si vous possédez un fichier ''style.css'', vous devrez ajouter la ligne suivante dans le **bloc header** du fichier HTML :
==== La syntaxe de CSS ====
De manière générale, la syntaxe du CSS est très simple. Elle correspond au schéma suivant :
selecteur { propriété:valeur }
Chaque sélecteur (ci-dessous ''body'') peut avoir plusieurs propriétés avec des valeurs indépendantes,
il faut pour cela séparer les propriétés par un « ; ».
body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, serif;
}
Vous pouvez également insérer des commentaires dans votre code avec la syntaxe suivante :
/* Commentaire ici */ **Couleurs**
Vous pouvez choisir soit d'utiliser un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp) soit de donner les couleurs sous la forme ''rgb'' qui offre alors un plus large choix de couleurs en combinant le rouge, le vert et le bleu (http://www.w3schools.com/html/html_colors.asp)
==== La notion d’héritage/cascade ====
Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? Car si vous définissez une police de type "Trebuchet MS" sur la balise , l'ensemble des autres éléments du site (parce qu'inclus dans cette balise) prendra comme police ''Trebuchet MS'', inutile de le redéfinir pour chaque élément.
Autre exemple, si vous définissez la balise ''body'' avec une couleur rouge (comme le montre la commande suivante), les autres éléments du ''body'' auront une couleur rouge par défaut :
body {
color: #FF0000;
}
Si vous souhaitez une autre police pour les balises ''
'' par exemple, il suffit de la définir à nouveau.
h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}
Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ol''.
ul > li { margin-left: 10em; }
* {{:2013_2014:s1:docweb:css:gardencss0.html.zip|Sauvegarder le fichier ci-après}}
* Visualiser le avec un navigateur
* [[http://validator.w3.org/check|Validez votre fichier]] Votre objectif est de le rendre valide en séparant contenu et présentation.
* Recopier le fichier sous ''gardenWithCss.html'' puis séparer le style dans un fichier css;
* [[http://jigsaw.w3.org/css-validator|Valider votre fichier css]] (conseil : vérifier la validité de votre fichier css; modifier votre fichier html; visualiser le html; itérer...)
* Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial.
**Quelques Tips**
^ Type d'élément ^ Eléments en css ^
| lien non visité | a:link {color: ...} |
| lien visité | a:visited {color:} |
| lien actif (cliqué) | a:active {color:} |
| lien survolé | a:hover {color:} |
| Type de police | {font-family:"French Script MT"; |
| Taille de police | {font-size:xx-large; //par exemple// |
| Couleur du texte | color: |
| Texte en gras | font-weight:bold; |
| Texte en italique | font-weight:italic; |
| Couleur de fond | background-color: |
==== Combinaison de sélecteurs ====
Vous pouvez aussi combiner les éléments HTML qui regroupent les mêmes caractéristiques.
Voici un exemple permettant de modifier en même temps l’ensemble des balises
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur.
Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML.
**Ils sont donc importants pour nous.**
* [[http://www.yoyodesign.org/doc/w3c/css2/selector.html|En savoir plus sur les sélecteurs]]
* [[http://openweb.eu.org/articles/cascade_css|Cascade CSS et priorité des sélecteurs]] … qui explique l’ordre de priorité des sélecteurs et l’utilisation de !important.
* Sauvegarder les fichiers html et css réalisés à l'exercice précédent sous ''gardenWithCss1.html'' et ''style1.css''
* Modifier votre nouvelle feuille de style pour que tous les titres s'écrivent dans la fonte : "Comic Sans MS", cursive, sans-serif
* Que se passe-t-il si vous ne modifiez pas vos définitions de styles pour h1 et h3 ?
**Les polices de caractères**
**AVANT**
Le texte s'affiche avec les polices de caractères présentes sur l'ordinateur des visiteurs. Cela implique que vous ne pouvez pas utiliser n'importe quelles polices.
Pour cela vous pouvez utiliser des politiques dîtes génériques qui se trouvent sur presque tous les ordinateurs.
[[http://www.w3schools.com/cssref/css_websafe_fonts.asp|En savoir plus sur les fontes]]
**Mais depuis CSS3**
Vous pouvez définir des polices et les héberger sur votre propre serveur : elles seront téléchargées automatiquement au besoin.
http://www.w3schools.com/css/css3_fonts.asp
==== La notion de classe, de pseudo classe et d’id ====
=== Les classes ===
CSS ne se limite pas à la redéfinition des balises html, on peut également créer des classes qui pourront être appliquées à une section html à l’aide de l’attribut class comme le montre l’exemple ci-dessous :