Hoe stijlen te definiëren met de tagkiezer in Dreamweaver - dummies

U kunt volledig nieuwe stijlen in Dreamweaver maken met de aanroep- of ID-selecteurs, maar u kunt ook stijlen maken die de opmaak van bestaande HTML wijzigen. -tags. Deze stijlen worden gemaakt met de tagselector, , ook wel de elementselector genoemd. Wanneer u een stijl definieert met de tagselector, kunt u het uiterlijk, de positie en andere kenmerken van een bestaande HTML-tag wijzigen.

Veel HTML-tags bevatten al opmaakopties. De headingtags omvatten bijvoorbeeld opmaak van stijltekst met een groot vetlettertype. Wanneer u een stijl met een labelselector maakt, moet u rekening houden met de opmaakopties die al aan die tag zijn gekoppeld. Alle opties die u definieert, worden ofwel toegevoegd aan de bestaande opmaak of overschrijven de opmaak.

U kunt vragen: "Waarom zou ik de tag

opnieuw definiëren in plaats van alleen een nieuwe kopstijl te maken met behulp van de klasse- of ID-selector? "Hoewel u een nieuwe klassestijl kunt definiëren in plaats van een HTML-tag opnieuw te definiëren, is het soms beter om een ​​bestaande HTML-tag te gebruiken.

Koersstijlen zijn vooral belangrijk op internet omdat tekst die is opgemaakt in een

-tag goed wordt herkend als de belangrijkste tekst op een pagina. Onder andere kan tekst die is opgemaakt in een

-tag speciale aandacht krijgen van zoekmachines.

Als u een stijl wilt maken die een HTML-tag (zoals de

-tag) herdefinieert met de tagselector, maakt u eerst een bestand of opent u een bestaand bestand en volgt u deze stappen:

1Selecteer in het deelvenster Selectors van het deelvenster CSS-ontwerper de stijlpagina waaraan u de nieuwe stijl wilt toevoegen.

Wanneer u een stijl voor een bestaande HTML-tag maakt, hoeft u de stijl zelf niet op dezelfde manier toe te passen als u met klasse- en ID-stijlen doet. Waar u ook de HTML-tag hebt gebruikt, de stijldefinitie-instellingen zijn toegepast.

2Als u de stijl wilt targeten op een specifiek mediatype of schermformaat, kiest of definieert u een mediaquery in het paneel @Media.

Mediaquery's gebruiken met stijlen is optioneel. Als u geen mediaquery opgeeft, gebruikt Dreamweaver de globale eigenschap en werkt uw stijl in alle media-indelingen en schermformaten.

3Klik op het plusteken (+) in het deelvenster Selectors.

Er is een nieuwe selector toegevoegd aan het deelvenster Selectors.

Wanneer u op het plusteken (+) klikt om een ​​nieuwe selector te maken, kunnen er een paar dingen gebeuren, afhankelijk van wat al op de pagina is geopend in Dreamweaver. De eerste keer dat u een stijl op een lege webpagina maakt, wordt Dreamweaver in het deelvenster Selectors ingevoerd.

Als u werkt aan een pagina met tekst of andere inhoud die is opgemaakt met HTML-tags of stijlen, kan Dreamweaver een samengestelde selector toevoegen op basis van de elementen rondom wat u met de cursor hebt geselecteerd.

4Klik in het deelvenster Selectors op de naam van de selector. Begin met het invoeren van de naam van de HTML-tag en selecteer vervolgens de tag in de vervolgkeuzelijst die wordt weergegeven.

U kunt de naam van een HTML-tag invoeren om een ​​stijl te maken met behulp van de tagselector. Terwijl u een HTML-tag typt, verschijnt een vervolgkeuzelijst met tags die beginnen met dezelfde letter die u hebt getypt. Het selecteren van de gewenste tag in de lijst in plaats van zelf de volledige tagnaam te typen, is een goede gewoonte omdat je typefouten kunt vermijden.

5Selecteer in het paneel Properties de gewenste instellingen in uw stijlregel.

Het lettertype en de kleur worden onmiddellijk toegepast op de tekst op de pagina die is opgemaakt met de tag

.

Als u dezelfde HTML-tag met verschillende opmaak in verschillende delen van dezelfde pagina wilt kunnen gebruiken, kunt u samengestelde stijlen maken. Samengestelde stijlen zijn handig, bijvoorbeeld als u tekst die is opgemaakt met de tag

er anders uitziet in het hoofdgedeelte van uw pagina dan in een zijbalk.