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 resize
urč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-offset
vlastnost přidává prostor mezi obrys a okraj nebo okraj prvku.
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-offset
vlastnost 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 |