Grunnleggende om Ribbon Rules i CSS3 - dummies

CSS3 har innarbeidet r ibbon regler som er fargerike grafiske regler som har erstattet standard HTML regel på mange nettsteder. Den grafiske regelen legger til en aksent på nettstedet og gjør det til å virke litt mer ferdig. Du får tilgang til Ribbon Rules Generator ved å klikke på Ribbon Rules på Verktøy-menyen på hovedsiden.

Slik lager du båndregelen i CSS3

Generering av et bånd krever at du angir fargen og avstanden som skal brukes til båndelementet. Valget for farge er å bruke en tilfeldig generert sekvens basert på en basefarge, eller å bruke bestemte fargevalg. Avstanden er enten tilfeldig innenfor det området du angir, eller en bestemt størrelse for hvert fargevalg.

Brukervalgte farger og sekvensavstand krever litt ekstra forsiktighet når du bruker dem. Først må du forsikre deg om at noen heksadesimale verdier du legger inn er foran pundskiltet (#), eller båndet vil bli svart når du genererer det. For det andre, vil fargevalgene du lager, vises nøyaktig i sekvensen du lager dem i utgangsbåndet.

Hvis du planlegger å bruke båndet på en gjentatt måte, opprett en sekvens og avstand som fungerer sammen. Testing viser at et avstand på 26 fungerer bra - du ender med en jevn gjentakende sekvens som vil se bra ut på siden.

Når du har gjort dine valg, klikker du Generer. Ribbon Rules Generator vil lage en båndregel for deg og vise den under skjemaet. Du kan bruke båndet som det ser ut, eller gjøre endringer for et annet utseende. For å lagre båndet du har opprettet, høyreklikker du oppføringen på siden og velger Lagre bilde som fra hurtigmenyen. Gi et navn på bildet og klikk på Lagre for å fullføre handlingen.

Slik bruker du båndregelen i CSS3

Du kan bruke bildet som inneholder båndregelen hvor som helst du kan bruke et annet bilde. Imidlertid vil de fleste bruke båndregelen som en del av en stil. Følgende kode viser et eksempel på hvordan du kan bruke båndreglene laget av dette eksemplet.

Test båndreglene # Area1 {margin: 5px; polstring: 5px; border-style: solid; kantbredde: 6px; border image: url (UserRule. GIF) 960 10 gjenta;} # Area2 {margin: 5px; polstring: 5px; border-style: solid; kantbredde: 6px; border-image: url (RandomRule. GIF) 960 10 gjenta;}

Test båndreglene

Dette er område 1
Dette området bruker de brukervalgte innstillingene.

Dette er område 2
Dette området bruker tilfeldige innstillinger.

Du vil bruke dette til å lage en regel på en side. Siden inneholder to områder. Den første viser en båndregel som er opprettet med brukerspesifikke innstillinger; den andre viser en båndregel som er opprettet ved hjelp av tilfeldige innstillinger.Selvfølgelig er det uendelige muligheter for å lage båndregler - disse eksemplene er bare representativ for hva du kan gjøre. Den typiske produksjonen fra dette eksemplet er illustrert nedenfor.