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ých slovech, frázích 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ěkteré 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 návrhu musí být vykresleny v souboru 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 použijte značku .
Tučný text CSS
Aby byl CSS tučný, použije se 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.
V html hraje velikost písma důležitou roli. Umožňuje vám upozornit uživatele na důležité informace zveřejněné na webové stránce. Ačkoli je důležitá nejen velikost písmen, ale také jejich barva, tloušťka a dokonce rodina.
Značky a atributy při procházení pomocí písem html
Hypertextový jazyk má velkou sadu nástrojů pro práci s písmem. Koneckonců, právě formátování textu je hlavním úkolem html.
Důvodem pro vytvoření jazyka HTML byl problém se zobrazováním pravidel pro formátování textu v prohlížečích.
Zvažte značky, které se používají k práci s písmem v html, a jejich atributy. Hlavní je štítek ... Pomocí hodnot jeho atributů můžete nastavit několik charakteristik písma:
- barva - nastavuje barvu textu;
- velikost - velikost písma v konvenčních jednotkách.
Jsou podporovány kladné hodnoty atributů od 1 do 7.
- face - slouží k nastavení rodiny písem textu, který se má použít uvnitř značky ... Podporováno je několik hodnot najednou, oddělených čárkami.
Formátován je pouze text mezi částmi spárované značky písma. Zbytek textu se zobrazí ve výchozím standardním písmu.
Také v html existuje řada spárovaných značek, které určují pouze jedno pravidlo formátování. Tyto zahrnují:
- - nastaví tučné písmo v html. Štítek akce je podobná té předchozí;
- - velikost je větší než výchozí;
- - menší velikost písma;
- - kurzívou psaný text. Podobná značka ;
- - podtržený text;
- přeškrtnuto;- - zobrazit text pouze malými písmeny;
- - velkými písmeny.
Prostý text
Miniatura
Miniatura
Více než obvykle
Méně než obvykle
Kurzíva
Kurzíva
Podtrženo
Přeškrtnuto
Možnosti atributů stylu
Kromě popsaných značek existuje několik dalších způsobů, jak změnit písmo v html. Jedním z nich je použití atributu generický styl. Pomocí hodnot jeho vlastností můžete nastavit styl zobrazení písma:
1) font -family - vlastnost nastavuje rodinu písem. Je možný výčet několika hodnot.
Pokud v operačním systému uživatele není nainstalována předchozí rodina, dojde ke změně písma v html na další hodnotu.
Syntaxe psaní:
rodina písem: název písma [, název písma [, ...]]
2) font -size - velikost je nastavena od 1 do 7. Toto je jeden z hlavních způsobů, jak můžete zvětšit písmo v html.
Syntaxe psaní:
velikost písma: absolutní velikost | relativní velikost | hodnota | úrok | zdědit
Lze také nastavit velikost písma:
- V pixelech;
- V absolutní hodnotě ( xx-malý, x-malý, malý, střední, velký);
- V procentech;
- V bodech (pt).
Velikost písma: 7
Velikost písma: 24px
Velikost písma: x-velké
Velikost písma: 200%
Velikost písma: 24pt
3) font -style - nastavuje styl psaní písma. Syntax:
styl písma: normální | kurzíva | šikmé | zdědit
Hodnoty:
- normální - normální hláskování;
- kurzíva - kurzíva
- šikmé - pravo nakloněné písmo;
- dědit - dědí hláskování nadřazeného prvku.
Příklad, jak změnit písmo v html pomocí této vlastnosti:
styl písma: dědit
styl písma: kurzíva
styl písma: normální
styl písma: šikmé
4) varianta písma - převede všechna velká písmena na velká. Syntax:
varianta písma: normální | malá písmena | zdědit
Příklad toho, jak pomocí této vlastnosti změnit písmo v html:
varianta písma: dědit
varianta písma: normální
varianta písma: malá písmena
5) font -weight - umožňuje nastavit tloušťku psaní textu (sytost). Syntax:
váha písma: tučné | odvážnější | lehčí | normální | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Hodnoty:
- tučně - nastaví tučné písmo html;
- odvážnější - tučnější vzhledem k normálu;
- lehčí - méně nasycené vzhledem k normálu;
- normální - normální hláskování;
- 100-900 - nastaví tloušťku písma v číselném ekvivalentu.
váha písma: tučně
váha písma: odvážnější
váha písma: lehčí
váha písma: normální
hmotnost písma: 900
hmotnost písma: 100
Vlastnost písma a barva písma html
Písmo je další vlastností kontejneru. Interně zkombinovala hodnoty několika vlastností určených ke změně písem. Syntaxe písma je:
písmo: velikost písma font-rodina | zdědit
Hodnotu lze také nastavit na fonty používané systémem v nápisech na různých ovládacích prvcích:
- titulek - pro tlačítka;
- ikona - pro ikony;
- menu - menu;
- schránka zpráv - pro dialogová okna;
- malý titulek - pro malé ovládací prvky
- stavový řádek - písmo stavového řádku.
písmo: ikona
písmo: titulek
písmo: nabídka
písmo: schránka zpráv
malý popisek
písmo: stavový řádek
písmo: kurzíva 50px tučně "Times New Roman", Times, patkové
Chcete -li nastavit barvu písma v html, můžete použít vlastnost color. Umožňuje nastavit barvu pomocí formátu klíčového slova i RGB. A také ve formě hexadecimálního kódu.
Dobrý den, milí čtenáři blogu! Tento článek se zaměří na tagy pro formátování textu... Tučný nebo kurzívou psaný text je ukázkovým příkladem. Rovněž budeme zvažovat vliv některých značek na interní optimalizaci webu a pravidla pro jejich psaní. To si můžete přečíst ve výše uvedeném článku. Mimochodem, podobné prvky návrhu textu najdete v mnoha textových editorech, například ve Wordu.
Značky jsou rozděleny do 2 typů: blokové a vložené značky. Když používáte první, můžete změnit obsah části textu (řádky, jednotlivé fragmenty nebo slova), zatímco ty druhé jsou. Formátovací značky, na které se v tomto článku podíváme, jsou převážně malá písmena.
Pravidla a pořadí psaní tagů
Už víte, co jsou počáteční a koncové značky. Pokud ne, přečtěte si článek na samém začátku tohoto materiálu. Stručně řečeno, existují dva typy tagů: jednotlivé tagy (například zalamování na nový řádek) a kontejner (spárovaný). Takže všechny značky pro formátování textu jsou spárované... To znamená, že jakýkoli prvek má počáteční a koncovou značku a výběr mezi ně musí být umístěn. Správný výběr fráze bude vypadat například takto: Vybraný úryvek
Když prohlížeč zpracuje tento fragment, zobrazí se následující text: Vybraný úryvek. Mimochodem, ve RSS kanálu () se nezobrazují všechny tagy ().
Hlavní věcí při psaní tagů je nechat je zavřené. Jinak bude veškerý text na stránce tučně (v příkladu se značkou ). Ale jsou chvíle, kdy potřebujete zvýraznit určitý fragment a kurzíva a tučné zároveň. Neexistuje však žádná značka, která by tuto akci prováděla. Existuje pouze jedna cesta ven z této situace: použijte dvě značky současně. Nezáleží na tom, v jakém pořadí je používáte. Proto psaním textu pomocí značek takto:
Vybraný úryvek
nebo takto:
Vybraný úryvek
Stále dostanete Vybraný úryvek kurzívou a tučně zároveň. Je však vhodnější použít první možnost, protože zpočátku byla jediná a správná. Nezapomeňte také, že každý prohlížeč může se značkami zacházet odlišně (), v závislosti na nastavení. Nyní přejdeme k samotným formátovacím značkám.
Tučný a kurzíva text - značky , , a
Nejoblíbenější značky pro formátování textu - zdůraznění tučně a kurzívou... Obvykle se používají k tomu, aby dali dílu nějaký význam. První případ slouží ke zvýraznění fragmentu obsahujícího užitečné informace nebo klíčová slova. Kurzíva se používá ke stejným účelům jako tučný text, ale informace jsou méně důležité, protože kurzíva je na pozadí hlavního textu méně viditelná než tučný text.Nejprve zvažte tučné písmo... K této akci jsou použity dvě značky - a ... Ve vzhledu není žádný rozdíl. Ačkoli vzhledem k tomu, že každý prohlížeč může interpretovat každý prvek odlišně, můžete si všimnout jakýchkoli rozdílů. Takto vypadá text ve značkách a ve formě již zpracované prohlížečem:
Text v silných značkách
Text ve značkách b
A takto vypadají tyto dva řádky ve zdrojovém kódu stránky:
Text v silných značkách Text ve značkách b
Stejnou situaci můžeme pozorovat v případě kurzívou tagy a ... Pokuste se najít rozdíly mezi těmito dvěma příklady:
Text ve značkách em
Text ve značkách I
A tady je zdrojový kód:
Text ve značkách em Text ve značkách I
Uvažované tučné a kurzívní značky se ve skutečnosti neliší, ale proč potom potřebujeme například značku pokud tam ? Koneckonců, druhý obsahuje pouze jeden znak (nepočítaje závorky), a proto je jednodušší psát. A jde o to, že tagy a postihnout. Pokud obklopíte klíčová slova těmito značkami, bude to mít příznivý vliv na propagaci webových stránek. Hlavní věcí je nepřehánět to - maximální text by měl být 5% tučným textem ve značce. , a stejné množství kurzívy ve značce .
Pokud chcete v textu jen zvýraznit nějaký okamžik, použijte značku nebo ... Obecně si myslím, že vyhledávače také považují text v těchto značkách za důležitější, ale dál vnitřní optimalizace stále mají menší dopad než a .
Slash textové tagy - , a
Nyní se podívejme na několik tagů, které používají znak ve stylu textu. Nejznámější textový editor, který znáte, je štítek
nebo podtrhnout. Tato značka nemá žádný vliv na hodnocení (pokud vím), ale pomůže zvýraznit nějaký text a zaměřit se na něj. Příklad použití této značky jsem uvedl těsně výše. Existují další dvě značky, které mají podobný účel - a ... Oba slouží funkci přeškrtnutého textu. Tuto značku můžete použít v jakékoli situaci: pokud aktualizujete dokument (nebo spíše jeho část), můžete škrtnout starý a přidat nový; pokud se chystáte napsat něco, co se odchyluje od tématu materiálu; něco, co neodpovídá morálním a etickým standardům.
Rozdíly mezi těmito dvěma značkami jsou pouze v jejich psaní, v důsledku čehož je vhodnější použít první, protože za prvé, je pohodlnější psát, a za druhé, na vaší stránce bude méně HTML kódu a vyhledávačům se to líbí.
Štítek a atributy - parametry písma textu
Nyní zvažte značku, která se nepoužívá bez atributů. S ním můžete nastavit parametry pro konkrétní kus textu. Obecně je nyní výhodnější použít (kaskádové šablony stylů), protože mohou výrazně zkrátit celý HTML kód stránky. Podívejme se tedy na stejnou značku . Pro něj je všechno tři atributy:
- tvář- samotné písmo. Například Arial, Courier nebo Verdana. Můžete uvést několik, tk. ne všichni uživatelé mají rozsáhlou sadu písem a zadáním několika do atributu face si prohlížeč bude moci vybrat, které z nich bude používat, respektive které je v systému přítomno;
- velikost- atribut udávající velikost textu. Může být vyjádřen jak v libovolných jednotkách, tak v pixelech;
- barva- barva textu. Tento atribut lze použít jak v HTML kódech barev, tak ve slovech. První jsou ve tvaru #FFFFFF (kde F je libovolné číslo nebo písmeno od A do F) a druhé jsou napsána jednoduchými slovy (například červená je červená).
Takto vypadá text ve značce pomocí každého atributu:
Tento text má velikost 6 pixelů
Tento text je červený Tento text je v písmu Arial Tento text je červený a 5 pixelůA tady je to, co uvidíte po zpracování napsaného kódu: 
Blokové prvky návrhu textu - záhlaví -, odstavec
, odstavec
Nakonec se podíváme na prvky bloku, které se používají téměř v každém dokumentu. Jedná se o značky nadpisů a odstavců. Zvažme první. Existuje 6 typů nadpisů a každý má svůj vlastní tag. Každý druh má pouze své vlastní sériové číslo a je zaznamenáván pomocí značek
, ,..., ... Takto vypadají všechny hlavičky při zpracování:
... Takto vypadají všechny hlavičky při zpracování:
Číslo za názvem slova odpovídá číslu ve značce
Nyní si promluvme o značce zvýraznění odstavce.
Funkce této značky je oddělit text mezi jiným podobným textem prázdným řádkem. Pokud se podíváte na zdrojový kód dokumentu, uvidíte následující:
Zelená políčka mají jeden odstavec, červená políčka další. A takto vypadá tento kód po zpracování prohlížečem (šipka ukazuje na prázdný řádek):
Výsledkem je, že dostáváme znatelné oddělení jednoho odstavce od druhého, což je výhodné - čtení se stává pohodlnějším.
Takže článek o tagy pro formátování dokumentu... Je jich mnohem více, než jsem popsal v tomto materiálu. Je to jen to, že o některých musíte říct hodně, v důsledku čehož jim budou věnovány samostatné články s úplnou recenzí.!
Váha písma se určuje pomocí atributu CSS váha písma, který může nabývat následujících hodnot:
- zapalovač- zapalovač
- normální- obvyklé
- tučně- tučně
- odvážnější- více tuku
- 100..900 - 100 odpovídá nejtenčímu písmu; 900 - nejtlustší
Atribut styl fontu(styl písma) se používá pro psaní kurzívou a může nabývat následujících významů:
- kurzíva- kurzívou, okraje textu jsou zaoblené
- normální- obvyklé
- šikmý- kurzívou
Atribut font-varianta(typ písma) se používá pro psaní malými velkými písmeny a může mít následující význam:
- normální- obvyklé
- smaoo-čepice- malá velká písmena
Kromě tučného písma, kurzívy a malých písmen existuje několik dalších oblíbených stylů: podtržení a značení.
Atribut textová dekorace(textová dekorace) slouží k podtržení textu a může nabývat následujících hodnot:
- blikat- blikající text (není podporován IE)
- line-through- přeškrtnutý text
- žádný- beze změn
- overline- řádek nad textem
- zdůraznit- podtržený text
Atribut textová transformace(transformace textu) se používá k práci s malými velkými písmeny a může nabývat následujících hodnot:
- kapitalizovat- všechna slova začínají velkým písmenem
- malá písmena- veškerý text je psán malými písmeny
- žádný- beze změn
- velkými písmeny- veškerý text je psán velkými písmeny
Příklad použití váha písma, styl fontu, textová dekorace, textová transformace: Příklad č. 9
HTML kód stránky:
Nepojmenovaná
„Zlatý prsten Ruska“(ve starověku Zalesye), turistická trasa, která zahrnuje síť starověkých ruských měst: Sergiev Posad, Pereslavl-Zalessky, Rostov Veliký, Jaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Jurij-Polsko, Uglich. Název Zalesye je primárně geografický, znamenal vše, co bylo „mimo les“ ve vztahu k Kyjevské Rusi.
Turistická trasa (v provozu od začátku roku 1970), vedená historickými městy, prochází územím pěti regionů - Moskva, Jaroslavl, Kostroma, Ivanovská, Vladimirská. Starověká města těchto zemí mají svůj vlastní osud, vlastní minulost. Prošli obtížnou cestou ve svém historickém vývoji od prvních dnů narození až po současnost. Na této dlouhé cestě bylo mnoho nenávratně ztraceno. Lhostejnost a nedbalost vedou k částečnému nebo úplnému zničení unikátních budov, jako jsou města Kalyazin, Mologa, Uglich. Při stavbě vodní elektrárny Uglich byl starověký pokrovský klášter s unikátními památkami 15. – 17. Století vyhozen do vzduchu a spadl. Polovina kostelů v Uglichu byla zbořena, ploty klášterů byly rozebrány, což zničilo celistvost jejich souboru. Snahou restaurátorů byly desítky předmětů starověké architektury, které se zdály být nenávratně ztraceny, zachráněny z nouzového stavu a zachráněny před zničením. Obnoveno k životu v původní podobě: architektonický soubor kláštera vzkříšení (1674-77) z Uglichu, kostel přímluvy na Nerlu (12. století), Dmitrievského katedrála (12. století) a „Zlatá brána“ Vladimíra , Katedrála sv. Jiří (12. století) Jurij-Polskij, památky starověkého Suzdalu, kde byly prováděny komplexní práce na obnově historických budov v celém městě, městské muzeum. Znovu byly vytvořeny celé architektonické komplexy muzeí dřevěné architektury v Kostromě a Suzdalu. To vše jsou výtvory lidských rukou, které se dotkly chráněných území Ruské země.
