10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

Kui olete hakanud HTML -i näpistama, olete tõenäoliselt huvitatud oma veebilehtedele visuaalse lisamise lisamisest. CSS on selleks parim viis. CSS võimaldab teil rakendada muudatusi kogu oma lehel ilma sisemisele stiilile lootmata.





Siin on mitu lihtsat CSS -i näidet, mis näitavad teile, kuidas oma veebisaidil stiilimuutusi teha.



1. Põhiline CSS -kood lõikude lihtsaks vormindamiseks

Stiilimine CSS -iga tähendab, et te ei pea stiili iga kord elemendi loomisel määrama. Võite lihtsalt öelda, et „kõigil lõikudel peaks olema selline stiil” ja olete valmis.



Oletame, et soovite iga lõiku (

, üks HTML -märgenditest, mida kõik peaksid teadma), et see oleks tavalisest pisut suurem. Ja tumehalli tekstiga, musta asemel.

Seotud: HTML -i petuleht



Selle CSS -kood on järgmine:

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

Lihtne! Nüüd, kui brauser renderdab lõigu, pärib tekst suuruse (120 protsenti normaalsest) ja värvi („hämar”).



Kui soovite teada, milliseid lihtteksti värve saate kasutada, vaadake seda CSS värviloend Mozillast.

2. CSS -i näide tegelaskuju muutmiseks

Kas soovite lõikudele määrata väikese tähega tähise? CSS -i näidis oleks järgmine:



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

Täielikult väikeste tähestikega lõigu tegemiseks kasutage veidi erinevat HTML -märgendit. See näeb välja selline:

Your paragraph here.

Punkti ja klassi nime lisamine elemendile määrab selle elemendi alamtüübi, mille on määratlenud klass. Seda saate teha teksti, piltide, linkide ja peaaegu kõige muuga.

Kui soovite muuta tekstikomplekti konkreetseks juhtumiks, kasutage neid CSS -koodi näiteid.

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

Viimane kirjutab iga lause esimese tähe suurtähega.

Stiilimuudatused ei piirdu lõikudega. Lingile saab määrata neli erinevat värvi: selle standardvärv, külastatud värv, hõljukivärv ja aktiivne värv (mida see klõpsates kuvab). Kasutage seda CSS -koodi näidist:

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

Linkidega järgneb igale a -le koolon, mitte punkt.

Kõik need deklaratsioonid muudavad lingi värvi konkreetses kontekstis. Lingi klassi muutmiseks pole vaja selle klassi muuta.

Kuigi allajoonitud tekst viitab selgelt lingile, tundub mõnikord allajoonimise lõpetamine kenam. See saavutatakse atribuudiga „teksti kaunistamine“. See CSS -i näide näitab, kuidas linkidelt allajooned eemaldada.

a { text-decoration: none; }

Kõik, millel on link („a”), jääb allajoonimata. Kas soovite sellele alla kriipsutada, kui kasutaja selle kohal hõljub? Lihtsalt lisage:

a:hover { text-decoration: underline; }

Selle teksti kaunistamise võiksite lisada ka aktiivsetele linkidele, et lingi klõpsamisel allajoonimine ei kaoks.

Kas soovite oma lingile rohkem tähelepanu tõmmata? Lingi nupp on suurepärane viis selle saavutamiseks. See nõuab veel mõnda rida:

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

Selgitame seda CSS -i näidiskoodi.

Kõigi nelja lingiseisundi kaasamine tagab, et nupp ei kao, kui kasutaja selle hõljutab või sellel klõpsab. Samuti saate hõljukite ja aktiivsete linkide jaoks määrata erinevaid parameetreid, nt muuta nuppu või teksti värvi.

Tausta värv on seatud taustavärviga ja teksti värv värviga. Täidis määrab kasti suuruse-tekst on polsterdatud vertikaalselt 10 ja horisontaalselt 25 pikslit.

Teksti joondamine tagab, et tekst kuvatakse nupu keskel, mitte ühele küljele. Teksti kaunistamine, nagu viimases näites, eemaldab allajoonimise.

kus on portreerežiim iPhone 7 -s

CSS-koodi 'display: inline-block' on natuke keerulisem. Lühidalt, see võimaldab teil määrata objekti kõrguse ja laiuse. Samuti tagab see, et see alustab sisestamisel uut rida.

6. CSS -i näidiskood tekstikasti loomiseks

Lihtne lõik pole eriti põnev. Kui soovite oma lehel mõne elemendi esile tõsta, võiksite lisada äärise. Lihtsa CSS -koodi jada abil saate seda teha järgmiselt.

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

See on lihtne. See loob kindla lilla äärise, viie piksli laiuse, mis tahes olulise lõigu ümber. Kui soovite, et lõik need omadused päriks, deklareerige see lihtsalt järgmiselt.

Your important paragraph here.

See toimib olenemata sellest, kui suur see lõik on.

Saate rakendada palju erinevaid äärisstiile; proovige „tahke” asemel „punktiir” või „topelt”. Vahepeal võib laius olla „õhuke”, „keskmine” või „paks”. CSS -kood võib isegi määrata iga piiri paksuse individuaalselt, näiteks järgmiselt:

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

Selle tulemuseks on ülemine äär viis pikslit, parempoolne äär kaheksa, alumine kolm ja vasak äär üheksa pikslit.

7. Tsentreerige elemendid CSS-põhikoodiga

Tavalise ülesande jaoks on CSS -koodiga elementide tsentreerimine üllatavalt ebaintuitiivne. Kui olete seda paar korda teinud, muutub see palju lihtsamaks. Teil on paar erinevat viisi asjade tsentreerimiseks.

Plokielemendi (tavaliselt pildi) puhul kasutage atribuuti margin:

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

See tagab, et element kuvatakse plokina ja et mõlema külje veerised seatakse automaatselt. Kui soovite kõik lehel olevad pildid tsentreerida, võite isegi lisada märgendile img „margin: auto”:

img { margin: auto; }

Et teada saada, miks see nii töötab, vaadake CSS -i kasti mudeli selgitus W3C -s .

Aga mis siis, kui soovite teksti CSS -iga tsentreerida? Kasutage seda CSS -i näidist:

.centertext { text-align: center; }

Kas soovite kasutada teksti 'centertext' teksti lõigu tsentreerimiseks? Lihtsalt lisage see klass

silt:

This text will be centered.

8. CSS -i näited polstri reguleerimiseks

Elemendi polster määrab, kui palju ruumi peaks olema mõlemal küljel. Näiteks kui lisate pildi alaossa 25 pikslit polsterdust, lükatakse järgmine tekst 25 pikslit alla. Paljudel elementidel võib olla polster, mitte ainult piltidel.

Oletame, et soovite, et igal pildil oleks vasakul ja paremal küljel 20 pikslit ning üleval ja all 40 pikslit. Selle jaoks on kõige lihtsam CSS -koodi täitmine järgmine:

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

Siiski on lühem CSS -juhis, mis esitab kogu selle teabe ühel real:

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

See määrab ülemise, parema, alumise ja vasaku polstri õigele numbrile. Tänu ainult kahele väärtusele (40 ja 25) saate selle veelgi lühemaks muuta:

img { padding: 40px 25px }

Kui kasutate ainult kahte väärtust, määratakse esimene väärtus ülemisele ja alumisele ning teine ​​vasakule ja paremale.

9. Tõstke CSS -kodeeringuga esile tabeliridad

CSS -kood muudab tabelid palju ilusamaks kui vaikevõrgud. Värvide lisamine, ääriste reguleerimine ja laua reageerimine mobiiliekraanidele on lihtne. See lihtne CSS -näide näitab, kuidas tabeli read esile tõsta, kui liigute nende kohal.

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

Nüüd, kui viite hiire tabeli lahtri kohale, muutub see rida värvi. Kui soovite näha mõnda muud lahedat asja, mida saate teha, vaadake W3C leht uhketel CSS -tabelitel .

10. Näide CSS -st piltide nihutamiseks läbipaistva ja läbipaistmatu vahel

CSS -kood võib aidata teil ka piltidega lahedaid asju teha. Siin on CSS -i näide piltide kuvamiseks vähem kui täielik läbipaistmatus, nii et need tunduvad pisut 'valged'. Kui viite piltide kohal hiirekursori, on need täielikult läbipaistmatud.

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

Atribuut „filter” teeb sama asja nagu „läbipaistmatus”, kuid Internet Explorer 8 ja varasemad versioonid ei tuvasta läbipaistmatuse mõõtmist. Vanemate brauserite puhul on hea mõte see lisada.

Nüüd, kui pildid on veidi läbipaistvad, saate need hiirekursori abil täielikult läbipaistmatuks muuta.

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

10 CSS -i näidet lähtekoodiga

Nende CSS -koodinäidete abil peaks teil olema CSS -i toimimisest palju parem ettekujutus. CSS -mallid võib aidata, kuid toorainete mõistmine on ülioluline.

Need 10 lihtsat CSS -koodi näidet on kokku võetud:

  1. Lihtne lõigu vormindamine
  2. Muuda kirja tähestikku
  3. Muutke lingi värve
  4. Eemaldage lingi alajooned
  5. Tehke lingi nupp
  6. Looge tekstikasti
  7. Joondage elemendid keskele
  8. Reguleerige polsterdust
  9. Tõstke esile tabeli read
  10. Muutke pildid läbipaistmatuks

Neid uuesti üle vaadates märkate mitmeid mustreid, mida saate tulevase koodi jaoks rakendada. Ja just siis tead, et oled tõesti hakanud CSS -i meistriks saama. Kuid selle meenutamine võib olla raske. Võib -olla soovite selle lehe edaspidiseks kasutamiseks järjehoidjatesse lisada.

Jaga Jaga Piiksuma E -post Oluliste CSS3 atribuutide petuleht

Õppige olulist CSS -i süntaksi meie CSS3 atribuutide petulehega.

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebidisain
  • CSS
  • Skriptimine
Autori kohta Christian Cawley(Avaldatud 1510 artiklit)

Turvalisuse, Linuxi, isetegemise, programmeerimise ja tehniliste selgituste redaktori asetäitja ning tõeliselt kasulik podcastide tootja, kellel on laialdased kogemused laua- ja tarkvaratoes. Ajakirja Linux Format kaastööline Christian on Raspberry Pi näpistaja, Lego armastaja ja retromängude fänn.

Veel Christian Cawley'lt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin