Heim > Web-Frontend > CSS-Tutorial > CSS beherrschen: Von den Grundlagen bis zur Mittelstufe

CSS beherrschen: Von den Grundlagen bis zur Mittelstufe

Linda Hamilton
Freigeben: 2024-12-13 03:03:16
Original
165 Leute haben es durchsucht

Mastering CSS: From Basics to Intermediate Level

CSS beherrschen: Von den Grundlagen bis zur Mittelstufe

CSS (Cascading Style Sheets) ist eine Grundtechnologie für die Erstellung optisch ansprechender Websites. Es ermöglicht Entwicklern, HTML-Elemente zu formatieren, Layouts zu steuern und die Benutzererfahrung zu verbessern. Dieser Artikel führt Sie durch CSS-Grundlagen und fortgeschrittene Konzepte und stellt sicher, dass Sie Webseiten sicher gestalten können.


1. Einführung in CSS

  • Was ist CSS?

    CSS wird verwendet, um HTML-Elemente zu formatieren und zu definieren, wie sie aussehen sollen (z. B. Farben, Schriftarten, Abstände). Es trennt Inhalt (HTML) von Präsentation (CSS).

    Beispiel: Styling eines

    Element:

     <h1>
    
    </li>
    <li>
    <p><strong>Three Types of CSS</strong>  </p>
    
    <ul>
    <li>
    <strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
    Example:
    </li>
    </ul>
    
    <pre class="brush:php;toolbar:false">   <p>
    
    
    
    <ul>
    <li>
    <strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
    Example:
    
    Nach dem Login kopieren
    Nach dem Login kopieren

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>
Nach dem Login kopieren
Nach dem Login kopieren
  • Externes CSS: Verlinkt über eine CSS-Datei für Konsistenz über mehrere Seiten hinweg. Beispiel:
   <link rel="stylesheet" href="styles.css">
Nach dem Login kopieren
Nach dem Login kopieren

2. CSS-Selektoren

  • Selektoren werden verwendet, um HTML-Elemente für das Styling auszuwählen.

    • Universeller Selektor (*): Formatiert alle Elemente.
    • Typauswahl (Element): Zielt auf bestimmte Tags wie

      ab.

    • Klassenselektor (.classname): Zielt auf Elemente mit einer bestimmten Klasse ab. Beispiel:
       <style>
         .highlight { color: yellow; }
       </style>
       <p class="highlight">Highlighted text</p>
    
    Nach dem Login kopieren
    Nach dem Login kopieren
    • ID-Selektor (#id): Zielt auf eine eindeutige ID ab. Beispiel:
       <style>
         #unique { color: green; }
       </style>
       <p>
    
    
    
    
    
    Nach dem Login kopieren

3. CSS Properties and Values

  • Text and Font Styling

    • color: Sets text color.
    • font-size: Defines text size.
    • font-family: Specifies the font. Example:
       <style>
         p { color: navy; font-size: 16px; font-family: Arial; }
       </style>
    
    Nach dem Login kopieren
    Nach dem Login kopieren
  • Hintergrundgestaltung

    • Hintergrundfarbe: Legt die Hintergrundfarbe fest.
    • Hintergrundbild: Fügt ein Hintergrundbild hinzu. Beispiel:
       <style>
         body { background-color: lightblue; background-image: url('background.jpg'); }
       </style>
    
    Nach dem Login kopieren
    Nach dem Login kopieren

4. CSS-Box-Modell

Das Box-Modell erklärt, wie Elemente strukturiert sind:

  • Inhalt: Der tatsächliche Inhalt innerhalb des Elements.
  • Padding: Abstand zwischen Inhalt und Rand.
  • Rand: Umschließt die Polsterung und den Inhalt.
  • Rand: Abstand zwischen dem Element und benachbarten Elementen.

    Beispiel:

     <style>
       div {
         width: 200px;
         padding: 10px;
         border: 2px solid black;
         margin: 20px;
       }
     </style>
    
    Nach dem Login kopieren
    Nach dem Login kopieren

5. CSS-Positionierung und -Layouts

  • Positionierung

    • statisch: Standardfluss.
    • relativ: Relativ zur Normalposition positioniert.
    • absolut: Relativ zum nächstgelegenen positionierten Vorfahren positioniert.
    • behoben: Bleibt beim Scrollen an Ort und Stelle. Beispiel:
       <style>
         div { position: absolute; top: 50px; left: 100px; }
       </style>
    
    Nach dem Login kopieren
  • Flexbox

    Flexbox vereinfacht die Erstellung flexibler und reaktionsfähiger Layouts.

    Beispiel:

     <style>
       .container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
       }
     </style>
    
    Nach dem Login kopieren
  • Gitter

    CSS Grid bietet ein leistungsstarkes Layoutsystem.

    Beispiel:

     <h1>
    
    </li>
    <li>
    <p><strong>Three Types of CSS</strong>  </p>
    
    <ul>
    <li>
    <strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
    Example:
    </li>
    </ul>
    
    <pre class="brush:php;toolbar:false">   <p>
    
    
    
    <ul>
    <li>
    <strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
    Example:
    
    Nach dem Login kopieren
    Nach dem Login kopieren
   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>
Nach dem Login kopieren
Nach dem Login kopieren

6. CSS-Pseudoklassen und Pseudoelemente

  • Pseudoklassen: Stilelemente basierend auf ihrem Zustand.

    Beispiel: Hover-Effekt

       <link rel="stylesheet" href="styles.css">
    
    Nach dem Login kopieren
    Nach dem Login kopieren
  • Pseudoelemente: Stilspezifische Teile eines Elements.

    Beispiel: Inhalt vor einem Element hinzufügen:

       <style>
         .highlight { color: yellow; }
       </style>
       <p class="highlight">Highlighted text</p>
    
    Nach dem Login kopieren
    Nach dem Login kopieren

7. Responsives Design mit Medienabfragen

Medienabfragen passen Stile basierend auf der Bildschirmgröße an.

Beispiel:

   <style>
     #unique { color: green; }
   </style>
   <p>










3. CSS Properties and Values

Nach dem Login kopieren
  • Text and Font Styling

    • color: Sets text color.
    • font-size: Defines text size.
    • font-family: Specifies the font. Example:
       <style>
         p { color: navy; font-size: 16px; font-family: Arial; }
       </style>
    
    Nach dem Login kopieren
    Nach dem Login kopieren

    8. CSS-Techniken für Fortgeschrittene

    • Übergänge und Animationen

      Beispiel:

         <style>
           body { background-color: lightblue; background-image: url('background.jpg'); }
         </style>
      
      Nach dem Login kopieren
      Nach dem Login kopieren
    • CSS-Variablen

      Beispiel:

       <style>
         div {
           width: 200px;
           padding: 10px;
           border: 2px solid black;
           margin: 20px;
         }
       </style>
      
      Nach dem Login kopieren
      Nach dem Login kopieren

    9. Fazit

    CSS verwandelt einfaches HTML in schöne, funktionale Webseiten. Indem Sie die Grundlagen verstehen und zu fortgeschrittenen Konzepten übergehen, erwerben Sie die Fähigkeiten, ansprechende, optisch ansprechende Designs zu erstellen. Üben Sie die Gestaltung einfacher Projekte wie eines persönlichen Portfolios, um diese Techniken zu beherrschen.

Das obige ist der detaillierte Inhalt vonCSS beherrschen: Von den Grundlagen bis zur Mittelstufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage