Style CSS w HTML Kurs HTML5/CSS3 cz.3

Style CSS w HTML Kurs HTML5/CSS3 cz.3
logo kurs html css

W tym wpisie na blogu nauczymy się podstaw, naprawdę podstaw stylów CSS. Nauczymy się jak zmienić kolor tła, wielkość czcionki, formatowania tekstu. Dodatkowo wspomnę o komentarzach w HTML. Niby może wydawać Ci się że tego będzie dużo, ale szybko to ogarniesz, to nie są skomplikowane rzeczy.

Style CSS w HTML

Dziś nauczymy się prostych styli CSS. Będą to bardzo proste style. My będziemy na początku używać styli Inline HTML. Czyli będziemy w tagu dopisywać atrybut style i tam będziemy dodawać kod CSS. Jest to określenie stylu dla jednego wybranego elementu na stronie.

Kolor tekstu

Kolor tekstu możemy zmienić w bardzo prosty sposób podając w atrybucie  style wartość color: i nazwa koloru, może być to nazwa angielska np. red, szesnastkowo FF0000 lub rgb(255,0,0). Więcej o tym w kursie o CSS. Pamiętaj że nazwy kolorów podajemy po angielsku nie po polsku. Tutaj masz dostępny generator kolorów tak zwany color picker Kliknij .

<p style="color: red">To jest czerwony tekst</p>

To jest czerwony tekst

Kolor tła

Zmienianie koloru tła nie jest strasznie skomplikowane. Działa to na takiej samej zasadzie jak przy zmianie koloru tekstu. Tylko że zamiast color jest background-color.

 <body style="background-color: red">
 <p>Lorem Ipsum</p>
</body>

Wielkość czcionki

Jest również możliwość zmiany wielkości czcionki. Do tego używamy font-size i podajemy wartość, możemy podać ją w px, procentach remach lub emach(o tym w kursie CSS). W podanym przykładzie czcionka ma wielkość 20px. Domyślnie w tagu p jest to 16px.

<p style="font-size: 20px">Tekst ma rozmiar 20px</p>

Tekst ma 20px

Wyrównanie tekstu

Istnieje również właściwość wyrównania tekstu np. do lewej, prawo, środka.

  • Do lewej: text-align: left;
  • Do prawej: text-align: right;
  • Do środka: text-align: center;

<p style="text-align: center">Tekst wyśrodkowany</p>

Tekst wyśrodkowany

Formatowanie tekstu

Na przykładzie poniżej dobrze widać co dany tag oznacza. Chyba nie trzeba zbytnio komentować.

<b>Tekst pogrubiony</b>
<strong>Tekst pogrubiony</strong>
<i>Tekst pisany kursywą</i>
<mark>Tekst zaznaczony</mark>
<small>Tekst pomniejszony</small>
<del>Tekst usunięty</del>
<em>Tekst pisany kursywą</em>
<ins>Tekst odkreślony</ins>
<sub>Index dolny</sub>
<sup>Index górny</sup>

Tekst pogrubiony
Tekst pogrubiony
Tekst pisany kursywą
Tekst zaznaczony
Tekst pomniejszony
Tekst usunięty
Tekst pisany kursywą
Tekst odkreślony
Index dolny
Index górny

Cytaty

Cytaty tworzy się w bardzo prosty sposób. Służy do tego tak <q>

<p>Tekst w <q>cudzysłowie</q></p>

Tag blockquote

Tag blockquote służy to przytoczenia jakiś dłuższych wypowiedzi, cytatów, fragmenty z książki itp.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tag address

Służy np. do dodania informacji o autorze, adresu zamieszkania.

<address>
    Jan Kowalski <br>
    Warszawa ul. Kwiatowa <br>
    00-000 Warszawa <br>
</address>
Jan Kowalski
Warszawa ul. Kwiatowa
00-000 Warszawa

Komentarze w HTML

Komentarze są używania do skomentowania tekstu przez co nie będzie on wyświetlony na stronie. Pozwala on do skomentowania jednej lub wielu linii W tym przykładzie w przeglądarce nic nie ujrzymy. Komentarze mogą zawierać również cenne wskazówki np. co dana sekcja oznacza lub kiedy dana sekcja się kończy.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <!-- <address>
        Jan Kowalski <br>
        Warszawa ul. Kwiatowa <br>
        00-000 Warszawa <br>
    </address> -->
</body>
</html>

Ten komentarz sprawi że przykład z poprzedniej części tego wpisu nie wykona się. Zostanie wyświetlona pusta strona.

Css w HTML

CSS możemy używać na 3 sposoby. Jeden już poznaliśmy: czyli inline. Kolejne to internal i external.

Więcej o CSS w kursie o CSS.

<html>
<head>
    <!-- Zewnętrzny arkusz -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Wewnętrzny arkusz -->
    <style>
    body {
    background-color: red;
    }
    </style>
</head>
<body>
    <!-- Inline CSS -->
    <p style="font-size: 2em">tekst</p>
</body>
</html>

 

 

Dodaj komentarz