Používatelia hodnotia webový zdroj pre svoju vonkajšiu atraktivitu. Preto možno prečítať aj informačne užitočný text vďaka tomu, že je zle navrhnutý. Záver - musíte starostlivo a starostlivo pristupovať nielen k sémantickému obsahu stránok stránky, ale aj k jeho vizuálnemu zastúpeniu. Vznik technológie CSS rozšíril schopnosť vytvárať atraktívne články. Jeden z vlastností navrhnutých na uľahčenie vnímania písomného - odsadenia textu CSS.
Polia a zarážky: aký je rozdiel?
Predtým, ako začnete formátovať text, musíte pochopiť, ktoré polia a odrážky sú. Napriek skutočnosti, že tieto značkovacie prvky v mnohých prípadoch vyzerajú rovnako pre užívateľa, existujú medzi nimi zásadné rozdiely:
pole je špecifikované políčkou vlastností, odsadením - okrajom;
Pole je určené priestorom medzi obsahom a hranicou bloku, medzera medzi hranicami susediacich blokov;
Polia môžu byť zohľadnené v prvkoch prvku (šírka a výška) a nie.
okrajová vlastnosť
Pre nastavenie horizontálneho alebo vertikálneho odstupu textu CSS použite konštrukt margin. Táto vlastnosť sa vzťahuje na značku normatívneho odseku dokumentu. V najjednoduchšom prípade je napísaný ako: marža: 12px. Táto čiara znamená, že okolo bloku textu (alebo akéhokoľvek iného bloku) bude 12 pixelov odsadených zo všetkých strán. Ak chcete napríklad zväčšiť medzeru, trikrát stačí písať: rozpätie: 36 pixlov. Ale čo robiť, akinterval medzi blokmi by sa mal líšiť od každej strany? Vývojári webových stránok používajú niekoľko foriem písania:
margin: 11px 22px.
okraj: 11px 22px 33px.
okraj: 11px 22px 33px 44px.
V prvom príklade z dolnej a hornej hranice bloku budú pre odsadenie 11 pixelov na každej strane bloku - od 22 pixelov. Podľa druhej formy písania, medzi horným okrajom bloku a obsah bude 11 bodov zo dna - 33 pixel boky - 22 bodov. V treťom prípade, odsadenie textu CSS hodnota bude mať 11 bodov, z vrcholu 22 pixelov vpravo, 33 obrazových bodov a 44 pixelov od vľavo dole.
K dispozícii je tiež schopnosť zaznamenať vzdialenosť k hranici bloku iba na jednej strane: margin-horný okraj dňom, margin-vľavo, margin-pravé. Prevodom mien vlastností do ruského jazyka je ľahké odhadnúť ich účel. Napríklad táto položka hovorí, že pravý okraj bude 22px: margin-right: 22px. Pre zvyšok vzdialenosti okolo bloku strán sa predpokladá hodnota entry-otca. Vlastnosť okraja má funkciu, ktorú si musí vývojár pamätať, keď vertikálne používa odsadenie textu CSS. Intervaly susediacich prvkov nie sú zhrnuté, ale navzájom sa prekrývajú. Predpokladajme napríklad, že jeden z blokov má margin-bottom: 15 pixelov, a susediace spodný blok margin-top: 35px. Školská aritmetika a zdravý rozum naznačujú, že celková vzdialenosť medzi nimi bude 50 pixelov. V praxi to nie je prípad. Blok s veľkou hodnotou maržového majetku "absorbuje" svojho blížneho. Výsledkom je interval medzi prvkami 35 pixelov.
Červená čiarka
Pri písaní dokumentu v textovom editore, používatelia dávajú prednosť každému novému odseku "červenému" riadku. Pomocou CSS je ľahké urobiť textový posun vľavo - používa sa konštrukcia textu a odsadenia. Zaznamenáva sa nasledovne: text-indent: 11px. To znamená, že prvý riadok odseku bude posunutý relatívnym ľavým okrajom o 11 pixlov. Aby sa text na webovej stránke viac prispôsobil dokumentu v editore, je potrebné dodatočne nastaviť zarovnanie v šírke, to znamená písať: text-odsadenie: 11px; text-align: justify Okrem pixelov je pri popisovaní značiek povolené používať aj iné jednotky - palce, body, percentá. Nechajte blok obsahujúci text CSS, ktorý sa rovná 10%. S šírkou bloku 500 pixelov bude červená čiara 50 pixelov (10% z 500).
Pre túto vlastnosť je možné nastaviť dedičnú hodnotu. Takýto záznam hovorí, že blok používa podobnú vlastnosť základného bloku. text-odrážka: zdedenie Je prekvapujúce, že odsadenie odstavca môže mať záporné hodnoty! V takomto prípade sa tvoria tzv. Výkony, tj hlavný text zostáva na mieste a prvý riadok sa posunie doľava 22 pixelov: text-odsadenie: -22px. Ak chcete zabrániť tomu, aby písmená prekročili ľavú hranicu prehliadača, okrem textovej odrážky musíte použiť konštrukciu pre úlohu v poli: padding-left: 22px.
Užitočné tipy
Zvažujú sa základné vlastnosti CSS pre formátovanie textu. Prax pomôže konsolidovať ich. Tu sú niektoré konečné tipy, ako používať študijný materiál pri navrhovaní webových stránok:
červená čiara a zarážkatext - rôzne koncepty a pre ich vedenie sa používajú rôzne vlastnosti;
pre vertikálne odchýlky sa neuplatňujú pravidlá matematiky - intervaly sa prekrývajú, "vyhrá" prvok s veľkou hodnotou;
Záporné odsadenie odseku sa používa na označenie prvého odseku odseku s obrázkom.
