Šiandien jie yra neatsiejama bet kurio daugiau ar mažiau rimto interneto projekto dalis, o net vieno puslapio svetainėse bus kažkas panašaus į formą.
Įterpti, mes visi gerai tai darome, tačiau daugelis turi problemų su kabučių formatavimu. Visų pirma, citavimo tikslas – patraukti lankytojo dėmesį įspaudžiant protingą savo ar svetimą mintį.
Kai kurie žmonės naudoja tik kursyvą tekstą, kiti naudoja paruoštus šablonus. Dažnas citatų tipas yra kursyvas tekstas arba kabučių fonas. Čia viskas priklauso nuo nepataisomos „žmonių“ vaizduotės.
„WordPress“ citatos generuojamos automatiškai ir nustatomos pagal jūsų šablono stilių. Arba su puikaus papildinio pagalba: . Jei turite teminį tinklaraštį ir norite pabrėžti savo mintį straipsnyje, tada žodžių paryškinimas naudojant šį papildinį neabejotinai pritrauks skaitytojo dėmesį ir atrodo gražiai.
Su WordPress viskas aišku, domimės, kaip suformatuoti citatą HTML puslapyje, jei nėra galimybės naudoti trečiųjų šalių produktų. Jei nenorite vargti su nuotraukomis, galite lengvai susitvarkyti su dizainu CSS: sukurkite rėmelį arba tiesiog atskirkite tekstą punktyrine kraštine.
Galiausiai pažvelkime į keletą pavyzdžių, kaip suformatuoti citatą naudojant CSS kodas.
1 pavyzdys:
Teksto spalva neturi būti ryškesnė, nes 2 krašteliai - viršutinis ir apatinis, kurio plotis 3 pikseliai - pastebimai išryškins citatą.
CSS kodas:
blockquote (kraštinė: vientisa #999; kraštinės plotis: 3 piks. 0; paraštė: 10 piks. 40 piks.; užpildymas: 15 piks.; šrifto dydis: 14 piks.; spalva: #999; ) |
bloko citata ( kraštinė: vientisas # 999; kraštinės plotis: 3 tšk. 0; paraštė: 10 piks. 40 tšk.; užpildymas: 15 tšk.; šrifto dydis: 14 piks.; spalva: # 999; )
Vartodami stiliaus kodą, galite be galo eksperimentuoti su išvaizda.
2 pavyzdys:
Blokas iš karto matomas tekste dėl ryškios kraštinės kairėje.
CSS kodas:
blockquote (kraštinė: taškinė #666 1px; kraštinė kairėje: vientisa #ff5a00 5px; paraštė: 10px 40px; užpildymas: 15px; spalva: #333; šrifto stilius: kursyvas; šrifto dydis: 14px; fonas: #fcfcfc; ) |
blockquote (kraštinė: taškinė #666 1px; kraštinė kairėje: vientisa #ff5a00 5px; paraštė: 10px 40px; užpildymas: 15px; spalva: #333; šrifto stilius: kursyvas; šrifto dydis: 14px; fonas: #fcfcfc; )
Ši parinktis tinka ne tik kabutėms, bet ir, pavyzdžiui, kodo paryškinimui, atsisiuntimo nuorodoms ir pan...
3 pavyzdys:
Rizikingas variantas. Puikiai tiks tais atvejais, kai citata neabejotinai turi patraukti skaitytojo dėmesį, raginti ką nors daryti, arba, priešingai, kažko nedaryti.
CSS kodas:
blockquote (kraštinė: 3px 0 solid #000; paraštė: 10px 40px; ) blockquote p(kraštinė: 10px 0 solid #eee; paraštė: 0; užpildymas: 15px; spalva: #333333; šriftas: 16px "Arial Black"; ) |
blockquote (kraštinė: 3px 0 solid #000; paraštė: 10px 40px; ) blockquote p(kraštinė: 10px 0 solid #eee; paraštė: 0; užpildymas: 15px; spalva: #333333; šriftas: 16px "Arial Black"; )
4 pavyzdys:
Gana griežtas, asketiško dizaino variantas. Tinka svetainėms, kuriose tekstas yra pagrindinė dizaino dalis, o ne gražios nuotraukos.
Niekada nevėlu atgailauti, bet gali būti per vėlu nusidėti.
CSS kodas:
blockquote ( kraštinė- kairė: vientisas 3 piks. # 333; užpildymas - kairė: 1 piks.; paraštė: 10 piks. 40 piks.; ) blockquote p ( kraštinė - kairė: vientisas # 666 1 piks.; paraštė: 0 ; užpildymas: 15 piks.; spalva: # 333; šriftas: 16px "Times New Roman" ; |
blockquote ( border-left: solid 3px #333; padding-left: 1px; margin: 10px 40px; ) blockquote p( border-left: solid #666 1px; margin:0; padding: 15px; color:#333; šriftas: 16 piks. „Times New Roman“)
5 pavyzdys:
Na, labai paprastas būdas sukurti citatą, tik dėl pasvirusio šrifto stiliaus Gruzija, tekstas šiek tiek stilizuojamas ir tikriausiai norėsite jį perskaityti.
„Kiekvienas turi tą patį Dievą – tiekėjai skirtingi“.
CSS kodas:
bloko citata ( paraštė: 10 tšk. 40 tšk.; užpildymas: 15 piks.; šriftas: kursyvas 14 piks. Georgia; kraštinė: vientisas 1 piks. #eee ) |
bloko citata ( paraštė: 10 tšk. 40 tšk.; užpildymas: 15 tšk.; šriftas: kursyvas 14 piks. Georgia; kraštinė: vientisas 1 piks. #eee )
Peržiūrėjote pavyzdžius, dabar pasirinkite ir judėkite pirmyn. Atitinkamai pridėkite CSS kodą prie savo stilių failo .css Rašydami kokią nors neišnykstančią mintį, tiesiog apsupkite ją blockquote žymomis ir žavėkitės rezultatu, patenkinti savimi.
Papasakokite, kaip formatuojate citatas savo tinklaraštyje, ar jums užtenka, kaip jos iš pradžių buvo sukurtos jūsų temos šablone?
Pagarbiai, Andrejus
Elemento apibrėžimas buvo pakeistas
Ir . Šiame straipsnyje paaiškinama, ką tai reiškia kūrėjams.Apibrėžimo pakeitimai
Elementas
reiškia turinį, kuris yra citata iš kito šaltinio, Galbūt, įskaitant šio šaltinio paminėjimą, kuris turi būtiįdėti į elementus