Cascading Style Sheets, czyli CSS, to język, który mówi stronie internetowej, jak ma wyglądać. CSS dodaje kolor, styl i układ do prostej struktury strony internetowej. Tak jak wybierasz ubrania, aby dobrze się czuć i wyglądać schludnie, CSS pomaga stronie internetowej się ubrać i wyglądać atrakcyjnie. W tworzeniu stron internetowych używamy CSS, aby zmienić kolor, rozmiar i położenie tekstu i pól na stronie. Ta lekcja wprowadzi Cię do podstaw CSS w prostym języku. Dowiemy się, czym jest CSS, dlaczego jest ważny i jak działa z HTML.
CSS to skrót od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Jest to specjalny język używany do stylizowania stron internetowych. Pomyśl o CSS jako o farbie i dekoracjach budynku. Budynek jest wykonany z HTML, a CSS sprawia, że jest ładny. Używając CSS, możesz zmienić kolor tła, style czcionek i przestrzeń wokół elementów na swojej stronie internetowej. CSS to narzędzie, które pomaga projektantom stron internetowych sprawić, aby strony internetowe wyglądały lepiej i były bardziej zabawne.
Wyobraź sobie, że kolorujesz rysunek. Linie rysunku są jak podstawowa struktura strony internetowej. CSS jest jak kredki i markery, które dodają życia rysunkowi. Za pomocą kilku prostych zasad możesz zmienić cały rysunek ze zwykłego na kolorowy!
CSS jest używany do tworzenia atrakcyjnych i łatwych w użyciu stron internetowych. Utrzymuje styl oddzielony od treści. Oznacza to, że słowa i obrazy na stronie (dostarczone przez HTML) pozostają takie same, podczas gdy CSS kontroluje ich wygląd. Gdy aktualizujesz styl, nie musisz zmieniać treści. To oddzielenie pomaga programistom internetowym pracować szybciej i sprawia, że strony są przyjemniejsze do odwiedzania.
Pomyśl o CSS jak o stroju, który wybierasz. Jeśli nosisz inne ubrania, wyglądasz inaczej, ale nadal jesteś tą samą osobą. CSS zmienia wygląd strony internetowej bez zmiany informacji na niej. Dzięki temu można łatwo zaktualizować projekt całej strony internetowej, edytując tylko jeden plik CSS.
CSS działa ręka w rękę z HTML. HTML to podstawa, która ustala, gdzie rzeczy mają się znaleźć na stronie internetowej. Następnie CSS wchodzi, aby dodać kolory, czcionki i styl. Kiedy przeglądarka ładuje stronę internetową, najpierw buduje strukturę za pomocą HTML, a następnie stosuje style zdefiniowane w CSS.
CSS jest napisany jako zestaw reguł. Każda reguła składa się z dwóch części: selektora i bloku deklaracji. Selektor informuje przeglądarkę, który element HTML ma stylizować. Blok deklaracji zawiera jedną lub więcej deklaracji. Każda deklaracja ma właściwość i wartość. Właściwość to to, co chcesz zmienić, a wartość mówi, jak to zmienić.
Na przykład, aby ustawić kolor tła strony na jasnoniebieski, możesz napisać regułę, która wygląda następująco:
<code>ciało {
kolor tła: jasnoniebieski;
</kod>Ta prosta reguła zmienia tło całej strony.
Podstawowa reguła CSS podąża za prostym wzorcem. Pokazuje selektor i blok właściwości i wartości. Wzorzec wygląda tak:
<code>selektor {
właściwość: wartość;
</kod>Tutaj selektor wybiera, który element HTML ma być celem. Właściwość to to, co chcesz zmienić, a wartość to sposób, w jaki chcesz ją zmienić.
Na przykład, jeśli chcesz, aby cały tekst akapitu był niebieski, napisz:
<kod>p {
kolor: niebieski;
</kod>Ta reguła informuje przeglądarkę internetową, że każdy element <p> (akapit) powinien mieć niebieski tekst.
Selektory CSS pozwalają wybrać, które elementy na Twojej stronie internetowej będą podlegać regułom stylu. Istnieje kilka typów selektorów i każdy z nich działa nieco inaczej.
Te różne selektory dają Ci dużo możliwości stylizowania konkretnych części Twojej strony internetowej. Pozwalają Ci precyzyjnie określić elementy i zdecydować, jak powinny wyglądać.
CSS zapewnia wiele różnych właściwości, których możesz użyć do stylizowania swojej strony internetowej. Każda właściwość pozwala zmienić konkretny aspekt wyglądu elementu. Niektóre typowe właściwości to:
Każda właściwość CSS jest poprzedzona wartością. Na przykład, aby nadać tekstowi kolor czerwony, możesz napisać:
<kod>p {
zarumienić;
</kod>Ta prosta reguła sprawia, że wszystkie akapity mają czerwony tekst. Właściwość color kontroluje sposób wyświetlania tekstu, a wartość red określa, jaki ma być kolor.
Słowo „kaskadowe” w CSS oznacza, że style mogą przepływać z jednej reguły do drugiej. Jeśli dwie reguły mogą dotyczyć tego samego elementu, kolejność może decydować, która z nich wygra. Jest to podobne do układania bloków, gdzie jeden blok czasami zakrywa część drugiego.
Jedną z powszechnych zasad jest to, że style napisane bezpośrednio w elemencie HTML (nazywane stylami inline) będą nadpisywać style w pliku CSS. Inną zasadą jest to, że jeśli element nadrzędny jest stylizowany, jego elementy podrzędne mogą odziedziczyć ten styl, chyba że powiedziano im inaczej.
Na przykład, jeśli ustawisz kolor tekstu <div> na zielony, tekst wewnątrz <div> będzie często również wyświetlany na zielono z powodu dziedziczenia. Pomaga to zachować spójny projekt na stronie internetowej.
Za pomocą CSS możesz zmieniać kolory na wiele sposobów. Możesz używać popularnych nazw kolorów, takich jak red , blue , i green . Możesz również używać kodów szesnastkowych, takich jak <code>#FF0000</code> dla koloru czerwonego lub wartości RGB, takich jak <code>rgb(255, 0, 0)</code>.
Czcionki są kolejną ważną częścią CSS. Czcionka jest jak styl pisma odręcznego, który wybierasz w notatniku. W CSS możesz zmienić rodzinę czcionek, rozmiar, grubość i styl. Na przykład, jeśli chcesz, aby Twoje akapity pojawiały się w Arial, możesz użyć:
<kod>p {
rodzina czcionek: Arial, bezszeryfowa;
</kod>Ta reguła nakazuje przeglądarce wyświetlanie tekstu w czcionce Arial, jeśli jest ona dostępna, a w przeciwnym razie używanie innej, podobnej czcionki.
Zmiana kolorów i czcionek za pomocą CSS sprawia, że tekst jest łatwiejszy do odczytania, a strona internetowa staje się ciekawsza do oglądania.
Model pudełkowy CSS to sposób na zrozumienie, jak różne części elementu są ułożone na stronie. Każdy element jest jak pudełko. Model pudełkowy ma cztery części:
Wyobraź sobie fotografię. Sama fotografia jest treścią. Mata otaczająca fotografię jest jak wyściółka. Rama, która wszystko to trzyma razem, to obramowanie. A przestrzeń wokół ramki to margines. Używając tego modelu, możesz upewnić się, że wszystkie części Twojego projektu mają odpowiednią przestrzeń i równowagę.
CSS nie dotyczy tylko kolorów i czcionek; pomaga również w rozmieszczaniu elementów na stronie internetowej. Nazywa się to układem i pozycjonowaniem. Dzięki CSS możesz decydować, gdzie każdy element pojawi się na stronie.
Istnieje kilka sposobów kontrolowania układu strony internetowej, w tym:
Korzystanie z tych technik układu jest jak układanie zabawek na półce. Decydujesz, gdzie umieścić każdą zabawkę, aby wszystkie miały wystarczająco dużo miejsca i wyglądały schludnie. Dzięki temu Twoja strona internetowa będzie bardziej uporządkowana i zachęcająca.
Oto przykład, jak HTML i CSS działają razem. Ten przykładowy kod pokazuje prostą stronę internetową z pewnym stylem:
<kod><!DOCTYPE html>
<html>
<głowa>
<styl>
ciało {
kolor tła: jasnoniebieski;
}
h1 {
kolor: granatowy;
rozmiar czcionki: 24px;
}
P {
kolor: zielony;
rozmiar czcionki: 18px;
}
</styl>
</głowa>
<ciało>
<h1>Moja pierwsza strona internetowa</h1>
<p>To prosta strona internetowa wystylizowana za pomocą CSS.</p>
</ciało>
</html></kod>Ten kod tworzy stronę internetową z jasnoniebieskim kolorem tła. Tekst nagłówka jest granatowy, a tekst akapitu zielony. Kod CSS wewnątrz znacznika <code><style></code> pokazuje, jak reguły są pisane i stosowane.
Możesz dodać CSS do swojego HTML na trzy główne sposoby. Każda metoda ma swoje własne zastosowanie w zależności od sytuacji:
Metoda zewnętrzna jest najczęściej stosowana w profesjonalnym tworzeniu stron internetowych, ponieważ pozwala zachować porządek w kodzie HTML i umożliwia aktualizację stylów na wielu stronach jednocześnie.
CSS jest bardzo pomocny na wiele sposobów. Oto kilka korzyści z używania CSS w rozwoju stron internetowych:
Używanie CSS jest jak posiadanie specjalnej skrzynki narzędziowej. Każde narzędzie w skrzynce z narzędziami pomaga Ci łatwo poprawić wygląd Twojej strony internetowej. W miarę jak będziesz ćwiczyć, zobaczysz, jak potężny może być CSS w tworzeniu pięknych i przyjaznych dla użytkownika stron internetowych.
Każda odwiedzana przez Ciebie strona internetowa w jakiś sposób wykorzystuje CSS. Od Twoich ulubionych stron z kreskówkami po strony projektów szkolnych, CSS pomaga tworzyć zabawny i łatwy do odczytania układ. Kiedy widzisz kolorową stronę internetową z czystym odstępem i wyraźnym tekstem, to jest to CSS w działaniu.
Rozważ projekt popularnych witryn internetowych, takich jak te poświęcone grom, kreskówkom lub opowieściom online. Przemyślane użycie kolorów, czcionek i układów pomaga uczynić te witryny ekscytującymi i angażującymi. CSS jest również używany w aplikacjach i witrynach mobilnych, zapewniając, że treść wygląda dobrze zarówno na dużych ekranach, jak i na małych telefonach.
W życiu codziennym CSS jest podobne do dekorowania pokoju. Możesz wybrać motyw dla swojego pokoju, powiesić kolorowe obrazy i starannie ustawić meble. CSS robi to samo w przypadku stron internetowych. Wprowadza porządek i piękno do przestrzeni cyfrowej, czyniąc ją przyjemną dla odwiedzających.
Oto najważniejsze informacje, których dowiedzieliśmy się o CSS:
CSS jest istotną częścią rozwoju stron internetowych, dzięki której witryny stają się piękne i łatwe w nawigacji. Gdy będziesz odkrywać więcej i próbować budować własne strony internetowe, pamiętaj, że CSS jest narzędziem do wyrażania kreatywności. Baw się dobrze, eksperymentując z kolorami, czcionkami i układami, ponieważ każda mała zmiana dodaje magii dobrze zaprojektowanej stronie internetowej.
Kontynuuj ćwiczenie i obserwuj swoje ulubione strony internetowe. Zauważ, jak różne style są używane, aby przyciągnąć Twoją uwagę i stworzyć przyjemne doświadczenie. Z czasem zobaczysz, jak potężny może być CSS w przekształcaniu prostych struktur HTML w wizualnie angażujące strony internetowe.