obrazek - Kurs HTML i CSS
Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}...korzystamy również z przycinania tła. Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-origin: początek obrazka 1, początek obrazka 2,... } Przykład {background-origin} no-repeat; left top; border-box no-repeat; left top; padding-box no-repeat; left top; content-box
- Marginesy CSS / Model pudełkowy CSS
...Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z: Zawartości - "Content" (np. test, obrazek itd.) Otaczających marginesów wewnętrznych - "Padding" Obramowania - "Border" Marginesów - "Margin" Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości...
- Obramowanie CSS / Cień {box-shadow}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Cień na zewnątrz elementu: selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... } Cień wewnątrz elementu: selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... } Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "obcięcie" należy podać podziałkę (domyślnie: 100%), według której obrazek zostanie pocięty na siatkę, składającą się z dziewięciu części: czterech narożników, czterech krawędzi i środka. Możliwe jest przy tym podanie: jednej wartości - określa jednakowe odległości cięć linii siatki od wszystkich krawędzi obrazka; jeżeli cała grafika będzie kwadratowa i jako obcięcie podamy wartość trzy razy mniejszą od...
- Rozmiary CSS / Szerokość {width}
...To jest wykaz o szerokości 5em (width: 5em): Punkt pierwszy Punkt drugi To jest tabela o szerokości 100px (width: 100px) Poniżej widać obrazek o szerokości 200px (width: 200px): Pytania i odpowiedzi {width} Co oznacza "width" w CSS? W CSS, właściwość width określa szerokość elementu HTML. Może być wyrażona jako wartość procentowa, pikselowa lub w innych jednostkach. Działa na elementach blokowych i inline-block, umożliwiając kontrolę nad szerokością kontenera lub elementu...
- Rozmiary CSS / Wysokość {height}
...To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać obrazek o wysokości 40px (height: 40px): Pytania i odpowiedzi {height} Jak ustawić wysokość w CSS? W CSS, wysokość elementu można ustawić za pomocą właściwości height, gdzie przypisujemy jej wartość, np. "height: 100px". Można również używać innych jednostek, takich jak procenty lub em. Jak rozciągnąć DIV na całą wysokość? Aby...
- Rozmiary CSS / Maksymalna szerokość {max-width}
...ta może mieć wpływ również na wysokość elementu, ponieważ będzie on przeskalowany tak, aby zachował swoje proporcje. Przykład {max-width} Ten obrazek powinien mieć szerokość maksymalną 50px (max-width: 50px):
- Rozmiary CSS / Minimalna szerokość {min-width}
...ta może mieć wpływ również na wysokość elementu, ponieważ będzie on przeskalowany tak, aby zachował swoje proporcje. Przykład {min-width} Ten obrazek powinien mieć szerokość minimalną 200px (min-width: 200px):
- Rozmiary CSS / Wysokość i marginesy automatyczne
...auto dla wysokości, spowoduje przyjęcie wysokości wewnętrznej. Ponadto CSS 2.1 określa przypadek, kiedy element posiada wewnątrzne proporcje (np. obrazek), a przy tym wartość height wynosi auto. W takim przypadku ostateczna wysokość elementu jest obliczana ze wzoru: (ustawiona szerokość) / (wewnętrzne proporcje) co oznacza po prostu przeskalowanie elementu tak, aby zachował on swoje proporcje. 3. Elementy nie-zastępowane: blokowe oraz z oblewaniem (float) Jeżeli własności top, bottom...
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px. Położenie spoczynkowe Przykład pozycjonowania tekstu: To jest tekst powiększony To jest pozycjonowane pogrubienie tekstu Pozycjonowanie tabel: komórka1 komórka2 komórka3 komórka4 komórka1 komórka2 komórka3 komórka4...