CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Uživatelské rozhraní CSS


Uživatelské rozhraní CSS

V této kapitole se dozvíte o následujících vlastnostech uživatelského rozhraní CSS:

  • resize
  • outline-offset

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.

Property
resize 4.0 79.0 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Změna velikosti CSS

Vlastnost resizeurčuje, zda (a jak) by měl uživatel měnit velikost prvku.

Tento prvek div může uživatel změnit velikost!

Změna velikosti: Klikněte a přetáhněte pravý dolní roh tohoto prvku div.

Následující příklad umožňuje uživateli změnit velikost pouze na šířku prvku <div>:

Příklad

div {
  resize: horizontal;
  overflow: auto;
}

Následující příklad umožňuje uživateli změnit velikost pouze na výšku prvku <div>:

Příklad

div {
  resize: vertical;
  overflow: auto;
}

Následující příklad umožňuje uživateli změnit velikost jak výšky, tak šířky prvku <div>:

Příklad

div {
  resize: both;
  overflow: auto;
}

V mnoha prohlížečích lze velikost <textarea> ve výchozím nastavení měnit. Zde jsme použili vlastnost resize k deaktivaci změny velikosti:

Příklad

textarea {
  resize: none;
}


Posun obrysu CSS

Tato outline-offsetvlastnost přidává prostor mezi obrys a okraj nebo okraj prvku.

Tento prvek div má obrys 15 pixelů mimo okraj.

Poznámka: Obrys se liší od ohraničení! Na rozdíl od ohraničení je obrys nakreslen mimo ohraničení prvku a může překrývat jiný obsah. Také obrys NENÍ součástí rozměrů prvku; celková šířka a výška prvku není ovlivněna šířkou obrysu.

Následující příklad používá outline-offsetvlastnost k přidání mezery mezi ohraničení a obrys:

Příklad

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Vlastnosti uživatelského rozhraní CSS

V následující tabulce jsou uvedeny všechny vlastnosti uživatelského rozhraní:

Property Description
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user