Welchen Einfluss haben die Margen für Webseiten?
Webseiten werden Inhalte in HTML-Elementen angezeigt. Die meisten Websites verwenden auch CSS (Cascading Style Sheet) Code, um das Layout und die Darstellung dieser Elemente zu bestimmen. CSS-Deklarationen bestimmen die Abmessungen der Elemente sowie Bereiche der Textabstand und Ränder um sie herum. Polsterung ist eine zusätzliche Fläche innerhalb eines Elements, um seinen Inhalt, während eine Marge außerhalb der Grenzen des Elements liegt. Seitenränder werden in den meisten Websites, sodass Entwickler klare Layouts mit Abstand zwischen den sichtbaren Elemente erstellen angezeigt.
Anweisungen
1 Erstellen Sie ein Beispiel HTML-Webseite. Als mit den meisten technischen Themen ist es am einfachsten, Web-Entwicklung-Konzepte zu verstehen indem Sie versuchen sie sich selbst. Dazu erstellen Sie eine HTML Seite Beispielentwurf mithilfe der folgenden Syntax:
< html >
< Head >
< / head >
< Körper >
< / body >
< / html >
Dies ist die grundlegende Struktur einer Webseite im HTML-Markup. Kopieren Sie den Code in eine neue Datei in einem Texteditor, und speichern Sie es mit der Erweiterung ".html".
2 Einige Inhalte Ihrer Seite hinzufügen. Fügen Sie mithilfe von HTML-Elementen, Seiteninhalte zwischen dem öffnenden und dem schließenden Body-Tag in Ihrer Datei. Der folgende Beispielcode veranschaulicht das Hinzufügen von zwei Elementen mit Text in ihnen:
< Div Id = "first" > Hier finden Sie einige Inhalt. < / Div >
< Div Class = "andere" > Hier finden Sie einige mehr. < / Div >
Das erste Element hat ein ID-Attribut, während das zweite ein Class-Attribut hat. Dadurch wird den CSS-Code zur Identifizierung der Elemente, die bestimmte Stilregeln für jeden von ihnen.
3 Erstellen Sie einen Abschnitt für den CSS-Code. Fügen Sie die folgende Gliederung für einen CSS-Bereich zwischen der öffnenden und schließenden Head-Tags in Ihre Seite:
< Typ style = "Text/Css" >
< / style >
Der CSS Code wird zwischen diesen Tags Stil gehen. Um Stileigenschaften für ein Element mithilfe dessen ID-Attribut zu deklarieren, können Sie die folgende Syntax verwenden:
ersten {} /Stile für "erste" Element hier/
}
Um Stil für ein Element mit einem Klassenattribut zu deklarieren, können Sie den folgenden Code:
{div.other}
/Stile für "andere" Elemente hier/
}
4 Marge Eigenschaften Ihrer Elemente hinzufügen. Fügen Sie den folgenden CSS-Code im Abschnitt für Ihre "erste" Element:
Margin: 10px;
Hintergrundfarbe: #FFFF00;
Die Hintergrundfarbeneinstellung ist nicht notwendig, aber lassen Sie die Auswirkungen Ihrer Marge Property-Deklaration auf einen Blick sehen. Fügen Sie die folgenden im Abschnitt für die "anderen" Klasse:
Width: 200px;
Höhe: 400px;
Marge: 10 %;
Hintergrundfarbe: #0000FF;
Dieser Code gilt eine feste Breite und Höhe auf das Element mit einer relativen Margin-Eigenschaft. Die Marge wird in Form von Prozentwert, Prozentsatz der Abmessungen des Elements darstellt. Speichern Sie die Datei und öffnen Sie sie in einem Webbrowser, um die Auswirkung der Margin-Eigenschaften anzuzeigen.
5 Ändern Sie den Code, um die verschiedenen Randeigenschaften auf jeder Seite eines Elements anwenden. Anstatt die gleichen Margin-Eigenschaften auf alle vier Seiten eines Elements anwenden, können Sie sie einzeln anwenden. Der folgende CSS-Beispielcode demonstriert, Anwenden von allen vier Seiten in einer einzigen Zeile:
Margin: 5px 10px 15px 20px;
Alternativ kann der Code zwei Werte, einen für die Seiten und eine für oben und unten angeben:
Margin: 10px 20px;
Sie können auch jede Zeile einzeln wie folgt angeben:
Margin-Top: 10px;
Experimentieren Sie mit Ihrer Seite durch Ändern der Werte in der CSS-Code und die Ergebnisse in Ihrem Browser anzeigen.
Tipps & Warnungen
- Die Margin-Eigenschaft eines HTML-Elements arbeitet zusammen mit den Innenabstand und Rahmen-Eigenschaften als Teil der CSS-Box-Modell.
- Festwerte für CSS-Elemente reduzieren die Möglichkeit einer Seite zu anderen Benutzer Bildschirmgrößen gut bewältigen.