Journée - TML/CSS - Projet ILUGC(page web)-tutoriel CSS-php.cn

Journée - TML/CSS - Projet ILUGC(page web)

Patricia Arquette

Libérer： 2025-01-04 07:11:34

original

825 Les gens l'ont consulté

HTML :

HTML signifie Hyper Text Markup Language
HTML est le langage de balisage standard pour créer des pages Web
HTML décrit la structure d'une page Web
HTML se compose d'une série d'éléments
Les éléments HTML indiquent au navigateur comment afficher le contenu
Les éléments HTML étiquettent des éléments de contenu tels que « ceci est un titre », « ceci est un paragraphe », « ceci est un lien », etc.

Référer- https://www.w3schools.com/Html/html_intro.asp

CSS :

Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML.
CSS décrit comment les éléments doivent être restitués à l'écran, sur papier, oralement ou sur d'autres supports.

Référez- https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

Différence entre HTML/CSS et Javascript.

-->HTML/CSS - Pages statiques - Le contenu reste le même à chaque chargement, sauf mise à jour manuelle.
--->Javascript - Pages dynamiques - Les pages peuvent répondre aux actions de l'utilisateur, telles que cliquer sur un bouton, soumettre un formulaire ou déplacer la souris.

Syntaxe HTML :

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

Copier après la connexion

--> Enregistrez le fichier avec l'extension (.html) et double-cliquez pour exécuter le programme.

Day - TML/CSS - Project ILUGC(web page)

Élément HTML :
En HTML, les éléments sont généralement entourés d'une balise d'ouverture et d'une balise de fermeture pour définir leur début et leur fin.
---> Balise d'ouverture : marque le début d'un élément HTML.
---> Balise de fermeture : marque la fin d'un élément HTML avec une barre oblique avant le nom de l'élément.
Ex :

Bonjour tout le monde !

Balise autonome : Une balise autonome (également appelée balise à fermeture automatique) en HTML est un élément qui ne nécessite pas de balise de fermeture car elle n'a aucun contenu entre une ouverture et une fermeture. étiquette.
Ex-
- break :utilisé pour insérer un saut de ligne

Projet:

Préparation de la mise en page de la page Web ILUGC :(https://ilugc.in/)

<html>
<tête>
    <titre>ILUGC</titre>
<style>
.récipient{
    bordure : 1 px solide ;
    hauteur : 200 % ;
    largeur : 85 % ;
    marge:auto;
}
.en-tête h4{
    transformation de texte : majuscule ;
    couleur : #e22d30 ;
    border-top : 1px vert uni ;
    largeur : ajustement du contenu ;
    rembourrage supérieur : 10 px ;
}
.en-tête{

    marge : 25 px ;
}
</style>
&Lt;/tête>
<corps>
   <div>



<p>Sortie :</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p><p><strong>Explication :</strong></p>

<ol>
<li>
<html> : l'élément racine du document HTML.</li>
<li>
<head> : contient les métadonnées et les ressources du document.</li>
<li>
<title> : définit le titre de la page Web affichée dans l'onglet du navigateur.</li>
<li>
<style> : intègre le CSS pour styliser le document HTML.</li>
</ol>

Copier après la connexion

.container : style le div du conteneur :
a) border : 1px solid ; : ajoute une bordure solide de 1 pixel.
b) hauteur : 200 % ; : définit la hauteur à deux fois la hauteur de la fenêtre d'affichage.
c) width : 85 % ; : définit la largeur à 85 % de la largeur de la fenêtre d'affichage.
d) margin: auto; : centre le conteneur horizontalement.
.header h4 : style le
élément à l'intérieur de la classe .header :
a) text-transform : majuscule ; : convertit le texte en majuscule.
b) color : #e22d30 ; : définit la couleur du texte sur une nuance spécifique de rouge.
c) border-top : 1px solid green ; : ajoute une bordure supérieure verte.
d) width: fit-content; : réduit la largeur de l'élément pour l'adapter à son contenu.
e) padding-top : 10px ; : ajoute 10 pixels de remplissage au-dessus du texte.
.header : style le div d'en-tête :
a) margin : 25px ; : ajoute une marge de 25 pixels autour de l'en-tête.

: contient tout le contenu visible de la page Web.
: élément conteneur permettant de regrouper et de styliser le contenu.
: représente le titre principal de la page Web.
: représente un sous-titre de moindre importance que
.

Attribut :
Un attribut fournit des informations supplémentaires sur un élément HTML, généralement sous la forme de paires nom-valeur.
Ex : `

Rembourrage :
Le remplissage est l'espace entre le contenu d'un élément et sa bordure. Cela crée une marge interne autour du contenu, éloignant le contenu des bords de l'élément.

Marge :
La marge est l'espace situé à l'extérieur de la bordure d'un élément qui le sépare des autres éléments. Il définit l'espace extérieur entre les éléments, créant une distance autour d'eux.

sélecteur de classe et un sélecteur d'élément :

Le sélecteur de classe cible les éléments HTML qui ont un attribut de classe spécifique, en utilisant un point (.) suivi du nom de la classe.
Le sélecteur d'éléments cible les éléments HTML directement par leur nom de balise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!