La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.

Présentations similaires


Présentation au sujet: "HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation."— Transcription de la présentation:

1 HTMLCSS

2 HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation d'une page en utilisant des balises.

3 CSS Le World Wide Web a introduit les feuilles de styles en cascade pour compléter la langage HTML. Les CSS permettent de gérer l'apparence des documents. Les feuilles indiquent aux balises HTML leur comportement ou style.

4 Les styles Un style rassemble tous les attributs que l'on peut appliquer à des types de textes similaires. Attribut : taille,format Textes similaires : titres, en-têtes, pied de page Les styles donnent un nom commun à des groupes d'attributs

5 Les styles de Word Applique le style : Titre 1

6 Avantage du CSS Une CSS est constituée de code séparé qui améliore les possibilités du HTML en permettant de redéfinir la façon dont fonctionnent les balises HTML existantes. L'avantage par rapport à la création de nouvelles balises HTML repose sur le fait qu'en modifiant la définition d'une seule règle CSS centralisée, l'apparence de toutes les balises contrôlées par cette règles est modifiée.

7 Style dans la page body { margin: 10px 0 ; padding: 0 ; text-align: center ; font: 0.8em "Trebuchet MS", helvetica, sans-serif ; background: indianred ; }

8 Du HTML au CSS : Principe Le CSS "iso "; H1 { color : red ; }.HTML Fichier.CSS Introduction … Le Résultat Sélecteur simple

9 Les règles Une règle définit l'apparence et le comportement du code HTML. Un règle indique à une balise HTML comment afficher son contenu. La création de règles générique permet également de les appliquer à plusieurs balises.

10 Syntaxes Sélecteur HTML valeur;}propriété:Selecteur { attribut à définir définit la propriété Règle

11 Syntaxes Les propriétés identifient ce qu'il faut définir. Elles caractérisent l'apparence du contenu. Les valeurs sont assignées à une propriété pour définir sa nature Vari Faux Nombre Pourcentage

12 Types de règles Les sélecteurs sont des caractères alphanumériques qu'identifie la règle. Sélecteur HTML La classe L'ID

13 Sélecteur HTML La partie textuelle d'une balise HTML est appelé sélecteur H1 est le sélecteur de Le sélecteur est exploité pour redéfinir le style de l'affichage de la balise.

14 Syntaxe générale utilisée Les styles d'une balise Sélecteur HTML p {font-size:12px;} PropriétéValeur Définition

15 Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style Denis

16 Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style Denis

17 Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style Denis

18 Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style Denis

19 Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style Denis times times + bold +red times + bold +red+italics Denis

20 Définition de règles identiques pour plusieurs basiles Liste de sélecteurs séparés par les virgules h1,h2,h3,p {font-size:12px;} PropriétéValeur Définition p {margin-top:25px;}

21 La classe Une classe est un style indépendant que l'on peut appliquer à toute balises HTML. Chaque classe se voit attribuée un nom unique spécifié ensuite dans la ou les balises HTML qui l'utilise par le biais de l'attribut style. Les règles de classe peuvent être définies entre les balises dans l'en-tête ou dans un fichier CSS en ligne*. Elle permettent aux fonctions Javascript d'identifier un objet unique, elles sont très utilisées en DHTML. Les id sont comme les classes définit dans l'entête ou exportées d'un fichier CSS externe ou liés au document HTML.

22 Syntaxe générale d'une classe CSS Le sélecteur de classe permet de définir un style applicable à toutes balises HTML. Une sous class possède un nom unique précédé dun point.

23 Syntaxe générale d'une classe CSS Les styles d'une balise.copy {font-size:12px;} Sélecteur de classe Propriété Définition Valeur utilisation …

24 Exemple : sous class indépendante.nav {color:red;} nom prenom age nom prenom age Factorisation importante

25 héritage sous class indépendante.nav li{color:red;} nom prenom age Cela va affecter tous les éléments li dans la classe.nav li sera enfant de la classe.nav

26 Ecriture.nav li{color:red;} nom prenom age

27 suite.nav ul ul{color:red;} nom dupont martin prenom denis gerard

28 Sous class dépendante li.nav{color:red;} nom prenom age nom prenom age

29 Sous class dépendante …

30 Exemple 1 Liste simple Exemple 2 Bilan. italic_rouge { color:red; font-style:italic; } Sous Class indépendante.CSS Sous Class dépendante ul.niveau1 { list-style-type:square; color:blue; }.CSS.HTML Le Résultat Exemple 1 Liste simple

31 Du HTML au CSS : Sélecteurs Le Résultat Exemple 1 Liste simple Exemple 2 Exemple 1 Liste simple Exemple 2 Exemple 1 Liste simple Exemple 2.HTML. italic_rouge { color:red; font-style:italic; } Sous Class indépendante.CSS Sous Class dépendante ul.niveau1 { list-style-type:square; color:blue; }.CSS

32 ID Très utile pour spécifier des règles qui ne s'appliquent qu'à un élément avec un ID unique donné défini par l'attribut id en HTML. Pas plus d'un élément ne doit avoir un ID donné. utilisé avec Javascript pour repérer et traiter un élément particulier.

33 Syntaxe générale d'une ID des styles UNIQUE indépendants de toute balise HTML utilisation … Sélecteur d'ID #area {font-size:12px;} PropriétéValeur Définition

34 Du HTML au CSS : Sélecteurs Bloc A Bloc A.HTML Le sélecteur id # bloc_unique { background-color:black; color:white ; }.CSS Le Résultat Bloc A Lélément devient unique, il est utilisé une seule fois dans la page.

35 Lecture li a un attribut class de valeur submenu div#nav ul.niv1 li.submenu:hover ul.niv2 {} la liste de la classe niv2 qui descend d'un élément de liste survolé qui descend d'une liste niv1 qui descend d'un div id nav

36 Positionnement et Flux en CSS Vue densemble des méthodes de positionnement

37 Le flux On oubliera les tableaux !

38 Les modes de positionnement Flux : ordre daffichage des éléments 4 méthodes de positionnement normal float relatif absolu Quels sont les différences ?

39 La fenêtre C'est dans la fenêtre du navigateur que se déroule l'action des pages Web. Elle est l'ultime élément de conception : le parent de tous les éléments. Avec CSS, on définit la fenêtre par le biais de la balise Origine (0,0) hauteur du navigateur hauteur réelle

40 Définition du type de positionnement Lorsque vous définissez les attributs d'une balise vous désignez ce qui se trouve dans le conteneur de la balise en tant qu'élément unique de la fenêtre. Il est possible d'attribuer différents types de positionnement relatif : c'est le comportement par défaut, l'élément se positionne après ce qui le précède et avant ce qui le suit. absolu : le positionnement crée un élément indépendant, un agent libre, séparé du reste du document, que l'on peut compléter par le code HTML de notre choix. L'élément qui l'héberge représente son origine. on peut déplacer sa position depuis l'emplacement naturel dans la fenêtre par le biais des propriétés top et left.

41 Le Flux normal Bloc A Bloc B Bloc A Bloc B.normalA { width:150px; height:150px; background-color:red; border:1px solid black; }.normalB { width:250px ; height:100px ; background-color:green; border:1px solid black; } Bloc conteneur

42 Le Flux normal : en bloc Bloc conteneur Flux normal en bloc : Succession verticale Bloc A Bloc B Bloc A Bloc B.normalA { width:150px; height:150px; background-color:red; border:1px solid black; }.normalB { width:250px ; height:100px ; background-color:green; border:1px solid black; }

43 Le Flux normal : en ligne Bloc conteneur Bloc C Bloc D Bloc C Bloc D.normalC { width:150px; height:150px; background-color:red; border:1px solid black; }.normalD { width:250px ; height:100px ; background-color:green; border:1px solid black; }

44 Le Flux normal : en ligne Bloc conteneur Bloc C Bloc D Bloc C Bloc D.normalC { width:150px; height:150px; background-color:red; border:1px solid black; }.normalD { width:250px ; height:100px ; background-color:green; border:1px solid black; } Flux normal en-ligne : Succession horizontale Flux normal en-ligne : Succession horizontale

45 Le Flux relatif Bloc A css css css css....conteneur { width:800px; border:1px solid black; }.bloc_marge { position:relative; width:300px; top:20px; left:30px; border:1px solid black; } Bloc conteneur Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css Left – 30px Top – 20px Bloc A

46 rappel : marge Bloc A css css css css....conteneur { width:800px; border:1px solid black; }.bloc_relatif { width:300px; margin-top:20px; margin-left:30px; border:1px solid black; } Bloc conteneur Bloc A Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css Left – 30px Top – 20px

47 Le Flux flottant Bloc conteneur Boîte A Texte...blabla....flotteA { float:left; width:500px; background-color:yellow; border:1px solid black; } Boîte A – float:left

48 Le Flux flottant Bloc conteneur Boîte A Texte...texte....flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } Boîte A – float:left Texte…texte…text …texte … texte… texte…texte…texte…texte…texte…texte…texte…texte…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte

49 Le Flux flottant/relatif Bloc conteneur Boîte A Texte...texte....flotteA { position : relatif top:100px; float:left; width:650px; background-color:yellow; border:1px solid black; } Boîte A – float:left Texte…texte…text …texte … texte… texte…texte…texte…texte…texte…texte…texte…texte…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte

50 Le Flux flottant Bloc conteneur - 800px de large Boîte A Boîte B.conteneur { width:800px; border:1px solid black; }.flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; }.flotteB { float:left; width:100px; background-color:blue; border:1px solid black; } Boîte A – 650px

51 Le Flux flottant Bloc conteneur - 800px de large Boîte A Boîte B.conteneur { width:800px; border:1px solid black; }.flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; }.flotteB { float:left; width:100px; background-color:blue; border:1px solid black; } Boîte A – 650px Boîte B – 100px

52 Le Flux flottant Bloc conteneur - 800px de large Boîte A Boîte B.conteneur { width:800px; border:1px solid black; }.flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; }.flotteB { float:left; width:600px; background-color:blue; border:1px solid black; } Boîte A – 650px Boîte B – 600px

53 Le Flux flottant Bloc conteneur - 800px de large Boîte A Boîte B.conteneur { width:800px; border:1px solid black; }.flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; }.flotteB { float:left; width:600px; background-color:blue; border:1px solid black; } Boîte A – 650px Boîte B – 600px

54 Le Flux absolu Bloc A css css css css css....conteneur { width:800px; border:1px solid black; }.bloc_absolu { position:absolute; width:300px; margin-top:20px; margin-left:30px; border:1px solid black; } Bloc conteneur Bloc A Css css css css css css css css Css css css css css css css css Css css css css css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Left – 30px Top – 20px Bloc A

55 Le Flux absolu css css css css css... Bloc A ddddddd…..dddd.conteneur { width:800px; border:1px solid black; }.bloc_absolu { position:absolute; width:300px; margin-top:20px; margin-left:30px; border:1px solid black; }

56 Création d'un site

57 Exemple complet Bloc conteneur Bloc Header – flux normal

58 Exemple complet Header_gauche - float leftHeader_droit – float left

59 Exemple complet Bloc Menu Header – flux normal Header_gauche - float leftHeader_droit – float left

60 Exemple complet Bloc Menu Header – flux normal Header_gauche - float leftHeader_droit – float left Bloc Menu - Float left

61 Exemple complet Bloc Menu Header – flux normal Header_gauche - float leftHeader_droit – float left Bloc Menu - Float left Bloc contenu – float right

62 Les contrôle de visibilité et affichage d'un élément La propriété display est utile pour définir si un élément comprend des retours chariot avant et après, s'il se trouve dans d'autres éléments, s'il fait partie d'une liste. voir menu.ppt Les contrôles de visibilité d'un élément sont très utiles avec JavaScript.

63 Conclusion et Ouverture Liberté dans la mise en page des sites web. La présentation est beaucoup simple. Nombreux problèmes de compatibilité.

64 Exemples.abs{ position: absolute; top:25px; left:25px; color:blue; border:blue solid 1px; }.rel{ position:relative; top:25px; left:25px; color:red; border:red solid 2px; }

65 Sous le pont mirabeau coule la Seine

66 Sous le pont Mirabeau coule la Seine coule

67 abs

68 Sous le pont mirabeau coule la Seine

69 .rel{ position: relative; top:0px; left:0px; color:red; border:red solid 2px;

70 Avec le décalage Sous le pont Mirabeau la Seine coule

71 Avec le décalage

72 Sous le pont mirabeau coule la Seine

73 Sous le pont Mirabeau la Seine coule

74

75 Sous le pont mirabeau coule la Seine et nos amours

76

77

78 idem avec span

79 Sous le pont mirabeau coule la Seine et nos amours

80

81 Sous le pont mirabeau coule la Seine et nos amours Sous le pont mirabeau coule la Seine et nos amours

82 Sous le pont Mirabeau coule la Seine et nos amours

83

84

85 Sous le pont mirabeau coule la Seine et nos amours Sous le pont mirabeau coule la Seine et nos amours 1 1

86

87 Sous le pont mirabeau coule la Seine et nos amours

88

89

90

91 .rel{ position:relative; float:left; top:25px; left:25px; color:red; border:red solid 2px; Sous le pont mirabeau coule la Seine et nos amours

92 Sous le pont Mirabeau coule la Seine et nos amours

93

94 .rel{ position:relative; float:left; top:25px; left:25px; color:red; border:red solid 2px; }.rel1{ position:relative; float:left; top:0px; left:0px; color:red; border:blue solid 2px; } Sous le pont mirabeau coule la Seine et nos amours

95


Télécharger ppt "HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation."

Présentations similaires


Annonces Google