Kilka słów wstępem… 😉
Witam wszystkich czytających kolejny mój wpis 🙂👍 Mam pozytywny odzew od Was odnośnie materiałów, które tworzę na blogu. Często odnosicie się do ćwiczeń które dodaję pod każdym zagadnieniem, dając pozytywny komentarz bądź w prywatnej wiadomości pisząc do mnie.
Każdy programista, osoby tworzące kursy, szkolenia, bootcampy powiedzą że najlepszym sposobem nauki, jest samodzielne pisanie kodu. Na tym chcę się skupić, aby jak najwięcej można było wynieść z moich ćwiczeń.
Jeżeli masz jakieś pomysły, uwagi – napisz do mnie na fb, bądź zostaw komentarz pod postem📝
Jedziemy❕ – atrybut ‘style’
Wszystkie elementy które poznaliśmy do tej pory, miały jednakowy kolor, czcionkę, tła – trochę monotonia 😐 Dodajmy trochę inności kolorowej ❗ Znaczniki HTML można wzbogacić o atrybut style=”właściwość: wartość”. Właściwość to dana cecha wyglądu, np kolor, a wartością tej właściwości może być np. ‘niebieski’.
Tak więc przykładowo:
Tekst będzie niebieski
W akapicie dodaliśmy atrybut style zmieniając dzięki niemu kolor (właściwość) tekstu na niebieski (wartość).
Właściwość + wartość nazywamy deklaracją.
Zawsze po właściwości należy dodać dwukropek, a po wartości średnik. Dla znacznika można nadać wiele styli (deklaracji), który każdy kończymy średnikiem.
Ćwiczenie
- Utwórz nowego pena.
- Dodaj deklaracje strony.
- W tytule dodaj “Atrybut style”.
- W ciele dokumentu dodaj przykładowy nagłówek h2, dodaj w nim style z deklaracją koloru czerwonego nagłówka.
Wielkość czcionki i wyrównanie tekstu 🔠
Ustawianie koloru już przetestowaliśmy. Poznajmy kolejne możliwe deklaracje w atrybucie ‘style’.
Ustawienie rozmiaru czcionki na 16px:
style=”font-size: 16px;”
Ustawienie rodzaju czcionki na Times New Roman:
style=”font-family: Times New Roman;”
Ustawienie wyrównania tekstu do prawej:
style=”text-align: right;”
Powyższe style oraz wiele innych, można łączyć w ramach jednego znacznika HTML, rozdzielając deklarację średnikami:
Przykładowy tekst
Ćwiczenie
- Skopiuj poprzednie ćwiczenie do nowego pena.
- Dodaj nowo poznane deklarację do naszego nagłówka i nowego akapitu. Pobaw się nowymi deklaracjami❕
Kolorowe tło 🟥🟧🟨🟩🟦
Elementom strony które poznaliśmy można również zmienić kolor ich tła.
Zmiana koloru tła elementom strony
style=”background-color: yellow;”
Ćwiczenie
- Skopiuj poprzednie ćwiczenie do nowego pena.
- Dodaj nowo poznane deklarację do naszego nagłówka i nowego akapitu. Pobaw się nowymi deklaracjami❕
Obramowania elementów ⬜◻
Czas na kolejny ciekawy styl – obramowania wybranych elementów HTML, np. tabel, akapitów. W tym celu skorzystamy ze stylu (właściwości) border.
Dzięki niemu, możemy nadać ramce znacznika przykładowe wartości:
Grubość ramki
border-width: 4px;
Rodzaj ramki
border-style: dotted;
Kolor ramki
border-color: violet;
Wartości border można ze sobą łączyć. Zobaczmy na przykład:
Ćwiczenie
- Utwórz nowego pena.
- Dodaj w tytule strony “Tabela stylowana”
- W ciele dokumentu dodaj tabele, tak jak robiliśmy we wcześniejszym wpisie.
- Dodaj dwie komórki tabeli <td>. W pierwszym wykonaj deklarację pojedynczych stylów a w drugiej połącz w całość.
Marginesy + wcięcia
Elementy strony HTML mogą być bardziej czytelne, dzięki zastosowaniu kolejnych właściwości stylów: marginesy i wcięcia.
Marginesy (margin) tworzą zewnętrzny odstęp od danego znacznika. Przykładowo – chcemy zastosować odstęp między tekstem a obrazkiem, a więc zastosujemy margines:
Wynikiem powyższego kodu jest ustawiony margines zewnętrzny dla obrazka o wielkości 10px.
Wcięcia (padding) inaczej marginesy wewnętrzne służą do odsunięcia treści znacznika (np. tekstu w nim) od krawędzi tego znacznika. Przykładowo – jeśli chcemy w komórce tabeli zastosować margines wewnętrzny o szerokości 5px, to padding będzie jedynym słusznym rozwiązaniem.
Tekst w komórce Ćwiczenie
- Utwórz nowego pena.
- Dodaj deklarację strony, tytuł nadaj “Margin and padding”.
- W ciele strony dodaj obrazek z internetu. Dodaj styl marginesu zewnętrznego o wartości 10px.
- Następnie dodaj akapit z przykładowym tekstem. Dodaj styl obramowania kropkowanego z grubością 3px oraz w koloru fioletowego oraz marginesu wewnętrznego o wartości 30px.
Ok – to by było na tyle jak na początek o stylach w znacznikach html. Później się przekonasz, że istnieje lepszy sposób na stylowanie elementów naszego kodu. Wszystkie style wyodrębnimy w osobnym pliku.
Mimo to, musiałem Ci taki sposób pokazać, abyś wiedział, że możliwe jest stylowanie w dokumencie html😃 Tak ja się uczyłem na początku, więc również uwzględnię na moim blogu taki sposób na kolorowanie html-u.
Zapraszam Cię już do kolejnego posta o kolejnych nowych znacznikach, który ukaże się w przyszłym tygodniu📅 Zapraszam Was do polubienia, udostępniania mojej strony fb 💪👍😉
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA