Hvordan velge farger for HTML5 og CSS3-baserte websider - dummies

Farger kan virke overveldende når du arbeider med HTML5 og CSS3 websider. Med litt trening, og litt tålmodighet, styrer du farger med stil.

Start med websikker farger

WebSafe. html-programmet fungerer ved å la deg raskt skrive inn en websikker verdi. For å bli rød, trykk på FF-knappen i den røde kolonnen. De blå og grønne verdiene har standardverdien på 00, så bakgrunnen er rød.

Websikre farger gir deg mye plass til å spille, og de er veldig enkle å jobbe med. Faktisk er de så vanlige at du kan bruke en snarvei. Fordi de websikre fargene gjentas, kan du skrive et gjentatt siffer som et siffer. Du kan spesifisere magenta som enten eller som og nettleseren forstår, og gir deg en hodepine-induserende magenta.

For å gjøre en mørkere rød, skift FF til neste minste verdi. Hvis du vil ha det mørkere ennå, prøv. Eksperimenter med alle de røde verdiene og se hvor lett det er å få flere forskjellige typer røde. Hvis du vil ha en variasjon av rosa, øker du de grønne og blå verdiene sammen. er en støvete rosa farge; er litt lysere; og er en veldig hvit rosa.

Slik endrer du fargene dine

Web-safe paletten er praktisk, men den gir deg et relativt lite antall farger (216). To hundre og seksten fargestifter i esken er ganske fine, men du trenger kanskje mer. Vanligvis er det trygt å starte med websikker farger og deretter justere når du går. Hvis du vil ha en lysere rosa enn, kan du hoppe av den nettsikkerhetsvognen og bruke eller hvilken som helst annen farge du ønsker!

I webSafe. html-program, kan du bruke topp- og bunnknappen i hver rad for å finjustere justeringene til fargen din.

Slik bruker du farger på egne sider

Poenget er å gjøre det bra på dine sider. For å legge til farge på sidene dine gjør du følgende:

1. Definer HTML som vanlig.

   HTML-en skal ikke ha noen sammenheng med fargene. Legg farge strengt i CSS.

2. Legg til en etikett på siden i overskriftsområdet.

3. Legg til en velger for hver tag du vil endre.

   Du kan endre hvilken som helst HTML-kode, så hvis du vil endre alle avsnittene, legg til en velger. Bruk taggenavnet uten vinkelsporene.

4. Legg til og attributter.

5. Angi fargeverdiene med fargenavn eller heksefargeverdier.

Slik endrer du CSS i fly

Chrome-nettleseren har et spesielt kult triks når det gjelder CSS-koding. Du kan se på CSS av ethvert element på en nettside og endre det, se resultatene i sanntid!

Slik fungerer det:

1. Bygg siden på vanlig måte.

   Bruk teksteditoren til å bygge grunnsiden.

2. Legg til CSS-valg.

   Angi CSS for elementene du har til hensikt å endre. The emptyCSS. HTML-siden på nettstedet viser et veldig enkelt eksempel. Du kan sette noen verdier du vil ha i CSS, eller du kan ganske enkelt forlate CSS blank for nå. Hvis du vil eksperimentere, ta en titt på emptyCSS. html på nettsiden. Den har tomme selektorer for de tre elementene som er beskrevet på siden.

3. Legg inn siden din i Chrome.

   De andre nettleserne begynner å utvikle verktøy som Chrome, men det er klart lederen, så start med Chrome.

4. Kontroller et element.

   Høyreklikk et hvilket som helst element og velg Inspiser element fra den resulterende hurtigmenyen.

5. Gratulerer med de fantastiske utviklerverktøyene.

   Hold det på fanen Elements for nå.

6. Endre HTML-koden!

   Du kan dobbeltklikke koden i kodeviseren og endre innholdet. Dette er morsomt, men ikke permanent eller spesielt nyttig.

7. Du kan også endre CSS.

   Hvis en stilvelger er definert, vises den under fanen i seksjonen. Du kan legge til nye stilregler eller endre de eksisterende, og du vil kunne se resultatene i fly.

8. Du kan til og med bruke en fancy fargevalg.

   Når en fargestyre er definert, ser du en liten fargekvoter. Klikk på den fargen for å få en fin fargevalg du kan bruke.

9. Velg forskjellige deler av siden for å endre andre regler.

   Du kan endre CSS av ethvert element så lenge en slags regel er lagret.

10. Kopier og lim inn alle stilregler du vil beholde.

    Modifikasjoner gjort i verktøylinjen for webutvikler er ikke permanente. Hvis du finner farger eller andre stilregler du liker, kan du kopiere dem fra utviklervinduet og lime dem inn i koden din.