Maison > Article > interface Web > Un tutoriel d'introduction à l'apprentissage de la mise en page CSS

Un tutoriel d'introduction à l'apprentissage de la mise en page CSS

高洛峰original: 2017-03-17 09:33:371376parcourir

Vue d'ensemble

Après l'essor du Web, le matériel d'introduction et d'apprentissage sur CSS est devenu écrasant.
Cet article ne couvre pas la syntaxe CSS spécifique, mais espère que du point de vue d'un débutant, les personnes qui n'ont pas ou peu de contact avec CSS pourront rapidement comprendre ce qu'est CSS et comment l'utiliser.

Qu'est-ce que CSS

Lorsque vous comprenez un concept, la première chose que vous voyez est son nom, et ce qui est souvent ignoré est aussi son nom.
CSS (feuilles de style en cascade), peut être traduit en feuilles de style en cascade chinoises. Cela se voit d'après le nom :

En cascade : Indique que les styles peuvent être empilés, il y aura donc priorité
Feuille de style : Indique que CSS est un style de description, et ce n'est qu'un tableau, pas un langage de programmation, donc plus tard, à mesure que CSS était de plus en plus utilisé, des langages tels que Sass et Less dont la syntaxe CSS étendue est apparue

Fonction CSS

La fonction du CSS est le style. En fait, le Web peut être créé en utilisant uniquement du HTML. Cependant, à mesure que les performances des machines et des navigateurs s'améliorent, les gens ont des exigences de plus en plus élevées. pour la beauté et la facilité d'utilisation des pages Web. CSS L'importance est progressivement devenue évidente.
CSS je pense a deux fonctions principales :

peut gérer uniformément les styles du Web et faciliter la modification, similaire aux variables dans les langages de programmation ou Fichiers de configuration
Séparez le contenu et les styles des pages Web, ce qui permet de présenter le contenu de manière flexible

Notez que HTML est le contenu réel de la page Web, CSS Contrôlez simplement la manière dont l'élément HTML est affiché, s'il doit être affiché ou non.

CSS pour Layout

Le CSS est le plus utilisé dans la mise en page. C'est à cause du CSS qu'il existe la méthode de mise en page dite p css. HTML a été utilisé. Il s'agit d'une mise en page de tableau.

Pour avoir une compréhension préliminaire de la disposition des p css, je pense qu'il suffit de comprendre 3 points, le modèle de cadre, le positionnement et le flottant.

Modèle de boîte

Chaque p est une boîte pour CSS. Chaque boîte est composée de 4 parties de l'intérieur vers l'extérieur contenu rembourrage bordure marge
p. de la largeur de ces 4 parties
Exemple :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
    <p>Content</p>
  </body>
</html>
body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
}

L'exemple est très simple, mais vous pouvez voir :

De l'extérieur vers l'intérieur, elles sont la marge, la bordure, le remplissage, le contenu
La largeur et la hauteur de p ne sont que la taille du contenu

Positionnement

Après avoir compris le modèle de boîte, le positionnement est également très simple. En fait, il s'agit de positionner les frames un par un sur la page.
Le positionnement est divisé en positionnement absolu et positionnement relatif.

Positionnement absolu

C'est la position absolue sur le navigateur. La distance par rapport au coin supérieur gauche du navigateur est définie via les attributs haut et gauche

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="p1">Content1</p>
<p id="p2">Content2</p>
</body>
</html>
body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
  position: absolute;
}
#p1 {
  top: 100px;
  left: 100px;
}
#p2 {
  top: 200px;
  left: 200px;
}

Le positionnement absolu est clair mais inflexible, à moins que la taille de l'écran ne puisse être fixée, plusieurs jeux de CSS sont nécessaires. De mauvais réglages peuvent entraîner un chevauchement des éléments.
Un paramètre très clé dans le positionnement absolu est la position : absolue

Positionnement relatif

En positionnement relatif, le haut et la gauche de chaque p ne sont plus par rapport au coin supérieur gauche du navigateur. . Mais le coin supérieur gauche par rapport à la position restante.
Le même exemple que ci-dessus, remplacez position : absolue par position : relative et vous constaterez que les deux p ne se chevauchent plus.

Floating

p est en ligne par défaut, c'est-à-dire que chaque p occupe une ligne.
Lors de la mise en page, si vous souhaitez que plusieurs p soient disposés dans une rangée, vous utiliserez le flottant (ou utiliserez la méthode de table précédente)
Après avoir défini l'attribut flottant p, vous pouvez utiliser p pour disposer diverses structures .

Ce qui suit prend comme exemple un système de gestion commun pour créer une disposition CSS simple

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
      <p id="head">head</p>
      <p id="middle">
        <p id="nav">nav</p>
        <p id="content">content</p>
      </p>
      <p id="foot">foot</p>
  </body>
</html>
body {
  background-color: #FAEBD7;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
p {
  border: 1px solid black;
  text-align: center;
}
#head {
  height: 50px;
  width: 100%;
}
#middle {
  width: 100%;
  top: 50px;
  bottom: 100px;
  left: 0px;
  position: absolute;
}
#nav {
  float: left;
  width: 200px;
  height: 100%;
}
#content {
  height: 100%;
  overflow: hidden;
}
#foot {
  height: 100px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  position: absolute;
}

Dans l'exemple ci-dessus, les hauteurs de tête et de pied sont fixes et la largeur de navigation est fixé. D'autres sont adaptatifs et l'effet peut être observé en ajustant la taille de la fenêtre du navigateur.

Résumé

La mise en page CSS est très simple. S'il existe d'autres actions interactives, elle peut être réalisée via js (comme la liaison de la navigation et du contenu).
De nos jours, presque personne n'utilise la méthode de mise en forme de tableau, car le tableau n'est qu'un moyen d'afficher des données et les méthodes de ligne et de cellule ne sont pas adaptées à la composition en composants.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'animation CSS3 implémente 5 effets d'animation de préchargementArticle suivant：L'animation CSS3 implémente 5 effets d'animation de préchargement

Articles Liés

Voir plus