CO TO JEST FONT-FACE? Na stronie internetowej nie trzeba używać wyłącznie czcionek: Arial, Times New Roman czy Helvetica. Jeśli znajdziemy w internecie najbardziej wymyślną czcionkę, nie musimy rezygnować z jej użycia. Dzięki css3 mamy możliwość implementacji dowolnej czcionki. Używamy do tego dyrektywy font-face. ZALETY FONT-FACE Czcionka umieszczana jest na serwerze i stamtąd też jest pobierana – […]
CO TO SĄ SELEKTORY CSS? Nie zawsze chcemy sprawić, aby wszystkie div na naszej stronie miały zielone tło. Używamy więc selektorów, aby jeden element odróżnić od innych. Selektorem może być np. klasa, id i wiele innych. Zdarza się także, że mamy kilka div o klasie np. green. Ale jeden z nich ma mieć dodatkową czarną ramkę a pozostałe nie. […]
DOMYŚLNY STYL LINKÓW Przeglądarki internetowe mają swoje domyślne style. Jeżeli nie zdefiniujemy np. koloru linka czyli <a href=”https://www.rejkowicz.pl”>www.rejkowicz.pl</a> to np. Google Chrome wyświetli go w ten sposób: Domyślnie ustawione są następujące style linków: kolor linka, kolor linka po najechaniu na niego kursorem myszki, kolor linka trzymanego (jeśli klikniemy na niego myszką i nie zwolnimy przycisku, kolor linka, […]
BORDER-STYLE CZYLI STYL OBRAMOWANIA RAMKI Ramkę, granicę jakiegoś elementu możemy zdefiniować dzięki cesze border-style. Cecha border-stylemoże mieć następujące wartości: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden. Dokładny ich wygląd przedstawia poniższy obrazek: Możemy też określić styl każdej krawędzi z osobna w następujący sposób: Taki sam efekt uzyskamy zapisując: W tym przypadku pierwsza wartość opisuje górną i dolną krawędź, druga natomiast prawą i lewą. BORDER-WIDTH […]
Dzięki transition możemy uzyskać pewien rodzaj animacji. Termin transition oznacza przejście. Dostajemy więc możliwość upłynnienia zmiany jakiejś cechy elementu i określenia czasu trwania tej zmiany. Przykładowo: po najechaniu na czerwony kwadrat o szerokości 100 px, chcemy aby stał się niebieski i był szeroki na 500 px. Bez użycia transition, nastąpi przeskok, który jest nieestetyczny. Dodając czas np. 2s sprawiamy, że […]
FLOAT: LEFT Kiedy mamy przygotowaną nawigację w HTML, musimy dodać odpowiednie style, aby z domyślnego pionowego, przekształcić je w poziome menu. Przedstawiam przykładowe menu w html: Tak ono wygląda w przeglądarkach: Aby otrzymać menu poziome, wystarczy w pliku css dodać do <li> następujące cechy: JAK ZMIENIĆ DOMYŚLNE STYLE LINKÓW Znaczniki <a> są domyślnie niebieskie, podkreślone a po kliknięciu stają […]
EDYCJA LISTY Listę w HTML tworzy się za pomocą tagów ul lub ol. Wewnątrz nich znajdują się li. Te znaczniki mają swoje domyślne style, np. kropkę po lewej stronie, padding, margin czy pozycję. Cechy przypisane do listy można łatwo zamienić na takie, które pasują do wyglądu strony. PUNKTORY Cechą, która odpowiada za edycję punktora jest list-style-type. Podstawowe […]
TŁO CSS Tło może mieć dowolny kolor lub może być obrazkiem. Może być ustawione na środku, może się powtarzać w pionie lub w poziomie. Możliwości edycji tła jest sporo i wiele z nich omówię w tym artykule. JAK ZMIENIĆ KOLOR TŁA? Kolor tła zmieniamy w następujący sposób: background: yellow;. Wartości podajemy: słownie, w języku angielskim np. […]
JAK DODAĆ NOWĄ CZCIONKĘ NA STRONĘ INTERNETOWĄ? Aby dodać nową czcionkę na swoją stronę musisz: Wkleić tę czcionkę na serwer. Podać ścieżkę do czcionki w pliku .css. W pierwszej linii określasz jak będziesz nazywał swoją czcionkę w pliku. Jeżeli ma zostać użyta tylko w nawigacji Twojej strony, możesz ją nazwać nav. W drugiej linii podajesz […]
WYŚRODKOWANIE POSITION:ABSOLUE position: absolute czasem sprawia problemy i nie daje się ujarzmić. Podpowiadam jak wyśrodkować element znajdujący się wewnątrz elementu z position: absolute. Tak napisany kod, wygląda następująco: Aby dodać sekcji position: absolute jednocześnie uzyskując wyśrodkowany tekst należy użyć języka css: Efekt: FLEXBOX Kiedyś faktycznie był to spory problem. Dziś wiele takich dylematów zastępuje flexbox – takich sposób składania […]