Benutzerhandbuch Abbrechen

Grundlegendes zu Cascading Stylesheets

  1. Dreamweaver-Benutzerhandbuch
  2. Einführung
    1. Grundlagen von responsivem Webdesign
    2. Neue Funktionen in Dreamweaver
    3. Web-Entwicklung mit Dreamweaver – Überblick
    4. Dreamweaver/Häufige Fragen
    5. Tastaturbefehle
    6. Dreamweaver – Systemanforderungen
    7. Übersicht über die Funktionen
  3. Dreamweaver und Creative Cloud
    1. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    2. Creative Cloud-Bibliotheken in Dreamweaver
    3. Photoshop-Dateien in Dreamweaver verwenden
    4. Mit Adobe Animate und Dreamweaver arbeiten
    5. Web-optimierte SVG-Dateien aus Bibliotheken extrahieren
  4. Arbeitsbereiche und Ansichten in Dreamweaver
    1. Der Dreamweaver-Arbeitsbereich
    2. Dreamweaver-Arbeitsbereich für die visuelle Entwicklung optimieren
    3. Dateien anhand von Dateinamen oder Inhalten suchen | Mac OS
  5. Sites einrichten
    1. Dreamweaver-Sites
    2. Lokale Version Ihrer Site einrichten
    3. Verbindung mit einem Publishing Server herstellen
    4. Testserver einrichten
    5. Site-Einstellungen importieren und exportieren
    6. Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
    7. Barrierefreie Funktionen in Dreamweaver
    8. Erweiterte Einstellungen
    9. Site-Voreinstellungen für die Übertragung von Dateien festlegen
    10. Proxyserver-Einstellungen in Dreamweaver festlegen
    11. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    12. Git in Dreamweaver verwenden
  6. Dateien verwalten
    1. Dateien öffnen und erstellen
    2. Dateien und Ordner verwalten
    3. Dateien vom Server abrufen/auf dem Server bereitstellen
    4. Dateien einchecken und auschecken
    5. Dateien synchronisieren
    6. Dateien auf Unterschiede vergleichen
    7. Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
    8. Design Notes für Dreamweaver-Sites aktivieren
    9. Potenzielle Gatekeeper-Angriffe verhindern
  7. Layout und Entwurf
    1. Visuelle Hilfsmittel für das Layout verwenden
    2. CSS für das Seitenlayout verwenden
    3. Responsive-Websites mit Bootstrap entwerfen
    4. Medienabfragen in Dreamweaver erstellen und verwenden
    5. Inhalte in Tabellen darstellen
    6. Farben
    7. Responsive Design mithilfe von fließenden Rasterlayouts
    8. Extract in Dreamweaver
  8. CSS
    1. Grundlegendes zu Cascading Stylesheets
    2. Gestalten von Seitenlayouts mit CSS Designer
    3. CSS-Präprozessoren in Dreamweaver verwenden
    4. Voreinstellungen für CSS-Stile in Dreamweaver festlegen
    5. CSS-Regeln in Dreamweaver verschieben
    6. Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
    7. Mit div-Tags arbeiten
    8. Verläufe auf den Hintergrund anwenden
    9. CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
    10. Code formatieren
  9. Seiteninhalt und Elemente
    1. Seiteneigenschaften festlegen
    2. CSS-Eigenschaften von Überschriften und Links festlegen
    3. Mit Text arbeiten
    4. Text, Tags und Attribute suchen und ersetzen
    5. DOM-Bedienfeld
    6. In der Live-Ansicht bearbeiten
    7. In Dreamweaver die Kodierung von Dokumenten festlegen
    8. Elemente im Dokumentfenster auswählen und anzeigen
    9. Texteigenschaften im Eigenschafteninspektor festlegen
    10. Rechtschreibprüfung für Web-Seiten durchführen
    11. Horizontale Linien in Dreamweaver verwenden
    12. Schriftkombinationen in Dreamweaver hinzufügen und ändern
    13. Mit Elementen arbeiten
    14. Datumsangaben in Dreamweaver einfügen und aktualisieren
    15. In Dreamweaver Favoritenelemente erstellen und verwalten
    16. Bilder in Dreamweaver einfügen und bearbeiten
    17. Medienobjekte hinzufügen
    18. Videos in Dreamweaver einfügen
    19. HTML5-Videos einfügen
    20. SWF-Dateien einfügen
    21. Audioeffekte hinzufügen
    22. In Dreamweaver HTML5-Audiodateien einfügen
    23. Mit Bibliothekselementen arbeiten
    24. Arabischen und hebräischen Text in Dreamweaver verwenden
  10. Hyperlinks und Navigation
    1. Allgemeines zu Hyperlinks und Navigation
    2. Hyperlinks erstellen
    3. Imagemaps
    4. Fehler in Hyperlinks beheben
  11. jQuery-Widgets und -Effekte
    1. jQuery UI- und Mobile-Widgets in Dreamweaver verwenden
    2. jQuery-Effekte in Dreamweaver verwenden
  12. Websites programmieren
    1. In Dreamweaver programmieren
    2. Programmierumgebung in Dreamweaver
    3. Voreinstellungen für Code festlegen
    4. Codehervorhebung anpassen
    5. Code schreiben und bearbeiten
    6. Codehinweise und Codevervollständigung
    7. Code aus- und einblenden
    8. Code mit Codefragmenten wiederverwenden
    9. Code-Linting
    10. Code optimieren
    11. Code in der Entwurfsansicht bearbeiten
    12. Mit den Head-Inhalten von Seiten arbeiten
    13. Server-Side Includes in Dreamweaver einfügen
    14. Tag-Bibliotheken in Dreamweaver verwenden
    15. Benutzerdefinierte Tags in Dreamweaver importieren
    16. JavaScript-Verhalten (allgemeine Anweisungen)
    17. Integrierte JavaScript-Verhalten anwenden
    18. XML und XSLT
    19. Server-seitige XSL-Transformationen in Dreamweaver durchführen
    20. Client-seitige XSL-Transformationen in Dreamweaver durchführen
    21. Zeichenentitäten für XSLT in Dreamweaver einfügen
    22. Code formatieren
  13. Produktübergreifende Arbeitsabläufe
    1. Erweiterungen für Dreamweaver installieren und verwenden
    2. In-App-Updates in Dreamweaver
    3. Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
    4. Mit Fireworks und Dreamweaver arbeiten
    5. Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
    6. Dreamweaver-Business Catalyst-Integration
    7. Personalisierte E-Mail-Kampagnen erstellen
  14. Vorlagen
    1. Dreamweaver-Vorlagen
    2. Vorlagen und vorlagenbasierte Dokumente erkennen
    3. Dreamweaver-Vorlagen erstellen
    4. Bearbeitbare Bereiche in Vorlagen erstellen
    5. Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
    6. Optionale Bereiche in Vorlagen verwenden
    7. Bearbeitbare Tag-Attribute in Dreamweaver definieren
    8. Verschachtelte Vorlagen in Dreamweaver erstellen
    9. Vorlagen bearbeiten, aktualisieren und löschen
    10. XML-Inhalte in Dreamweaver exportieren und importieren
    11. Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
    12. Inhalte in Dreamweaver-Vorlagen bearbeiten
    13. Syntaxregeln für Vorlagen-Tags in Dreamweaver
    14. Markierungseinstellungen für Vorlagenbereiche festlegen
    15. Vorteile von Vorlagen in Dreamweaver
  15. Mobilgeräte und Multiscreen
    1. Medienabfragen erstellen
    2. Seitenausrichtung für Mobilgeräte ändern
    3. Mit Dreamweaver Web-Anwendungen für Mobilgeräte erstellen
  16. Dynamische Websites, Seiten und Web-Formulare
    1. Grundlegendes zu Web-Anwendungen
    2. Computer für die Entwicklung von Anwendungen einrichten
    3. Fehlerbehebung bei Datenbankverbindungen
    4. Verbindungsskripts in Dreamweaver entfernen
    5. Dynamische Seiten entwerfen
    6. Quellen für dynamischen Inhalt – Überblick
    7. Quellen für dynamische Inhalte definieren
    8. Dynamische Inhalte in Seiten einfügen
    9. Dynamischen Inhalt in Dreamweaver ändern
    10. Datenbankdatensätze anzeigen
    11. Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
    12. Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
    13. Formulare mit Dreamweaver erstellen
    14. Formulare zum Sammeln von Benutzerinformationen verwenden
    15. ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
    16. Web-Formulare erstellen
    17. Verbesserte HTML5-Unterstützung für Formularelemente
    18. Formularentwicklung mit Dreamweaver
  17. Visuelles Entwickeln von Anwendungen
    1. Master- und Detailseiten in Dreamweaver erstellen
    2. Such- und Ergebnisseiten erstellen
    3. Datensatz-Einfügeseiten erstellen
    4. Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
    5. Datensatz-Löschseiten in Dreamweaver erstellen
    6. ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
    7. Registrierungsseiten erstellen
    8. Anmeldeseiten erstellen
    9. Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
    10. Ordner in ColdFusion mit Dreamweaver schützen
    11. ColdFusion-Komponenten in Dreamweaver verwenden
  18. Websites testen, in der Vorschau anzeigen und veröffentlichen
    1. Seitenvorschau
    2. Dreamweaver-Web-Seitenvorschau auf mehreren Geräten
    3. Dreamweaver-Site testen
  19. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

 

 

In diesem Thema lernen Sie die grundlegenden Konzepte von CSS wie CSS-Regeln, Selektoren und Vererbung kennen. Außerdem erfahren Sie, wie Sie Ihren Webseiten in Dreamweaver CSS zuordnen können.

Cascading Stylesheets

Cascading Stylesheets (CSS) sind eine Sammlung von Formatierungsregeln, die das Aussehen der Inhalte einer Webseite bestimmen. Bei der Formatierung einer Seite mit CSS-Stilen werden Inhalt und Darstellung getrennt. Der Inhalt der Seite – der HTML-Code – befindet sich in der HTML-Datei. Die CSS-Regeln, die die Präsentation des Codes definieren, befinden sich dagegen in einer anderen Datei (einem externen Stylesheet) oder in einem anderen Teil des HTML-Dokuments (in der Regel im head-Bereich). Die Trennung zwischen Inhalt und Darstellung hat den Vorteil, dass bei einer Änderung nicht alle Eigenschaften auf jeder Seite einzeln aktualisiert zu werden brauchen. Dadurch ist es erheblich einfacher, das Erscheinungsbild einer Website zentral zu verwalten. Zudem ermöglicht es die Trennung zwischen Inhalt und Darstellung, den HTML-Code einfacher und sauberer zu halten. Dadurch wird die Seite im Browser schneller aufgebaut und die Navigation für Anwender, die auf Barrierefreiheit angewiesen sind (z. B. Nutzer von Bildschirmlesegeräten), wird erleichtert.

Mit CSS können Sie das Erscheinungsbild Ihrer Seite vielfältig gestalten und bis ins Detail kontrollieren. Sie können zahlreiche Textattribute festlegen, darunter Schriftart und Schriftgröße, Auszeichnungen wie fett, kursiv oder unterstrichen, Textschattierung, Text- und Hintergrundfarbe, Farbe und Unterstreichung für Hyperlinks und vieles mehr. Wenn Sie CSS zur Schriftartenverwaltung verwenden, können Sie zudem ein einheitlicheres Seitenlayout und Aussehen in den verschiedenen Browsern erzielen.

Neben der Textformatierung können Sie mit CSS auch das Format und die Position von Blockelementen auf einer Webseite bestimmen. Ein Blockelement ist ein eigenständiges Inhaltselement, das im HTML-Text in der Regel durch eine neue Zeile abgetrennt und als Block formatiert wird. Beispiele sind die Tags h1, p und div. Sie alle erzeugen Blockelemente auf der Webseite. Sie können Ränder und Rahmen für Blockelemente definieren, ihnen eine bestimmte Position zuweisen, eine Hintergrundfarbe hinzufügen, sie mit Fließtext umgeben und viele andere Gestaltungsoptionen nutzen. Das Seitenlayout mit CSS erfolgt hauptsächlich über das Bearbeiten von Blockelementen.

CSS-Regeln

Eine CSS-Formatierungsregel besteht aus zwei Teilen: dem Selektor und der Deklaration (bzw. meistens einem Block aus mehreren Deklarationen). Der Selektor ist ein Begriff (wie p, h1, ein Klassenname oder ein id-Attribut), mit dem das formatierte Element identifiziert wird. Mit dem Deklarationsblock werden dagegen die Stileigenschaften selbst definiert. Im folgenden Beispiel ist h1 der Selektor, die Elemente in der geschweiften Klammer ({}) bilden den Deklarationsblock:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

Eine einzelne Deklaration besteht ihrerseits aus zwei Teilen: der Eigenschaft (z. B. font-family) und dem Wert (z. B. Helvetica). In der obigen CSS-Regel wurde ein bestimmter Stil für h1-Tags erstellt: der Text für alle mit diesem Stil verknüpften h1-Tags hat eine Größe von 16 Pixel, die Schriftart Helvetica und den Schriftschnitt fett.

Der Stil wird über eine oder mehrere Regeln definiert und getrennt von dem eigentlichen Text gespeichert, dessen Formatierung er festlegt – entweder in einem externen Stylesheet oder im head-Bereich eines HTML-Dokuments. So lässt sich eine Regel für h1-Tags gleichzeitig auf viele Tags anwenden. Bei Nutzung externer Stylesheets kann sich die Regel auch auf Tags erstrecken, die sich auf zahlreichen verschiedenen Seiten befinden. Durch das CSS-Konzept wird die Aktualisierung von Websites so erheblich vereinfacht. Eine CSS-Regel braucht nur an einem einzigen Ort geändert zu werden, um die Formatierung aller Elemente, die den in ihr definierten Stil verwenden, automatisch zu aktualisieren.

In Dreamweaver können Sie die folgenden Arten von Stilen definieren:

  • Klassenstile ermöglichen die Anwendung von Formatierungseigenschaften auf beliebige Elemente auf der Seite.

  • HTML-Tag-Stile legen die Formatierung für ein bestimmtes Tag, z. B. für h1, fest. Wenn Sie einen CSS-Stil für das h1-Tag erstellen oder ändern, werden sämtliche mit dem h1-Tag formatierten Textstellen sofort aktualisiert.

  • Erweiterte Stile definieren die Formatierung einer bestimmten Kombination von Elementen oder anderer in CSS zulässiger Selektorformulare neu (der Selektor td h2 gilt z. B. für alle h2- Kopfzeilen in einer Tabellenzelle). Erweiterte Stile können ferner die Formatierung von Tags neu definieren, die ein bestimmtes id-Attribut enthalten (z. B. gelten die durch #myStyle definierten Stile für alle Tags, die das Attribut-Wert-Paar id="myStyle" enthalten).

CSS-Regeln können sich an folgenden Stellen befinden:

Externe CSS-Stylesheets

Sammlungen von CSS-Regeln, die in einer separaten, externen CSS-Datei (.css) gespeichert sind (dies ist keine HTML-Datei). Diese Datei wird über einen Hyperlink im head-Bereich eines Dokuments oder eine @import-Regel mit einer oder mehreren Seiten einer Website verknüpft.

Interne (oder eingebettete) CSS-Stylesheets

Sammlungen von CSS-Regeln, die sich in einem style-Tag im Head-Bereich eines HTML-Dokuments befinden.

Inline-Stile

Werden in bestimmten Instanzen von Tags in einem ganzen HTML-Dokument definiert. (Die Verwendung von Inline-Stilen wird nicht empfohlen.)

Dreamweaver erkennt Stile, die in vorhandenen Dokumenten definiert sind, sofern diese Stile den CSS-Richtlinien entsprechen. Dreamweaver stellt die zugewiesenen Stile zudem direkt in der Entwurfsansicht dar. (Die Dokumentvorschau in einem Browserfenster vermittelt gleichwohl den genauesten Eindruck vom „Live“-Erscheinungsbild der Seite.) Einige CSS-Stile werden in Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator, Opera, Apple Safari und anderen Browsern nicht einheitlich dargestellt; andere werden derzeit von keinem Browsertyp unterstützt.

Cascading Styles

Der Begriff cascading (kaskadierend) bezieht sich auf die Art und Weise, in der ein Browser die Stile bestimmter Elemente einer Webseite anzeigt. Die Stile, die auf einer Webseite zu sehen sind, können aus drei unterschiedlichen Quellen stammen: Dem Stylesheet, das der Autor der Seite erstellt hat, ggf. den benutzerangepassten Stilen und den Standardstilen des Browsers. In den vorherigen Abschnitten ging es um die Erstellung von Stilen für eine Webseite, die ein Autor der Webseite und der Stylesheets dieser Seite hinzugefügt hat. Aber die Browser verfügen ebenfalls über eigene Standard-Stylesheets, mit denen die Anzeige von Webseiten definiert wird. Außerdem können auch die Benutzer ihre Browser anpassen und so die Anzeige von Webseiten ändern. Letztendlich hängt die Anzeige einer Webseite von den Regeln ab, die sich aus der Überschneidung (Kaskadierung) der Stile dieser drei Quellen ergeben, um die Webseite optimal anzuzeigen.

Anhand eines allgemeinen Tags - dem Absatz-Tag <p> - wird dieses Konzept verdeutlicht. In der Standardeinstellung verfügen die Browser über Stylesheets, mit denen die Schriftart und die Schriftgröße von Fließtext definiert wird (also von Text, der im HTML-Code zwischen den <p>-Tags enthalten ist). So wird in der Standardeinstellung jeglicher Fließtext, einschließlich Absatztext, in Internet Explorer beispielsweise in Times New Roman, mittlere Größe, angezeigt.

Als Autor einer Webseite können Sie aber natürlich auch ein eigenes Stylesheet anlegen, mit dem der Standardstil des Browsers für Absatztext und die Schriftgröße überschrieben werden. So können Sie beispielsweise in einem Stylesheet die folgende Regel definieren:

p { 
font-family: Arial; 
font-size: small; 
}

Sobald ein Benutzer die Seite lädt, überschreiben die von Ihnen als dem Autor der Webseite definierten Absatzschriftart und die Größeneinstellungen die Standardeinstellungen des Browsers.

Die Benutzer können die Browseranzeige so anpassen, wie es Ihrer Nutzung am besten entspricht. In Internet Explorer können sie beispielsweise mithilfe von „Ansicht“ > „Textgröße“ > „Sehr groß“ die Schriftart der Seite vergrößern, falls ihnen die Schrift zu klein erscheint. Letztendlich überschreibt (zumindest in diesem Fall) die vom Benutzer geänderte Einstellung sowohl den Standardstil des Browsers als auch den vom Autor der Webseite definierten Absatzstil.

Aber auch die als Vererbung bezeichnete Übernahme der Eigenschaften von übergeordneten Elementen spielt bei der Kaskadierung eine Rolle. Die Eigenschaften der meisten Elemente einer Webseite werden übernommen (vererbt): Absatz-Tags erben beispielsweise bestimmte Eigenschaften von den body-Tags und span-Tags übernehmen bestimmte Eigenschaften der Absatz-Tags. Wenn Sie also in einem Stylesheet die folgende Regel definieren:

body { 
font-family: Arial; 
font-style: italic; 
}

werden alle Absatz-Tags Ihrer Webseite (sowie der Text, der Eigenschaften von diesen Absatz-Tags übernimmt) in Arial und kursiv angezeigt, da das Absatz-Tag diese Eigenschaften vom body-Tag erbt. Natürlich können Sie Ihre Regeln auch differenzierter definieren und Stile erstellen, die z. B. auch die Standardformeln für die Vererbung überschreiben. So können Sie beispielsweise in einem Stylesheet die folgende Regel definieren:

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

Der gesamte Fließtext wird in Arial angezeigt - mit Ausnahme von Text in Absatz-Tags und Text, der diese Eigenschaften übernimmt. Dieser wird in einer normalen Courier-Schrift dargestellt. Technisch gesehen erbt der Absatztext zunächst die Eigenschaften, die für das body-Tag definiert wurden. Aber diese Eigenschaften werden dann ignoriert, da für den Absatztext ja eigene Eigenschaften festgelegt wurden. Anders ausgedrückt erben die Seitenelemente zwar die Eigenschaften übergeordneter Objekte, wenden dann aber eigene Tag-Eigenschaften an und überschreiben die Standardeinstellungen der Vererbung.

Alle oben beschriebenen Faktoren sowie andere Aspekte, wie die CSS-Spezifizierung (ein System, das den einzelnen Arten von CSS-Regeln eine unterschiedliche Gewichtung zuweist) und die Reihenfolge der CSS-Regeln, ergeben eine komplexe Überschneidung von Elementen mit höheren und niedrigeren Prioritäten. Weitere Informationen zu den Regeln der Kaskadierung, Vererbung und Spezifizierung finden Sie auf der Seite www.w3.org/TR/CSS2/cascade.html.

Textformatierung und CSS

Standardmäßig verwendet Dreamweaver Cascading Stylesheets (CSS), um Texte zu formatieren. Durch die Stile, mit denen Sie Texte über den Eigenschafteninspektor oder Menübefehle formatieren, werden CSS-Regeln erstellt und im head-Bereich des aktuellen Dokuments eingebettet.

Sie können CSS-Regeln und -Eigenschaften auch im CSS Designer erstellen und bearbeiten. Der CSS Designer ist wesentlich robuster als der Eigenschafteninspektor und zeigt alle für das aktuelle Dokument definierten CSS-Regeln an, unabhängig davon, ob diese Regeln im head-Bereich des Dokuments eingebettet oder in einem externen Stylesheet enthalten sind. Adobe empfiehlt die Verwendung des CSS Designer (anstelle des Eigenschafteninspektors) als Haupttool zum Erstellen und Bearbeiten von CSS. Das Ergebnis ist Code, der optimiert und einfacher zu verwalten ist.

Weitere Informationen zum CSS Designer finden Sie unter Gestalten von Seitenlayouts mit dem CSS Designer.

Neben selbst erstellten Stilen und Stylesheets können Sie auch die vordefinierten Stylesheets von Dreamweaver auf Ihre Dokumente anwenden.

Ein Tutorial zur Textformatierung mit CSS finden Sie unter www.adobe.com/go/vid0153_de.

CSS-Kurzschrifteigenschaften

Die CSS-Eigenschaften ermöglichen die Erstellung von Stilen mithilfe einer abgekürzten Syntax, CSS-Kurzschrift genannt. Mit der CSS-Kurzschrift können Sie die Werte zahlreicher Eigenschaften mit einer einzigen Deklaration bestimmen. Die Eigenschaft font ermöglicht es Ihnen beispielsweise, mit einer einzigen Syntaxzeile die Eigenschaften zu font-style, font-variant, font-weight, font-size, line-height und font-family einzurichten.

Bei der Verwendung von CSS-Kurzschrift ist zu beachten, dass den von einer CSS-Kurzschrifteigenschaft ausgelassenen Werten der Standardwert zugeordnet wird. Dies kann dazu führen, dass Seiten nicht ordnungsgemäß angezeigt werden, wenn demselben Tag zwei oder mehr CSS-Regeln zugeordnet werden.

Die nachfolgend dargestellte Regel für h1 verwendet beispielsweise die lange CSS-Syntax. Beachten Sie, dass den Eigenschaften font-variant, font-stretch, font-size-adjust und font-style ihre Standardwerte zugeordnet wurden.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Als einzelne Kurzschrifteigenschaft würde dieselbe Regel folgendermaßen aussehen:

h1 { font: bold 16pt/18pt Arial }

Bei Verwendung der Kurzschrift werden den ausgelassenen Werten automatisch ihre Standardwerte zugewiesen. Daher werden in obigem Kurzschriftbeispiel die Tags font-variant, font-style, font-stretch und font-size-adjust ausgelassen

Wenn Sie Stile an mehreren Orten definiert haben (z. B. in eine HTML-Seite eingebettet und aus einem externen Stylesheet importiert) und sowohl die lange als auch die kurze Form der CSS-Syntax verwenden, bedenken Sie, dass Eigenschaften, die in einer Kurzschriftregel ausgelassen werden, möglicherweise Eigenschaften außer Kraft setzen (oder überlagern), die an anderer Stelle explizit eingerichtet wurden.

Daher verwendet Dreamweaver standardmäßig die lange Form der CSS-Schreibweise. Auf diese Weise werden Probleme vermieden, die auftreten können, wenn eine Kurzschriftregel eine Langschriftregel überschreibt. Wenn Sie in Dreamweaver eine mit CSS-Kurzschrift codierte Webseite öffnen, achten Sie darauf, dass Dreamweaver etwaige neue CSS-Regeln in Langschrift erstellt. Sie können bestimmen, wie Dreamweaver CSS-Regeln erstellt und bearbeitet, indem Sie im Dialogfeld „Voreinstellungen“ („Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh)) in der Kategorie „CSS-Stile“ die CSS-Bearbeitungsvoreinstellungen ändern.

Dreamweaver und CSS

In Dreamweaver gibt es verschiedene Möglichkeiten, um mit CSS zu arbeiten:

  • Mit dem CSS Designer können Sie CSS erstellen, ohne Code in nennenswertem Umfang schreiben zu müssen. Weitere Informationen finden Sie unter Gestalten von Seitenlayouts mit dem CSS Designer.
  • Sie können CSS-Code auch von Hand schreiben. Weitere Informationen zu den Programmierfunktionen von Dreamweaver finden Sie unter Programmierumgebung in Dreamweaver.
  • Wenn Sie es vorziehen, mit Sass-, Scss- oder Less-Dateien zu arbeiten, können Sie Ihren Code in der bevorzugten Syntax verfassen und in Dreamweaver verwenden. Weitere Informationen finden Sie unter CSS-Präprozessoren.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14. bis 16. Oktober in Miami Beach und online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14. bis 16. Oktober in Miami Beach und online