10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

Kad esat sācis nodarboties ar HTML, jūs, iespējams, vēlēsities savām tīmekļa lapām pievienot vairāk vizuālu perforatoru. CSS ir labākais veids, kā to izdarīt. CSS ļauj veikt izmaiņas visā lapā, nepaļaujoties uz iekļauto stilu.





Šeit ir daži vienkārši CSS piemēri, lai parādītu, kā savā tīmekļa lapā veikt dažas pamata stila izmaiņas.



1. Pamata CSS kods ērtai rindkopu formatēšanai

Stils ar CSS nozīmē, ka jums nav jānorāda stils katru reizi, kad izveidojat elementu. Jūs varat vienkārši pateikt: “Visām rindkopām jābūt ar šo konkrēto stilu”, un jūs varat turpināt darbu.





Pieņemsim, ka vēlaties katru rindkopu (

, viens no HTML tagiem, kas visiem jāzina), lai tas būtu nedaudz lielāks nekā parasti. Un ar tumši pelēku tekstu, nevis melnu.

Saistīts: HTML apkrāptu lapa



CSS kods tam ir šāds:

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

Vienkārši! Tagad, kad pārlūkprogramma atveido rindkopu, teksts pārmantos izmēru (120 procenti no parastā) un krāsu (“tumši pelēks”).



Ja jūs interesē, kuras vienkāršā teksta krāsas varat izmantot, pārbaudiet šo CSS krāsu saraksts no Mozilla.

2. CSS piemērs rakstzīmju reģistra maiņai

Vai vēlaties izveidot apzīmējumu rindkopām, kurām jābūt ar lieliem burtiem? CSS paraugs tam būtu šāds:



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

Lai izveidotu rindkopu ar lieliem burtiem, izmantojiet nedaudz atšķirīgu HTML tagu. Lūk, kā tas izskatās:

Your paragraph here.

Punkta un klases nosaukuma pievienošana elementam norāda šī elementa apakštipu, ko definējusi klase. To var izdarīt ar tekstu, attēliem, saitēm un gandrīz jebko citu.

Ja vēlaties mainīt teksta kopu uz konkrētu gadījumu, izmantojiet šos CSS koda piemērus:

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

Pēdējais raksta katra teikuma pirmo burtu.

Stila izmaiņas neaprobežojas tikai ar rindkopām. Saitei var piešķirt četras dažādas krāsas: tās standarta krāsa, apmeklētā krāsa, kursora krāsa un aktīvā krāsa (kas tiek parādīta, noklikšķinot uz tās). Izmantojiet šo CSS koda paraugu:

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

Izmantojot saites, katram “a” seko kols, nevis punkts.

Katra no šīm deklarācijām maina saites krāsu noteiktā kontekstā. Lai mainītu saites krāsu, nav jāmaina saites klase.

Lai gan pasvītrotais teksts nepārprotami norāda uz saiti, dažkārt šķiet patīkamāk to pasvītrot. Tas tiek panākts ar atribūtu “teksta dekorēšana”. Šis CSS piemērs parāda, kā noņemt pasvītrojumus saitēs:

a { text-decoration: none; }

Viss, kam ir saites (“a”) tags, netiks pasvītrots. Vai vēlaties to pasvītrot, kad lietotājs virzās virs tā? Vienkārši pievienojiet:

a:hover { text-decoration: underline; }

Varat arī pievienot šo teksta noformējumu aktīvajām saitēm, lai nodrošinātu, ka pasvītrojums nepazūd, noklikšķinot uz saites.

Vai vēlaties piesaistīt lielāku uzmanību savai saitei? Saites poga ir lielisks veids, kā to izdarīt. Tam ir vajadzīgas vēl dažas rindiņas:

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

Paskaidrosim šo CSS parauga kodu.

Visu četru saišu stāvokļu iekļaušana nodrošina, ka poga nepazūd, kad lietotājs uz tās novieto kursoru vai noklikšķina. Varat arī iestatīt dažādus parametrus kursoriem un aktīvajām saitēm, piemēram, mainot pogu vai teksta krāsu.

Fona krāsa ir iestatīta ar fona krāsu, bet teksta krāsa-ar krāsu. Polsterējums nosaka lodziņa izmēru --- teksts ir polsterēts par 10 pikseļiem vertikāli un 25 pikseļiem horizontāli.

Teksta līdzināšana nodrošina, ka teksts tiek parādīts pogas centrā, nevis vienā pusē. Teksta dekorēšana, tāpat kā pēdējā piemērā, noņem pasvītrojumu.

kā mainīt dpi gimp

CSS kods “display: inline-block” ir nedaudz sarežģītāks. Īsāk sakot, tas ļauj iestatīt objekta augstumu un platumu. Tas arī nodrošina, ka, ievietojot to, tā sāk jaunu rindu.

6. CSS parauga kods tekstlodziņa izveidei

Vienkārša rindkopa nav ļoti aizraujoša. Ja vēlaties savā lapā izcelt kādu elementu, iespējams, vēlēsities pievienot apmali. Lūk, kā to izdarīt, izmantojot vienkārša CSS koda virkni:

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

Šis ir vienkāršs. Tas rada stingru purpursarkanu apmali, piecus pikseļus platu, ap jebkuru svarīgas klases rindkopu. Lai rindkopa pārmantotu šos rekvizītus, vienkārši deklarējiet to šādi:

Your important paragraph here.

Tas darbosies neatkarīgi no tā, cik liela ir šī rindkopa.

Varat izmantot daudz dažādu apmales stilu; “cietā” vietā izmēģiniet “punktētu” vai “dubultu”. Tikmēr platums var būt “plāns”, “vidējs” vai “biezs”. CSS kods var pat definēt katras apmales biezumu atsevišķi, piemēram:

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

Tā rezultātā augšējā robeža ir pieci pikseļi, labā - astoņi, apakšējā - trīs un kreisās malas izmērs ir deviņi pikseļi.

7. Centre-Align Elements ar CSS pamata kodu

Parastam uzdevumam elementu centrēšana ar CSS kodu ir pārsteidzoši neintuitīva. Kad esat to izdarījis dažas reizes, tas kļūst daudz vieglāk. Jums ir pāris dažādi veidi, kā centrēt lietas.

Bloka elementam (parasti attēlam) izmantojiet atribūtu margin:

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

Tas nodrošina, ka elements tiek parādīts kā bloks un ka mala katrā pusē tiek iestatīta automātiski. Ja vēlaties centrēt visus attēlus noteiktā lapā, jūs pat varat pievienot iezīmei img “margin: auto”:

img { margin: auto; }

Lai uzzinātu, kāpēc tas darbojas šādā veidā, apskatiet CSS kastes modeļa skaidrojums W3C .

Bet ko darīt, ja vēlaties centrēt tekstu, izmantojot CSS? Izmantojiet šo CSS paraugu:

.centertext { text-align: center; }

Vai vēlaties izmantot klasisko teksta klasi, lai centrētu tekstu rindkopā? Vienkārši pievienojiet šo klasi

atzīme:

This text will be centered.

8. CSS polsterējuma pielāgošanas piemēri

Elementa polsterējums norāda, cik daudz vietas vajadzētu būt katrā pusē. Piemēram, ja attēla apakšdaļai pievienojat 25 pikseļu polsterējumu, tālāk norādītais teksts tiks izspiests par 25 pikseļiem uz leju. Daudziem elementiem var būt polsterējums, ne tikai attēliem.

Pieņemsim, ka vēlaties, lai katra attēla kreisajā un labajā pusē būtu 20 pikseļu polsterējums, bet augšpusē un apakšā - 40 pikseļi. Visvienkāršākā CSS koda izpilde ir šāda:

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

Tomēr ir īsāks CSS norādījums, kas visu šo informāciju parāda vienā rindā:

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

Tādējādi augšējais, labais, apakšējais un kreisais polsterējums tiek iestatīts uz pareizo numuru. Pateicoties tikai divām izmantotajām vērtībām (40 un 25), jūs varat padarīt to vēl īsāku:

img { padding: 40px 25px }

Ja izmantojat tikai divas vērtības, pirmā vērtība tiek iestatīta augšpusē un apakšā, bet otrā - pa kreisi un pa labi.

9. Iezīmējiet tabulas rindas ar CSS kodējumu

Ar CSS kodu tabulas izskatās daudz jaukāk nekā noklusējuma režģi. Krāsu pievienošana, apmaļu pielāgošana un galda pielāgošana mobilo ierīču ekrāniem ir vienkārša. Šis vienkāršais CSS piemērs parāda, kā izcelt tabulas rindas, virzot peles kursoru virs tām.

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

Tagad, kad novietojat peli virs tabulas šūnas, šī rinda mainīs krāsu. Lai redzētu dažas citas interesantas lietas, ko varat darīt, apskatiet W3C lapa izdomātajās CSS tabulās .

10. CSS piemērs attēlu pārslēgšanai starp caurspīdīgu un necaurspīdīgu

CSS kods var arī palīdzēt ar attēliem darīt interesantas lietas. Šeit ir CSS piemērs, lai attēlotu attēlus ar mazāku necaurredzamību, tāpēc tie šķiet nedaudz “izbalējuši”. Novietojot peles kursoru virs attēliem, tie tiek pilnībā pārredzami:

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

Atribūts “filtrs” darbojas tāpat kā “necaurredzamība”, taču pārlūkprogramma Internet Explorer 8 un vecākas versijas neatpazīst necaurredzamības mērījumus. Vecākām pārlūkprogrammām ieteicams to iekļaut.

Tagad, kad attēli ir nedaudz caurspīdīgi, varat tos padarīt pilnīgi necaurspīdīgus ar peles kursoru:

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

10 CSS piemēri ar avota kodu

Izmantojot šos CSS koda piemērus, jums vajadzētu būt daudz labākam priekšstatam par CSS darbību. CSS veidnes var palīdzēt, taču ir ļoti svarīgi izprast neapstrādātos elementus.

Šie 10 vienkārši CSS koda piemēri ir apkopoti:

  1. Vienkārša rindkopu formatēšana
  2. Mainīt burtu reģistru
  3. Mainiet saišu krāsas
  4. Noņemt saišu pasvītrojumus
  5. Izveidojiet saites pogu
  6. Izveidojiet tekstlodziņu
  7. Izlīdziniet elementus centrā
  8. Pielāgojiet polsterējumu
  9. Iezīmējiet tabulas rindas
  10. Padariet attēlus necaurspīdīgus

Pārskatot tos vēlreiz, pamanīsit vairākus modeļus, kurus varat izmantot turpmākajam kodam. Un tieši tad jūs zināt, ka esat patiešām sācis kļūt par CSS meistaru. Bet atcerēties to var būt grūti. Iespējams, vēlēsities šo lapu atzīmēt ar grāmatzīmi turpmākai uzziņai.

Kopīgot Kopīgot Čivināt E -pasts Būtiskā CSS3 rekvizītu apkrāptu lapa

Apgūstiet būtisko CSS sintaksi ar mūsu CSS3 rekvizītu apkrāptu lapu.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • Web dizains
  • CSS
  • Skriptu veidošana
Par autoru Kristians Kovlijs(Publicēti 1510 raksti)

Redaktora vietnieks drošības, Linux, DIY, programmēšanas un tehniski izskaidrota jomā un patiešām noderīgs Podcast apraides ražotājs ar lielu pieredzi galddatoru un programmatūras atbalstā. Žurnāla Linux Format līdzstrādnieks Kristiāns ir Raspberry Pi mīļotājs, Lego cienītājs un retro spēļu cienītājs.

Vairāk no Kristiāna Kaulija

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu