lundi 20 octobre 2014

HTML5_CSS3_Partie 2


Les attributs #Class et #Id sont quasiment identiques. La seule différence est que la valeur d’un attribut #Id doit être unique dans une page alors que celui de #Class peut se répéter.
Exemple
Soit la page HTML suivante
<<<-------------------------------------------------------------------->>>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=utf‐8"/>
<link rel="stylesheet" href ="stylesheet.css" />
<title>Premiers tests du CSS </title>
</head >
<body >
<h1 >Mon super site </h1 >
<p class = "introduction">Bonjour et bienvenue sur mon site !</p>
<p id= "Contenu">Pour le moment , mon site est un peu vide!</p>
<p class = "introduction">n'hésite pas a visiter notre page facebook</p>
</body>
</html>
<<<-------------------------------------------------------------------->>>
#La_feuille_de_style : stylesheet.css :
<link rel="stylesheet" href ="stylesheet.css" />
(dans un fichier .css méthode la plus recommandée )
<<<-------------------------------------------------------------------->>>
# Contenu
{
color : blue ;
font‐size:x‐large;
font‐style:italic;
}
.introduction
{
color :red;
}
<<<-------------------------------------------------------------------->>>
Testez le résultat

seul les deux paragraphe appelé introduction va s'afficher en rouge et l'autre en bleu
l'image ci-dessus Expliquer la Syntaxe globale De La Class Et Id 

bon chance

HTML5_CSS3_Partie 1

Appliquer un style : Les sélecteurs avancés 

Vous devez obligatoirement les connaître car c'est la base du CSS.* :

 sélecteur universe

* { }
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel. 

A B : une balise contenue dans une autre
h3 em
{

}
Sélectionne toutes les balises <em> situéesà l'intérieur d'une balise
<h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises.
Exemple:
<h3 >Titre avec <em >texte important </em ></h3 >
<<-------------------------------------------------------------------------->>
A + B : une balise qui en suit une autre
h3 + p
{

}
Sélectionne la première balise <p> située après un titre <h3>.
Exemple :
<h3 >Titre </h3 > <p>Paragraphe </p>