Stijlen maken met klasse- en id-kiezers in Dreamweaver - dummies

Klasse- en ID-kiezers in Dreamweaver hebben veel overeenkomsten en één belangrijk verschil. ID-stijlen kunnen slechts één keer per pagina worden gebruikt, maar klassestijlen kunnen net zo vaak op dezelfde pagina worden gebruikt als u wilt.

Klasse- en ID-stijlen hebben de volgende overeenkomsten:

U kunt stijlen die u hebt gemaakt met de klasse- en ID-selectoren een naam geven die u maar wilt. Je moet geen spaties of speciale tekens opnemen in stijlnamen, hoewel het onderstrepingsteken en het koppelteken in orde zijn. Het gebruik van alle kleine letters is een gebruikelijke, maar niet vereiste oefening.

U kunt klasse- en ID-stijlen toepassen op elk element op een pagina, maar deze worden meestal toegepast op header-tags, div-tags, niet-geordende lijsttags, alineatags, afbeeldingslabels en de nieuwe HTML5 -tags.

Het gebruik van stijlen die zijn gemaakt met de klasse- en ID-selector, is een proces in twee stappen. Eerst maakt u een nieuwe stijl met behulp van de klasse- of ID-selector en geeft u deze een naam; dan pas je de stijl toe op een element op de pagina.

Om een ​​nieuwe klasse of ID-stijl te definiëren, maakt en bewaart u een nieuw document of opent u een bestaand bestand en volgt u deze stappen:

1Als u een nieuwe stijl definieert die u wilt van toepassing op een bestaand element, klik om uw cursor op het element te plaatsen dat u met de nieuwe stijl wilt opmaken.

Hoewel deze stap niet vereist is (u kunt stijlen maken voor elementen die nog niet op de pagina staan), maakt Dreamweaver automatisch selectornamen op basis van het pagina-element dat uw cursor momenteel selecteert.

2Selecteer in het deelvenster Selectors van het deelvenster CSS-ontwerper de naam van het stijlblad waaraan u de nieuwe stijl wilt toevoegen.

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

Als u geen mediaquery opgeeft, gebruikt Dreamweaver de eigenschap Global en werkt uw stijl in alle media-indelingen en schermformaten.

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

Er is een nieuwe selector toegevoegd aan het deelvenster Selectors. Dreamweaver heeft een naam voor de samengestelde selector toegevoegd, die alle stijlen bevat die al zijn toegepast op de kop waar uw cursor rustte toen u de stijl begon te definiëren.

4 Dubbelklik op de naam van de selector en bewerk of vervang deze door de naam die u voor uw stijl wilt gebruiken.

U kunt klas- en ID-stijlen een naam geven die u maar wilt, als u maar geen spaties of speciale tekens gebruikt, behalve het koppelteken (-) of onderstrepingsteken (_).

Als u een stijl wilt maken met de klasse-selector, moet u de stijlnaam beginnen met een punt of punt.Als u de ID-selector wilt gebruiken, moet de stijlnaam beginnen met een hekje (#).

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

Klasse- en ID-kiezers kunnen eenvoudig worden toegepast op inhoud nadat u ze hebt gemaakt, omdat Dreamweaver deze stijlen toevoegt aan de vervolgkeuzelijsten Klasse en ID in de eigenschappencontrole onder aan de werkruimte.