10 enkle CSS-kodeeksempler du kan lære om 10 minutter

Når du har begynt å dabble i HTML 17 Enkle HTML-kodeeksempler kan du lære om 10 minutter 17 Enkle HTML-kodeeksempler du kan lære om 10 minutter Hvis du kjenner de følgende 17 HTML-kodene (og de ekstra få som går med dem), vil du vil kunne lage en grunnleggende nettside fra bunnen av eller justere koden som er opprettet av en app som ... Les mer, du vil nok være interessert i å legge til mer strøm til websidene dine. CSS er den beste måten å gjøre det på. CSS lar deg bruke endringer på tvers av hele siden uten å bruke mange inline HTML-stiler 9 Feil du ikke bør gjøre når du bygger en webside 9 Feil du ikke bør gjøre når du bygger en webside Disse følgende HTML-kodingsfeilene er enkle å gjør, men hvis du leder dem av tidligere heller enn senere, vil siden din se bedre ut, være lettere å vedlikeholde og fungere som du vil. Les mer .

Vi går over hvordan du lager et inline-stilark slik at du kan øve dine CSS-ferdigheter, og så beveger vi deg over 10 enkle eksempler som vil vise deg hvordan du gjør noen grunnleggende ting. Derfra er fantasien din grense!

Hvis du vil ha en litt mer teknisk introduksjon, må du huske å sjekke ut 5 Babysteg for å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Babysteg for å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Babysteg for å lære CSS og bli en Kick-Ass CSS Sorcerer CSS er de mest viktige endringswebsidene som har sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer .

Inline Stylesheet

Hvert HTML-dokument inneholder en stikkord. Det hoveden er hvor ditt inline CSS stilark går. Slik ser det ut:

 Alle dine CSS-erklæringer. 

Sett det øverst i dokumentet ditt, fyll det med CSS, og du er klar til å gå.

1. Enkel avsnittsformatering

Den kule tingen om styling med CSS er at du ikke trenger å spesifisere en stil hver gang du lager et element. Du kan bare si “alle avsnittene skal ha denne stilen” og du er god til å gå. Her er et eksempel på hvordan du kan gjøre det.

La oss si at du vil ha hvert avsnitt (det er alt med en

HTML-kode Topp 11 HTML-merker Hver Blogger og Nettstedseier må vite Topp 11 HTML-merker Hver Blogger og Nettstedseier må vite Internett har mange språk og er kodet i flere forskjellige. Det ene språket, men det kan bli funnet over og har eksistert siden oppfinnelsen av nettsider, er ... Les mer) på siden din for å være litt større enn vanlig. Og mørkegrå, i stedet for svart. Slik gjør du det med CSS:

p skriftstørrelse: 120%; farge: dimgray; 

Det er alt der er til det. Nå, når nettleseren gjør en

stykke, teksten vil arve størrelsen (120 prosent av normal) og fargen (“dimgray”).

Hvis du er nysgjerrig på hvilke enkle farger du kan bruke, sjekk ut denne CSS-fargelisten fra Mozilla.

2. Endre Letter Case

Ok, så nå som vi har sett hvordan vi gjør en endring i hvert avsnitt, la oss se på hvordan vi kan være litt mer selektive. La oss lage en betegnelse for avsnitt som skal være i små caps. Slik gjør vi det:

p.smallcaps font-variant: small-caps; 

For å lage et avsnitt som er helt i små bokser, bruker vi en litt annen HTML-kode. Slik ser det ut:

Ditt avsnitt her.

Som du kan se, legger du til en prikk og et klassenavn til et bestemt element i CSS, spesifiserer en undertype av det elementet som er definert av en klasse. Du kan gjøre dette med tekst, bilder, koblinger og omtrent alt annet.

Hvis du vil endre saken av et sett med tekst til et bestemt tilfelle, kan du bruke disse CSS-linjene:

tekst-transformer: store bokstaver; tekst-transformer: små bokstaver; tekst-transformere: kapitalisere;

Den siste kapitaliserer første bokstav i hver setning.

3. Endre Linkfarger

La oss prøve å endre stilen til noe annet enn et fullstendig avsnitt. Det er fire forskjellige farger en lenke kan tilordnes: Standardfargen, den besøkte fargen, dens svingerfarve og dens aktive farge (som den viser mens du klikker på den). Slik kan vi endre disse:

a: lenke farge: grå;  a: besøkt farge: grønn;  a: svever farge: rebeccapurple;  a: aktiv farge: teal; 

Legg merke til at hver “en” er etterfulgt av en kolon, ikke en prikk.

Hver av disse erklæringene endrer fargen på en lenke i en bestemt sammenheng. Det er ikke nødvendig å endre klassen av en lenke for å få den til å skifte farge. Det vil alle bli bestemt av brukeren og tilstanden til lenken.

4. Fjern link understreker

Mens understreket tekst tydelig viser en lenke, ser det noen ganger bedre ut å skrap den understreken. Dette oppnås med “text-decoration” Egenskap. Slik fjerner du understreker på lenker:

en tekst-dekorasjon: ingen; 

Alt med linken (“en”) -merket vil ikke være understreket. Vil du understreke det når brukeren svinger over det? Bare legg til dette under:

a: svever tekst-dekorasjon: understreke; 

Du kan også legge til denne tekstdekorasjonen til aktive lenker for å sikre at underlinjen ikke forsvinner når linken klikkes.

5. Lag en Link-knapp

Hvis du vil tiltrekke mer oppmerksomhet til koblingen din, kan du bruke en koblingsknapp til å gå om det. Denne krever noen flere linjer, men vi går over dem hver for seg:

a: link, a: besøkt, a: svever, a: aktiv bakgrunnsfarve: grønn; farge: hvit; polstring: 10px 25px; tekst-align: center; tekst-dekorasjon: ingen; display: inline-block; 

Ved å inkludere alle fire koblingslandene sikrer vi at knappen ikke forsvinner når en bruker svinger eller klikker på den. Du kan også angi forskjellige parametere for svever og aktive koblinger, for eksempel å endre knapp eller tekstfarge, for å legge til litt pop.

Bakgrunnsfargen er satt med bakgrunnsfarge og tekstfarge med farge. Padding definerer størrelsen på boksen - teksten er polstret med 10px vertikalt og 25px horisontalt. Tekstjustering sikrer at teksten vises midt på knappen, i stedet for til den ene siden. Tekst-dekorasjon, som vi så i det siste eksemplet, fjerner understreken.

“skjerm: inline-blokk” er litt mer komplisert. Kort sagt, det lar deg sette høyde og bredde på objektet, og sikrer at det starter en ny linje når den er satt inn.

6. Lag en tekstboks

Et vanlig avsnitt er ikke veldig spennende. Hvis du vil markere handlingen din eller et annet element på siden din, vil du kanskje kaste en kant rundt den. Slik gjør du det med en streng tekst:

p.important border-style: solid; kantbredde: 5px; border-farge: lilla; 

Denne er ganske grei. Den skaper en solid lilla ramme, 5 piksler bred, rundt noen viktige klasse avsnitt. For å lage et avsnitt arve disse egenskapene, erklærer du bare slik:

Ditt viktige avsnitt her.

Dette vil fungere uansett størrelsen på avsnittet ditt; en enkelt linje vil få en kantlinje bredden på siden, en linje høy, og et lengre avsnitt vil bli omgitt av en større kant.

Det er mange forskjellige grensestiler du kan søke på; i stedet for “fast,” prøve “stiplede” eller “dobbelt.” Og bredden kan være “tynn,” “medium,” eller “tykk.” Du kan til og med definere tykkelsen på hver kant enkeltvis, slik:

kantbredde: 5px 8px 3px 9px;

Det resulterer i en toppgrense på 5 piksler, en høyre kant på 8, en bunn på 3 og en venstre kantlinjestørrelse på 9 piksler.

7. Center-Align Elements

For en svært vanlig oppgave er dette en overraskende unintuitiv ting å gjøre med CSS. Når du har gjort det et par ganger, blir det mye lettere. Det er et par forskjellige måter å sentrere ting på.

For et blokkelement (vanligvis et bilde) bruker vi marginalattributtet:

.senter display: block; margin: auto; 

Dette sikrer at elementet vises som en blokk, og at marginen på hver side er satt automatisk (noe som gjør dem like). Hvis du vil sentrere alle bildene på en gitt side, kan du til og med legge til “margin: auto” til img-taggen:

img margin: auto; 

For å lære hvorfor det virker på denne måten, sjekk ut CSS-boksemodellforklaringen på W3C. Her er en kort, grafisk versjon:

Men hva om vi vil sentrere tekst? CSS har en bestemt metode for å gjøre det:

.centertext text-align: center; 

Hvis vi vil bruke “centertext” klasse for å sentrere teksten i et gitt avsnitt, er alt vi trenger å gjøre, å legge den klassen til

stikkord:

Denne teksten vil bli sentrert.

Å huske de forskjellige trinnene er imidlertid en annen sak. Du vil kanskje bokmerke denne siden.

8. Justering av polstring

Padding av et element angir hvor mye plass som skal være på hver side. Hvis du for eksempel legger til 25 piksler med polstring på bunnen av et bilde, blir følgende tekst dyttet 25 piksler ned. Mange elementer kan ha polstring, men vi bruker et bilde for et eksempel her.

La oss si at du vil at hvert bilde skal ha 20 piksler med polstring på venstre og høyre side, og 40 piksler på toppen og bunnen. Det er flere måter du kan gjøre dette på. Den mest grunnleggende:

img padding-top: 40px; polstring-høyre: 25px; polstring-bunn: 40px; polstring-venstre: 25px; 

Det er en kort hånd vi kan bruke til å presentere all denne informasjonen:

img polstring: 40px 25px 40px 25px; 

Dette setter topp, høyre, bunn og venstre paddings til høyre nummer. Men vi kan gjøre det enda kortere:

img polstring: 40px 25px

Når du bare bruker to verdier, er den første verdien satt for topp og bunn, mens den andre vil være venstre og høyre.

9. Marker tabellrader

CSS kan gjøre mye for å gjøre bordene dine ser veldig fine ut. Å legge til farger, justere grenser, og gjøre bordet ditt lydhørt mot mobilskjermbilder, er enkelt. Vi ser bare en kul effekt her: Fremhever tabellranger når du musen over dem.

Her er koden du trenger for det:

tr: svever bakgrunnsfarge: #ddd; 

Nå når du mus over en tabellcelle, vil den raden skifte farge. For å se noen av de andre kule tingene du kan gjøre, sjekk ut W3C-siden på fancy CSS-tabeller.

10. Skifting av bilder mellom gjennomsiktig og ugjennomsiktig

CSS kan hjelpe deg med å gjøre kule ting med bilder også. For eksempel kan det vise bilder på mindre enn full opasitet (de vises litt “whited ut”) og få dem til full ugjennomtrengelighet når du musen over dem. Slik gjør vi det:

img opacity: 0.5; filter: alfa (opasitet = 50); 

De “filter” attributtet gjør det samme som “opasitet,” men Internet Explorer 8 og tidligere gjenkjenner ikke opacitetsmåling, så det er en god ide å inkludere det.

Nå som bildene er litt gjennomsiktige, tar vi dem helt ugjennomsiktig på en mouseover:

img: hover opacity: 1.0; filter: alfa (opasitet = 100); 

Bli en CSS Master

Med disse CSS kode eksemplene, bør du ha en mye bedre ide om hvordan CSS fungerer. Når du har gått gjennom dem alle, vil du legge merke til en rekke mønstre som du kan søke på ytterligere CSS-kode. Lær HTML og CSS med disse trinnvise opplæringsprogrammene. Lær HTML og CSS med disse trinnvise opplæringsprogrammene. Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer . Og da vet du at du virkelig har begynt å bli en CSS-mester.

Og hvis alt dette høres for komplisert, husk at du bare tar noen CSS-maler 11 CSS Template Sites: Ikke start fra begynnelsen! 11 CSS-malingssider: Ikke start fra begynnelsen! Det finnes tusenvis av gratis CSS-maler tilgjengelig online, som alle omfatter moderne designtrender og teknologier. Du kan bruke dem i sin opprinnelige form, eller tilpasse dem for å gjøre dem dine egne. Les mer og endre dem.

Hva gjør du med CSS? Hvilke eksempler vil du se i fremtiden? Del dine tanker i kommentarene nedenfor!

Utforsk mer om: CSS, Webdesign.