Arama Yap Mesaj Senden
Rückruf anfordern
+90
X
X

Wählen Sie Ihre Währung

Türkische Lira $ US Dollar Euro
X
X

Wählen Sie Ihre Währung

Türkische Lira $ US Dollar Euro

Kontaktieren Sie uns

Standort Halkali Merkez Viertel Fatih Str. Ozgur Apt. No. 46, Kucukcekmece, Istanbul, 34303, TR

Beispieltestseite

diese Seite EkaSunucu Es dient zum Testen der zentralen CSS-Datei, die von erstellt wurde. Alle wichtigen Komponenten werden auf der Seite angezeigt.

In diesem Beispiel Heldenbereich, Inhalte, Inhaltskarten und häufig gestellte Fragen Zu sehen sind Komponenten wie z.

Design
Artikel

Verwalten Sie alle Designelemente in einer einzigen Datei

reaktionsschnell
Design

Sorgt für ein makelloses Erscheinungsbild auf allen Geräten

schnell
Entwicklung

Schnelle Seitenentwicklung mit vorgefertigten Komponenten

Einfach
Aktualisieren

Aktualisieren Sie die gesamte Site mit der Aktualisierung einer einzelnen Datei

Inhalt

Musterteile und Komponenten

Inhaltskarten

Mit Inhaltskarten können Sie Informationen auf organisierte und ästhetische Weise präsentieren. Jede Karte kann sich auf ein bestimmtes Thema konzentrieren und wichtige Informationen hervorheben.

Informationen: Inhaltskarten sind eine großartige Möglichkeit, verschiedene Abschnitte Ihrer Seite zu organisieren. Sie können Ihre Seite besser lesbar machen, indem Sie einheitliche Abstände zwischen den Karten verwenden.

Inhaltskarten verfügen über die folgenden Funktionen:

  • Sauberes und modernes Design
  • Responsive Struktur (kompatibel mit allen Bildschirmgrößen)
  • Ideal für die Organisation von Inhalten
  • Textmarker-Titelleiste
  • 3D-Effekt mit weichen Schatten

Alarmboxen

Benachrichtigungsboxen sollen Ihren Benutzern wichtige Informationen übermitteln. Sie können für verschiedene Arten von Benachrichtigungen unterschiedliche Farben verwenden.

Informationen: Dies ist eine Informationsnachricht. Es dient dazu, Benutzern nützliche Tipps und Informationen zu geben.
Warnung: Dies ist eine Warnmeldung. Es dient dazu, Benutzer über mögliche Probleme zu informieren.
Erfolgreich: Das ist eine Erfolgsmeldung. Es wird verwendet, um über erfolgreiche Aktionen oder positive Ergebnisse zu informieren.

Wichtiger Hinweis

  • Dies ist eine Gefahrenwarnung
  • Wird bei kritischen Fehlern oder schwerwiegenden Problemen verwendet
  • Es verfügt über ein größeres und akzentuiertes Design, um die Aufmerksamkeit der Benutzer auf sich zu ziehen
Beispielbild
Beispielbild: CSS-Komponenten

Hilfreiche Tipps

  • Mithilfe von CSS-Variablen können Sie die Farben Ihrer gesamten Website ganz einfach ändern.
  • Nutzen Sie Medienabfragen effektiv für responsives Design.
  • Verwenden Sie integrierte Klassen für konsistente Abstände und Ausrichtungen.
  • Achten Sie auf die Hierarchie der Typografie: Verwenden Sie die richtigen Größen für Überschriften und Text.

Schritt-für-Schritt-Anleitung

Um komplexe Abläufe verständlicher zu machen, werden Schritt-für-Schritt-Anleitungen eingesetzt. Jeder Schritt ist nummeriert und optisch hervorgehoben.

1

CSS-Datei einbinden

Fügen Sie den folgenden Code zum Header-Bereich Ihrer Seite hinzu:

<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css">

Dieser Code bindet die zentrale CSS-Datei in Ihre Seite ein.

2

Erstellen Sie eine HTML-Struktur

Verwenden Sie beim Erstellen der Struktur Ihrer Seite die in dieser CSS-Datei definierten Klassen:

  • Für den Heldenbereich .hero-section Klasse verwenden
  • für Inhalte .contents-card Klasse verwenden
  • Für Inhaltsabschnitte .content-section Klasse verwenden
  • für Karten .content-card Klasse verwenden
3

Fügen Sie Symbole hinzu

Für alle Icons wird Font Awesome verwendet. Beispielverwendung:

<i class="fas fa-info-circle"></i>

Suchen Sie in der Dokumentation zu Font Awesome nach den richtigen Symbolklassen.

4

Nehmen Sie Anpassungen vor

Sie können CSS-Variablen für benutzerdefinierte Farbschemata oder Stile verwenden. Beispiel:

<body style="--primary-color: #FF5500; --secondary-color: #FF8844;">

Auf diese Weise können Sie das Farbschema Ihrer Seite ganz einfach ändern.

CSS-Eigenschaften

Farbsystem

Die CSS-Datei definiert eine Reihe von Variablen für eine konsistente Farbverwendung auf der gesamten Website. Die grundlegenden Farbvariablen sind:

  • --primary-color: Ana renk
  • --secondary-color: Sekundärfarbe
  • --accent-color: Farbe hervorheben
  • --text-color: Haupttextfarbe
  • --text-secondary: Sekundäre Textfarbe
  • --light-bg: Helle Hintergrundfarbe
  • --card-bg: Hintergrundfarbe der Karte

Mithilfe dieser Variablen können Sie das Farbschema Ihrer gesamten Website von einem Ort aus ändern.

Typografie

Die CSS-Datei definiert Schriftfamilien und -größen für eine konsistente Typografie:

  • --font-primary: Hauptschriftart (Inter)
  • --font-secondary: Sekundärschriftart (Poppins)

Für Titel font-family: var(--font-secondary) Für Text bei Verwendung font-family: var(--font-primary) verwendet wird.

Titelhierarchie

H1-Überschrift

H2-Titel

H3-Header

H4-Header

H5-Header
H6 Kopf

Responsives Design

Mobilkompatibles Design

Die CSS-Datei enthält umfassende Medienabfragen für verschiedene Bildschirmgrößen. Auf diese Weise sieht Ihre Website auf allen Geräten perfekt aus.

Desktop

Optimiert für Geräte mit einer Bildschirmbreite von 1200 Pixel und mehr.

  • Inhalt in voller Breite
  • Maximale Breite 1200 Pixel
  • Große Leerzeichen und große Schriftgrößen

Tablet

Optimiert für Geräte mit Bildschirmbreiten zwischen 768px und 1199px.

  • Inhalt mittlerer Breite
  • Einige Layoutänderungen
  • Mittlere Schriftgrößen

mobil

Optimiert für Geräte mit einer Bildschirmbreite von 767 Pixel und weniger.

  • einspaltiges Layout
  • kleinere Lücken
  • Lesbare Schriftgrößen
Informationen: Responsive Design wird mithilfe von CSS-Medienabfragen umgesetzt. Diese lösen je nach Bildschirmgröße unterschiedliche Styling-Regeln aus. Alle Medienabfragen werden am Ende der CSS-Datei definiert.

Häufig gestellte Fragen

Die am häufigsten gestellten Fragen und Antworten zur Verwendung von CSS-Dateien

Wie kann ich die CSS-Datei einbinden?
Im Kopfbereich Ihrer Seite <link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css"> Sie können die CSS-Datei einbinden, indem Sie den Code hinzufügen. Dadurch werden alle Stildefinitionen auf Ihre Seite angewendet.
Wie kann ich Farben anpassen?
Sie können Farben mithilfe von CSS-Variablen anpassen. Sie können die Farben auf der gesamten Website ändern, indem Sie dem Body-Tag einen Inline-Stil hinzufügen, zum Beispiel: <body style="--primary-color: #FF0000; --secondary-color: #FF5555;">
Wie ändere ich die Schriftfamilie?
Sie können Schriftfamilien auch mit CSS-Variablen ändern: <body style="--font-primary: 'Roboto', sans-serif; --font-secondary: 'Montserrat', sans-serif;"> Bedenken Sie jedoch, dass diese Schriftarten auf Ihrer Seite installiert sein müssen.
Sind für Responsive Design zusätzliche Codes erforderlich?
Nein, die CSS-Datei enthält bereits die notwendigen Medienabfragen für alle Bildschirmgrößen. Solange Sie die richtigen Klassen verwenden, passt sich Ihre Seite automatisch an alle Geräte an.
Ich möchte eine benutzerdefinierte Komponente hinzufügen. Was soll ich tun?
Sie können Ihre eigenen CSS-Codes für benutzerdefinierte Komponenten in einer zusätzlichen Datei definieren und diese Datei nach der Haupt-CSS-Datei einfügen. Auf diese Weise können Sie bei Bedarf die wichtigsten CSS-Regeln überschreiben.
Top