10 paprastų CSS kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

10 paprastų CSS kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

Kai tik pradėsite domėtis HTML, tikriausiai būsite suinteresuoti savo tinklalapiuose pridėti daugiau vizualių bruožų. CSS yra geriausias būdas tai padaryti. CSS leidžia taikyti pakeitimus visame puslapyje, nesiremiant tiesioginiu stiliumi.





Pateikiame kelis paprastus CSS pavyzdžius, kurie parodys, kaip atlikti pagrindinius tinklalapio stiliaus pakeitimus.



1. Pagrindinis CSS kodas paprastam pastraipų formatavimui

Stilius naudojant CSS reiškia, kad kiekvieną kartą kuriant elementą nereikia nurodyti stiliaus. Galite tiesiog pasakyti, kad „visos pastraipos turi būti tokio stiliaus“, ir viskas gerai.





Tarkime, kad norite kiekvienos pastraipos (

, viena iš HTML žymų, kurią turėtų žinoti visi), kad būtų šiek tiek didesnė nei įprasta. Ir su tamsiai pilku tekstu, o ne juodu.

Susijęs: „HTML Cheat Sheet“



Tam skirtas CSS kodas:

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

Paprasta! Dabar, kai naršyklė pateikia pastraipą, tekstas paveldės dydį (120 procentų įprasto) ir spalvą („tamsiai pilka“).



Jei jums įdomu, kokias paprasto teksto spalvas galite naudoti, patikrinkite tai CSS spalvų sąrašas iš „Mozilla“.

2. CSS simbolių raidžių keitimo pavyzdys

Norite sukurti pastraipų, kurios turėtų būti mažomis raidėmis, žymėjimą? Tam skirtas CSS pavyzdys:



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

Jei norite sukurti pastraipą, kurioje yra tik mažos raidės, naudokite šiek tiek kitokią HTML žymą. Štai kaip tai atrodo:

Your paragraph here.

Pridedant tašką ir klasės pavadinimą prie elemento, nurodomas to elemento potipis, apibrėžtas klasės. Tai galite padaryti naudodami tekstą, vaizdus, ​​nuorodas ir beveik viską.

Jei norite pakeisti teksto rinkinį į konkretų atvejį, naudokite šiuos CSS kodo pavyzdžius:

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

Paskutiniame rašoma didžioji kiekvieno sakinio raidė.

Stiliaus pakeitimai neapsiriboja pastraipomis. Nuorodai galima priskirti keturias skirtingas spalvas: standartinę spalvą, aplankytą spalvą, užvedimo spalvą ir aktyvią spalvą (kuri rodoma spustelėjus). Naudokite šį CSS kodo pavyzdį:

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

Naudojant nuorodas, po kiekvieno „a“ eina taškas, o ne dvitaškis.

Kiekviena iš šių deklaracijų keičia nuorodos spalvą tam tikrame kontekste. Nereikia keisti nuorodos klasės, kad ji pakeistų spalvą.

Nors pabrauktas tekstas aiškiai nurodo saitą, kartais atrodo geriau išbraukti tą pabraukimą. Tai pasiekiama naudojant „teksto dekoravimo“ atributą. Šiame CSS pavyzdyje parodyta, kaip pašalinti pabraukimus iš nuorodų:

a { text-decoration: none; }

Viskas, kas turi nuorodos („a“) žymą, nebus pabraukta. Norite jį pabrėžti, kai vartotojas perkelia pelės žymeklį ant jo? Tiesiog pridėkite:

a:hover { text-decoration: underline; }

Taip pat galite pridėti šį teksto dekoravimą prie aktyvių nuorodų, kad paspaudus nuorodą neišnyktų pabraukimas.

Norite pritraukti daugiau dėmesio į savo nuorodą? Nuorodos mygtukas yra puikus būdas tai padaryti. Tam reikia dar kelių eilučių:

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

Paaiškinkime šį CSS pavyzdžio kodą.

Įtraukus visas keturias nuorodų būsenas užtikrinama, kad mygtukas neišnyktų, kai vartotojas jį pakelia arba spustelėja. Taip pat galite nustatyti skirtingus slinkties ir aktyvių nuorodų parametrus, pvz., Pakeisti mygtuko ar teksto spalvą.

Fono spalva nustatyta su fono spalva, o teksto spalva-su spalva. Užpildymas apibrėžia langelio dydį --- tekstas yra padengtas 10 pikselių vertikaliai ir 25 taškų horizontaliai.

Teksto lygiavimas užtikrina, kad tekstas būtų rodomas mygtuko centre, o ne vienoje pusėje. Teksto dekoravimas, kaip ir paskutiniame pavyzdyje, pašalina pabraukimą.

nežinau ko ieškoti

CSS kodas „display: inline-block“ yra šiek tiek sudėtingesnis. Trumpai tariant, tai leidžia nustatyti objekto aukštį ir plotį. Tai taip pat užtikrina, kad įterpus ji pradės naują eilutę.

6. Teksto laukelio kūrimo CSS pavyzdinis kodas

Paprasta pastraipa nėra labai įdomi. Jei norite paryškinti savo puslapio elementą, galbūt norėsite pridėti kraštą. Štai kaip tai padaryti naudojant paprasto CSS kodo eilutę:

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

Šis yra paprastas. Aplink bet kurią svarbios klasės pastraipą sukuriama vientisa purpurinė, penkių pikselių pločio kraštinė. Jei norite, kad pastraipa paveldėtų šias savybes, tiesiog deklaruokite ją taip:

Your important paragraph here.

Tai veiks nepriklausomai nuo pastraipos dydžio.

Galite taikyti daug skirtingų sienų stilių; vietoj „kietas“ pabandykite „taškuotas“ arba „dvigubas“. Tuo tarpu plotis gali būti „plonas“, „vidutinis“ arba „storas“. CSS kodas netgi gali apibrėžti kiekvienos kraštinės storį atskirai, taip:

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

Dėl to viršutinė kraštinė yra penkių pikselių, dešinė - aštuonių, apatinė - trijų, o kairioji - devynių pikselių.

7. Centruokite elementus su pagrindiniu CSS kodu

Įprastos užduoties atveju centravimo elementai su CSS kodu yra stebėtinai neintuityvūs. Tačiau kai tai padarysite kelis kartus, bus daug lengviau. Turite keletą skirtingų būdų sutelkti dėmesį į dalykus.

Bloko elementui (dažniausiai vaizdui) naudokite paraštės atributą:

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

Tai užtikrina, kad elementas būtų rodomas kaip blokas ir kad kiekvienos pusės paraštė būtų nustatyta automatiškai. Jei norite sutelkti visus tam tikro puslapio vaizdus, ​​prie žymos img netgi galite pridėti „margin: auto“:

img { margin: auto; }

Norėdami sužinoti, kodėl tai veikia taip, peržiūrėkite CSS dėžės modelio paaiškinimas W3C .

Bet ką daryti, jei norite centruoti tekstą naudodami CSS? Naudokite šį CSS pavyzdį:

.centertext { text-align: center; }

Norite naudoti „centertext“ klasę, kad sutelktumėte pastraipos tekstą? Tiesiog pridėkite šią klasę prie

žyma:

This text will be centered.

8. Paminkštinimo reguliavimo CSS pavyzdžiai

Elemento paminkštinimas nurodo, kiek vietos turi būti kiekvienoje pusėje. Pvz., Jei vaizdo apačioje pridėsite 25 taškų užpildo, šis tekstas bus stumiamas 25 pikseliais žemyn. Daugelis elementų gali turėti paminkštinimą, ne tik vaizdai.

Tarkime, kad norite, kad kiekvieno vaizdo kairėje ir dešinėje pusėje būtų 20 pikselių kamšalo, o viršuje ir apačioje - 40 pikselių. Pats paprasčiausias CSS kodo vykdymas yra toks:

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

Tačiau yra trumpesnė CSS instrukcija, kurioje visa ši informacija pateikiama vienoje eilutėje:

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

Tai nustato viršutinį, dešinįjį, apatinį ir kairįjį kamšalus į tinkamą skaičių. Naudojant tik dvi reikšmes (40 ir 25), galite ją sutrumpinti:

img { padding: 40px 25px }

Kai naudojate tik dvi reikšmes, pirmoji vertė nustatoma viršuje ir apačioje, o antroji - kairėje ir dešinėje.

9. Paryškinkite lentelių eilutes naudodami CSS kodavimą

Dėl CSS kodo lentelės atrodo daug gražiau nei numatytieji tinkleliai. Pridėti spalvų, koreguoti kraštus ir pritaikyti stalą prie mobiliųjų ekranų - viskas paprasta. Šis paprastas CSS pavyzdys parodo, kaip paryškinti lentelės eilutes, kai užvedate pelę ant jų.

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

Dabar, kai užvesite pelės žymeklį virš lentelės langelio, ta eilutė pakeis spalvą. Norėdami pamatyti keletą kitų įdomių dalykų, kuriuos galite padaryti, patikrinkite W3C puslapis išgalvotose CSS lentelėse .

10. CSS pavyzdys, skirtas perkelti vaizdus tarp skaidrių ir nepermatomų

CSS kodas taip pat gali padėti padaryti įdomių dalykų su vaizdais. Pateikiame CSS pavyzdį, kad vaizdai būtų rodomi mažiau nei visiškai neskaidriai, todėl jie atrodo šiek tiek „išbalę“. Užvedus pelės žymeklį ant vaizdų, jie tampa visiškai neskaidrūs:

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

Atributas „filtras“ veikia taip pat, kaip ir „neskaidrumas“, tačiau „Internet Explorer 8“ ir ankstesnės versijos nepripažįsta neskaidrumo matavimo. Senesnėms naršyklėms patartina jį įtraukti.

Dabar, kai vaizdai yra šiek tiek skaidrūs, galite padaryti juos visiškai nepermatomus pelės žymekliu:

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

10 CSS pavyzdžių su šaltinio kodu

Turėdami šiuos CSS kodo pavyzdžius, turėtumėte daug geriau suprasti, kaip veikia CSS. CSS šablonai gali padėti, tačiau labai svarbu suprasti žaliavos elementus.

Šie 10 paprastų CSS kodo pavyzdžių:

  1. Lengvas pastraipos formatavimas
  2. Pakeisti raidžių raides
  3. Pakeiskite nuorodų spalvas
  4. Pašalinkite nuorodos pabraukimus
  5. Sukurkite nuorodos mygtuką
  6. Sukurkite teksto laukelį
  7. Elementai centre
  8. Sureguliuokite paminkštinimą
  9. Paryškinkite lentelių eilutes
  10. Padarykite vaizdus neskaidrius

Dar kartą peržiūrėję juos, pastebėsite kelis modelius, kuriuos galėsite pritaikyti būsimam kodui. Ir tada jūs žinote, kad tikrai pradėjote tapti CSS meistru. Tačiau prisiminti tai gali būti sunku. Galbūt norėsite šį puslapį pažymėti kaip žymą ateityje.

Dalintis Dalintis „Tweet“ Paštu „Essential CSS3 Properties“ apgaulės lapas

Įsisavinkite esminę CSS sintaksę naudodami mūsų CSS3 savybių apgaulės lapą.

Skaityti toliau Susijusios temos
  • Programavimas
  • Interneto svetainės dizainas
  • CSS
  • Scenarijaus rašymas
Apie autorių Christianas Cawley(Paskelbta 1510 straipsnių)

Redaktoriaus pavaduotojas saugumo, „Linux“, „pasidaryk pats“, programavimo ir techninių paaiškinimų klausimais ir tikrai naudingas transliacijų gamintojas, turintis didelę patirtį palaikant darbalaukį ir programinę įrangą. Žurnalo „Linux Format“ bendradarbis Kristianas yra „Raspberry Pi“ tinklininkas, „Lego“ mylėtojas ir retro žaidimų gerbėjas.

Daugiau iš Christiano Cawley

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia