Med CSS er det nemt at indstille farven på teksten i et dokument. Hvis du vil have afsnit på din side, der skal gengives i en bestemt farve, skal du blot angive, at i dit eksterne stilark, og browseren vil vise din tekst i den valgte farve. Hvad sker der, når du vil ændre farven på et enkelt ord (eller måske bare et par ord) i et afsnit i teksten? Til det skal du bruge et inline-element som taggen.
I sidste ende er det nemt at ændre farven på et enkelt ord eller en lille gruppe af ord i en sætning, ved hjælp af CSS, og tagsne er gyldige HTML, så bekymre dig ikke om at dette er en slags hack. Med denne tilgang undgår du også at bruge udfældede tags og attributter som "font", som er et produkt af en forløbet HTML-æra.
Denne artikel er beregnet til at starte webudviklere, der sandsynligvis er nye til HTML og CSS. Det hjælper dig med at lære at bruge HTML-mærket og CSS'en til at ændre farven på specifik tekst på dine sider. Når det er sagt, er der nogle ulemper ved denne metode, som vi vil dække i slutningen af denne artikel. Læs nu for at lære trinene til at ændre denne tekstfarve. Det er meget nemt og bør tage ca. to minutter.
Trin for trin instruktion
- Åbn den webside, du vil opdatere i din yndlingstekst HTML-editor. Dette kan være et program som Adobe Dreamweaver eller en simpel teksteditor som Notesblok, Notepad ++, TextEdit osv.
- I dokumentet finder du de ord, du vil have vist i en anden farve på siden. For denne tutorials skyld skal vi bruge nogle ord, der ligger inden for et større stykke tekst. Den tekst vil blive indeholdt i tagsparret. Find et af to ord, hvis farve du gerne vil redigere.
- Placer markøren før første bogstav i ordet eller gruppen af ord, du vil ændre farve. Husk, at hvis du bruger en WYSIWYG editor som Dreamweaver, arbejder du i "code view" lige nu.
- Lad indpakke teksten, hvis farve vi vil ændre med et tag, herunder en klassetildeling. Hele stykket kan se sådan ud:
Dette er tekst, der er fokuseret på i en sætning.
- Vi har lige brugt et inlineelement, den, for at give den specifikke tekst en "krog", som vi kan bruge i CSS. Vores næste skridt er at hoppe til vores eksterne CSS-fil for at tilføje en ny regel.
- I vores CSS-fil skal vi tilføje:
-
.fokus-tekst {
-
farve: # F00;
-
}
- Denne regel vil indstille det inline element, den, der skal vises i farven rød. Hvis vi havde en tidligere stil, der sætter teksten i vores dokument til sort, ville denne inline-stil føre til, at spændteksten fokuseres på og skiller sig ud med den forskellige farve. Vi kunne også tilføje andre stilarter til denne regel, måske gøre teksten kursiv eller fed til at understrege det endnu mere?
- Gem din side.
- Test siden i din yndlingswebbrowser for at se ændringerne i kraft.
- Bemærk at i tillæg til de enkelte webprofessorer vælger at bruge andre elementer som eller tagparene. Disse tags plejede at være for fed og kursiv specifikt, men blev udskrevet og erstattet med og. Taggene fungerer stadig i moderne browsere, men så mange webudviklere bruger dem som inline styling kroge. Dette er ikke den værste tilgang, men hvis du ønsker at undgå eventuelle udskårne elementer, foreslår vi at holde fast med taggen til disse typer stylingbehov.
Tips og ting at passe på
Mens denne tilgang fungerer fint til små styling behov som om du skal ændre kun et lille stykke tekst i et dokument, kan det hurtigt komme uden kontrol. Hvis du opdager, at din side er fyldt med inline-elementer, som alle har unikke klasser, som du bruger i din CSS-fil, kan du måske gøre det forkert. Husk, jo flere af disse tags, der er på din side, desto sværere er det Det vil sandsynligvis være at vedligeholde denne side fremad. Derudover har god webtypografi sjældent så mange varianter af farve etc. i hele siden.
