Style

Wstęp

W tym kursie wspominaliśmy już trochę na temat stylów, jednak nie wyjaśnialiśmy czym one dokładnie są i jak je tworzyć. Style są bardziej związane z CSS i z samym HTML, jednak uważamy, że w kursie HTML warto poznać przynajmniej podstawy tego zagadnienia.

Dzięki stylom Twoja strona będzie wyglądała znacznie ładniej. Pozwalają one określić wielkość, grubość i kolor tekstu, nazwę czcionki, różnego rodzaju odstępy i położenie elementów. Możliwości stylów są bardzo duże, w nowych wersjach możemy nawet tworzyć różnego rodzaju animacje.

Atrybut style

W dzisiejszych czasach style najczęściej definiujemy w oddzielnych plikach, które posiadają rozszerzenie.css. Takie rozwiązanie ma wiele zalet, jednak na razie nie będziemy się nim zajmować, zrobimy to już w jednej z kolejnych lekcji. Tym razem pokażemy Ci nieco uproszczoną wersję definiowania stylów. Sposób ten polega na użyciu atrybutustyle, który możemy dodać, to znacznej większości znaczników HTML.

Użycie atrybutustylena elemenciepmoże wyglądać następująco:

123 <pstyle="właściwość:wartość;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p>

Oczywiście fragmentwłaściwość:wartość;nie jest poprawnym stylem, jest to tak zwany pseudokod, który ma na celu pokazanie pewnej techniki. Właściwość, to nazwa tego, co chcemy określić za pomocą danego stylu, może to być na przykładcolor, jeśli chcemy ustawić kolor. Wartość określa to, co chcemy przypisać, dla koloru może to być npRed(pl.czerwony). Zwróć uwagę na średnik na końcu, należ go stosować po określeniu każdej właściwości. Dzięki temu możemy w jednym atrybuciestyleokreślać kilka właściwości, np. kolor, wielkość i format tekstu.

Nie przejmuj się, jeśli taki teoretyczny opis Cię nie satysfakcjonuje. Już w kolejnym przykładzie znajdziesz ustawienie konkretnego stylu.

Wygląd, który określamy przez atrybut style dotyczy tylko zawartości elementu, którego atrybut style ustawiamy. Style definiowane w ten sposób nazywamy stylami wpisanymi (ang.inline styles).

Kolory

Dodanie kolorów na stronę jest chyba najprostszym zabiegiem, który może poprawić jej wygląd. Dowiesz się teraz jak to zrobić. Dodam jeszcze, że w tym kursie nie staramy się stworzyć pięknej strony, chcemy Ci po prostu pokazać narzędzia i techniki, które Ci to umożliwią, natomiast nad projektem własnej strony musisz już pracować samodzielnie.

Na początek zmienimy kolor naszego tekstu. Tak jak już wspominaliśmy, do ustawienia koloru tekstu służy właściwośćcolor. Sama wartość koloru może być wyrażona na kilka sposobów, najłatwiej użyć nazwy koloru w języku angielskim.

Tekst w poniższym fragmencie zostanie wyświetlony na kolor niebieski.

123 <pstyle="color:Blue;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p>

Uruchom przykład

Mamy do dyspozycji bardzo wiele nazw kolorów. Może odwiedzićtę stronę, aby sprawdzić dostępne kolory. Nazwy, których możesz używać znajdują się w kolumnieColor Name.

Jeśli odwiedziłeś stronę z kolorami, to na pewno zauważyłeś kolumnęHEX. Zawiera ona określenie koloru wyrażone w kodzie heksadecymalnym, czyli szesnastkowym. Nie będziemy się za bardzo zagłębiać w ten temat, ogólnie mówiąc jest to po prostu inny, dokładniejszy zapis koloru. Za jego pomocą można zapisać właściwie każdy kolor, który może wyświetlić przeglądarka internetowa, a jak widziałeś liczba nazw kolorów jest ograniczona.

W poniższym fragmencie znajduje się trochę jaśniejszy niebieski, niż miało to miejsce poprzednio.

123 <pstyle="color:#3333FF;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="color:Blue; background-color: Gray;"&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;



&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

</body>

</html>

Na początku swojej przygody z HTML, najłatwiej będzie Ci używać nazw kolorów ze strony, którą podaliśmy, a potem możesz zagłębić się w temat kodów HEX.

Oprócz koloru samego tekstu możemy jeszcze ustawić kolor tła danego elementu. Robimy to poprzez ustawienie wartościbackground-color.

1234567 <pstyle="color:Blue; background-color: Gray;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p><p> Akapit 2.</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="color:Blue; background-color: Gray;"&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;



&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

</body>

</html>

W powyższym przykładzie style zostały zastosowane tylko do pierwszego akapitu, czyli do elementupdla którego został przypisany atrybutstyle.

Jeśli chcesz ustawić jakieś style dla całej strony, możesz ustawić odpowiedni atrybutstyledla elementubody.

123456789 <bodystyle="color:Blue; background-color: Gray;"><p> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p><p> Akapit 2.</p></body>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body style="color:Blue; background-color: Gray;">

&lt;p&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;



&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

</body>

</html>

Zadanie 1

Ustal kolor tekstu nagłówka na czerwony (Red) oraz tło akapitu na kolor żółty (Yellow).

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;h1 style="color:Red;"&gt;

  Nagłówek

&lt;/h1&gt;



&lt;p style="background-color: Yellow;"&gt;

  Akapit.

&lt;/p&gt;

</body>

</html>

Wielkość tekstu

Elementy, których używamy do wyświetlania tekstu mają określoną wielkość czcionki. Możemy ją zmienić dzięki właściwościfont-size. Możemy do niej przekazać wielkość w kilku formatach, może to być na przykład bezwzględna wielkość wyrażona w pikselach.

123456789 <pstyle="font-size: 22px;"> Akapit 1.</p><p> Akapit 2.</p><pstyle="font-size: 10px;"> Akapit 3.</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="font-size: 22px;"&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

&lt;p style="font-size: 10px;"&gt;

  Akapit 3.

&lt;/p&gt;

</body>

</html>

Popularnym sposobem określania wielkości tekstu jest również podanie wartości procentowych, które wyrażają wielkość czcionki w stosunku do domyślnej wielkości.

123456789 <pstyle="font-size: 150%;"> Akapit 1.</p><p> Akapit 2.</p><pstyle="font-size: 80%;"> Akapit 3.</p>

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Strona tworzona w trakcie kursu HTML</title> </head> <body> <p style="font-size: 150%;"> Akapit 1. </p> <p> Akapit 2. </p> <p style="font-size: 80%;"> Akapit 3. </p> </body></html>

Wyrównanie tekstu

Korzystając ze stylów możemy wygodnie wyrównać tekst. Jeśli kiedykolwiek korzystałeś z narzędzi takich jak Microsoft Office Word, to na pewno wiesz, czym jest wyrównanie tekstu, a jeśli jeszcze tego nie wiesz, to przekonasz się już w kolejnym przykładzie.

Do wyrównania tekstu służy właściwośćtext-align, która może przyjąć następujące wartości:

  • left- wyrównanie do lewej - wartość domyślna;

  • right- wyrównanie do prawej;

  • center- wyśrodkowanie tekstu;

  • justify- wyjustowanie.

Uruchom poniższy przykład, aby zobaczyć jak wygląda użycie każdej z powyższych opcji.

1 2 3 4 5 6 7 8 9101112 <p> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p><pstyle="text-align: center;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p><pstyle="text-align: right;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p><pstyle="text-align: justify;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body style="max-width: 500px;">

&lt;p&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;

&lt;p style="text-align: center;"&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;

&lt;p style="text-align: right;"&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;

&lt;p style="text-align: justify;"&gt;

  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w.

&lt;/p&gt;

</body>

</html>

Aby lepiej pokazać Ci działanietext-align, w powyższym przykładzie została zwężona cała zawartość elementubodyprzy pomocy następującego stylu:

1 style="max-width: 500px;"

Jak widzisz style mogą również służyć do ustawienia wymiarów elementów. Możesz używać wartości takich jak:

  • width- szerokość;

  • height- wysokość;

  • max-width- maksymalna szerokość, element może być węższy;

  • max-height- maksymalna wysokość;

  • min-width- minimalna szerokość;

  • min-height- minimalna wysokość.

Styl tekstu

W tym kursie miałeś już okazję poznać tagi, dzięki którym mogliśmy tekst pogrubić, podkreślić, oznaczyć lub wyświetlić kursywą. Co ciekawe ten sam efekt możemy uzyskać poprzez zastosowanie odpowiednich stylów.

Nie będziemy oddzielnie omawiać każdej właściwości. Spójrz na poniższy kod i uruchom przykład. Bez problemu zrozumiesz jak działa każdy z użytych stylów.

1 2 3 4 5 6 7 8 9101112 <pstyle="font-weight: bold;"> Pogrubienie</p><pstyle="font-style: italic;"> Kursywa</p><pstyle="text-decoration: underline;"> Podkreślenie</p><pstyle="text-decoration: line-through;"> Przekreślenie</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="font-weight: bold;"&gt;

  Pogrubienie

&lt;/p&gt;

&lt;p style="font-style: italic;"&gt;

  Kursywa

&lt;/p&gt;

&lt;p style="text-decoration: underline;"&gt;

  Podkreślenie

&lt;/p&gt;

&lt;p style="text-decoration: line-through;"&gt;

  Przekreślenie

&lt;/p&gt;

</body>

</html>

Zadanie 2

Napisz taki styl, aby akapit był wyświetlany z podkreśleniem, a wielkość jego czcionki była równa20px.

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="text-decoration: underline; font-size: 20px;"&gt;

  Akapit.

&lt;/p&gt;

</body>

</html>

Zadanie 3

Napisz taki styl, aby tekst był wyświetlany z pogrubieniem, podkreśleniem, a wielkość jego czcionki była dwa razy większa niż standardowo.

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p style="font-weight: bold; text-decoration: underline; font-size: 200%;"&gt;

  Akapit.

&lt;/p&gt;

</body>

</html>

Podsumowanie

W tej lekcji miałeś okazję poznać najważniejsze style, dzięki którym możesz znacznie upiększyć Twoją stronę. Na początku wyjaśniliśmy działanie atrybutustyle, a następnie zajęliśmy się kolorem tekstu i tła. Pozostałą część lekcji poświęciliśmy na tekst, miałeś okazję dowiedzieć się jak ustawić jego wielkość, wyrównanie oraz dodatkowe style.

W tej lekcji omówiliśmy sporo stylów, jednak jest to tylko fragment całości. Stylom przyjrzymy się jeszcze w lekcji poświęconej CSS.

results matching ""

    No results matching ""