Sådan oprettes css

Et Cascading Style Sheet (CSS) er et system til Website Coding, der gør det muligt for designere at manipulere flere funktioner på én gang ved at tildele visse elementer til grupper. For eksempel ved at bruge en kode til Website Baggrund, kan designere ændre baggrundsfarven eller billedet på alle sider på hjemmesiden med en ændring til CSS-filen. Sådan oprettes CSS til en grundlæggende hjemmeside.

Trin

Del 1 af 4:
Skrive inline CSS
  1. Billede med titlen Opret CSS Trin 1
1. Vær sikker på at du har en grundlæggende forståelse af HTML-tags. Du bør vide, hvordan tags arbejder og af Src og href egenskaber.
  • Billedet med titlen Opret CSS Trin 2
    2. Lær nogle af de grundlæggende CSS-egenskaber. Du vil opdage, at der er mange mange ejendomme. Det er dog ikke nødvendigt at lære dem alle.
  • Nogle gode grundlæggende CSS egenskaber at vide er farve og Font-Family.
  • Billedet med titlen Opret CSS Trin 3
    3. Lær om værdier for hver respektive ejendom. Alle egenskaber har brug for en værdi. For farve Ejendom, for eksempel, kan du sætte rød værdi.
  • Billedet med titlen Opret CSS Trin 4
    4. Lær om stil HTML-egenskab. Det bruges inden for et element som href eller Src. For at bruge det, inden for citatmærkerne efter lige tegn, sæt CSS-attributten, et kolon, og derefter værdien af ​​ejendommen. Dette er kendt som en CSS-regel.
  • Billedet med titlen Opret CSS Trin 5
    5. Forstå, at inline CSS ikke normalt bruges til websteder af professionelle webudviklere. Inline CSS kan tilføje unødvendig rod til et HTML-dokument. Det er dog en fantastisk måde at blive introduceret til, hvordan CSS fungerer.
    • Del 2 af 4:
    Skrive Basic CSS
    1. Billedet med titlen Opret CSS Trin 6
    1. Start det program, du ønsker at bruge. Det skal give dig mulighed for at oprette HTML og CSS-filer.
    • Hvis du ikke har et specielt program installeret, kan du bruge notesblok eller en anden teksteditor. Du skal blot gemme din fil både som en tekstfil og en CSS-fil.
  • Billedet med titlen Opret CSS Trin 7
    2. Åbn HTML-filen til dit websted. Du bør også åbne dette med en HTML-editor, hvis du har en installeret.
  • HTML-redaktører giver dig mulighed for at redigere HTML og CSS på samme tid.
  • Billedet med titlen Opret CSS Trin 8
    3. Opret et mærke i dit HTML-hoved. Dette vil lade dig skrive CSS uden behov for en separat fil.
  • Billedet med titlen Opret CSS Trin 9
    4. Vælg et element, du vil tilføje styling til og indtaste navnet på elementet efterfulgt af et sæt krøllebøjler ({ }). For at gøre din kode mere læselig, sæt altid den anden krøllede brace på sin egen linje.
  • Billedet med titlen Opret CSS Trin 10
    5. Mellem bøjlerne skal du skrive dine CSS-regler, som du vil bruge stil attribut. Hver linje skal Slut med en semikolon (-). For at gøre din kode læselig skal hver regel starte på sin egen linje, og hver linje skal indrykkes.
  • Det er meget vigtigt at bemærke, at denne styling vil påvirke alle Elementer af den valgte type på siden. Mere specifik styling vil blive dækket i næste afsnit.
    • Del 3 af 4:
    Mere avanceret CSS
    1. Billedet med titlen Opret CSS Trin 11
    1. Opret en CSS-fil, ikke en HTML-fil og gem den ved hjælp af .CSS udvidelse. Åbn også din HTML-fil.
  • Billedet med titlen Opret CSS Trin 12
    2. Lave en Tag i dit HTML-hoved. Dette giver dig mulighed for at forbinde en separat CSS-fil til dit HTML-dokument. Dit link tag har brug for tre attributter: rel, type, og href.
  • rel midler "forhold" og fortæller browseren, hvad forholdet er til HTML-dokumentet. Her skal det have en værdi af "Stylesheet".
  • type fortæller, hvilken type medier der er knyttet til. Her skal det have en værdi af "Tekst / CSS"
  • href Her bruges på samme måde som, hvordan den bruges i et element, men her skal det linke til en CSS-fil. Hvis CSS-filen er placeret i samme mappe som HTML-filen, skal kun filnavnet skrives inden for citatmærkerne.
  • Billedet med titlen Opret CSS Trin 13
    3. Vælg elementer af forskellige typer, du vil tilføje den samme styling til. Tilføj en klasse Attribut til disse elementer og sætte dem svarende til et klassenavn efter eget valg. Dette vil give dine elementer den samme styling.
  • Billedet med titlen Opret CSS Trin 14
    4. Tildel, hvilken styling en klasse der vil modtage. Indtast klassens navn i din CSS-fil med en periode (.) forud for det (i.E. .klasse).
  • Billedet med titlen Opret CSS Trin 15
    5. Vælg Single Elements, du vil tilføje speciel styling til og tilføje en ID attribut. ID er oprettet i CSS ved hjælp af et pund symbol (#) snarere end en periode.
  • Id`erne er mere specifikke end klasser, så et id vil tilsidesætte enhver klasse styling, hvis den har en attribut med en anden værdi end klassen.
    • Del 4 af 4:
    Lære mere
    1. Billedet med titlen Opret CSS Trin 16
    1
    Besøg W3-skolerne. Det er en officiel hjemmeside rettet mod at undervise i webudviklingsevner. W3 har masser af referencer angivet til HTML og CSS, samt andre websprog.
  • Billede med titlen Opret CSS Trin 17
    2. Find andre websteder, der specifikt er rettet mod at lære og undervise HTML og CSS. Websteder som CSS Tricks.com specifikt er rettet mod at undervise CSS og webdesign færdigheder. At finde velrenommerede kilder vil hjælpe dig på din læringsrejse.
  • Billedet med titlen Opret CSS Trin 18
    3. Kom i kontakt med webdesignere og udviklere. Deres erfaring og knowhow kan lære dig værdifuld viden og færdigheder.
  • Billede med titlen Opret CSS Trin 19
    4. Se kildekoden for websteder, du kommer på tværs af. Visning af CSS af veludviklede hjemmesider kan vise dig måder at designe dele af websteder. Kopiere det ned som praksis og fiddling med koden kan hjælpe dig med at lære at bruge forskellige CSS attributter.

    • Video

    Ved at bruge denne service kan nogle oplysninger deles med YouTube.

    Tips

    Der er mange forskellige egenskaber, som du kan manipulere med CSS. Find en hjemmeside med en stil, du kan lide, og se kildefilen. Hvis der er et CSS-filnavn, der er knyttet øverst i hovedmærkerne, kan du klikke på den for at se de forskellige egenskaber og værdier, der er tildelt elementerne.

    Advarsler

    Direkte kopiering af HTML og CSS-kodning kan hjælpe dig med at lære, men du skal bruge dine egne design ideer. At tage andres design er tyveri og plagiering.
    Del på sociale netværk :
    Lignende