Når du er begyndt at dabble i HTML 17 Enkle HTML-kodeeksempler, du kan lære om 10 minutter 17 Enkle HTML-kodeeksempler, du kan lære om 10 minutter Hvis du kender de følgende 17 HTML-tags (og de ekstra få, der går med dem), skal du 'll være i stand til at oprette en grundlæggende webside fra bunden eller justere koden oprettet af en app som ... Læs mere, du vil nok være interesseret i at tilføje mere strøm til dine websider. CSS er den bedste måde at gøre det på. CSS giver dig mulighed for at anvende ændringer på hele din side uden at bruge masser af inline-HTML-stilarter. 9 Fejl, du ikke bør gøre, når du opbygger en webside. 9 Fejl, du ikke bør gøre, når du opbygger en webside Disse følgende HTML-kodningsfejl er nemme at gøre, men hvis du leder dem tidligere i stedet for senere, vil din side se bedre ud, være lettere at vedligeholde og fungere, hvordan du vil have det. Læs mere .
Vi går over, hvordan du opretter et inline stylesheet, så du kan øve dine CSS-færdigheder, og så flytter vi på 10 enkle eksempler, der viser dig, hvordan du laver nogle få grundlæggende ting. Derefter er din fantasi grænsen!
Hvis du vil have en lidt mere teknisk introduktion, skal du sørge for at tjekke 5 Baby trin til Learning CSS og blive en kick-ass CSS Sorcerer 5 Baby trin til at lære CSS og blive en kick-ass CSS Sorcerer 5 Baby skridt til at lære CSS og blive en Kick-Ass CSS Sorcerer CSS er de mest vigtige forandringswebsider, der er set i det sidste årti, og det banede vejen for adskillelse af stil og indhold. På den moderne måde definerer XHTML den semantiske struktur ... Læs mere.
Inline Stylesheet
Hvert HTML-dokument indeholder et tag. Det hovedafsnit er, hvor dit inline CSS stylesheet går. Sådan ser det ud:
All of your CSS declarations.Sæt det øverst i dit dokument, udfyld det med din CSS, og du er klar til at gå.
1. Easy Paragraph Formatering
Den kolde ting om styling med CSS er, at du ikke behøver at angive en stil hver gang du opretter et element. Du kan bare sige "alle afsnit skal have denne stil" og du er god til at gå. Her er et eksempel på, hvordan du kan gøre det.
Lad os sige, at du vil have hvert afsnit (det er alt sammen med a
HTML-tag Top 11 HTML-mærker Hver Blogger og Website Owner skal vide Top 11 HTML-tags Hver Blogger og Website Owner skal vide World wide web kender mange sprog og er kodet i flere forskellige. Det ene sprog kan dog findes hele tiden og har eksisteret siden opfindelsen af websider, er ... Læs mere) på din side for at være lidt større end normalt. Og mørkegrå, i stedet for sort. Sådan gør du det med CSS:
p { font-size: 120%; color: dimgray; } Det er alt der er til det. Nu, når browseren gør en
afsnit, vil teksten arve størrelsen (120 procent af normal) og farven ("dimgray").
Hvis du er nysgerrig om, hvilke smarte tekstfarver du kan bruge, skal du tjekke denne CSS-farveliste fra Mozilla.
2. Skift Letter Case
Okay, så nu vi har set, hvordan vi ændrer hvert afsnit, lad os se på, hvordan vi kan være lidt mere selektive. Lad os lave en betegnelse for afsnit, der skal være i små hætter. Sådan gør vi det:
p.smallcaps { font-variant: small-caps; } For at lave et afsnit, der er helt i små hætter, bruger vi et lidt andet HTML-tag. Sådan ser det ud:
Dit afsnit her.
Som du kan se, tilføjer en prik og et klassenavn til et bestemt element i CSS en undertype af det element, der er defineret af en klasse. Du kan gøre dette med tekst, billeder, links og næsten alt andet.
Hvis du vil ændre et sæt tekst til en bestemt sag, kan du bruge disse CSS linjer:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; Den sidste kapitaliserer første bogstav i hver sætning.
3. Skift linkfarver
Lad os prøve at ændre stilen på noget andet end et fuldt afsnit. Der er fire forskellige farver, som et link kan tildeles: dets standardfarve, dens besøgte farve, dens svingfarve og dens aktive farve (som den viser, mens du klikker på den). Sådan ændrer vi dem:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Bemærk at hver "a" efterfølges af et kolon, ikke en prik.
Hver af disse erklæringer ændrer farven på et link i en bestemt sammenhæng. Der er ingen grund til at ændre klassen af et link for at få det til at ændre farve. Det vil alle blive bestemt af brugeren og tilstanden af linket.
4. Fjern link understreger
Mens understreget tekst tydeligt angiver et link, forekommer det nogle gange pænere at skræbe den understregning. Dette opnås med attributten "tekst-dekoration". Sådan fjerner vi understreger på links:
a { text-decoration: none; } Alt med linket ("a") -mærket forbliver uunderstreget. Vil du understrege det, når brugeren svæver over det? Tilføj blot dette herunder:
a:hover { text-decoration: underline; } Du kan også tilføje denne tekstdekoration til aktive links for at sikre, at understregningen ikke forsvinder, når linket klikkes.
5. Lav en Link-knap
Hvis du vil tiltrække mere opmærksomhed på dit link, er det en fantastisk måde at bruge en link-knap på. Denne kræver nogle flere linjer, men vi går over dem hver for sig:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } Ved at inkludere alle fire linktilstande sikrer vi, at knappen ikke forsvinder, når en bruger svæver eller klikker på den. Du kan også indstille forskellige parametre for svever og aktive links, som f.eks. Ændring af knappen eller tekstfarven, for at tilføje en smule pop.
Baggrundsfarven er indstillet med baggrundsfarve og tekstfarve med farve. Padding definerer størrelsen af boks - teksten er polstret med 10px lodret og 25px vandret. Tekstjustering sikrer, at teksten vises i midten af knappen, i stedet for til den ene side. Tekst-dekoration, som vi så i det sidste eksempel, fjerner understregen.
"Display: inline-block" er lidt mere kompliceret. Kort sagt, det lader dig indstille objektets højde og bredde og sikrer, at den starter en ny linje, når den er indsat.
6. Opret en tekstboks
Et almindeligt afsnit er ikke meget spændende. Hvis du vil fremhæve dit opkald til handling eller et andet element på din side, vil du måske gerne kaste en kant omkring den. Sådan gør du det med en tekststreng:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Denne er ret ligetil. Det skaber en solid lilla grænse, 5 pixels bred, omkring et vigtig klasse afsnit. For at lave et afsnit arve disse egenskaber, erklærer du bare det som:
Dit vigtige afsnit her.
Dette vil fungere uanset størrelsen af dit afsnit; en enkelt linje vil få en grænse bredden af siden, en linje høj, og et længere afsnit vil blive omgivet af en større grænse.
Der er mange forskellige grænsestilarter, du kan anvende; i stedet for "solid", prøv "prikket" eller "dobbelt". Bredden kan være "tynd", "medium" eller "tykk." Du kan endda definere tykkelsen af hver enkelt kant individuelt som sådan:
border-width: 5px 8px 3px 9px; Det resulterer i en øverste grænse på 5 pixels, en højre kant på 8, en bund på 3 og en venstre grænsestørrelse på 9 pixels.
7. Center-Align Elements
For en meget almindelig opgave er dette en overraskende utilsigtet ting at gøre med CSS. Når du først har gjort det et par gange, bliver det meget lettere. Der er et par forskellige måder at centrere tingene på.
For et blokelement (normalt et billede) bruger vi marginalattributten:
.center { display: block; margin: auto; } Dette sikrer, at elementet vises som en blok, og at margen på hver side er indstillet automatisk (hvilket gør dem ens). Hvis du vil centrere alle billederne på en given side, kan du endda tilføje "margin: auto" til img-taggen:
img { margin: auto; } For at lære, hvorfor det virker på denne måde, skal du tjekke CSS-boksens modelforklaring på W3C. Her er en kort, grafisk version:
Men hvad nu hvis vi vil centrere tekst? CSS har en særlig metode til at gøre det:
.centertext { text-align: center; } Hvis vi vil bruge "centertext" klassen til at centrere teksten i et givet afsnit, er alt, hvad vi skal gøre, tilføjet den klasse til
tag:
Denne tekst vil blive centreret.
At huske de forskellige trin er imidlertid en anden sag. Du kan måske bogmærke denne side.
8. Justering af polstring
Padding af et element angiver, hvor meget plads der skal være på hver side. Hvis du for eksempel tilføjer 25 pixel af polstring til bunden af et billede, skubbes følgende tekst 25 pixels nedad. Mange elementer kan have polstring, men vi bruger et billede til et eksempel her.
Lad os sige, at du vil have, at hvert billede har 20 pixels polstring på venstre og højre side og 40 pixels øverst og nederst. Der er flere måder, du kan gøre dette på. Den mest grundlæggende:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Der er en kort hånd, vi kan bruge til at præsentere alle disse oplysninger:
img { padding: 40px 25px 40px 25px; } Dette sætter øverste, højre, nederste og venstre paddings til højre nummer. Men vi kan gøre det endnu kortere:
img { padding: 40px 25px } Når du kun bruger to værdier, sættes den første værdi øverst og nederst, mens den anden bliver til venstre og højre.
9. Fremhæv tabellen rækker
CSS kan gøre meget for at få dine borde til at se rigtig godt ud. Tilføjelse af farver, justering af grænser, og gør dit bord lydhør over for mobilskærme er alle nemme. Vi kigger på bare en kølig effekt her: fremhæver tabel rækker, når du mus over dem.
Her er koden du skal bruge til det:
tr:hover { background-color: #ddd; } Nu når du mus over en bordcelle, vil den række ændre farve. For at se nogle af de andre seje ting, du kan gøre, skal du tjekke W3C-siden på fancy CSS-tabeller.
10. Skiftning af billeder mellem gennemsigtig og uigennemsigtig
CSS kan også hjælpe dig med at lave kølige ting med billeder. For eksempel kan det vise billeder på mindre end fuld opacitet (de vises lidt "whited out") og bringe dem til fuld opacitet, når du mus over dem. Sådan gør vi det:
img { opacity: 0.5; filter: alpha(opacity=50); } Attributtet "filter" gør det samme som "uigennemsigtighed", men Internet Explorer 8 og tidligere genkender ikke opacitetsmåling, så det er en god idé at medtage det.
Nu hvor billederne er lidt gennemsigtige, vil vi bringe dem helt uigennemsigtige på en mouseover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Bliv en CSS Master
Med disse CSS-kodeeksempler skal du have en meget bedre ide om, hvordan CSS fungerer. Når du har gennemgået dem alle, vil du bemærke en række mønstre, som du kan anvende til yderligere CSS-kode Lær HTML og CSS med disse trin for trin-øvelser Lær HTML og CSS med disse trin for trin-øvelser Nysgerrige om HTML, CSS og JavaScript? Hvis du tror at du har en evne til at lære at lave hjemmesider lige fra bunden - her er et par gode trinvise vejledninger værd at prøve. Læs mere . Og det er da du ved, at du virkelig er begyndt at blive en CSS-mester.
Og hvis alt dette lyder for kompliceret, husk at du bare tager nogle CSS-skabeloner 11 CSS Template Sites: Start ikke fra bunden! 11 CSS Template Sites: Start ikke fra bunden! Der er tusindvis af gratis CSS-skabeloner tilgængelige online, der alle omfatter moderne designtendenser og teknologier. Du kan bruge dem i deres oprindelige form eller tilpasse dem for at gøre dem til dine egne. Læs mere og modificer dem.
Hvad laver du med CSS? Hvilke eksempler vil du gerne se i fremtiden? Del dine tanker i kommentarerne nedenfor!