Dnes vám řeknu, jak na webu pomocí HTML a CSS vytvářet tučná slova. Tento design se používá, když potřebujete na stránce zvýraznit určité informace. Navíc mluvíme nejen o nadpisech, ale také o jednoduchá slova, fráze v textu. To je implementováno poměrně jednoduše.
K zvýraznění určitého textu tučně se používají speciální značky HTML - a ... Například následující kód:
| Prostý text. Miniatura. Silný tučný text. |
Prostý text.
Miniatura.
Silný tučný text.
Výstup poskytuje následující obrázek:
Poslední dvě možnosti vypadají vizuálně stejně, ale mírně se od sebe liší. Štítek specifikuje jednoduchou stylistickou smělost slova, zatímco přidává určitý sémantický „vylepšený“ (důležitý) význam. To znamená, že poslední řádek není jen tučný text, ale nějaký druh důležitá informace... Pro vyhledávače se v zásadě doporučuje použít přesně .
Tučný text můžete také zobrazit v HTML pomocí stylů:
Příklad tučného textu.
Ukázkový text pomocí tučně slovo.
Stránka to zobrazuje takto:
Tučný kód HTML funguje správně, ale neměl by. Všechny styly designu by měly být vykresleny v Soubor CSS... Ve výše uvedeném příkladu jste tedy museli pro značky
A zadejte příslušnou třídu a poté napište její vzhled do šablony stylů. Toto jsou pravidla pro kódování. Pro tučné písmo v HTML tedy použijte značku .
Tučný text CSS
Dělat v CSS tučně písmo používá vlastnost font-weight. S jeho pomocí je naznačeno „nasycení“ fragmentu textu. Hodnoty se mohou pohybovat od 100 do 900, ale nejčastěji používané jsou:
- tučně (tučně) - ve výchozím nastavení 700;
- normální - 400 ve výchozím nastavení.
Existují také možnosti pro odvážnější a světlejší hodnoty, které mění písmo v závislosti na rodiči na více či méně tučné.
Chcete -li v CSS nastavit tučný text, musíte tomu či onomu prvku nastavit nějaký styl, například:
Prostý text s olejový výtok ve středu.
silný (font-weight: bold;)
Zde bych rád poznamenal jednu malou nuanci, o které mi bylo řečeno - pokud pro nějaký prvek vytvoříte novou třídu, pak je vhodné použít víceméně „srozumitelné jméno“. Například ve výše uvedeném příkladu vypadá styl class = "my-bold-font" logičtěji než class = "new-font", protože můžete částečně pochopit jeho účel. To je plus pro ty, kteří se budou na vaše rozložení v budoucnu dívat a používat ho.
V dalším článku vám povím o zajímavých tučných písmech, která se mi podařilo najít.
Aby naše WEB stránka vypadala více reprezentativně, rozdělíme text na odstavce a vybereme nadpis. HTML má 6 úrovní nadpisů pro části dokumentu, číslované od 1 do 6. Nadpisy jsou deklarovány dvojicí značek s příslušnými čísly úrovní, například
- nadpis oddílu první úrovně a - nadpis oddílu šesté úrovně. Tituly se od běžného textu liší velikostí a šířkou písmen. Nadpis h1 první úrovně je obvykle zobrazen velmi velkým písmem, zatímco úroveň nadpisu šest h6 je zobrazen velmi malý.Tituly
Nezaměňujte záhlaví sekcí dokumentu s dříve diskutovaným nadpisem dokumentu definovaným pomocí
.První větu používáme jako nadpis textu - K tomu stačí omezit tagy
a
.Vložte značky do textu souboru other.html
a
aby omezili první větu textu a tento kus kódu měl následující podobu:Vítejte na stránce společnosti SD!
Zkontrolujme získaný výsledek.
Uložte soubor výběrem příkazu nabídky Poznámkový blok Soubor - Uložit.
Operaci uložení je třeba provést vždy před zobrazením dokumentu, protože otevře soubor pro prohlížení a z disku jej načte do paměti RAM počítače. Pokud po úpravě kódu HTML soubor neuložíte, pak v prohlížeči neuvidíte žádné konfigurace.
Obnovte okno prohlížeče kliknutím na jeho tlačítko na hlavním panelu.
Stiskněte tlačítko F5 nebo tlačítko Obnovit na panelu nástrojů pracovního okna programu. Soubor other.html bude znovu načten a v okně prohlížeče uvidíte, jak vypadá záhlaví první úrovně.
Podívejte se, jak budou vypadat názvy dalších 5 úrovní, změňte čísla ve značkách: h2, h3 atd. Po každé konfiguraci nezapomeňte soubor uložit a aktualizovat obrázek v okně prohlížeče.
Po dokončení experimentů znovu obnovte značky v souboru other.html.
.K dispozici máte 6 úrovní nadpisů Jazyk HTML, můžete vytvořit snadno čitelný dokument s intuitivní strukturou. Pamatujte si, že váš dokument se bude vždy číst výrazně lépe, pokud bude mít přesné rozdělení do sekcí a podsekcí.
Zarovnání nadpisů
Ve výchozím nastavení je nadpis zarovnán vlevo od stránky. Může však být také zarovnáno vpravo nebo na střed. Pro zarovnání na pravé straně ve značce
používá se atribut align = "right" a pro centrování - align = "center". Rovněž je povolena zjevná indikace zarovnání na levé straně - align = "left".
Přidat do tagu
atribut align = "center" pro vycentrování názvu. Tento prvek by měl mít následující formu:
Vítejte na stránce společnosti SD!
Do budoucna vám nebudeme připomínat nutnost uložit soubor s počátečním kódem a před prohlížením aktualizovat obrázek v prohlížeči.
Jak zvýraznit text tučně v HTML
Pojďme nyní ke zbytku textu. Zvětšme jeho velikost a text označme tučnou kurzívou. Párované značky se používají k nastavení tučného stylu .
Vložte do souboru other.html otvor a zavírání tagy tak, aby omezovaly text Zde se dozvíte ... Tento prvek by měl mít následující podobu:
Jak udělat kurzívu textu v HTML
Kurzíva se nastavuje pomocí značek .
Do počátečního kódu vložte značku HTML a aby upravený prvek měl následující formu:
Zde se dozvíte o našich aktivitách, o softwarové produkty naší společnosti a zařízení, které vyrábíme
Prvky značek lze vnořit, jako v této struktuře, kde je prvek … vnořené v živlu …. Moderní prohlížeče schopen správně zpracovávat vnořené značky. Proto se musíte ujistit, že není narušeno pořadí vnoření. Pokud je vnoření přerušeno, bude výkon prohlížeče obtížný. Takový záznam bude například nesprávný: …... Vnoření je velmi důležitou součástí celkové kultury kódování HTML.
Jak podtrhnout text v HTML
S dvojicí štítků můžete nastavit podtržený styl textové položky omezený těmito značkami a pomocí dvojice značek - zobrazit text v písmu dálnopisu.
Je třeba poznamenat, že nedávno tag je zjednodušený a podtržení se provádí styly. ekvivalent ... Ano, nový analog vypadá těžkopádněji, ale ke zlosti to platí více. Hlavní věcí v tomto ohledu je, že objemná verze je cross-browser, jinými slovy, je vhodná pro všechny prohlížeče, kdy oba Ne všechny prohlížeče to podporují.
Jak pěstovat text v HTML
Nyní zvětšme velikost písma textu. To lze provést různými způsoby.
Štítky: zvětšit velikost písma textu uzavřeného mezi nimi.
Přidejte značky na začátek a na konec výše uvedeného kódu a aby měl prvek následující podobu:
Zde se dozvíte o našich aktivitách, o softwarových produktech naší společnosti a o zařízení, které vyrábíme.
Používání tagů budete moci zmenšit velikost písma textu tak, aby odpovídala původnímu.
Další způsob určení velikosti písma je pomocí značek s atributem size. Hodnoty pro tento atribut jsou celá čísla od 1 do 7. V tomto případě hodnota 1 odpovídá nejmenší velikosti písma a hodnota 7 - největší.
Použití místo značek zobrazit značky , podívejte se, jak se velikost písma textu mění s různými hodnotami atributu size - od 1 do 7.
Jako hodnotu atributu size můžete také použít čísla od 1 do 7 se znaménkem + (plus) nebo - (minus). V tomto případě se velikost písma odpovídajícím způsobem zvětší nebo zmenší ve srovnání s počátečními značkami, například zvýší velikost písma ve srovnání s aktuálním o jednu úroveň. Koukni na to.
U daného kusu textu nastavte hodnotu atributu size na 5: ... HTML kód pro tento kousek by měl vypadat takto:
Zde se dozvíte o našich aktivitách, o softwarových produktech naší společnosti a o zařízení, které vyrábíme..
Ve značkách atribut color lze také použít k určení barvy písma, oddělené textovými značkami. Hodnoty pro tento atribut jsou stejné jako pro dříve diskutované atributy popisující barvu pozadí a textu dokumentu.
Ve výchozím nastavení je odstavec s textem Zde se dozvíte ... zarovnán doleva. Vycentrujte jej vodorovně pomocí značek
Vložte značky
Všimněte si toho, že jsme použili značky k vycentrování odstavce.
Pozornost! Pro značky 2010 ,
=
=
Existuje také velké množství dalších zastaralých značek, které nelze popsat v tomto článku, proto je lepší se okamžitě seznámit se specializovanými webovými stránkami pro Tento problém... Ale ty hlavní jsem zde položil o něco výše
Alokační kódy
HTML umožňuje dva přístupy k výběru písem u fragmentů textu. Na jedné straně můžete přímo naznačit, že písmo v určité oblasti textu může být tučné nebo kurzíva, jinými slovy je zřejmé, že indikujete typ písma textu, jako jsme to udělali v tomto experimentu. Na druhou stranu můžete jakýkoli kus textu označit jako text s dobrým logickým stylem a ponechat prohlížeč interpretovat tento styl. Logický styl tedy ukazuje roli například textové skladby, která má velký význam ve srovnání s běžným textem, nebo skutečnost, že tato skladba je citátem. Ve své vlastní práci budete moci používat následné tagy, které definují logické styly. Zkontrolujte, jak fungují v různých prohlížečích.
- slouží k definování slova. Text je ve výchozím nastavení zobrazen kurzívou.
- za zdůrazňování slov a posilování. Text je ve výchozím nastavení zobrazen kurzívou.
- pro zvýraznění názvů knih, filmů, představení atd. se ve výchozím nastavení zobrazuje kurzívou.
- pro fragmenty programového kódu. Zobrazeno na displeji písmem s pevnou šířkou.
- používá se pro text, který uživatel zadává z klávesnice. Lze jej zobrazit v různých fontech v různých prohlížečích. Zastaralá značka.
- slouží k zobrazení programových zpráv. Zobrazuje se písmem s pevnou šířkou. Zastaralá značka.
- pro zvláště důležité fragmenty. Obvykle tučně.
- používá se k označení, že část textu nebo slova je symbolická proměnná, jinými slovy text, který lze nahradit různými výrazy. Ve výchozím nastavení se zobrazuje kurzívou. Zastaralá značka.
Specifikace HTML 4.0 nabízí progresivnější způsob zadávání stylů pro text a další části pomocí speciálního jazyka s názvem CSS (Cascading Style Sheets). Styly jsou obrovským úspěchem v oblasti WEB designu, rozšiřují možnosti zlepšit vzhled stránek. Styly usnadňují definování řádkování, odsazení, barev pro text a pozadí, velikosti a stylu písma atd. Většinu částí HTML lze stylizovat pomocí atributu style, který je umístěn uvnitř úvodní značky prvku. Jako hodnota atributu style jsou použity páry formuláře „property: value“. Například v části kódu popisující záhlaví oddílu
atribut style = "color: blue" určuje, že vlastnost color je modrá, jinými slovy text nadpisu první úrovně by měl být zobrazen modře.
Zarovnat styly
Podívejme se, jak pomocí kaskádového jazyka šablony stylů určit styl textové části, která začíná slovy Zde se dozvíte ...
Chcete-li určit tloušťku písma, použijte vlastnost font-weight s hodnotami lehčí (úzké), tučné (tučné), odvážnější (tučné), například style = "font-weight: bold".
Chcete-li definovat kurzívu, použijte vlastnost stylu písma nastavenou na kurzívu. Proto, aby byl text tučně kurzívou, byste měli najít atribut style takto: style = "font-weight: bold; font-style: italic". Dávejte pozor: charakteristiky mohou být umístěny v libovolném pořadí a musí nutně sdílet středník.
Pokud potřebujete určit velikost písma, měli byste použít vlastnost font-size, jejíž hodnoty lze zadat v relativních nebo absolutních hodnotách. Relativní hodnoty jsou procenta a jako absolutní hodnoty se používají body (pt), pixely (px), centimetry (cm), milimetry (mm). Například:
style = "font-size: 200%"
style = "font-size: 16pt"
style = "font-size: 100px"
Zadáním absolutních, nikoli relativních velikostí zbavujete uživatele prohlížení vašich stránek možnosti zvětšovat nebo zmenšovat velikost písem pomocí příkazu nabídky prohlížeče v souladu s jejich viděním a rozlišením monitoru. Písma se zobrazí pouze ve velikosti, kterou jste zadali. Proto je lepší zadat velikost písma v procentech. V tomto případě bude velikost písma menší nebo větší o uvedený počet procent, než když byla navržena s HTML nápověda tag ve výchozím nastavení.
Chcete-li určit způsob vodorovného zarovnání textu, použijte vlastnost zarovnání textu s hodnotami vlevo (vlevo), vpravo (vpravo), středem (uprostřed), zarovnat (šířka). Chcete -li tedy naznačit, že text Zde se dozvíte ... by měl být formátován tučnou kurzívou o velikosti 150% počáteční a zarovnán uprostřed, měli byste jeho styl najít následovně:
style = "font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
Tento atribut použijeme ve značkách<р>které vám umožňují prezentovat text jako samostatný odstavec.
Upravit HTML element, včetně textu Zde to zjistíte ... odstraněním tagů
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Zde se dozvíte o našich aktivitách, o softwarových produktech naší společnosti a o zařízení, které vyrábíme.
Vidíte, HTML vám umožňuje používat různé metody stylový design. Je však žádoucí použít kaskádový styl CSS.
Další možnosti zarovnání a stylu
Viděli jsme pouze jeden případ použití pro jazyk šablony stylů, kde je definice stylu umístěna konkrétně ve značce prvku, který popisujete.
To se provádí pomocí atributu style, který se používá u většiny standardů HTML tagy... Existují ale i jiná použití pro CSS.
Ve standardním HTML, bez vkládání stylů, chcete-li přiřadit určité parametry jakémukoli prvku, jako je barva, velikost, pozice na stránce a podobně, musíte tyto vlastnosti načrtnout pro každý prvek pokaždé, i když 10 ki takových částí, které se navzájem neliší. Na stránku musíte 10krát vložit stejný kus kódu HTML, čímž se zvětší velikost souboru a doba potřebná k jeho stažení ze sítě.
Styly fungují jiným, pohodlnějším a ekonomičtějším způsobem. Chcete -li určitému prvku přiřadit určité funkce, musíte tento prvek jednou načrtnout a najít tento popis jako styl a v nadcházejícím období pouze naznačit, že prvek, který chcete vhodným způsobem navrhnout, by měl převzít vlastnosti vámi popsaného stylu . Pohodlné, že?
Navíc můžete uložit popis stylu nikoli do textu vaší WEBové stránky, ale do samostatný soubor- to vám umožní použít popis stylu na libovolném počtu WEB stránek. A další související výhodou je možnost změnit design libovolného počtu stránek opravou pouze popisu stylu v jednom samostatném souboru.
Jazyk šablony stylů vám navíc umožňuje ještě více pracovat s designem písem stránek nejvyšší úroveň než standardní HTML.
V současné době má jazyk CSS poměrně velký počet parametrů pro části HTML, které může ovládat. Použití výrazu „bezpečný“, jinými slovy kompatibilní s největší počet prohlížečů CSS prvky- charakteristika písma, barvy částí a pozadí, charakteristika textu a ohraničení - můžete si výrazně usnadnit práci a zatraktivnit své WEB stránky z hlediska textového designu.
nebo zkoumání značek, které formátují text HTML
Vaše pozornost je věnována jedné z klíčových a nejjednodušších lekcí tutoriálu.
- HTML text je hlavní součástí většiny internetových stránek.
- Podle klíčové fráze v těle stránky HTML uživatelé mohou váš web najít.
- HTML text může mít libovolnou velikost a barvu podle vašeho uvážení. Můžete také definovat typ písma a jeho objem.
- Velikost písma HTML se obvykle nastavuje v pixelech.
- Formátování textu HTML rozšířené, používají se formátovací značky.
Viz. níže značky, které formátují text HTML:
- Štítky: → tučně HTML text(tučné písmo).
- Štítky → tučně HTML text(tučné písmo).
- Štítky: → monospaced HTML text(monospaced font).
- Štítky:
- Štítky: → monospaced HTML text(monospaced font).
- Štítky: → HTML text, velikost je větší než obvykle (velký tisk).
- Štítky: → HTML text, velikost je menší než obvykle (malé písmo).
- Štítky: → šikmé HTML text(kurzíva).
- Štítky: → šikmé HTML text(kurzíva).
- Štítky: → šikmé HTML text(kurzíva).
- Štítky: → podtrženo HTML text(podtržené písmo).
- Štítky:
- Štítky: → HTML text(písmo) v dolním indexu.
- Štítky: → HTML text(font) horní index.
Formátování textu HTML: přeškrtnutý, podtržený text
Výsledek: ... monospaced font
Výsledek: ... velikost písma větší než obvykle
Výsledek: ... kurzívou
Výsledek: přeškrtnutý text (přeškrtnuté písmo)
Výsledek: horní index
C Výše uvedené formátování by mělo být použito pouze na malé části textu. Použití CSS pokud chcete nastavit konkrétní písmo pro celou stránku nebo například pro několik řádků.
Html nám poskytuje některé možnosti, pokud jde o formátování textu. Dnes vám řeknu, jak vytvořit kurzívu v html, a to jak pro standardní písmo, tak pro nestandardní. V druhém případě budete muset něco zvážit, aby vše fungovalo.
Jak psát kurzívou v html?
Za prvé, v samotném html jsou dvě značky, které dávají textu kurzívu. Tohle jsme já a já. Mimochodem, ten druhý je zabudovaný v html editoru enginu wordpress, do kterého teď píšu tento článek... Jak se tyto značky liší? Vlastně bych dnes nerad hlasitě prohlašoval, že jsou nějak odlišní.
Obecně se em používá ke zvýraznění slov, která je třeba vyslovovat speciální intonací, zatímco já jen vizuálně zvýrazňuji text. Neobtěžujme se tím, protože není známo, zda tomu tak skutečně je.
Jaké jsou vlastnosti css pro kurzívu?
Toto je vlastnost stylu písma a jeho kurzíva. Existuje také šikmá hodnota a text se změní na kurzívu. Existuje nějaký rozdíl mezi těmito hodnotami? Prakticky žádný. Mimochodem, podrobně o tomto a dalších css vlastnosti pro text si přečtěte příslušný článek, kde je vše rozloženo na regálech.
Jak zobrazím vlastní písmo kurzívou?
Faktem je, že pokud připojíte nestandardní písmo přes Fonty Google, pak v tomto případě musíte zaškrtnout políčko při připojení alespoň 1 stylu kurzívy. Pokud to neuděláte, pak při pokusu o vytvoření takové kurzívy bude kurziva zobrazena v jednom ze standardních písem. Mimochodem, o připojení nestandardních písem si můžete přečíst v tomto článku.
Na tomto snímku obrazovky můžete vidět fragment připojení písem prostřednictvím Služba Google Písma.
Jak vidíte, vedle alespoň jednoho kurzívy je zaškrtnutí. Nyní, když používáte potřebné značky nebo vlastnost stylu, je pravda, že toto písmo se stane kurzívou, a ne nějakým jiným.
Proto jsme vytřídili všechny body, které jsou v práci s kurzívou. Neodvažuji se tě déle zadržovat.
Jedním z nejjednodušších způsobů, jak zvýraznit slovo nebo frázi v textu, je použít jiné písmo. Můžete tedy podtrhnout slovo nebo frázi, použití tučných stránek vám snadno umožní zvýraznit slova pomocí různých stylů - kurzívou, podtržením, tučně.
Tučné písmo jako způsob, jak zvýraznit hlavní věc
Nejvýraznější a chytlavá slova vypadají zvýrazněna tučně. Taková slova a fráze okamžitě padnou do oka. Abyste se tedy dozvěděli, jak rychle zvýraznit potřebná místa v textu, měli byste si pamatovat speciální HTML kód. Tučné písmo nastavit pomocí spárovaného tagu.
Před slovo nebo frázi, větu, která by měla být zvýrazněna, je umístěna úvodní značka ... Za posledním písmenem v textu, který má být vybrán, je uzavírací značka... Při zobrazení v prohlížeči je cokoli mezi těmito dvěma značkami tučné.
Další možnosti výběru
Zjistili jsme tedy, že můžete vybírat text pomocí jiného stylu. Rozhodli jsme se, že nejjednodušší a zároveň nejefektivnější využití tuku Písmo HTML... Nyní si promluvme o dalších možnostech výběru.
Pomocí párového tagu tedy můžete zvýraznit text kurzívou , podtrhněte pomocí ... To je nejvíc jednoduché způsoby zvýraznění textu.
Existují také méně známé a používané značky, které lze použít k zvýraznění slov a vět v textu. K přeškrtnutí textu tedy stačí použít ... Spárovaná značka pomůže nastavit text na meziprostor. ... Pokud potřebujete vytvořit použití horního indexu , dno - .
V tomto případě, stejně jako dříve, musí být požadovaný text mezi otevíracími a zavíracími značkami. Jak vidíte, není nic obtížného, hlavní je si tyto kódy zapamatovat nebo si je zapsat.
Použití více písem
Pokud chcete, aby byl text výraznější, můžete použít více než jen tučné písmo. Značení HTML vám umožňuje současně zvýraznit slovo pomocí více tváří. Můžete tedy udělat slovo tučně, přeškrtnuto a kurzíva současně.
Současně je třeba mít na paměti jednu věc - všechny tagy je třeba zavřít postupně. Správný záznam může být například:
- vybraný text.
Pokud zavřete značky v jiném pořadí, text nebude správně zvýrazněn. Příklad chybného zadání:
- vybraný text.
V takovém případě bude prohlížeč zmatený a nepochopí, co přesně od něj chcete.
Mimochodem, zde lze poznamenat, že tři varianty stylu - tučné, podtržené a kurzívou - si snadno zapamatujete, pokud znáte klávesové zkratky ve Wordu. Zde je styl nastaven pomocí stejných kláves s písmeny při současném podržení klávesy Ctrl.
Jak vidíte, můžete použít více než kurzívu nebo tučné písmo. Značení HTML vám umožňuje zvýraznit slova stejně snadno jako běžné Word.
závěry
Ke zvýraznění textu jsou široce používány nejen různé barvy a odstíny, různá velikost a typ písma, ale také jeho styl. Kromě toho lze pomocí jiného obrysu krásně a snadno rozlišit jeden nebo jiný fragment textu.
Chcete -li změnit styl písma, měli byste použít jakoukoli známou značku. Tučné písmo stránky HTML je nejnápadnější a nejviditelnější, a proto se nejčastěji používá pro zdůraznění.
