Co to jest CSS?

CSS (Cascading Style Sheets–kaskadowe arkusze stylów)

Język który służy do graficznego opisu strony. To wszystko co widzisz na stronie – nawet na tej – jest formatowane przez język CSS. Można w uproszczeniu przyjąć, że strona dzieli się na dwie części. Jedną będzie kod HTML, a drugą warstwa prezentacji czyli CSS. Sam HTML dobrze nie wygląda, pozwala on tylko na podstawowe formatowanie treści.

Co potrzebujemy

Kolejną możliwością jest bardziej zaawansowany edytor tekstowy np.Atom, Brackets lub Sublime Text. Przede wszystkim mają bardzo ładną, ciemną kolorystykę, co mnie urzekło na samym początku. Podpowiadają składnie języków programowania lub skryptoów. Najlepszą funkcją Bracketsa jest możliwość dynamicznego podglądania wprowadzanych zmian w dokumentach HTML (live preview) robiąc zmiany w kodzie, od razu widzisz zmiany w przeglądarce, bez potrzeby jej odświeżania.

Inną opcją jest tak zwane IDE czyli zintegrowane środowisko programistyczne (Integrated Development Environment). Oprogramowanie to posiada własny wbudowany edytor tekstowy. Nie musisz uruchamiać przeglądarki internetowej, efekty wprowadzonych zmian możesz przeglądać w IDE. Przykładowym IDE jest Adobe Dreamweaver, niestety jest ono płatne.

KOD CSS

Musimy utworzyć podstawowy szablon strony. W body umieścimy jeden znacznik p oraz h4 z dowolnym tekstem. Taki plik HTML może wyglądać następująco:

<!DOCTYPE html>

<html>

<head>

     &lt;title&gt;witaj!&lt;/title&gt;

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

   &lt;link rel="stylesheet" href=main.css&gt;

</head>

<body>

&lt;p&gt;tttt&lt;/p&gt;

</body>

</html>

Do kodu dołączamy plikmain.css. To w nim będziemy zapisywać nasze style CSS. Oczywiście musimy utworzyć również ten plik. Na tą chwilę jego zawartość wygląda następująco.

p{color:red;}h4{font-size:30px;}

W tym kodzie znajdują się takie elementy jak:

  • p- selektor;

  • {}- nawiasy klamrowe;

  • color,font-size- właściwości;

  • red,30px- wartości;

  • ;- średnik.

Selektor- jest to nazwa znacznika, identyfikatora lub klasy za pomocą których wybieramy do których elementów dany zbiór właściwości ma zostać przydzielony. Posługując się wyżej wymienionym przykładem - do wszystkich znacznikówpustawiany jest kolor czerwony, a doh4rozmiar czcionki na 30 pikseli.

Nawiasy klamrowe- zaczynają się zaraz po selektorze, a kończą po ostatniej właściwości. W nich zawieramy wszystkie właściwości wraz z wartościami, które chcemy przypisać do danego selektora.

Właściwość- definiuje co konkretnie chcemy zmienić w danych elemencie. Na przykładcolorzmienia nam kolor czcionki, afont-sizewielkość czcionki. Właściwość od wartości rozdzielamy dwukropkiem.

Wartość- każda właściwość ma swoją wartość, którą jej przypisujemy. W tym wypadku wartośćredprzypisaliśmy do właściwościcolorco da nam czerwony kolor czcionki, a30pxpołączone zfont-sizeustawi rozmiar czcionki na 30 pixeli.

Średnik- po każdej parze właściwość-wartość należy umieścić średnik.

results matching ""

    No results matching ""