strony - Kurs HTML i CSS
Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}...Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz. Przy tworzeniu...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...(domyślnie) Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego. border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px Dla porównania - tak wygląda ten sam...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-outset} border-image-source...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który 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...
- Kursory CSS / Kolor karetki tekstowej {caret-color}
...kolor" należy podać definicję koloru albo wartość auto (zresetowanie karetki testowej do domyślnego koloru). W przypadku interaktywnych elementów strony, w których można wpisywać tekst, pojawia się tzw. karetka. Wskazuje ona miejsce, w którym pojawią nowe znaki tekstu, kiedy zaczniemy je wpisywać z klawiatury. Karetka tekstowa najczęściej ma postać pionowej, migającej kreski. Zdarzają się jednak inne kształty: pionowa kreska z krótkim poziomym daszkiem i podstawką albo migająca, wypełniona...
- Pozycjonowanie CSS / Obcinanie {clip}
...Wartości te należy podawać za pomocą jednostek długości. Za każdą z nich można wpisać również auto, co oznacza pominięcie cięcia z wybranej strony. Zamiast całego wyrażenia rect(góra, prawo, dół, lewo) można również podać auto - wartość automatyczna. UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne...
- Drukowanie CSS / Rozmiar papieru @page {size}
...niż procent dwie wartości długości - szerokość i wysokość obszaru wydruku rozdzielone od siebie spacją Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda...