Přidání CSS. Co je CSS, k čemu jsou CSS styly?

Už víme, že aby web vypadal krásně a stylově, musíme pracovat se souborem CSS. A aby mohly být naše styly aplikovány, musíme je kombinovat HTML soubor a soubor CSS.

Existuje několik možností pro provedení této operace: pomocí vnořených šablon stylů, externích šablon stylů a vloženého stylu.

Dnes budeme hovořit o poslední metodě.

Vložení stylu do značky HTML

Vůně tato metoda věc je nutná registrace vložíme dovnitř značky. Oddělený atribut - styl. Tento atribut lze aplikovat na jakoukoli značku, ale pouze v těle webu, tzn uvnitř těla. Hodnota tohoto atributu jsou operátory těch stylů, které je třeba aplikovat na daný prvek.

Nastavme například různé velikosti písma pro dva různé odstavce textu:

< p style= "font-size:25px;" >Nastavte tento kus textu na výšku písmene 25 pixelů. < p style= "velikost písma:15px; barva:#2400ff;"> Tento text bude mít písmena vysoká 15 pixelů a také jej zabarvíme do modra, abychom demonstrovali použití několika stylů současně.

Nedostatky

Příklad dokonale ukazuje, jak takový styling zanáší kód stránky.

Můžete si také všimnout několika dalších nevýhod použití této stylizační techniky. Prvním z nich je šíření stylu v celém dokumentu, což v budoucnu úpravy výrazně zkomplikuje proces.

Bude také obtížné formátovat velké množství textu. Myslím, že nikdo není spokojený s vyhlídkou na určení velikosti písma pro každý odstavec, zvláště pokud je takových odstavců 40.

Dokonce i při použití vestavěných stylů je nemožné používat pseudotřídy, což do značné míry svazuje ruce webdesignérovi.

Za zmínku také stojí zmatek, který se jistě objeví při použití atributu style. Tento zmatek vznikne kvůli použití různých uvozovek při zadávání stylů.

Pro přehlednost se podívejme na níže uvedený příklad:

< div style= "font-family: "Roboto Condensed", bezpatkové"> Zadání je správné. < div style= "font-family: "Roboto Condensed", bezpatkové"> To je také správně. < div style= "font-family: " Roboto Condensed ", sans-serif" >Toto není správný záznam. < div style= "font-family: " Roboto Condensed ", sans-serif" >A to také není pravda

Podíváme-li se na výše uvedené výpočty, logický závěr naznačuje, že použití vestavěných stylů je spojeno s řadou významných komplikací a nepříjemností.

Kdy použít vložený styl

Přes všechny nedostatky nebyl vestavěný styl vynalezen nadarmo. Webmasteři se na ně často obracejí v případě programatického zadání stylu. Podívejme se například na tento kód

< div id= "productRate" > < div style= "width: 40%" >

Zaznamenání požadované šířky pro tento blok bude jednoduchá operace.

Obdobná situace může nastat, pokud je nutné nahradit obrázek na pozadí (například) uživatele s rolí administrátora. V tomto případě nemusí být značka img vhodná. Proto stojí za to odkázat na atribut style:

< div style= "background:url(fon.jpg)" >

Programátoři se také často při vytváření vyskakovacích oken obracejí na vestavěné styly. Tento proces často probíhá takto: bloku, na jehož návrhu se pracuje, je přiřazen display:block a zbývající okna jsou skryta pomocí display:none, aby vizuálně nerušila programátorovu práci. Zde je příklad:

< div class = "element" style= "display:block" >Vyskakovací okno, které je navrženo jako tento moment

Sečteno a podtrženo

Používání vestavěných stylů je spojeno s řadou obtíží a nepříjemností, nicméně v procesu navrhování určitých prvků se webmasteři často obracejí na tuto metodu, aby optimalizovali svou práci.

V této kapitole si povíme, jak implementovat CSS do HTML dokumentu, tedy propojit popis stylu prvku přímo s prvkem samotným, nějakou HTML značkou.

Nářadí tento úkol možné třemi způsoby:

• Napište popis stylu přímo do samotného prvku. Tato metoda je dobrá pouze v případě, že je v ní pouze jeden takový prvek HTML dokument e, který vyžaduje samostatný popis stylu.
• Napište popis stylu pro všechny identické prvky dokumentu HTML. Tento způsob má své opodstatnění, pokud se styl stránky zásadně liší od celkového designu webu (skupina vzájemně propojených stránek).
• Extrahujte popis stylu prvků HTML do samostatného souboru CSS. To vám umožní spravovat design celého webu, každé stránky webu, na které je uveden odkaz na soubor CSS. Tato metoda je nejúčinnějším využitím kaskádových stylů.

Pojďme se na jednotlivé možnosti podívat blíže a zároveň se seznámit s pravidly syntaxe psaní CSS.

Atribut stylu.

Téměř každý HTML tag má nějaký atribut styl, což znamená, že na tuto značku je použit určitý popis stylu.

Píše se to takto:

style="">

Vše, co bude napsáno mezi uvozovkami atributu styl a bude popisem stylu pro tento prvek, v tomto případě prvek

No, například:

style="color: #ff0000; font-size:12px"> toto je odstavec s osobním stylem

V tomto případě jsme určili, že tento odstavec by měl být zobrazen červeně a měl by mít velikost písma 12 pixelů. V následujících kapitolách budu hovořit podrobně o tom, co je napsáno v uvozovkách, ale nyní mluvíme o tom, jak aplikovat CSS na jakýkoli HTML tag.

Pomocí stejného principu můžete určit individuální styl pro téměř každý prvek HTML.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> Vše o slonech

Kupte si slona

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">Půjčte si slona

style="color: #ff0000; font-size:14px">

Ale ještě jednou, tento způsob zavedení CSS je dobrý pouze v případě, že potřebujete nastavit určitý styl pro malý počet HTML prvků.

Štítek (neplést se stejnojmenným atributem), ve kterém jsou popsány prvky, které potřebujeme.

Podívejte se na příklad, níže budou komentáře.

Vše o slonech

Na této stránce najdete veškeré informace o slonech.

Kupte si slona

U nás si můžete koupit ty nejlepší slony za konkurenční ceny!!

Půjčte si slona

Pouze zde si můžete pronajmout jakékoliv slony!!

Jak je vidět z příkladu, dosáhli jsme úplně stejného výsledku jako v prvním případě, jen nyní nepřiřazujeme styl každému prvku jednotlivě, ale umísťujeme jej do „hlavy“ dokumentu, čímž dáváme najevo, že všechny nadpisy

,

- odstavce budou modré

- Červené. Představte si, o kolik snazší by byla naše práce, kdyby na stránce bylo sto takových odstavců a asi patnáct nadpisů a samotný dokument by vážil méně tím, že by „odstranil“ všechny opakující se popisy stylů pro každý jednotlivý prvek.

Nyní slíbené komentáře:

Štítek styly určitých prvků HTML jsou přímo deklarovány podle následující syntaxe:

Pokud je v bloku deklarace stylu uvedeno několik vlastností prvku, jsou odděleny středníkem.

CSS v samostatném externím souboru.

Jak dlouho trvá, než se zkrátí, se dostáváme k hlavní, dle mého názoru, výhodě CSS, a to možnosti dát všechny informace související s designem webu do samostatného externího souboru.

Otevřete tedy poznámkový blok (nebo jiný editor) a napište do něj následující text:

Tělo (barva pozadí: #c5ffa0)
a (barva:#000060; váha písma: tučné;)
a:hover (barva:#ff0000; váha písma: tučné; zdobení textu:žádné)
h1 (barva: #0000ff; velikost písma: 18px)
h2 (barva: #ff00ff; velikost písma: 16px)
p (barva: #600000; velikost písma:14px)

Pokusím se podrobně vysvětlit, co jsme o této podivné věci napsali v následujících kapitolách této učebnice.

Všechno! Soubor popisu stylu byl vytvořen! Teď už zbývá jen málo, totiž donutit potřebné stránky našeho webu čerpat informace z tohoto souboru.

To se provádí pomocí značky (spojení). Štítek víceúčelový a slouží k „propojení“ HTML dokumentu s dalšími externími soubory, které zajišťují jeho správnou funkci. Štítek je druh odkazu, určený pouze ne pro uživatele, ale pro programy prohlížeče (prohlížeče). Protože nese výhradně oficiální informace je umístěn v záhlaví dokumentu HTML mezi značkami a prohlížeče jej nezobrazují na obrazovce.

Štítek má atributy:

href- Cesta k souboru.
rel- Definuje vztah mezi aktuálním dokumentem a odkazovaným souborem.

• ikona zástupce – Určuje, že zahrnutý soubor je .
• šablona stylů- Určuje, že zahrnutý soubor obsahuje šablonu stylů.
• application/rss+xml – Soubor ve formátu XML pro popis zpravodajského kanálu.

typ- Typ dat MIME připojeného souboru.

Protože se připojujeme jako externí soubor kaskádových stylů, pak má náš odkaz na službu následující podobu:

Opakuji, abych jistě rozptýlil možná nedorozumění. Atribut rel přiřadit hodnotu šablona stylů Protože připojujeme kaskádový styl jako externí soubor, uvedeme cestu k souboru css (v tomto příkladu se soubor nazývá mystyle.css a leží vedle dokumentu HTML, ve kterém je zapsáno tento odkaz) to také naznačujeme tento soubor text a obsahuje popis stylu type="text/css"

Nyní vložíme tento řádek do záhlaví stránek našeho webu a užijeme si výsledek..

soubor mystyle.css
tělo (barva pozadí: #c5ffa0)
a (barva:#000060; váha písma: tučné;)
a:hover (barva:#ff0000; váha písma: tučné; zdobení textu:žádné)
h1 (barva: #0000ff; velikost písma: 18px)
h2 (barva: #ff00ff; velikost písma: 16px)
p (barva: #600000; velikost písma:14px)
soubor index.html

Jídelní lístek:

Vše o slonech

Na této stránce najdete veškeré informace o slonech.

Jídelní lístek:

Kupte si slona

U nás si můžete koupit ty nejlepší slony za konkurenční ceny!!

Jídelní lístek:

Půjčte si slona

Pouze zde si můžete pronajmout jakékoliv slony!!

Ve výše uvedeném příkladu „stránka o slonech“ jsou aktuálně tři stránky, z nichž každá je spojena s jednou jedinou externí css soubor - mystyle.css. Výrazně jsme to tedy „odložili“ a design celého webu udělali „mobile-friendly“. Představte si, kolik kilobajtů bychom vyhráli, kdyby tento web měl sto plnohodnotných stránek!? A také, kolik času bychom ušetřili, kdybychom potřebovali cokoliv změnit v jeho designu!?

V této kapitole jsme se podívali na tři způsoby, jak vložit CSS do dokumentu HTML. Který je lepší použít?

• Použít atribut styl pro jakýkoli prvek, pokud je tento prvek s odlišným stylem od ostatních prvků jediný na celém webu.
• Použijte značku
  
  

  Toto je nadpis

  
  

  Toto je odstavec.

  
  

  Externí CSS

  Externí seznam stylů se používá k definování stylu pro mnoho stránek HTML.

  Pomocí externí šablony stylů můžete změnit vzhled celého webu pouze jednou změnou souboru!

  Chcete-li použít externí šablonu stylů, přidejte na ni odkaz do sekce HTML stránky:

  Příklad

  
  
  
  
  
  

  Toto je nadpis

  
  

  Toto je odstavec.

  
  

  Externí šablonu stylů lze napsat v libovolném textový editor. Soubor nesmí obsahovat HTML kód a musí být uložen s příponou . CSS.

  Takto vypadá "styles.css":

  tělo (
  barva pozadí: prášková modrá;
  }
  h1 (
  barva:modrá;
  }
  p(
  červená barva;
  }

  CSS fonty

  Vlastnost CSS color určuje barvu textu, která se má použít.

  Vlastnost CSS font-family určuje písmo, které se má použít.

  Vlastnost CSS font-size určuje velikost textu, který bude použit.

  Příklad

  
  
  
  
  
  

  Toto je nadpis

  
  

  Toto je odstavec.

  
  

  Hraniční CSS

  Vlastnost CSS border definuje ohraničení kolem prvku HTML:

  Příklad

  p(
  }
  

  CSS výplň

  Vlastnost CSS padding definuje odsazení (mezera) mezi textem a okrajem:

  Příklad

  p(
  ohraničení: 1px pevná prášková modrá;
  odsazení: 30px;
  }

  Od autora: Dobrý den, milí čtenáři portálu webformyself. Při vývoji webových stránek je velmi důležitý design webového zdroje. To má na svědomí jazyk CSS (kaskádové styly), o kterém si dnes povíme. Nebo spíše o jeho zapojení a využití. Podívejme se na některé styly css pro web, které se používají při navrhování webových stránek.

  Připojování css

  Dnes už jen stěží někde najdete webovou stránku, která by byla vytvořena čistě pomocí možností html. Ve skutečnosti by vzhled takových stránek byl prostě hrozný, a proto, když je připraveno označení potřebných prvků, je třeba je okamžitě navrhnout, a to se provádí pomocí pomocí css PROTI samostatný soubor.

  Je třeba říci, že obecně existují i ​​možnosti pro vložení stylů do html souboru. Lze je například definovat pomocí atributu style nebo stejného tagu. Tomu se říká inline styly. Tento přístup dnes není vítán a porušuje moderní vývojové standardy.

  Jak to udělat správně, ptáte se? Chcete-li to provést, musíte vytvořit nový soubor s příponou css a poté jej připojte k html. To se provádí velmi jednoduše pomocí značky odkazu, která má na starosti připojení externích souborů. Dělá se to takto:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Štítek je jednoduchý, jak jste již pochopili. Řeknu vám trochu více o jeho vlastnostech:

  rel = „stylesheet“ – obecně se atribut rel zapisuje pro určení role souboru na stránce. V našem případě je rolí šablona stylů, což je naznačeno.

  type = „text/css“ – tzv. MIME typ, který je obvykle určen všem zahrnutým souborům, aby je prohlížeč správně interpretoval. V moderních webových prohlížečích lze tento atribut vynechat.

  href = “style.css” je standardní atribut označující adresu našeho externího souboru. V tomto případě se zapisuje na základě toho, že soubor má styl názvu, příponu css a je umístěn ve stejné složce jako html dokument.

  Jak vidíte, při připojování css souborů se změní pouze atribut href vše ostatní není potřeba měnit. Ke stránce můžete připojit tolik šablon stylů, kolik chcete, ale za optimální se považují ne více než 2–4, protože příliš mnoho požadavků na server také není příliš dobré.

  Kde mohu získat hotové styly CSS pro web?

  Dobře, s tím spojením je doufám vše víceméně jasné. Vy ale vytváříte prázdný soubor, a aby byl efekt přidání vidět, musíte si pravidla buď napsat sami, nebo je odněkud převzít.

  

  Na internetu je například spousta bezplatných HTML šablon. Pokud si některý z nich stáhnete, určitě bude uvnitř hotový stylový list s nezbytnými pravidly pro design webu. Správně však bude fungovat pouze pro svůj vlastní html dokument. Faktem je, že tyto dva jazyky jsou propojeny pomocí takzvaných selektorů.

  Selektor je vlastnost jazyka CSS, která je pro něj jedinečná. K čemu jsou potřeba? No, představte si tento kód:

  Text záhlaví

  Text v odstavci

  A jak můžeme například navrhnout odstavec a nadpis v CSS? To je důvod, proč jsou selektory vytvořeny pro přístup pouze k těm prvkům, které jsou potřeba. Například:

  p( font-size: 12px; ) .title( font-size: 36px; )

  velikost písma: 12px; Název ( velikost písma: 36px;

  Velikost písma pro všechny odstavce jsme nastavili na 12 pixelů a prvky s třídou title (v našem případě h1) dostaly mnohem větší velikost písma 36 pixelů. Všimněte si, že v případě odstavců se styly vztahují na všechny, bez ohledu na to, kolik jich na stránce je.

  Druhý selektor řešil pouze jeden prvek – třídu titulků. Samozřejmě můžeme vytvořit další prvky s přesně stejnou třídou, to není zakázáno a dostanou stejné pravidlo, ale pokud jen zapíšeme html tag h1 (bez třídy title), pak pro něj nebudou přidána žádná pravidla.

  Tento pohodlný způsob umožňuje CSS vybrat prvky, které potřebujete, a ty nepotřebné nechat na pokoji. S čím to souvisí hotové styly které najdete na internetu? Všechno tam je svázáno s určitými třídami a identifikátory, takže tyto tabulky nemůžete snadno připojit k žádným souborům, nebudou fungovat, pokud požadované prvky nebudou mít v html příslušné třídy.

  Například v šabloně stylů vidíme následující kód:

  Nav( šířka: 300px; pozadí: aqua; ... ) .nav a( display: block; color: #ccc; ... )

  Nav( šířka: 300px;

  Už jen z toho můžeme usoudit, že někde na naší html stránce by měl být prvek s třídou nav a ten by měl obsahovat odkazy. Pokud je to pravda, pak se na ně aplikuje design a podle toho se změní i jejich vzhled. Pokud nebudou detekovány žádné takové prvky, bude kód jednoduše ignorován.

  Na webu toho zase najdete tunu. hotové šablony, ve kterém můžete vidět tento vztah třídy, takže pokud něco změníte v html, je třeba provést odpovídající operace v šabloně stylů.

  Jak si sami vytvořit CSS styly pro svůj web?

  Css není nic děsivého nebo extrémně obtížného. Jedná se o běžnou technologii vytvořenou lidmi pro navrhování webových stránek a má svá vlastní pravidla. Stačí jim porozumět a i vy budete moci pomocí tohoto jazyka vytvořit podobu webových zdrojů.

  

  Nejdůležitější podmínkou pro rychlé zvládnutí je neustálá praxe spojená s novými poznatky, které se sami naučíte. Naši vám mohou poskytnout podobnou praxi.

  V naší prémiové sekci se navíc můžete naučit a zvládnout základy CSS. Existuje jeden z kurzů, který se celý věnuje základním vlastnostem tohoto jazyka. .

  Nejdůležitější je být odhodlaný studovat a odhodit předsudky, že je to velmi obtížné. Pomoci vám mohou také bezplatné materiály na našem webu, články a videonávody. Pokud si přejete, můžete je také použít k získání základních znalostí, které jsou potřeba při práci s css.

  Tímto se s vámi loučím. Přečtěte si náš blog webformyself a zdokonalte své znalosti v oblasti tvorby webových stránek.

  > Základní styly css pro tvorbu webu Styly zobrazení pro kontejnery a jejich obsah se zpravidla zapisují do šablony stylů, která se obvykle nazývá stile.css, i když ji lze nazvat jakkoli. Hlavní věc je, že na stránce ve značce byla správná cesta k šabloně stylů

  Chcete-li nastavit styl pro kontejner na stránce, můžete mu přiřadit třídu. Například kontejner

  můžete přiřadit styl nazvaný chapka_saita, pak je kontejneru na stránce přiřazena třída

  obsah

  . Seznam stylů určuje styly pro chapka_saita. Název v tabulce stile.css začíná tečkou.

  Chapka_saita (in složené závorky označit styly)

  Můžete také určit styl pro kontejner přímo, pokud mu není přiřazena třída. Například styl pro kontejner

  obsah

  začíná názvem kontejneru

  Záhlaví (styly označujeme ve složených závorkách)

  Můžete také určit styly pro kontejnery pomocí identifikátoru, pak to vypadá takto

  obsah

  , v šabloně stylů začíná identifikátor symbolem hash

  #blok1 (styly označujeme ve složených závorkách)

  Pokud potřebujete určit styly nadpisů v kontejnerech, odkazech, obrázcích, vypadá to takto.

  Chapka_saita (hlavní styl kontejneru ve složených závorkách)
  .chapka_saita h1, h2 (styl pro nadpisy ve značkách

  A

  pro tento kontejner)
  .chapka_saita a (styl odkazů v tomto kontejneru)
  .chapka_saita a:hover ( styly pro odkazy po přejetí myší )
  .chapka_saita img (styly pro obrázky v tomto kontejneru)
  Samotné styly jsou psány v těchto složených závorkách a odděleny středníky;

  Rodina písem: Arial; určuje písmo kontejneru, které se obvykle používá ve značce , ve kterém je veškerý obsah stránky

  Výška řádku: 1,2; nastavuje výšku řádku pro písmo

  Odsazení

  odsazení: 10px; nastavuje vnitřní odsazení obsahu od okraje kontejneru, v tomto případě je odsazení 10 pixelů, hodnotu můžete zadat v procentech nebo v em
  okraj: 5px; nastavuje vnější okraje kontejneru,
  okraj: 10px 5px 0px 15px; Odsazení lze zadat samostatně pro každou stranu
  margin-bottom: 10px; Můžete určit odsazení pouze na jedné straně, v tomto případě je odsazení zdola 10 pixelů. Totéž lze aplikovat na vnitřní polstrování.

  Níže je uveden příklad stylů značky

  Text (levý okraj: auto; pravý okraj: auto; šířka: 930px; velikost písma: 12px; rodina písem: Arial; výška řádku: 1,2; obrázek na pozadí: url(images/fon.jpg); )

  Styly textu

  velikost písma: 12px; určuje velikost písma, lze ji zadat v pixelech, procentech nebo ems
  barva: #0000ff; označuje barvu písma, v tomto případě #0000ff modrá, můžete zadat slovo, například barva: zelená; to znamená, že barva je zelená.
  text-dekorace: žádná; odstraňuje podtržítko, používá se pro odkazy k odstranění podtržítka
  text-transform:velká písmena; dělá všechna písmena textu velkými namísto velkých, můžete psát jiné významy a naopak horní nebo dolní podtržení nebo přeškrtnutí;
  váha-fontu:tučné; dělá písmo tučným, místo tučného lze použít jiné hodnoty
  text-align:left; nastaví zarovnání textu, v tomto případě vlevo, na levou stranu kontejneru, můžete nastavit hodnotu conter, hight.
  text-shadow: 1px 2px 1px 0px #000000; barva: #f9f5ed; stín pro text

  Styly kontejnerů

  barva pozadí: #DCDCDC; přiřadí kontejneru barvu pozadí, v tomto případě #DCDCDC šedou
  background-image: url(images/fon.jpg); nastaví obrázek na pozadí

  Ohraničení: 1px plný #E8E8E8; přiřadí ohraničení, fráze solid znamená plné ohraničení, #E8E8E8 je barva ohraničení. Pro každou stranu můžete určit samostatný okraj, například border-top: 2px solid #E8E8E8;
  border-radius: 10px; zaoblení rohů kontejneru, můžete nastavit jiné zaoblení v každém rohu border-radius: 2px 6px 10px 0px;
  box-shadow: #2C2C29 10px 10px 10px; stínidlo pro nádoby

  Šířka:926px; označuje šířku nádoby
  výška: 240px; výška nádoby

  plavat vlevo; stiskne kontejner na levou stranu, ve výchozím nastavení jsou kontejnery v pořádku, a pokud chcete seřadit několik bloků, pak musí nastavit vlastnost float:left; a šířka výška: px; tak, aby odpovídaly šířce nadřazeného kontejneru.
  plovák:pravý; totéž, ale nádoby jsou přitisknuty k pravé straně.
  Pokud chcete vytvořit kontejner uprostřed, zadejte šířku a okraje jsou avto , příklad: margin-left: auto; pravý okraj: auto; šířka: 150px;