Transcription
1. Introduction à CSS: Bienvenue dans le
module CSS de ce cours. Dans ce module, nous
allons en apprendre davantage sur le CSS. Css signifie
Cascading Style Sheets. Il est utilisé pour styler la page Web. Rappelez-vous maintenant que chaque fois que vous
apprenez sur le HTML, je vous ai montré ce diagramme, c'
est-à-dire que si je dois effacer des extrémités
différentes d'une page Web, je diviserai mon travail
en trois parties. la première partie, je vais
structurer la page Web. Dans la deuxième partie, je vais le
concevoir avec pitch. Et dans la troisième partie, j'ajouterai la logique
contrée par le patient. Maintenant, nous avons vu que pour
structurer la page Web, nous utilisons un langage de balisage HTML, pas pour la descendre
page Web, nous utilisons CSS, également connu sous le nom de feuilles de
style en cascade.
2. Syntaxe CSS: Pour écrire du CSS, nous
devons suivre certaines règles. Nous appelons cela la syntaxe des règles. Donc tout d'abord, nous
devons taper le sélectionné, qui dans ce cas est dP, dy. Nous allons maintenant discuter davantage des sélecteurs dans la conférence sur
les sélecteurs. Après cela, nous devons ouvrir
et fermer les crochets bouclés. Ensuite, nous devons ajouter
le nom de la propriété, qui dans ce cas est coloré. Ensuite, il faut
ajouter le deux-points. Après cela, nous devons
ajouter la valeur de la propriété, qui dans ce cas est rouge. Ensuite, nous devons taper ce point-virgule pour mettre
fin à la déclaration, pas pour résumer rapidement. Tout d'abord, nous avons
ajouté ce sélecteur. Après cela, nous avons ajouté
ce sélecteur de propriétés. Après cela, nous avons ajouté la valeur de
cette propriété.
3. Utiliser le fichier CSS: Dans cette conférence,
nous apprendrons comment ajouter des fichiers CSS et HTML. Donc, tout d'abord, je
vais créer un document nommé en ajoutant du code HTML CSS dot. Connaissance du genre,
le code de la chaudière. Je vais changer le titre en CSS. À l'intérieur de la balise body, je
vais générer une balise P. Et j'ajouterai ici
en ajoutant du CSS et du HTML. Voyons maintenant si ce
document et copions le chemin. Considéré que mon paragraphe
est apparu ici. Il existe trois façons d'
ajouter du CSS et du HTML. Le premier moyen est le CSS en ligne. Pour cela, j'ajouterai un attribut de
style ici. Maintenant, dans cet attribut de style, je vais ajouter le nom de la propriété, qui dans ce cas est coloré. Ensuite, j'ajouterai la
valeur de la propriété. Je vais donc ajouter ici. Maintenant, je vais ajouter le point-virgule. Maintenant, sauvegardons ce document. Vous pouvez voir qu'un
paragraphe normal est de couleur rouge. C'est la première
façon d'ajouter du CSS. Maintenant, la deuxième voie
est le CSS interne. Je vais donc retirer ça d'ici. Pour cela, nous devons ajouter les étiquettes de
style à l'intérieur de l'étiquette de tête. À l'intérieur de la balise de style, nous
devons ajouter la sélection, qui dans ce cas
est p, puis nous devons ouvrir et fermer
les crochets bouclés. À l'intérieur de ce crochet bouclé, nous devons d'abord écrire
le nom
de la propriété . Je vais ajouter ici de la couleur. Maintenant, nous allons changer
la couleur en bleu. Maintenant, sauvegardons ce document. Rechargez la page. Vous pouvez voir que le paragraphe
a une couleur bleue. On n'a pas entendu parler de CSS externe. Pour cela, je vais retirer
ce carrelage d'ici. Maintenant, sauvegardons ce document. Et maintenant, créons
un autre fichier. Et je vais nommer ici styles.css. Vous pouvez maintenant nommer
tout ce que vous voulez ici, mais vous devez ajouter
l'extension CSS point. Maintenant, dans le fichier CSS. Tout d'abord, nous
devons utiliser le sélecteur, qui est dans ce cas p. Ensuite, il faut ouvrir et
fermer les crochets bouclés. Nous discuterons
davantage des sélecteurs dans cette conférence. Maintenant, à l'intérieur du
sélecteur, il faut
écrire le nom de la propriété. Je laisserai donc la couleur des cheveux. Ensuite, nous devons lire
la valeur de la propriété. J'arriverai ici en vert. Je vais enregistrer le document. Et puis nous devons lier
ces styles fichier CSS à
ce fichier HTML pour cet
insecte de tête jusqu'à, nous devons utiliser la balise de lien
pour ce type ici lien. Ensuite, appuyez sur la touche Tab. Après cela, dans
l'attribut HREF, vous devez ajouter le
chemin d'accès au fichier CSS. Donc maintenant mon
fichier HTML et CSS DANS le même dossier. Je vais donc laisser le
nom de ce fichier CSS. Enregistrons maintenant ce document
et rechargeons cette page. Maintenant, vous pouvez voir que le
paragraphe a une couleur verte. Pour résumer rapidement, nous avons vu qu'il
existe trois façons d' ajouter le CSS et le fichier HTML. La première est le CSS en ligne, la seconde est le CSS interne et c'est difficile
est le CSS externe. Css est la bonne façon d'
écrire CSS et le fichier
HTML car lors de la
création de grands projets, nous devons écrire un
tas de code CSS et nous contrecarrons tout ce
code dans un seul fichier. C'est la bonne façon de séparer le CSS et le HTML.
4. sélecteurs dans CSS: Dans cette vidéo, nous
parlerons des sélecteurs. Ce que j'ai fait, c'est que j'
ai créé ce fichier HTML. Maintenant, dans ce fichier HTML, je vais générer un code de
boilerplate. Dans le titre, j'
obtiendrai ici des sélecteurs. Maintenant, à l'intérieur de ce body tag, je vais générer une balise p. Et puis à l'intérieur de cette balise p, je vais écrire ici,
c'est un paragraphe. Disons maintenant que je souhaite
styler cet élément HTML. Pour supporter cet élément HTML, la première façon est que j'
ajouterai votre attribut de style. Ensuite, j'ajouterai à votre
couleur. Ensuite, j'en ajouterais 200. Non, je vais voir si
ce document HTML, après cela, je copierai
le chemin d'ici. Maintenant, vous pouvez voir que la couleur
de ce paragraphe ne l'est pas. Il s'agit d'un moyen rapide de
styler ce paragraphe. Disons que j'ai un fichier de démonstration très
volumineux. Je ne veux pas ajouter de
styles en ligne ici parce que je veux ajouter beaucoup
de style à cet élément. Ce que je vais faire, c'est que je
retirerai cette tuile d'ici. Ensuite, je vais enregistrer ce document. Ensuite, à l'intérieur du fichier CSS. Je vais écrire à mes styles ici. Tout d'abord, je vais
lier ce fichier CSS et maintenant je vais enregistrer ce
document et recharger la page. Maintenant, je peux voir que la couleur de
mon paragraphe est noire car je n'y ai
pas ajouté de styles. Maintenant, ce que je vais faire,
c'est que je vais entrer dans ce fichier CSS et ensuite je vais styliser ces éléments p
pour styliser ce PLMN. Tout d'abord, je dois
sélectionner cet élément p. La première façon de
sélectionner cet élément p consiste à utiliser la balise div sélectionnée. Pour cela, j'irai
dans le fichier CSS. Et puis j'ajouterais ici p. Si, si je voulais sélectionner une
balise dans le fichier HTML, je dois juste taper
ce nom de balise. C'est pourquoi j'ai
écrit ici,
non, je vais ouvrir et fermer
les crochets bouclés. Ensuite, j'obtiendrai mes styles. Par exemple, j'
ajouterai ici la couleur bleue. Ne vous inquiétez pas si vous ne
comprenez pas cette propriété. Je vais expliquer cette conférence
sur la pauvreté dans les couleurs
pour l'instant juste pour comprendre que cette propriété nous
donne la couleur
dans le texte. Je vais donc enregistrer ce fichier. Ensuite, je vais actualiser cette page. Vous pouvez voir qu'une couleur foncée de ce paragraphe est devenue bleue. Maintenant, je vais ajouter votre étiquette H1 et ensuite j'
ajouterai ici le titre. Je vais enregistrer ce document. Vous pouvez voir à ma tête
qu'il est apparu ici. Maintenant, je vais dire cette rubrique. De même, ce que nous avons
fait ici avec la balise P, je le ferai avec la balise H1. Je vais taper H1, puis j'ouvrirai et
fermerai les accolades bouclées, puis je changerai la
couleur en, disons vert. J'ai également ajouté ici un point-virgule
pour mettre fin à cette déclaration. Maintenant, sauvegardons ce document
et rechargeons la page, pas le doctorat de ma
rubrique est vert. Le deuxième type de
sélecteur est le cours de classe. Ce que je vais faire, c'est que je le
copierai et le collerai
plusieurs fois. Je vais écrire ici deux, ici, trois, puis je
ne suis pas là pour l'instant. Je vais supprimer ce
titre dans la première position. Je vais enregistrer ce document
et recharger la page. Vous pouvez voir les en-têtes apparaître. Disons maintenant que je veux
coiffer tous ces éléments. La première façon de le faire, je peux ajouter tous les
textes et tous les styles ici. Ce que j'essaie de vous dire, c'est que je
vais coiffer toutes les
étiquettes séparément. Par exemple, si je
voulais supporter la balise h2, j'
obtiendrai ici deux. Et puis je laisserai la couleur.
Et puis disons brun. Ensuite, je dois le faire
pour tous les éléments. Maintenant, par exemple, je souhaite que tous ces éléments
ajoutent le même style. Dans cet exemple, je souhaite ajouter la même couleur à tous ces
éléments, qui est brun. La première façon de le
faire, c'est que je
copierai ça, puis
je le collerai ici. Et ensuite, je le
collerai ici aussi. Et puis je dois faire
ça sur toutes les balises. De cette façon, j'ai
répété la même chose encore et encore
pour toutes les balises. Et généralement, il est considéré comme une mauvaise pratique de répéter
les mêmes choses. Ce que je vais faire, c'est que j'ajouterai un attribut à toutes les balises, c'
est-à-dire l'attribut de classe. Pour cela, j'
appuierai sur la touche Alt ,
puis je cliquerai ici, ici et ici. Maintenant, nous allons appuyer sur l'espace et
je n'aurai plus de cours. C'est l'avenir du code VS. Je peux ajouter plusieurs curseurs. Que sa classe soit égale à deux,
puis à deux guillemets. Disons donc mon cours. Vous pouvez ajouter n'importe quelle valeur ici. Maintenant, je vais copier ceci
et enregistrer l'estimation. Pour ne pas sélectionner les classes, il
faut utiliser la touche point. Donc, tout d'abord, je vais
retirer tout cela d'ici. Ensuite, je vais taper un point, puis je collerai
la même chose,
que je l'ai copiée ici. Donc, en gros, il suffit d'
ajouter la clé de période, puis d'
ajouter la même valeur que celle que nous avons donnée dans
l'attribut class. Maintenant, je vais ouvrir et
fermer les crochets bouclés, puis je
vous laisserai avoir de la couleur. Et puis, je suis ici marron. Non, je vais enregistrer ce fichier.
Rechargez ensuite la page. Maintenant, vous pouvez voir que tous
mes éléments n'ont pas de couleur brune. Disons maintenant que j'ai
un autre cap H1. Ensuite, j'ajouterai
ici la première rubrique. Je supprimerai cette connaissance
de l'attribut de toutes les classes, enregistrez ce fichier,
puis rechargerai cette page. Vous pouvez voir que tous mes
styles sont décidés. Non, je vais zoomer à partir d'ici. Disons que je ne veux que
styler ce titre. Rubrique. Si je sélectionne ce
titre avec la lettre texte, ce titre sera
également automatiquement sélectionné car il s'
agit également d'un en-tête H1. Ce que je peux faire, c'est que je peux
ajouter un attribut de classe ici. Et puis j'ajouterai
ici un titre de classe. Maintenant, je vais copier ce
cours à partir d'ici. Et voyons si le document, puis je collerai
cette classe ici. Pour l'instant, je vais
supprimer ce style. Maintenant, je vais ouvrir et fermer
les crochets bouclés. Et puis à l'intérieur de ces
crochets bouclés, j'ajouterai de la couleur. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Maintenant, ne considérez
que cette rubrique. C'est la bonne façon de le faire, mais je veux seulement
sélectionner ce titre. En général, nous utilisons des classes pour sélectionner un ou plusieurs types
d'en-têtes ou d'éléments. Ce que je peux faire, c'est que j'
obtiendrai ici une pièce d'identité, et je sauvegarderai ce document. Ensuite, dans le
fichier CSS pour sélectionner l'ID, nous devons utiliser le hashtag, couteau de
hashtag et enregistrer ce document et
actualiser cette page. Et vous pouvez voir que
rien n'a changé ici. Ce que je vais faire, c'est que je vais
changer cette couleur en rouge. Maintenant, je vais enregistrer ce
fichier, recharger cette page. Vous pouvez voir que l'en-tête a un style
séparé à
l'aide du sélecteur d'ID.
5. Couleurs dans CSS: Dans cette vidéo, nous allons
discuter des couleurs en CSS. Tout d'abord, je vais
créer un nouveau fichier nommé couleurs dot HTML. Je fermerai tous
les types d'ici. Dans le titre. Je vais
ajouter des couleurs de cheveux en CSS. Maintenant, à l'intérieur de cette balise de corps, je vais taper D. Ensuite je vais taper ici,
c'est un paragraphe. Maintenant, je vais enregistrer ce fichier. Pour le voir clairement, je
zoomerai en appuyant sur Contrôle, puis la plupart le
feront pour cette finale, je ne veux pas créer
un fichier CSS spécifique, c'est pourquoi je vais
utiliser le CSS interne. Nous savons tout d'abord que je vais sélectionner cette balise p
à l'aide du sélecteur de balises. Si j'écris ici la couleur,
je vais maintenant enregistrer le document. Vous pouvez voir que la couleur
de mon paragraphe est parce que j'ai ajouté
une couleur attribuée. Maintenant, ce que fait l'attribut couleur, c'est agendas la couleur du texte. Il ne modifie pas la
couleur de l'arrière-plan. Cela ne change que la couleur
du texte dans la conférence d'
arrière-plan, nous apprendrons comment changer le
débat sur cet élément p. Pour l'instant, il suffit de comprendre
que le tampon de couleur ne change que la
couleur du texte. Maintenant, il y a plusieurs façons d'
ajouter des valeurs dans la couleur pour d. La première est que je peux écrire
directement le
nom de cette couleur, c'est dans ce cas
que j'ai fait ici. Maintenant, la deuxième façon est de
pouvoir taper la valeur hexadécimale, vous savez, la valeur hexadécimale
est un code couleur à six chiffres. Les deux premiers chiffres
représentent le radical et les deux derniers chiffres
représentent la couleur verte, puis les deux derniers chiffres
représentent la couleur bleue. Par exemple, si j'écris
ici 00, FF, B15, et maintenant si j'
enregistre ce document, vous pouvez
maintenant voir que la couleur
de ma balise p a changé. Le deuxième format
de couleur d'écriture est format
RGB pour la
syntaxe de l'écriture, format
IJ est RGB. Ensuite, nous devons ajouter les crochets
fermés. Et puis, à l'intérieur de ces crochets, la première valeur que nous donnons
représente le réticulaire. La deuxième valeur que nous donnons
représente la couleur verte. Et la troisième valeur donnée
représente la couleur bleue. Et toutes les valeurs
vont de 0 à 255. Par exemple, si j'écris ici 59. Et puis disons 5795, sauvegardé un document et
rechargeons cette page. Vous pouvez voir que ma
couleur est apparue ici. Maintenant, vous n'avez plus besoin de vous souvenir de
tous les codes couleur. Si vous finissez par obtenir du code VS. Et puis vous pouvez
directement qui est ici, et vous obtiendrez
ce sélecteur de couleurs. Vous pouvez maintenant choisir n'importe quelle
couleur de votre choix. Allons sur ce
bien, et c'est le code couleur de cette couleur. Maintenant, si je sauvegarde le document
et que je recharge cette page, vous pouvez voir que Micron
est apparu ici, la partie de l'écriture la valeur de la couleur est RGBA. Valeur. Pour cela, j'
ajouterai ici RVB. Les trois premières lettres,
RGB, représentent le
rouge, le vert et le bleu. Les huit derniers
représentent l'alpha. Ce que j'entendais par alpha, c'est deux cent cinquante
neuf, trente huit. Puis 75. Je dois
écrire ici la valeur alpha. Cette valeur va de 0 à 1. Si je tape ici 0, la
couleur est totalement transparente. Si j'ajoute ici, la
couleur est totalement opaque. Par exemple, si j'
écris ici 0.7, et si j'enregistre ce document
et que je recharge cette page, vous pouvez voir les effets
Alpha ici. Si j'ajoute un 0, la couleur devient totalement
transparente et on ne peut pas la voir. Vous pouvez le voir. Je ne vois pas
la couleur. Si j'ajoute ici. Maintenant, si j'enregistre ce document
et que je recharge la page, vous pouvez voir que la couleur
est totalement visible. Prochaine façon d'écrire la valeur TSL de
Kennedy. Je vais donc ajouter ici. Ensuite, les crochets bouclés.
La première valeur représente le u et la seconde
représente la saturation. La troisième valeur
représente la légèreté. La valeur de cet énorme
est comprise entre 0 et 360 degrés. Si j'ajoute ici 25, et cette valeur de saturation
est dans le pourcentage, je n'aurai
donc pas 9%. Ensuite, la légèreté
est également en pourcentage de valeur quotidienne. Je vais ajouter ici un couteau
T6 pour cent et sauvegarder le document
et nous chargerons cette page. Vous pouvez voir que la
couleur est apparue ici. Maintenant, je vais vous montrer une astuce pour cette
astuce si j'ajoute ici. Et puis ici, vous pouvez voir mon sélecteur de couleurs
est apparu ici, 95 change cette couleur en, disons, de type verdâtre. Et si je clique ici, première fois, j'
obtiendrai cette valeur hexadécimale. Si je clique sur votre deuxième fois, j'obtiendrai cette valeur TSL.
6. Commentaires CSS: Dans cette conférence, nous allons jeter
un coup d'œil aux commentaires en CSS. Tout d'abord, je vais créer un nouveau fichier nommé
commentaires point HTML. Maintenant, à l'intérieur de ce fichier HTML de
commentaires, tout d'
abord, je vais
générer un code de boilerplate. Et ensuite, je
laisserai ses commentaires. À l'intérieur de ce body tag, je vais générer un élément H1. Alors, je vais me faire mal ici. Maintenant, je vais générer une
étiquette de style à l'intérieur de cette étiquette. Maintenant, tout en apprenant le HTML, nous avons vu ce qu'est les
commentaires et comment écrire des commentaires en HTML. Donc, pour résumer rapidement, écrire des commentaires en HTML, nous devons d'abord taper
le crochet d'angle, puis le point d'exclamation, puis nous devons taper
d double tiret également, nous devons taper ceci
pour fermez ce commentaire. Et quoi que ce soit entre cela, nous le considérerons comme un commentaire. Par exemple, si j'écris des
commentaires et qu'il le
considère comme un commentaire et
qu'il ne sera considère comme un commentaire et pas rendu dans le navigateur, pas en CSS, nous devons taper le point
d'exclamation. Ensuite, pour
clore ce commentaire, il faut taper le point
d'exclamation. Maintenant, tout ce qui est entre ces éléments bien considérés comme
un commentaire dans CSS. Par exemple, si j'
écris la commande ici, cela considérera
cela comme un commentaire.
7. backgrounds CSS: Dans cette vidéo, nous allons
discuter des antécédents en CSS. Tout d'abord, je vais créer un nouveau fichier nommé
backgrounds dot HTML. À l'intérieur de ce dossier. Tout d'abord, je vais générer un code
de chauffe-plat. Ensuite, je vais changer ce
titre en arrière-plan. Depuis CSS à l'intérieur de cette balise de corps, je générerai la balise H1. Ensuite, j'ajouterai ici un titre. Après cette moyenne,
générez une balise p. Et puis j'ajouterai ici
que c'est un paragraphe. Enregistrons maintenant ce document ,
puis copions le
chemin d'accès à partir d'ici. Vous pouvez voir à l'en-tête
et au paragraphe apparaissant ici. Maintenant, je vais taper la coiffure. Parlons maintenant de l'
arrière-plan depuis CSS. Les propriétés d'arrière-plan CSS nous permettent donc de coiffer les arrière-plans
d'un élément HTML. Par exemple, si j'
écris son corps. Discutons ensuite
du premier Verde révolus, qui est la propriété de
couleur d'arrière-plan. Je vais donc ajouter ici la couleur de
fond. Ensuite, je vais taper un nom de couleur. Nous allons choisir la couleur chocolat. Maintenant, sauvegardons ce document. Actualisez ensuite cette page. Vous pouvez voir que la couleur
d'
arrière-plan du corps est passée couleur chocolat
au lieu
de couleur d'arrière-plan. Si j'ai colorié. Si j'enregistre ce document
et que j'actualise la page, vous pouvez voir que la couleur du texte
de tout ce qui se trouve dans la balise de corps a changé
en couleur chocolat. Maintenant, je peux également ajouter une couleur d'
arrière-plan dans des éléments
HTML tels que HL7 et P. Par exemple. Tapez ici. Ajoutons ensuite la couleur
d'arrière-plan. N'acceptez pas ce document. Actualisez ensuite cette page. Vous pouvez voir que la couleur d'
arrière-plan du titre est devenue bleue. Maintenant, je ne peux pas voir ces textes
dans cette couleur d'arrière-plan, donc je vais également changer
la couleur du texte en blanc. Enregistrons maintenant ce document
et actualisons cette page. Vous pouvez voir que la couleur
est passée au blanc ,
puis l'arrière-plan
est devenu bleu. Parlons maintenant de la deuxième propriété d'
arrière-plan, qui est la propriété
image d'arrière-plan. Pour cela, je vais
sélectionner une étiquette de corps. Et puis à l'intérieur de ce body tag, j'ajouterai ici une image d'
arrière-plan. Maintenant, dans cette image d'
arrière-plan, je dois utiliser la fonction URL. Donc, pour cela, je dois taper une URL , puis ouvrir et
fermer les crochets. Maintenant, à l'intérieur de ce support, je
dois utiliser le quartz, donc je vais utiliser les guillemets doubles. Vous pouvez également utiliser des guillemets simples. Maintenant, à l'intérieur de cette double guillette, nous devons donner le
chemin de l'image. Maintenant, vous pouvez voir que mon image et ce fichier se trouvent dans
le même dossier. Je peux donc
entrer directement le nom de cette image ici, bg dot GIF. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Vous pouvez voir que mon
image est apparue ici. Non, je ne
vois pas clairement ce texte, donc je vais changer la couleur du
texte en blanc. Pour cela, j'ajouterai de la couleur des cheveux. Alors je taperais ici, non ? Vous pouvez également attribuer à ce texte une
couleur et une balise p séparément. Mais si j'ai un récipient, qui dans ce cas c'est le corps, je peux directement taper la
couleur blanche et tout ce qui est dans ce corps
aura été décoloré. Maintenant, si j'actualise cette page, vous pouvez voir que ma couleur
est passée au blanc. Maintenant, je peux également donner cette image d'arrière-plan
en éléments. Votre tâche consiste donc à
essayer cela par vous-même. Désormais, par défaut, la propriété image d'
arrière-plan est répétée sur l'image
horizontalement et verticalement. Donc, pour éviter cela, nous devons taper ici la répétition de fond. Ensuite, nous devons écrire
ici sans répéter. Si je tape le nœud répété,
alors l' image que nous voulions
répéter horizontalement
et verticalement. Et si je veux répéter
cette image horizontalement, alors je peux écrire ici, répéter x. Maintenant, si j'enregistre ce fichier, rechargez cette page, vous pouvez voir que mon image s'est
répétée horizontalement. Maintenant, si je veux répéter
cette image verticalement, je peux ajouter ici répéter par neuf. Si je charge cette page, vous pouvez voir mon image
répétée verticalement. Nous n'avons plus de
contenu supplémentaire dans cette balise de corps. Ainsi, l'image a été découpée à partir d'ici, pas la deuxième propriété d'
arrière-plan, la propriété position d'arrière-plan. Donc, tout d'abord, je
vais lui faire savoir ce battement. Ensuite, je laisserai ses
antécédents positionner. Ensuite, si j'écris bien ici, alors si j'enregistre ce document
et que je recharge cette page, vous pouvez voir que mon
arrière-plan est à droite comme en haut. Si je tape votre centre, sauvegarde ce fichier et que je
rafraîchis cette page, vous pouvez le voir maintenant que mon
arrière-plan n'est pas centré. Je peux également définir cette position d'
arrière-plan correctement D dans cet élément afin de discuter de l'attachement d'
arrière-plan sur t. Donc si je tape ici en fonction de
l'attachement, nous pouvons
généralement taper
Voici deux valeurs. La première valeur, défilant, si je tape votre
défilement puis que je sauvegarde ce fichier et actualise cette page, vous ne verrez plus
rien de nouveau ici. Pour ça. Je vais taper ici p, puis je taperai 25. Voyons voir. Maintenant, ce que j'ai fait, c'est que j'ai
copié et collé cette balise p deux fois. Maintenant, si je fais défiler ce document, vous pouvez voir que cette
image fait également défiler. Si je change ce fichier en corrigé, puis enregistrez ce
fichier et actualisez cette page. Vous pouvez le voir maintenant si je fais défiler le document sur l'
image est corrigé ici. Maintenant, j'ai également une propriété
abrégée en arrière-plan, qui signifie que je peux remplacer ce
qui signifie que je peux remplacer TOUTES les parties
d'arrière-plan par une seule propriété. La syntaxe est donc, tout d'
abord, que nous devons
ajouter un sélecteur. Ensuite, nous devons taper
ici l'arrière-plan. Après ça. Tout d'abord, il faut
ajouter une couleur d'arrière-plan. Après cela, nous devons
ajouter une image d'arrière-plan. Maintenant, nous devons séparer
ces propriétés avec rapidité après un
arrière-plan diversifié, répétez. Après avoir dû taper votre pièce jointe à l'
arrière-plan. Après cela, je dois taper
ici la position de fond. Je commenterai cette partie L. Voyons un exemple d' utilisation
de cette propriété
abrégée de chambre. Je vais laisser son corps.
Ensuite, tout d'abord, je fais de la publicité sur leurs antécédents. Après cela, j'ai tapé
ici la couleur de fond. Maintenant, si je ne veux pas ajouter cette propriété de couleur d'arrière-plan, je peux ignorer cela. Par exemple, je peux
ajouter directement cette propriété
d'image d'arrière-plan. Donc, pour cela, je vais
taper cette URL. Ensuite, je vais taper
le nom de l'image. Ensuite, je dois taper votre espace. Et puis je dois ajouter cette propriété de répétition d'
arrière-plan. Je vais donc vous faire savoir répéter. Ensuite, je dois ajouter cette propriété d'attachement du
fardeau. Maintenant, si je ne veux pas
ajouter cette propriété, je peux l'ignorer à partir d'
ici. Après ça. Je dois ajouter cette position de
fond au-dessus de T. Je vais donc écrire ici au centre. Ensuite, nous devons ajouter ce
point-virgule pour mettre fin à l'instruction. Enregistrons maintenant ce fichier
, puis référençons le discours. Vous pouvez maintenant voir que les parties de
fond ont postulé ici avec cette propriété abrégé
unique. Il est très utile lors de la
création de sites Web.
8. Modèle de boîte CSS: Dans cette conférence, nous
aborderons le modèle de boîte dans le CSS. Le modèle de boîte est un
concept très important pour
connaître NCSS, connaître chaque élément HTML comme une boîte rectangulaire
dans la page Web, contient de nombreuses propriétés
comme le remplissage de marge, etc. Maintenant je vais résumer toutes
ces propriétés en bref, rembourrage crée un espace entre le contenu
et la bordure. La propriété border,
comme son nom l'indique, ajoute une bordure à l'élément. La propriété margin crée
un espace en dehors du tableau.
9. Les frontières CSS: Dans cette conférence, nous
discuterons des frontières en CSS. Donc, tout d'abord, je vais créer un nouveau fichier nommé
bordures dot HTML. Tout d'abord, je vais
générer un code de chauffe-plat. Maintenant, à l'intérieur de ce titre, je vais
écrire ici des bordures en CSS. Maintenant, à l'intérieur de ce body tag, je vais générer une balise p. Et puis j'ajouterai
ici le paragraphe. Enregistrons maintenant ce document ,
puis copions le
chemin d'accès à partir d'ici. Vous pouvez voir que le
paragraphe est apparu ici. Non, je vais taper une coiffure. Ensuite, à l'intérieur de la
balise de style, j'ajouterai le CSS. Tout d'abord, je vais
sélectionner cette balise p. Ensuite, j'ajouterai les propriétés de la
bordure. Désormais, les bordures, comme son nom
l'indique, à la bordure
de l'élément HTML. Le premier attribut de
la bordure est l'attribut de style de
bordure. Pour cela, j'ajouterais
ici les frontières de la Thaïlande. Il existe de nombreuses valeurs pour la
propriété de style de bordure que vous pouvez voir ici, la plus utilisée est
le Solid en pointillés et aucune. Par exemple, je
vais ajouter ici solide. Maintenant, la deuxième propriété
est la propriété border-radius. Ensuite, à l'intérieur de cette propriété,
je peux ajouter des valeurs en pixel ou
des valeurs prédéfinies comme le moyen mince, etc. Vous pouvez rechercher
sur Google une valeur
plus prédéfinie
pour la frontière avec liberté. Maintenant, pour cet exemple, je vais laisser ici dix pixels. Ce n'est pas que la propriété hard soit
la propriété de couleur de bordure. Maintenant, la propriété Border color, comme son nom l'indique, à
la couleur de la bordure. Par exemple, j'
ajouterai ici un noir. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Vous pouvez voir que la
frontière est apparue ici. Si je change ce
solide deux pointillés. Maintenant, si je sauvegarde ce fichier et la dysplasie de charge,
vous pouvez le voir. Notez que la bordure est pointillée. Sachez que je vais changer
ça en solide. Ensuite, j'ajouterai cette
largeur de bordure à cinq pixels. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Vous pouvez voir maintenant que la
frontière est belle. Maintenant, je peux également spécifier une bordure
avec deux ou quatre valeurs. Comme par exemple, si j'ai
ici cinq pixels à pixel. Cela signifie que le taux de bordure en haut et en bas sera cinq pixels et que l'écriture de bordure à gauche et à droite
sera de deux pixels. Enregistrons maintenant ce fichier
et rechargeons cette page. Vous pouvez voir à la vitesse de
l'eau et à gauche ou à deux pixels et le haut et le
bas font cinq pixels. Je peux également ajouter quatre valeurs ici. Par exemple, si j'ajoute six
pixels et disons dix pixels. Maintenant, sauvegardons ce fichier. Ce que cela signifie, c'est le taux de la
bordure en haut sera cinq pixels à pixel en
bas sera de six. Le pixel à gauche
sera de dix pixels. Maintenant, si je charge cette page, vous
pouvez voir les modifications ici. Maintenant, il existe une propriété
raccourcie de bordure, ce qui signifie que je peux spécifier
toute cette propriété dans
une seule propriété de bordure.
Pour cela, j'ajouterai ici. La première valeur de cette
bordure est la bordure de celle-ci. La deuxième propriété
est de style bordure. Couleur de la bordure. Je
vais commenter cela. Maintenant, je vais vous montrer l'exemple de la propriété abrégée du beurre. Je vais ajouter ici la frontière. Et puis la première propriété
est mieux lire la propriété. Je vais donc ajouter ici, disons trois pixels. La deuxième propriété est le
style de bordure sur t servlet ici, propriété
solid est la propriété
border color. Je vais donc ajouter ici. Ensuite, j'ajouterai le
point-virgule pour mettre fin à la déclaration. Maintenant, sauvegardons ce fichier. Rechargez ça. Vous pouvez voir que la
propriété abrégée fonctionne très bien. Maintenant, il y a un
autre nom de propriété, rayon de
bordure au-dessus de t. Pour cela, je vais ajouter ici border-radius. Aucune zone frontalière n'est
utilisée pour contourner les frontières. Par exemple, si j'
ajoute nos deux pixels, ils
disparaîtront. Vous pouvez voir que la bordure
est arrondie ici. Je vais changer ça pour, disons 30 pixels. Maintenant, défendons ce dossier. Vous pouvez alors voir que la
bordure est maintenant arrondie. Ce sont des propriétés très utiles
lors de la création de sites Web.
10. Marge et rembourrages: Dans cette conférence, nous
parlerons de Hoover qu'il a ressenti dans CSS. Tout d'abord, je vais
créer un nouveau nom de fichier survole le code HTML. Maintenant, à l'intérieur de ce fichier, je vais tout d'
abord
générer un code de plaque chauffante. Ensuite, dans le
niveau du titre ici, survolez les effets. Maintenant, à l'intérieur de ce body tag, je vais créer une étiquette H1. Maintenant, je vais ajouter ici un titre. Enregistrons maintenant ce
fichier et copions le chemin d'accès. Je vais maintenant générer une balise de style. Parlons maintenant des effets de
survol. Pour créer un effet de survol, nous devons utiliser une pseudo-classe de
survol. Nous allons maintenant discuter plus tard des
pseudo-classes et des
pseudo-sélecteurs. Pour créer un effet de survol. Tout d'abord, il
faut taper ce sélecteur. Ensuite, nous devons taper deux points. Après cela, nous devons
taper le survol. Ensuite, nous devons ouvrir et
fermer les crochets bouclés. Ensuite, nous devons écrire
nos propriétés ici. Vous pouvez maintenant ajouter de nombreuses
propriétés dans les effets de survol. Tout d'abord, je vais
taper ici. Et puis je vais taper ici, planer. Maintenant, je veux changer la couleur. Quand quelqu'un
survole sur le cap, j'obtiendrai ici la couleur. Ensuite, je vais taper ici le nom de la
couleur, disons marron. Enregistrons maintenant ce fichier
et actualisons cette page. Vous pouvez voir si je survole ici, la couleur change pour fondre. Maintenant, je peux également modifier
la couleur d'arrière-plan. Je vais donc laisser ses antécédents. Ensuite, je vais taper votre noir, puis je changerai
cette couleur en blanc. Enregistrons maintenant ce
fichier et actualisons cette page. Par ici. Vous pouvez voir en arrière-plan, la couleur est devenue noire et la couleur de ce texte
a changé pour mordre.
11. Hauteur et largeur: Dans cette vidéo, nous
allons discuter des propriétés
de hauteur et de largeur en CSS. Tout d'abord, je vais créer un nom de fichier HTML en hauteur
et en largeur. Je vais maintenant générer
un code de chauffe-plat. Ensuite, dans le titre
ici, hauteur et largeur. Maintenant, à l'intérieur de ce body tag, je vais générer une balise H1. Et puis j'
ajouterai ici un titre. Maintenant, sauvegardons ce fichier. Vous pouvez voir l'
en-tête apparu ici. Maintenant, je vais ouvrir et fermer cette étiquette de titre
à l'intérieur de cette étiquette principale. Maintenant, sélectionnons cette
balise H1 à l'aide du sélecteur de balises. Discutons maintenant de la propriété
hauteur et largeur. Je n'ai donc pas lu
les propriétés nous permet d'
ajouter une hauteur et une largeur
à l'élément HTML. Notez que les propriétés de hauteur
et de largeur se trouvent à l'intérieur du
rembourrage et de la bordure. Pour expliquer clairement cela, j'ajouterai une bordure à celle. Et puis j'ajouterai ici
deux pixels, rouge solide. Enregistrez ce fichier. Vous pouvez voir que la frontière
est apparue ici. Nous allons maintenant utiliser la propriété
height. Ensuite, je peux ajouter la valeur du pixel
ainsi que la valeur en pourcentage. Par exemple, j'
ajouterai ici 100 pixels, enregistrez ce fichier et
rechargerai cette page. Vous pouvez voir que le titre
hors en-tête a une hauteur de 100 pixels. Si je clique avec le bouton droit de la souris dessus
, puis cliquez sur cet inspecteur. Vous pouvez voir que les
outils de développement Chrome sont apparus ici. Maintenant, ce que je vais faire, c'est
que je clique ici. Ensuite, je cliquerai ici. Il
viendra en bas. Vous pouvez voir à l'en-tête
que j'ai ajouté ici apparaît ici. Je peux donc cliquer sur ce titre et
vous pouvez voir ici toutes
les propriétés CSS que j'
ai appliquées sur la balise H1. Je peux également changer la
hauteur à partir d'ici. Et pour cela, je vais cliquer ici. Ensuite, en appuyant sur
la flèche vers le haut, la valeur augmentera. En appuyant sur la flèche vers
le bas, la valeur diminue. Maintenant, je peux aussi le
faire avec une frontière. Ensuite, je peux aussi choisir
la couleur d'ici. Vous pouvez voir que le
sélecteur de couleurs est apparu ici, je peux changer cette couleur. Notez qu'il s'agit d'
un changement temporaire. Si j'actualise cette page
, toutes les modifications
disparaîtront. Pour définir les modifications. Vous devez d'abord effectuer
la modification, puis copier toutes les modifications
que vous avez effectuées ici, puis les coller dans votre code source.
Pour enregistrer ce fichier. Retirez-le d'ici.
Enregistrez ce fichier. Maintenant considérés, les
changements sont apparus ici. Parlons maintenant de
débarrasser la propriété. Je vais changer cela à 100 pixels et ensuite
je vais taper ici. Ensuite, je peux également ajouter
la valeur du pixel ainsi que la
valeur de pourcentage dans la propriété root. Par exemple, je vais
taper ici 60 pixels. Enregistrons maintenant ce fichier
et actualisons cette page. Vous pouvez voir que le
bref est de 60 pixels et vous pouvez voir que le
titre déborde ici. Si j'écris ici le débordement
caché, enregistrez ce fichier. Maintenant, si j'actualise cette page, vous pouvez voir que la partie
téléphone est cachée. Je peux également régler ce débordement dans les directions horizontale et
verticale. Dans ce cas, le débordement
provient de la direction horizontale. Je vais changer cela pour, disons, 200 pixels. Actualisez cette page. Vous
pouvez commencer par ici. Maintenant, je peux également définir le
taux en pourcentage, comme je peux également ajouter ici 50%. Enregistrez ce fichier,
actualisez cette page. Vous pouvez voir que
le contenu 3D 50, 50% pour cent est calculé à partir de l'élément parent car l'élément parent a
un taux de 100 %, l'élément enfant a
automatiquement calculé. C'est débarrassé. Maintenant, je peux aussi commencer la
hauteur 250%, c'est ici. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Vous pouvez voir que rien ne
s'est produit ici
car vous pouvez voir
que le taux d' élément
parent n'est pas la largeur
totale de ce navigateur. Si je survole ici, vous pouvez voir que la hauteur de
l'élément parent ne couvre pas
la page Web complète. C'est pourquoi ce
problème se produit. Maintenant, je vais vous dire comment résoudre ce problème dans le sexe
réactif alors, quand nous
parlerons de réactivité.
12. Effets de brousses: Dans cette conférence, nous
parlerons de Hoover qu'il a ressenti dans CSS. Tout d'abord, je vais
créer un nouveau nom de fichier survole le code HTML. Maintenant, à l'intérieur de ce fichier, je vais tout d'
abord
générer un code de plaque chauffante. Ensuite, dans le
niveau du titre ici, survolez les effets. Maintenant, à l'intérieur de ce body tag, je vais créer une étiquette H1. Maintenant, je vais ajouter ici un titre. Enregistrons maintenant ce
fichier et copions le chemin d'accès. Maintenant, je vais générer une balise de style. Parlons maintenant des effets de
survol. Pour créer un effet de survol, nous devons utiliser une pseudo-classe de
survol. Nous allons maintenant discuter plus tard des
pseudo-classes et des
pseudo-sélecteurs. Pour créer un effet de survol. Tout d'abord, il
faut taper ce sélecteur. Ensuite, nous devons taper deux points. Après cela, nous devons
taper le survol. Ensuite, nous devons ouvrir et
fermer les crochets bouclés. Ensuite, nous devons écrire
nos propriétés ici. Vous pouvez maintenant ajouter de nombreuses
propriétés dans les effets de survol. Tout d'abord, je vais
taper ici. Et puis je vais taper ici, planer. Maintenant, je veux changer la couleur. Quand quelqu'un
survole sur le cap, j'obtiendrai ici la couleur. Ensuite, je vais taper ici le nom de la
couleur, disons marron. Enregistrons maintenant ce fichier
et actualisons cette page. Vous pouvez voir si je survole ici, la couleur change pour fondre. Maintenant, je peux également modifier
la couleur d'arrière-plan. Je vais donc laisser ses antécédents. Ensuite, je vais taper votre noir, puis je changerai
cette couleur en blanc. Enregistrons maintenant ce
fichier et actualisons cette page. Par ici. Vous pouvez voir en arrière-plan, la couleur est devenue noire et la couleur de ce texte
a changé pour mordre.
13. Styliser un bouton: Dans cette conférence, nous allons créer des projets simples et petits
en utilisant HTML et CSS. Donc tout d'abord, je vais créer un nouveau fichier nommé
boutons points HTML. Maintenant, je vais générer
un code de chauffe-plat. Dans le titre, j'
ajouterai ici le bouton. Ensuite, à l'intérieur de cette balise de corps, je générerai une balise bouton. Et puis ici, je
laisserai Click Me. Maintenant, sauvegardons ce document. Maintenant, vous pouvez voir que le
bouton est apparu ici. Maintenant, je vais tenir ce
bouton en utilisant CSS. Je supporterai cela en utilisant
le CSS interne. Pour cela, je vais
taper votre style. Après cela, je vais
sélectionner ce bouton. Tout d'abord, je vais ajouter
un rembourrage à ce bouton. Pour cela, je la laisserai rembourrer dix pixels
du haut et du bas et 20 pixels de la
gauche et de la main droite. Rafraîchissons maintenant cette page. Vous pouvez voir que le rembourrage
est apparu ici. Augmentons ce rembourrage
à 15 pixels et 25 pixels. Rechargeons maintenant cette page. Maintenant, vous pouvez voir que les
effets du rembourrage ici. Ajoutons maintenant une couleur d'
arrière-plan. Ensuite, ajoutons de la couleur
baryonique. Enregistrons ce fichier,
rechargeons cette page. Vous pouvez voir que le
courant de fond est apparu ici. Non, je ne veux pas ces frontières. Ce que je vais faire, c'est que je vais taper leur frontière et ensuite j'
ajouterai ici aucune, aucune. Enregistrez ce fichier,
rechargez cette page. Vous pouvez voir que la frontière
est passée d'ici. Je souhaite également augmenter
la taille de la police. Pour cela, je vais taper
leur taille de police. Ensuite, je vais taper ici,
disons 20 pixels. Non, je ne vous ai pas
parlé de cette propriété de taille de police. Fondamentalement, il augmente
la taille de la police. Vous pouvez effectuer des recherches plus approfondies sur cette
propriété dans les conduits MDM. Maintenant, sauvegardons ce
fichier, rechargeons cette page. Vous pouvez voir que la
police a augmenté. Maintenant, je veux ajouter
quelques propriétés. Lorsque quelqu'un survole ce
bouton, tapez le bouton ici. Ensuite, j'ajouterai un effet de survol. Dans ce cas, je vais changer
la couleur
d'arrière-plan par une couleur plus foncée. Enregistrons maintenant ce fichier
et actualisons cette page. Vous pouvez voir les changements. Si quelqu'un qui était
dans ce bouton, je ne veux pas de discursive. Ce que je peux faire, c'est que je
peux taper ici le curseur. Ensuite, j'ajouterai ici un pointeur. Maintenant, je ne vous ai pas appris non plus propriété
discursive. Et fondamentalement, le
curseur sur t change le curseur lorsque quelqu'un
qui était sur ce bouton, comme si j'enregistre ce fichier
et que j'actualise la page, vous pouvez voir que le
curseur est passé à 0,9. Si j'inspecte ce bouton, vous pouvez voir tous
les styles que j'ai écrits ici. Je
vais cliquer là-dessus. Ensuite, je cliquerai ici. Fondamentalement, il active
le style de survol. Ce que je peux faire, c'est que je peux changer cette propriété quantique à partir d'ici. Et vous pouvez voir que les valeurs sont bien sûr
des propriétés. Vous pouvez expérimenter
plus de valeurs ici. Ce sont des boutons simples
que nous coiffons.
14. Positions CSS: Dans cette conférence, nous
discuterons des positions au sein de la CSS. Donc, tout d'abord, je vais créer un nouveau fichier nommé
oppositions au HTML. Générons maintenant
un code de plaque chauffante. Ensuite, à l'intérieur de ce titre, j'ajouterai ici
des positions en CSS. Maintenant, à l'intérieur de cette balise de corps, je vais générer une div avec
une classe de conteneur. Donc, pour cela, je vais
taper un conteneur de points. Ensuite, j'
appuierai sur la touche de tabulation. Il générera automatiquement une div avec une classe de conteneur. Voyons maintenant cette différence. Donc, pour cela, j'
utiliserai un style interne. Ensuite, je vais sélectionner cette div
avec la conférence de classe. Tout d'abord, je vais
donner cette hauteur DBA. Ensuite, je donnerai une hauteur de 100 pixels,
disons. Ensuite, je vais donner un
bref de 100 pixels. Ensuite, j'ajouterai une
bordure de deux pixels. Solide. Connaissances, enregistrez ce fichier
et copiez le chemin d'accès à partir d'ici. Maintenant, vous pouvez voir que la
div est apparue ici. Maintenant, ce que je vais faire,
c'est que je vais créer une autre div avec la
classe de canalisée. Si. Maintenant, je vais coiffer cette div. Tout d'abord, je vais sélectionner cette div en utilisant la conférence de
classe. Et puis je donnerai à cela
une hauteur de 50 pixels. Ensuite, je vais donner à cela
un taux de 50 pixels. Après cela, je vais
donner à cela une bordure de deux pixels, noir solide. Enregistrez ce fichier et
actualisez cette page. Vous pouvez voir une diversité
apparue ici. Augmentons la hauteur
et débarrassons de ce développement. Je vais donc taper ici cinq cent
cinq cents pixels. Augmentation également de la
suppression de l'article de cette div. Je vais taper leur 100 pixels,
puis un 100 pixels. Enregistrez ce fichier et
actualisez cette page. Vous pouvez voir maintenant que c'
est beau. Désormais,
les propriétés de position CSS sont utilisées lorsque vous souhaitez positionner un
élément spécifique dans la page Web. Si je voulais positionner,
cela signifiait généralement que j'ajouterai une propriété
de position. Ensuite, il y a de nombreuses valeurs
dans la propriété position. La première valeur est
positionnée relative. Donc, si je tape un ou une
position relative
, nous devons spécifier
la propriété CSS supérieure. Tapez ici en haut. Et puis je vais le
taper 20 pixels. Enregistrez ce fichier et
actualisez cette page. Vous pouvez voir qu'
il y a un espace de 20 pixels à partir du
haut de cet élément. neuf cinquièmes inspectent
cet élément. Ensuite, si j'augmente
cet écart par le haut, vous pouvez voir que la hauteur
change. Maintenant, je peux également ajouter une autre
propriété, qui est à gauche. Et puis j'ajouterai
ici 20 pixels. Vous pouvez voir qu'il y a maintenant un espace de 20 pixels
à partir de la gauche. Je peux également augmenter et
diminuer cette valeur. Peut également ajouter la valeur inférieure, ainsi que le
droit à la propriété. La raison pour laquelle cette propriété
droite et inférieure ne
fonctionne pas maintenant
car j'ai déjà spécifié la propriété CSS supérieure et
gauche ci-dessus. Donc, si j'actualise cette page, vous pouvez voir que
tout est normal. Une autre position, les positions des
propriétés relatives, l'élément par rapport
à son élément parent. Il s'agit de la propriété
absolue perse. Donc, si je tape dans votre
position absolue, pas cette partie d'élément elle-même par rapport
à l'élément du corps. Donc, si je tape à gauche, alors 0. Maintenant, si je sauvegarde ce fichier
et que je fais référence à ce milliard qui ne reste pas, je
vais taper ici à droite. Maintenant, si j'enregistre ce fichier
et que j'actualise cette page, vous pouvez le voir maintenant que
cet élément a sa position par
rapport au corps. Si je tape sa position relative
dans l'élément parent. Maintenant, si j'enregistre ce fichier
et que j'actualise cette page, vous pouvez le voir maintenant
qu'il s'est
positionné par rapport à
son élément parent, qui
est dans ce cas le conteneur, car j'ai ajouté la position relatif dans son élément parent. Remarquez que vos tâches jouent
avec les propriétés de dispersion.
15. Flottants CSS: Dans cette conférence, nous
discuterons des flotteurs en CSS. J'ai donc déjà créé un nouveau fichier nommé
floats dot HTML. Maintenant, dans ce fichier, je vais générer un code
de plaque chauffante. Dans le titre, je vais obtenir
ici des floats en CSS. Maintenant, à l'intérieur de cette étiquette de corps, je vais créer une div avec
une classe de conteneur. Et puis à l'intérieur de cette div, je vais créer deux autres divs avec la classe de la
boîte un et de la boîte deux. Je vais donc le faire avec
l'aide d'un amateur. Pour cela, je vais taper ici une boîte à
points, un dollar. Ensuite, je vais taper en deux. Ensuite, si j'appuie sur la touche Entrée, vous pouvez voir
que j'ai créé
deux autres divs avec la classe
de la case un et de la case deux. Maintenant, je vais supporter
cela pour cela. Je vais taper la coiffure. Maintenant, je vais sélectionner ce conteneur à l'
aide d'une conférence de classe. Après cela, je
lui donnerai une hauteur de 200 pixels en haut à droite.
Je vais donner une frontière. Et je vais taper ici
pour un pixel noir solide. Connaissances pour voir
si ce phi est là, alors je vais copier
le chemin d'ici. Maintenant, vous pouvez voir que
D est apparu ici. Je vais sélectionner cette
case. Pour ça. Je vais taper ici la boîte à points 1. Donnons-lui une
hauteur de 200 pixels. Après cela, je
lui donnerai un taux de 50 %. Je vais lui donner une couleur de
fond. Tout d'abord,
sauvegardons ce fichier. Et puis la première page,
vous pouvez voir que cette case
est apparue ici. J'ajouterai également le même
style dans la boîte. Je vais changer cette couleur de
fond. Enregistrons maintenant ce fichier
et actualisons cette page. Vous pouvez voir que deux
patrons sont apparus ici. Maintenant, si je tape ici, flottez à gauche. Enregistrons ce fichier
et actualisons cette page. Cette boîte ne se trouve pas à
gauche de ce conteneur. Ce que je vais faire, c'est
que je vais taper ici, flotter à droite, enregistrer ce fichier
et actualiser cette page. Vous pouvez voir que cette case se trouve maintenant à droite et que
cette case se trouve à gauche. Les flotteurs sont utiles
lors de la création d'une barre de navigation. Vous pouvez le voir ici. Je peux écrire le nom de l'entreprise, et ici je peux ajouter une navigation. Aucun flotteur n'est très
utile dès les premiers jours. Mais maintenant, dans le CSS moderne, nous avons flexbox et grille
pour nous faciliter la vie. Nous avons découvert flexbox et
grid dans les derniers modules. Votre tâche consiste maintenant
à en savoir plus sur propriété
floats dans
le MDM. Canards.
16. Créer un navbar: Dans cette conférence, nous allons
créer cette barre de navigation en utilisant HTML et CSS à partir de ce que
nous avons appris jusqu'ici. Tout d'abord, j'ai
déjà créé un nouveau nom de fichier, Navbar dot HTML. Je vais maintenant générer
un code de chauffe-plat. À l'intérieur de ce titre, je
vais écrire ici la barre de navigation. Ensuite, à l'intérieur de cette
balise de corps, je vais créer une div avec une classe de barre de navigation. À l'intérieur de cette div, je vais créer une div plus avec une classe de logo. Maintenant, dans cette div, je vais créer une balise H1, puis je vais
taper le nom de la société. Ce ne sera pas notre logo. Maintenant, je vais créer une URL
avec la classe de et navigation sera
nos liens de navigation. Je vais taper ici. Ensuite, à l'intérieur de
cette LI, je vais taper A. Après cela, tous les types ici. Si l'utilisateur clique sur ce lien, je souhaite que l'utilisateur
reste sur cette page Web. Pour cela, je vais
taper ici un hashtag. Après un double sexe
demain, comme des tags. Pour cela, je vais le copier
et le coller plusieurs fois. Dans la seconde, je vais
écrire ici, contactez. Dans la troisième, je
vais écrire ici. Puis finissez quatrième, je
vais écrire ici, galerie. Enregistrons ce fichier, puis
copions le chemin d'accès à partir d'ici. Vous pouvez maintenant voir que les balises H1 et
UL sont apparues ici. Maintenant, nous allons le coiffer. Je vais
utiliser le CSS interne, donc je vais taper votre style. Ensuite, ici, tout d'abord, je vais sélectionner cette classe de barre de navigation. Ici. Tout d'abord, je
lui donnerai une hauteur de 80 pixels, puis je
lui donnerai une bordure de, disons, de deux pixels
solides puis noirs. Pour enregistrer ce fichier,
vous pouvez voir que le bouton est apparu ici
afin de le styliser. Donc, tout d'abord, je
vais sélectionner ce logo. Je vais taper ici la hauteur. Ensuite, je lui donnerai une
hauteur de 80 pixels. Ensuite, je lui
donnerai un taux de 20 %. Après cela, j'ajouterai
une couleur d'arrière-plan. Ajoutons une couleur d'arrière-plan. Maintenant, je vais supporter
cette navigation. Pour cela, je vais taper
ici la navigation par points. Après avoir appuyé deux fois
ici, hauteur, ATP. Ensuite, l'écrit de 80%. Ensuite, j'ajouterais une
couleur de fond, disons vert. Enregistrez ce fichier. Maintenant, je veux que ça flotte
dans l'œil gauche. Je vais appliquer ici
la propriété fluide. Ensuite, je vais taper votre gauche.
Et puis dans la navigation, tous les types ici flottent à droite. Voyons maintenant si ce fichier
et actualisez cette page. La raison pour laquelle cela
ne fonctionne pas à gauche est dû à la marge. Donc, si je l'inspecte, vous pouvez voir dans la
navigation qu'il y a par défaut une marge de 16 pixels
en haut et en bas. Donc, pour supprimer cette marge, je vais taper ici la marge. Ensuite, je vais taper 0. Vous pouvez maintenant voir que la marge a été supprimée du haut et du bas. Maintenant, vous pouvez également voir
qu'il y a également un rembourrage à
gauche de 40 pixels. Je vais également retirer ce rembourrage. Pour cela, je vais
taper ici le rembourrage. Ensuite, chaque type ici est 0. Maintenant, vous savez, vous
pouvez voir qu'il est parfaitement là-dedans, n'est-ce pas ? Maintenant, je vais copier
cela dans les propriétés. Et je vais le coller ici. Enregistrez ce fichier et
actualisez cette page. Je veux supprimer ces
points de cette étiquette LI. Ce que je peux faire, c'est que je vais
sélectionner cette étiquette LI. Donc, pour sélectionner cette icône de toute
l'
électronique, la première est que je peux donner tous ces noms
de sous-classe électrique. Et la deuxième méthode consiste tout d'
abord à sélectionner
cette navigation. Et après cela, j'ajouterai un espace et ensuite
je taperai ici. Ce que cette propriété
fait maintenant, c'est qu'elle
recherchera toutes les lignes qui
se trouvent dans la navigation. Plus. Ensuite, à l'intérieur de cette alliance, j'ajouterai
une propriété de type de style liste. Alors je vais taper ici aucun. Enregistrez ce fichier et
actualisez cette page. Vous pouvez voir que tous les points
ont disparu d'ici. Plus de valeurs dans ce type de style de
liste, vous pouvez jouer avec toutes
les valeurs par vous-même. Maintenant, je veux également supprimer
ce soulignement dans l'ETag. Pour cela, je
vais tout d'abord sélectionner cette étiquette. ce faire, je vais sélectionner cette navigation
pour n'importe quel type de navigation. Et puis je vais taper ici.
Ce que cela fait, c'est qu'il va chercher tous les vivants qui sont dans la navigation. Et il
recherchera tous les ETag qui se trouvent dans la balise LI. Il sélectionnera toutes ces balises. Non, je vais taper votre décoration de
texte. Et puis je taperais
ici aucun, aucun, et je sauvegardais ce fichier et je
référencerais ce patient. Vous pouvez voir que tous les éléments soulignés ont disparu de l'ETag en raison de cette propriété de texte
vers dégradation. Non, je veux que ça soit au centre. Ce que je peux faire, c'est que je
peux sélectionner le H1. Ensuite, je vais taper
ici le texte align. Ensuite, je vais taper votre centre. N'acceptez pas ce fichier
et actualisez cette page. Vous pouvez voir que notre
texte n'est pas central. étiquettes lumineuses. Je ne les ai pas appelés. Je veux faire cette introduction. Ce que je vais faire, c'est cette étiquette LI. Je vais taper ici, flotter. Ensuite, je vais taper ici. Maintenant, enregistrez-nous ce document
et actualisez cette page. Vous pouvez voir que maintenant, ils sont
tous du côté droit. Ce que je veux, c'est que je veux tout
ça dans le côté gauche. Pour cela, je vais taper
ici, flotter à gauche. Connaissances, enregistrez ce fichier
et actualisez cette page. Vous pouvez le voir maintenant, tous
ces Aryens sont partis maintenant, je voulais ajouter la
marge dans leur vie, Dagan. Je vais donc taper ici la marge. Et ajoutons 20
pixels et dix pixels. Enregistrez ce fichier et
actualisez cette page. Vous pouvez voir qu'une marge
est apparue ici. Je voulais modifier la marge. Ce que je vais faire, c'est
que je clique avec le bouton droit ici, puis je clique
sur cet inspecteur. Maintenant, je vais cliquer sur
cette zone lumineuse. Ensuite, je vais changer
la marge à partir d'ici. Je vais augmenter cette marge. 30 pixels seront bons. Et ensuite, j'
augmenterai également cette marge. Et 20 pixels, je pense que c'est bon. Ce que je vais faire, c'est que je copierai ça, puis je le
collerai ici. Maintenant, je veux augmenter la taille de
police de cette balise. Maintenant, je veux augmenter la taille de
police de cette balise. Pour cela, je vais taper une taille de
police de 20 pixels. Maintenant, sauvegardons ce fichier et vous pouvez le voir maintenant qu'il
est plus beau. Maintenant, ce que je vais faire, c'est que je vais supprimer cet
arrière-plan d'ici. Je vais supprimer cette
couleur d'arrière-plan. Aussi cette couleur de fond. Ensuite, j'ajouterai une
couleur d'arrière-plan dans la barre de navigation. Ensuite, je collerai la couleur d'arrière-plan
que j'ai copiée. Enregistrez ce fichier,
puis actualisez cette page. Vous pouvez voir que la texture n'
est pas belle. Ce que je vais faire, c'est que je vais changer cette couleur de texte en
blanc dans l'Etag. Ensuite, je vais également modifier la couleur
du texte de l'en-tête. Enregistrons maintenant ce fichier,
puis actualisons cette page. Vous pouvez le voir.
Remarquez bien l'air. Maintenant, j'ai remarqué qu'
il y a des pièces d'ici. Je vais inspecter ça. Ensuite, vous pouvez voir que
dans la balise body il
y a une certaine marge
de tous les côtés. Ce que je vais faire, c'est que je vais d'
abord sélectionner
cette étiquette de corps. Et puis je vais
taper ici la marge. Ensuite, je vais taper ici 0900, enregistrer ce fichier,
puis actualiser cette page. Vous pouvez le voir maintenant
qu'il est beau. C'était donc notre barre
de navigation de base que nous avons créée à
l'aide de HTML et de CSS. Nous n'utilisons pas de flotteur. Donc, lors de la création d'une
barre de navigation en CSS moderne, nous utilisons
plutôt flexbox. Nous verrons ce qu'est
Flexbox et nous
en apprendrons plus sur Flexbox
lors de conférences à venir.
Piyush Jha, Web Developer & Educator
