V prvom rade si zadefinujme, ako web vyzerá takpovediac zvnútra. Bez toho, aby sme zachádzali do detailov, to môžeme povedať web je súbor súborov, ktoré sa nachádzajú na serveri (hostingu) na internete a vzájomne interagujú podľa určitých scenárov. Výsledkom tejto interakcie sú práve stránky, ktoré si denne prezeráte.
Preto musia byť všetky tieto súbory, ktoré tvoria stránku, niečím naplnené. Presne tak, je! A sú naplnené kódom. Takže tu to je každá z kryptických skratiek je jazyk, na ktorom sú napísané stránky a skripty, ktoré tvoria web.
Čo je HTML?
HTML (Hypertext značkovací jazyk) je hypertextový značkovací jazyk. Nie je to celkom jasné, však? Pri zjednodušení definície môžeme povedať, že HTML je „kostra“ každej stránky.
Príkladom je nasledujúca časť stránky, ktorú sme vymysleli:
Názov stránky
viditeľná časť odkazu (kotva)
Názov stránky
Toto je text, odsek, uzavretý v značkách. HTML sa spravidla skladá zo značiek, ktoré sa otvárajú a zatvárajú a rámujú určité prvky. A teraz odstavec textu skončí a dodáme.
viditeľná časť odkazu (kotva)Prečo "kostra"? Ak sa pozriete pozorne, interpretovaný kód nie je vôbec naformátovaný. Žiadne farby, žiadne veľkosti, žiadne umiestnenie.
Môžeme z toho vyvodiť záver HTML je sada značiek, ktoré tvoria základ akejkoľvek stránky na internete. S ich pomocou deklarujeme nadpisy, odseky, odkazy, obrázky a ďalšie prvky.
Čo je CSS?
CSS (anglicky Cascading Style Sheets – kaskádové štýly) – to je tá „magická mágia“, vďaka čomu vyzerá značenie HTML pekne. O Pomocník CSS máme možnosť akýmkoľvek spôsobom upraviť akýkoľvek prvok špecifikovaný v značke.
Myslím, že najlepšie je uviesť príklad:
Zebry
Farbenie
Zistite viac o zebrách!
- Bez Použitie CSS
- Používanie CSS
Zebry
Zebry (lat. Hippotigris) - podrod rodu koní, vrátane druhov zebry Burchellovej (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horskej (Equus zebra). Hybridné formy medzi zebrami a domácimi koňmi sa nazývajú zebroidy, medzi zebrami a somármi - zebruly. Zebry žijú v malých skupinách pozostávajúcich zo samíc s mláďatami a jedného žrebca.
Farbenie
Čo sa týka sfarbenia pozadia zebry, často sa vyskytujú dve vzájomne sa vylučujúce polohy: biela alebo čierna. Kurátorka veľkých cicavcov v Atlante Zoo Lisa Smith hovorí, že odborníci najčastejšie opisujú zebry ako čierne kone s bielymi pruhmi.
Zebry
Zebry (lat. Hippotigris) - podrod rodu koní, vrátane druhov zebry Burchellovej (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horskej (Equus zebra). Hybridné formy medzi zebrami a domácimi koňmi sa nazývajú zebroidy, medzi zebrami a somármi - zebruly. Zebry žijú v malých skupinách pozostávajúcich zo samíc s mláďatami a jedného žrebca.
Farbenie
Čo sa týka sfarbenia pozadia zebry, často sa vyskytujú dve vzájomne sa vylučujúce polohy: biela alebo čierna. Kurátorka veľkých cicavcov v Atlante Zoo Lisa Smith hovorí, že odborníci najčastejšie opisujú zebry ako čierne kone s bielymi pruhmi.
Nie je ťažké vidieť, že použitie CSS je neoddeliteľnou a dôležitou súčasťou procesu vývoja stránky., pretože sú to šablóny štýlov, ktoré vám umožňujú programovo realizovať všetku krásu, ktorú predtým dizajnér nakreslil.
Kód CSS je zvyčajne uložený v súbore oddelenom od označenia stránky a je zahrnutý vo všetkých dokumentoch, ktoré ho potrebujú. Nebudeme sa baviť o syntaxi a pravidlách používania, keďže to presahuje rámec nášho článku, urobím však výhradu, že napriek všetkým možnostiam, ktoré sa s CSS otvárajú, je celkom jednoduché naučiť sa jeho vlastnosti.
Čo je PHP?
PHP (rekurzívna skratka pre PHP: Hypertext Preprocessor) je bežný programovací jazyk open source na všeobecné účely. PHP je navrhnuté špeciálne pre vývoj webu a jeho kód je možné vložiť priamo do HTML.
Čo to pre nás znamená? Pozrime sa na príklad použitia PHP:
echo "Ahoj svet! Som PHP skript.";
?>
Ahoj svet! Som PHP skript.
Charakteristický rozlišovací znak daný jazyk je, že výsledkom jeho spracovania môže byť bežné html značky(HTML kód). Preto sa aktívne používa vo webovom programovacom prostredí. Za zmienku tiež stojí, že na rozdiel od HTML dokáže PHP komunikovať so serverom, ako aj prehliadať databázy, „ťahať“ potrebné informácie a zobraziť na stránke.
PHP kód je oddelený špeciálnymi počiatočnými a koncovými značkami, ktoré vám umožňujú "prepínať" do a z "režimu PHP", keď ste v značke HTML. PHP skripty môžu byť tiež umiestnené v samostatných súboroch od označenia, ak je ich úloha rozsiahla a vyžaduje veľa kódu.
Vďaka programovacím jazykom, ako PHP(a samotné PHP) sa stalo možným vytvorenie CMS(Content Management System, CMS) alebo Content Management Systems.
Čo teraz potrebujeme vedieť? PHP skripty sú akýmsi „konštruktorom lepidla“, ktorý umožňuje naprogramovať výstup rôznych informácií na obrazovke používateľa. Na vytvorenie obyčajnej statickej stránky na internete to stačí pomocou HTML spárované s CSS. Ale ak je táto stránka (napríklad novinky) súčasťou nejakej dynamickej stránky, potom je jej vzhľad s najväčšou pravdepodobnosťou výsledkom spustenia PHP skriptu.
čo je JS?
JavaScript – skriptovací jazyk založený na prototype. Ako vždy, definícia nedáva žiadne pochopenie pre neprogramátora, preto sa pokúsime pochopiť pomocou jednoduchých téz.
Na začiatok navrhujem zvážiť malý príklad toho, čo sa dá urobiť pomocou JS:
Dobrý deň, milí čitatelia blogu. Dnes chcem začať hovoriť o CSS podrobne (materiály budú nahromadené v zodpovedajúcom).
Po naučení Html je čas prejsť na to. Značkovací jazyk štýlu je zodpovedný za vonkajší dizajn stránok lokality a bez jeho pochopenia bude veľmi ťažké niečo opraviť, presunúť alebo zarovnať.
Samozrejme, CSS vyzerá oveľa komplikovanejšie ako Html, ale to je, pokiaľ ide o rozloženie medzi prehliadačmi, ale pokiaľ ide o opravu nejakej maličkosti v dizajne vašej vlastnej stránky, nepotrebujete veľa pozornosti. Vo všeobecnosti sa pokúsime podrobne rozobrať jeho základy a nuansy ich filigránskeho použitia zostanú pre nepovinné štúdium (voliteľné). Všetci webmasteri však musia poznať základné pojmy.
Čo je to jazyk CSS a na čo slúži?
Skratka CSS znamená Cascading Style Sheets alebo v ruskom preklade ako Cascading Style Sheets. Čo to je a prečo bol tento jazyk vynájdený naraz?
Takže na základe toho, čo sme študovali trochu skôr, môžeme povedať, že označenie webového dokumentu sa vykonáva pomocou značiek tohto jazyka. Tie. Pomocou HTML vytvárame štruktúru našich dokumentov (webových stránok). Napríklad v čistom Html môžeme nastaviť ďalšie prvky štruktúry dokumentu, a dokonca im dať v prehliadači taký vzhľad, aký potrebujeme.
Čas však diktoval potrebu používať čoraz viac atribútov vizuálneho dizajnu v HTML, čo značne zasypalo zdroj. V tejto súvislosti bola navrhnutá ďalšia, sľubnejšia možnosť rozvoja - vytvorenie samostatného značkovacieho jazyka štýlu CSS. A táto možnosť mala množstvo výhod oproti jednoduchému zvýšeniu počtu dizajnových atribútov.
prečo? Pamätáte si, ako môžete nastaviť farbu fragmentu textu v čistom Html? Presne tak, s . A ak chcete vyfarbiť v požadovanej farbe niekoľko odsekov v texte naraz?
Potom budete musieť do každého z nich vložiť značky Font s požadovanou hodnotou farby v atribúte Color (značka odseku P je bloková značka, čo znamená, že ju nemožno umiestniť do vloženého prvku Font).
To všetko strašne zahltí zdrojový kód, čo je veľmi, veľmi nežiaduce, pretože tým utrpí rýchlosť načítania stránok a vytvorí sa zbytočné zaťaženie zariadení internetovej komunikácie. Vývojári na to nemohli „ísť“.
Preto prišli s nasledujúcim východiskom z tejto situácie. Vývojári W3C sa rozhodli štylizovať všetky vizuálne reprezentácie webového dokumentu do špeciálneho značkovacieho jazyka s názvom Cascading Style Sheets alebo jednoducho CSS (vyslovuje sa CES). Čo je podstatou technológie?
A podstata je toto – pripojením značkovacieho jazyka štýlu k ľubovoľným dokumentom (stránkam) môžeme nastaviť vizuálnu reprezentáciu všetkých tých prvkov (vytvorených Html tagmi), ktoré sa v tomto dokumente budú nachádzať.
Na internete existuje zdroj, ktorý pomáha veľmi jasne vidieť, ako môže webová stránka zmeniť svoj vzhľad len preto, že obsahuje iný súbor kaskádových štýlov. Podľa môjho názoru by to bola najlepšia odpoveď na otázku: čo je CSS a prečo je to potrebné.
Základné zobrazenie dokumentu (webovej stránky) si môžete pozrieť kliknutím na tento odkaz:
Nič zvláštne, ale ak kliknete na odkaz Zobraziť všetky návrhy v ľavej ponuke, môžete zobraziť desiatky alebo dokonca stovky možností dizajnu pre tú istú webovú stránku zahrnutím iného dizajnu štýlu (ďalší súbor so štýlmi).
Upozorňujeme, že pôvodný kód Html zostáva úplne rovnaký a len zmeny CSS štýl . Zarážajúce, však?!
CSS nie je značkovací jazyk v rovnakom zmysle ako napríklad Html. Toto je značkovací jazyk štýlu - má svoju vlastnú syntax, svoj vlastný vnútorný obsah av mnohých ohľadoch sa bude veľmi líšiť od predtým študovaného.
V porovnaní s Html je tiež značkovací jazyk štýlu oveľa zložitejší. Má veľa nuancií, ktoré budete potrebovať vedieť okrem základných pojmov. V HTML neboli žiadne špeciálne nuansy - študovali ste všetky prvky a môžete bezpečne pracovať s kódom. Zdá sa mi, že CSS možno prirovnať k šachu – nestačí vedieť, ako sa všetky figúrky pohybujú, ale musíte vedieť aj hrať.
Takže, čo to je a z čoho pozostáva? Tento údajný jazyk môže rozdeliť na dve časti:
- Pravidlá, ktoré povedia prehliadaču, ako by mal prvok vyzerať na obrazovke.
- Selektory sú označenia, ktoré umožňujú prehliadaču presne pochopiť, na ktoré prvky kódu HTML bude musieť použiť tieto pravidlá.
Teraz sa pozrime na to, ako je štýl definovaný v štýloch prepojený so zdrojovým kódom webovej stránky. Existujú tri hlavné spôsoby pomocou css s html:
- Nesting – CSS kód sa zapisuje priamo do požadovaného tagu prvku pomocou atribútu Style
- Vkladanie – celý kód štýlu pre webový dokument sa zapisuje do jeho hlavičky (v rámci značiek Head) pomocou prvku Style
- viazanie - všetky CSS kód je umiestnený (renderovaný) v samostatnom externom súbore, ktorý je prepojený s dokumentom pomocou prvku Link v jeho hlavičke
No, vidíte, ako sme sa už veľa naučili o značkovacom jazyku štýlu. Teraz je čas o tom hovoriť syntax. Vo všeobecnosti je to celkom jednoduché:
Jedno pravidlo v kóde CSS pozostáva z dvoch prvkov – vlastnosti (v našom príklade je to ) a jej hodnoty (v našom príklade je to červená a #CCCCCC). Predpokladom je oddelenie vlastnosti od jej hodnoty dvojbodkou.
Ďalej. Jedno pravidlo je bez problémov oddelené od druhého bodkočiarka. Po poslednom pravidle už nebude možné vkladať bodkočiarku, ale aby sa predišlo excesom, je najlepšie, aby bolo pravidlom vždy vkladať. v kóde CSS nemajú žiadny význam a môžete si ich nastaviť podľa vlastného uváženia.
Použitie štýlu na pripojenie CSS k kódu HTML
Teraz sa pozrime na príklady všetkých tých spôsobov aplikácie pravidiel štýlu na náš dokument, ktoré existujú a ktoré boli všeobecne opísané vyššie.
Prvá metóda sa nazýva metóda vkladanie css do html pomocou atribútu Style:
Pozrime sa, ako môžeme použiť túto metódu ak chcete nastaviť farbu a pozadie odseku:
Čo je metóda hniezdenia
Ako vidíte, jedným jednoduchým pohybom sme vyfarbili text odseku červenou farbou (color:red) a zároveň sme ho umiestnili pod sivé pozadie(pozadie:#cccccc). Štýl je jedným z tých šiestich, ktoré možno použiť s úplne ľubovoľnou značkou (sú uvedené v spodnej časti snímky obrazovky):
V Css budeme aktívne používať aj univerzálne, ale o tom sa bude diskutovať v ďalších článkoch, ale zatiaľ sme zvažovali možnosť použiť štýl na pripojenie pravidiel štýlu k určitým prvkom. html kód. Umožňuje vám použiť ako svoju hodnotu súbor rovnakých pravidiel (v neobmedzenom počte).
Metóda vnorenia pomocou atribútu Style je v praxi veľmi jednoduchá na implementáciu, no napriek tomu je v reálnom rozložení používané veľmi zriedkavo. Ale na druhej strane, s jeho pomocou môžete veľmi jednoducho niečo vyskúšať a experimentovať a až potom preniesť všetky tieto pravidlá do samostatného súboru s tabuľkami CSS štýly.
Ďalší spôsob pripojenia značkovacieho jazyka štýlu sa nazýva metóda vkladanie css do html. Táto metóda sa zásadne líši od predtým uvažovanej metódy hniezdenia.
Namiesto zahrnutia atribútu Style, ktorý obsahuje pravidlá jazyka štýlu do každej značky na stránke, teraz napíšeme všetky pravidlá CSS, ktoré potrebujeme pre tento webový dokument, do jedného jediného Značka štýlu, ktorý bude zase umiestnený v hlavičke tohto dokumentu (medzi prvky Head).
Pamätáte si, čo je Head a kde je napísaný v štruktúre webového dokumentu? Ak si nepamätáte, pozrite sa na tento vývojový diagram:
Tie. v kóde to môže vyzerať takto:
... ...
Nie je to celkom jasné? No a teraz sa to pokúsim ilustrovať:
Aby prehliadač neakceptoval pravidlá štýlu ako hypertextový značkovací jazyk, požadovaný atribút bude potrebné napísať do prvku Style Napíšte s hodnotou „text/css“(hlavička mediálneho obsahu pre kaskádové štýly). To. kód uzavretý v tomto prvku bude prehliadač interpretovať ako CSS.
Pozrime sa na príklad vyššie. Ako vidíte, štýl vládne uzavretý v rovnátka , a pred nimi je napísaný takzvaný selektor v tvare latinského písmena „P“. Prečo je tento selektor potrebný?
Ako inak môžeme prehliadaču povedať, že tieto pravidlá CSS bude potrebné použiť iba na značky odsekov (selektor P) tento web dokument a nič iné.
Tu sme sa opäť dotkli otázky syntaxe. Pri použití metód vkladania a vkladania musia byť všetky pravidlá značkovacieho jazyka uzavreté v zložených zátvorkách a pred nimi musí byť určite sa postav alebo viacero voličov:
Selektor CSS (vlastnosť: hodnota; vlastnosť: hodnota)
Pri použití metódy hniezdenia sme nepoužili selektor a kučeravé zátvorky, pretože prehliadaču už bolo jasné, že tieto pravidlá CSS by sa mali aplikovať presne na značku, v ktorej je zaregistrovaný atribút Style.
Pri použití metódy vkladania alebo vkladania sa situácia s určovaním, komu sú tieto pravidlá štýlu určené, skomplikovala a vyžadovala použitie zložených zátvoriek a selektorov. To. naznačujeme prehliadaču, že túto sadu pravidiel CSS (uzatvorenú v zložených zátvorkách) láskavo aplikujete na všetky odseky a táto sada je určená na niečo iné.
V najjednoduchšom prípade môžete ako selektor použiť názov tagu, na ktorý treba aplikovať pravidlá jazyka CSS, uzavretý do zložených zátvoriek, ktoré sa otvárajú hneď za názvom selektora. V našom príklade sa ako selektor používa názov značky odseku "P". O selektoroch v značkovacom jazyku štýlov si podrobnejšie povieme v ďalšom článku (pozri odkaz vyššie).
Aby som to zhrnul pre metódu vloženia kódu CSS do dokumentu Html – všetky pravidlá štýlu potrebné pre tento dokument budú popísané v jednej značke Style a nie v mnohých rôznych prvkoch, ako by to bolo pri použití metódy vnorenia opísanej práve vyššie.
Presun šablón so štýlmi CSS do samostatného súboru pomocou odkazu
Posledný spôsob integrácie kódu štýlu do webového dokumentu sa nazýva spôsob viazania. Najjednoduchší spôsob, ako ilustrovať túto metódu, je:
Jeho hlavný rozdiel od metód diskutovaných vyššie (vnorenia a vloženia) je v tom, že pri použití metódy prepojenia sú všetky pravidlá jazyka CSS umiestnené v samostatnom externom súbore. Bude to opäť text (ako každý Html dokument) a zvyčajne má prípony .css, aby sa dal otvoriť lokálny počítač pod Ovládanie Windows mohli byť pridelené špeciálny program ().
Pri použití externého súboru CSS, špeciálne Značka odkazu, ktorý sa zapisuje opäť medzi otvárací a zatvárací prvok Head v hlavičke webovej stránky. Odkaz patrí do kategórie, ktorá nie je viditeľná v prehliadači.
Prehliadač v tomto prípade nájde zadaný súbor so štýlmi (predtým, ako je špecifikovaný v atribúte Href značky Link), načíta ho a použije pravidlá jazyka CSS špecifikované v ňom vonkajší dizajn aktuálny html dokument.
Vo všeobecnosti je prepojenie veľmi podobné použitiu značky Style popísanej o niečo skôr, ale umožňuje výrazne urýchliť načítanie stránok lokality a znížiť zaťaženie zariadení internetovej komunikácie.
Pri použití prvku Style (metóda vkladania) bude musieť prehliadač zakaždým načítať spolu s HTML kódom dokumentu aj pravidlá CSS a selektory, ktoré sú doň zapojené, a v prípade použitia externého súboru so štýlmi aj Prehliadač stačí načítať Style.css raz a až potom ho pri navrhovaní ďalších stránok na vašom webe vezme z vlastnej vyrovnávacej pamäte (oblasť na pevnom disku počítača používateľa).
Atribút type=”text/css” značky Link znamená, že tento mediálny obsah nebude nič iné ako značkovací jazyk štýlu. Používa sa ale aj pri prepojení CSS súboru a Html dokumentu atribút Rel s hodnotou Stylesheet. Ide o to, že Link (hyperlinkový odkaz na službu) možno použiť na úplne iné účely.
Ak sa pozriete na zdrojový kód tejto stránky v prehliadači, uvidíte, že oblasť Hlava obsahuje množstvo rôznych značiek odkazov:
A účel každého z týchto hypertextových odkazov na služby je určený hodnotou Atribút Rel. Napríklad rel="shortcut icon" sa používa na označenie cesty k súboru a rel="alternate" sa môže použiť na označenie alternatívnej verzie stránky (príkladom alternatívnej reprezentácie dokumentu Html by bolo ) .
No a v prípade použitia atribútu rel="stylesheet" v Odkaze sa pýtame prehliadača cesta k súboru so štýlmi(v atribúte Href môže byť táto cesta uvedená v absolútnej alebo relatívnej forme). Tie. pomocou atribútu Rel povieme prehliadaču, ako bude vyzerať súbor, ktorého cesta je uvedená v Href (štýle - s CSS).
Na stránkach metóda väzby sa používa takmer vždy CSS a Html (externý súbor so štýlmi). Atribúty štýlu a značky sa zvyčajne používajú iba na testovanie, aj keď môžu existovať špecifické úlohy, keď je ich použitie opodstatnené (napríklad pri zdobení). Ale pri reálnej práci na stránkach sa používajú práve externé súbory, t.j. spôsob prepojenia.
Z tohto dôvodu si dovolím odísť a prisahať, že vám sľúbim, že pokračovanie bude nasledovať vo veľmi blízkej budúcnosti. Ešte raz, naučiť sa CSS je zvyčajne oveľa náročnejšie ako naučiť sa HTML, takže sa pokúsim byť čo najpodrobnejší a najpopisnejší.
Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu
Možno vás bude zaujímať
Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde
Display (block, none, inline) in CSS – nastavenie typu zobrazenia Html prvkov na webovej stránke
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základy syntaxe tohto jazyka
Pozadie v CSS (farba, poloha, obrázok, opakovanie, príloha) – všetko pre nastavenie farby pozadia resp obrázok na pozadí Html prvky
Priority v Css a ich zvýšenie z dôvodu Dôležité, kombinácie a zoskupenia selektorov, používateľských a autorských štýlov
Výška, šírka a pretečenie – CSS pravidlá pre popis oblasti obsahu v blokovom rozložení
Jednotky veľkosti (Pixely, Em a Ex) a dedičnosť pravidiel v CSS Rôzny dizajn do interiéru a vonkajšie odkazy cez CSS
Selektory pseudotried a pseudoprvkov v CSS (hover, first-child, first-line a iné), vzťahy medzi značkami HTML kódu
Float and clear in CSS - block layout tools
Možno ste už počuli o CSS, ale neviete, čo to je? V tomto návode sa dozviete, čo je CSS a čo vám môže pomôcť.
CSS je skratka pre C vzostupne Sštýl S klobúky/kaskádové štýly.
Čo môžete robiť s CSS?
CSS je štýlový jazyk, ktorý definuje vykresľovanie HTML dokumentov. CSS sa napríklad zaoberá fontami, farbou, okrajmi, čiarami, výškou, šírkou, obrázkami na pozadí, umiestnením prvkov a mnohými ďalšími vecami. Buďte trpezliví a uvidíte!
HTML možno (nesprávne) použiť na navrhovanie webových stránok. CSS však poskytuje viac výkonu a je presnejšie a prepracovanejšie. CSS v súčasnosti podporujú všetky prehliadače (prehliadače).
Len v niekoľkých lekciách v tomto návode si budete môcť vytvoriť vlastné predlohy štýlov a použiť CSS, aby vaša webová lokalita vyzerala skvele.
Aký je rozdiel medzi CSS a HTML?
HTML sa používa na štruktúrovanie obsahu stránky. Na formátovanie tohto štruktúrovaného obsahu sa používa CSS.
Súhlasím, znie to šialene. Ale prosím čítajte ďalej. Čoskoro bude všetko jasné.
Kedysi dávno, keď bola Madonna panna a chlap menom Tim Berners Lee vynašiel World Wide Web, sa HTML používalo iba na zobrazovanie štruktúrovaného textu. Autor mohol označiť iba text: "toto je nadpis" alebo "toto je odsek" pomocou HTML značiek ako napr.
a
Ako webdizajnérov začal hľadať spôsoby formátovania online dokumentov. Aby výrobcovia prehliadačov (vtedy Netscape a Microsoft) vyhoveli zvyšujúcim sa požiadavkám spotrebiteľov, vymysleli nové HTML značky ako napr , ktoré sa od pôvodných HTML značiek líšili tým, že definovali vzhľad, nie štruktúru.
Z toho vyplynuli aj originálne štruktúrovacie tagy ako napr