10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

Kun olet aloittanut dabbling HTML: ssä, olet todennäköisesti kiinnostunut lisäämään visuaalista lävistystä verkkosivuillesi. CSS on paras tapa tehdä se. CSS: n avulla voit tehdä muutoksia koko sivullesi ilman sisäistä muotoilua.





Tässä on muutamia yksinkertaisia ​​CSS -esimerkkejä, jotka osoittavat, kuinka voit tehdä joitain perustyylisiä muutoksia verkkosivullesi.



1. CSS -peruskoodi helppoon kappaleiden muotoiluun

Muotoilu CSS: llä tarkoittaa, että sinun ei tarvitse määrittää tyyliä aina, kun luot elementin. Voit vain sanoa 'kaikissa kappaleissa pitäisi olla tämä erityinen tyyli' ja olet valmis menemään.





Oletetaan, että haluat jokaisen kappaleen (

, yksi HTML -tunnisteista, jotka kaikkien pitäisi tietää) olla hieman tavallista suurempi. Ja tummanharmaalla tekstillä mustan sijaan.

Aiheeseen liittyviä: HTML -huijaussivu



CSS -koodi tälle on:

p { font-size: 120%; color: dimgray; }

Yksinkertainen! Nyt kun selain tekee kappaleen, teksti perii koon (120 prosenttia normaalista) ja värin (`` himmeä '').



Jos olet utelias käyttämään tavallisia tekstivärejä, tutustu tähän CSS -väriluettelo alkaen Mozilla.

2. CSS -esimerkki merkkikirjan vaihtamisesta

Haluatko luoda nimityksen kappaleille, joiden pitäisi olla pieniä kirjaimia? CSS -näyte tälle olisi:



p.smallcaps { font-variant: small-caps; }

Jos haluat tehdä kappaleen kokonaan pienillä kirjaimilla, käytä hieman erilaista HTML -tagia. Tältä se näyttää:

Your paragraph here.

Pisteen ja luokan nimen lisääminen elementtiin määrittää kyseisen luokan määrittämän alityypin. Voit tehdä tämän tekstillä, kuvilla, linkeillä ja melkein kaikella muulla.

Jos haluat muuttaa tekstijoukon tiettyyn tapaukseen, käytä näitä CSS -koodiesimerkkejä:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Viimeinen laittaa jokaisen lauseen ensimmäisen kirjaimen isolla alkukirjaimella.

Tyylimuutokset eivät rajoitu kappaleisiin. Linkille voidaan määrittää neljä eri väriä: sen vakioväri, vierailtu väri, leijuva väri ja aktiivinen väri (joka näkyy, kun napsautat sitä). Käytä tätä CSS -koodimallia:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Linkkien kohdalla jokaista a -kirjainta seuraa kaksoispiste, ei piste.

Jokainen näistä ilmoituksista muuttaa linkin väriä tietyssä kontekstissa. Linkin luokkaa ei tarvitse muuttaa, jotta se voi vaihtaa väriä.

Vaikka alleviivattu teksti osoittaa selvästi linkin, se näyttää joskus mukavammalta poistaa alleviivaus. Tämä saavutetaan tekstinkoriste-attribuutilla. Tämä CSS -esimerkki näyttää, miten linkkien alleviivat poistetaan:

a { text-decoration: none; }

Kaikki linkkitagin ('a') sisältävät alleviivatut. Haluatko alleviivata sen, kun käyttäjä vie sen päälle? Lisää vain:

a:hover { text-decoration: underline; }

Voit myös lisätä tämän tekstin koristelun aktiivisiin linkkeihin varmistaaksesi, että alleviivaus ei katoa, kun linkkiä napsautetaan.

Haluatko saada enemmän huomiota linkkiisi? Linkki -painike on hyvä tapa edetä asiassa. Tämä vaatii vielä muutaman rivin:

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; }

Selitetään tämä CSS -mallikoodi.

Kaikkien neljän linkin tilan sisällyttäminen varmistaa, että painike ei katoa, kun käyttäjä siirtää sen tai napsauttaa sitä. Voit myös asettaa erilaisia ​​parametreja hiiren ja aktiivisille linkeille, esim. Painikkeen tai tekstin värin muuttamiseksi.

Taustaväri asetetaan taustavärillä ja tekstin väri värillä. Täyte määrittää laatikon koon-teksti on pehmustettu 10 kuvapistettä pystysuunnassa ja 25 pikseliä vaakasuunnassa.

Tekstin tasaus varmistaa, että teksti näkyy painikkeen keskellä eikä toiselle puolelle. Tekstin koristelu, kuten edellisessä esimerkissä, poistaa alleviivauksen.

missä on muototila iPhonessa 7

CSS-koodi 'display: inline-block' on hieman monimutkaisempi. Lyhyesti sanottuna sen avulla voit asettaa kohteen korkeuden ja leveyden. Se myös varmistaa, että se aloittaa uuden rivin, kun se lisätään.

6. CSS -esimerkkikoodi tekstiruudun luomiseen

Yksinkertainen kappale ei ole kovin jännittävä. Jos haluat korostaa elementin sivulla, voit lisätä reunuksen. Näin voit tehdä sen yksinkertaisella CSS -koodilla:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Tämä on suoraviivainen. Se luo kiinteän violetin viiden pikselin leveän reunuksen minkä tahansa tärkeän kappaleen ympärille. Jos haluat saada kappaleen perimään nämä ominaisuudet, ilmoita se vain seuraavasti:

Your important paragraph here.

Tämä toimii riippumatta siitä, kuinka suuri kappale on.

Voit käyttää monia erilaisia ​​reunustyylejä; 'kiinteän' sijaan kokeile 'pisteviiva' tai 'kaksinkertainen'. Samaan aikaan leveys voi olla 'ohut', 'keskikokoinen' tai 'paksu'. CSS -koodi voi jopa määrittää jokaisen reunan paksuuden erikseen seuraavasti:

border-width: 5px 8px 3px 9px;

Tuloksena on viiden pikselin yläreuna, kahdeksan oikean reunan, kolmen alareunan ja yhdeksän pikselin vasemman reunan koko.

7. Keskitä elementit CSS-peruskoodin kanssa

Yleisessä tehtävässä CSS -koodilla varustettujen elementtien keskittäminen on yllättävän epäintuitiivista. Kun olet kuitenkin tehnyt sen muutaman kerran, siitä tulee paljon helpompaa. Sinulla on pari eri tapaa keskittää asiat.

Käytä lohkoelementtiä (yleensä kuvaa) marginaalimääritystä:

.center { display: block; margin: auto; }

Tämä varmistaa, että elementti näytetään lohkona ja että marginaali asetetaan automaattisesti kummallekin puolelle. Jos haluat keskittää kaikki tietyn sivun kuvat, voit jopa lisätä marginaalin: auto img -tagiin:

img { margin: auto; }

Jos haluat tietää, miksi se toimii tällä tavalla, tutustu CSS -laatikkomallin selitys W3C: ssä .

Mutta entä jos haluat keskittää tekstin CSS: llä? Käytä tätä CSS -mallia:

.centertext { text-align: center; }

Haluatko käyttää keskitekstiluokkaa tekstin keskittämiseen kappaleeseen? Lisää vain tämä luokka

tag:

This text will be centered.

8. CSS -esimerkkejä pehmusteen säätämisestä

Elementin pehmuste määrittää, kuinka paljon tilaa on kummallakin puolella. Jos esimerkiksi lisäät 25 pikseliä pehmustetta kuvan alaosaan, seuraava teksti työnnetään 25 pikseliä alaspäin. Monilla elementeillä voi olla pehmuste, ei vain kuvilla.

Oletetaan, että haluat, että jokaisessa kuvassa on 20 pikselin pehmuste vasemmalla ja oikealla puolella ja 40 pikseliä ylä- ja alareunassa. Yksinkertaisin CSS -koodin suoritus tähän on:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

On kuitenkin lyhyempi CSS -ohje, joka esittää kaikki nämä tiedot yhdellä rivillä:

img { padding: 40px 25px 40px 25px; }

Tämä asettaa ylä-, oikean-, ala- ja vasemman pehmusteet oikeaan numeroon. Vain kahden arvon (40 ja 25) ansiosta voit lyhentää sitä vieläkin:

img { padding: 40px 25px }

Kun käytät vain kahta arvoa, ensimmäinen arvo asetetaan ylä- ja alareunaan ja toinen vasemmalle ja oikealle.

9. Korosta taulukon rivit CSS -koodauksella

CSS -koodi saa taulukot näyttämään paljon paremmilta kuin oletusruudukot. Värien lisääminen, reunojen säätäminen ja pöydän mukauttaminen mobiilinäyttöihin on helppoa. Tämä yksinkertainen CSS -esimerkki näyttää, kuinka voit korostaa taulukon rivit, kun viet hiiren niiden päälle.

tr:hover { background-color: #ddd; }

Nyt kun siirrät hiiren taulukon solun päälle, rivi muuttaa väriä. Jos haluat nähdä muita hienoja asioita, joita voit tehdä, tutustu W3C -sivu hienoilla CSS -taulukoilla .

10. Esimerkki CSS: stä kuvien siirtämiseksi läpinäkyvän ja läpinäkymättömän välillä

CSS -koodi voi myös auttaa sinua tekemään hienoja asioita kuvilla. Tässä on CSS -esimerkki kuvien näyttämisestä vähemmän kuin täydellä peittävyydellä, joten ne näyttävät hieman 'valkeilta'. Kun viet hiiren kuvien päälle, ne ovat täysin läpinäkymättömiä:

img { opacity: 0.5; filter: alpha(opacity=50); }

Suodatin -määrite tekee saman kuin opasiteetti, mutta Internet Explorer 8 ja aiemmat eivät tunnista opasiteetin mittausta. Vanhemmille selaimille se on hyvä sisällyttää.

Nyt kun kuvat ovat hieman läpinäkyviä, voit tehdä niistä täysin läpinäkyviä hiiren osoittimella:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 CSS -esimerkkiä lähdekoodilla

Näiden CSS -koodiesimerkkien avulla sinulla pitäisi olla paljon parempi käsitys CSS: n toiminnasta. CSS -malleja voi auttaa, mutta raaka -aineiden ymmärtäminen on elintärkeää.

Nämä 10 helppoa CSS -koodiesimerkkiä:

  1. Helppo kappaleen muotoilu
  2. Vaihda kirjainkoko
  3. Vaihda linkin värit
  4. Poista linkin alleviivat
  5. Tee linkki -painike
  6. Luo tekstiruutu
  7. Kohdista elementit keskelle
  8. Säädä pehmuste
  9. Korosta taulukon rivit
  10. Tee kuvista läpinäkymättömiä

Kun tarkistat ne uudelleen, huomaat useita malleja, joita voit soveltaa tulevaan koodiin. Ja silloin tiedät, että olet todella alkanut tulla CSS -mestariksi. Mutta sen muistaminen voi olla vaikeaa. Voit lisätä tämän sivun kirjanmerkkeihin tulevaa käyttöä varten.

Jaa Jaa Tweet Sähköposti Essential CSS3 Properties -huijausarkki

Hallitse olennainen CSS -syntaksi CSS3 -ominaisuuksien huijausarkin avulla.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Web-suunnittelu
  • CSS
  • Käsikirjoitus
Kirjailijasta Christian Cawley(1510 artikkelia julkaistu)

Varaeditori turvallisuudesta, Linuxista, DIY -ohjelmoinnista ja teknisistä selityksistä sekä todella hyödyllinen podcast -tuottaja, jolla on laaja kokemus työpöytä- ja ohjelmistotuesta. Christian on Linux Format -lehden toimittaja, ja hän on Raspberry Pi -piirtäjä, Lego -ystävä ja retropelien ystävä.

Lisää Christian Cawleyltä

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi