Wprowadzenie do CSS

1. Powstanie CSS

Kiedy stało się jasne, że przeglądarka jest używana nie tylko do celów naukowych, ale także w rozrywkowych, od razu zaczęło brakować multimediów: wideo, animacji, kolorów, dźwięków, przezroczystości itp.

Na początku chciano dodać więcej tagów do tego celu, ale potem zrozumiano, że nowych tagów będzie setki i znacznie skomplikują pracę z dokumentami HTML. Dlatego powstał pomysł oddzielenia „kolorowania dokumentu” (stylizacji) od jego zawartości. W ten sposób powstał CSS.

Cascading Style Sheets (CSS) lub kaskadowe arkusze stylów, są jednym z kluczowych komponentów web developmentu, odpowiedzialnym za wizualny wygląd stron internetowych.

CSS — to zestaw właściwości, z których każda ma nazwę i wartość. Web developer określa te właściwości, a przeglądarka odpowiada za ich wyświetlanie. Takie właściwości można przypisać praktycznie dowolnemu elementowi. Przykład stylów CSS:

Tych parametrów CSS (nazywanych też właściwościami CSS) jest mniej niż sto. Ale mogą one w sprytny sposób ze sobą współpracować, dając bardzo nieoczekiwane efekty. Na CodeGym nauczycie się je stosować i tworzyć prawdziwą magię na stronie 🦄.

2. Style elementów

Dla każdego elementu HTML można określić własny styl CSS za pomocą atrybutu style.

Przykład:

      
<p style="color: blue; font-size: 16px;">To jest przykład wbudowanego stylu.</p>
      
    

Ten styl informuje przeglądarkę, że tekst wewnątrz paragrafu należy wyrenderować na niebiesko, a rozmiar czcionki powinien wynosić 16 pikseli.

W rzeczywistości tutaj są dwa „style”:

• color = blue
• font-size = 16px

Są one zapisane w jednej linii i oddzielone średnikiem.

Możecie również na przykład stworzyć czarny prostokąt i napisać w nim biały tekst. Ten kod będzie wyglądał tak:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Biały tekst na czarnym tle 
</div>
      
    

3. Kolory

Szczegółowo przeanalizujemy style CSS, gdy przestudiujemy HTML. Ale żeby było bardziej interesująco, dziś przeanalizujmy kolory. Za pomocą CSS można zadać dowolny kolor, który komputer może wyświetlić, a nawet więcej.

Kolory w CSS są ważną częścią stylizacji stron internetowych. Pozwalają tworzyć wizualnie atrakcyjne i intuicyjne interfejsy. Istnieje kilka sposobów określania kolorów w CSS, każdy z nich ma swoje cechy i zastosowanie.

1. Nazwy kolorów (Color Names)

CSS obsługuje ponad 140 standardowych nazw kolorów. To prosty i zrozumiały sposób na określenie koloru.

      
<div style="color: lightblue;"> Jasnoniebieski kolor tekstu</div>
      
    

Niektóre popularne nazwy kolorów:

2. Wartości szesnastkowe (Hexadecimal Values)

Istnieje jeszcze jeden sposób, w jaki można określić dowolny kolor — kodowanie szesnastkowe. Pozwala ono określić 16 milionów odcieni — wymyślenie nazw dla takiej liczby kolorów jest niemożliwe, dlatego używa się cyfr.

Wartości szesnastkowe są określane za pomocą symbolu #, po którym następuje sześć cyfr lub liter, reprezentujących intensywność czerwonego, zielonego i niebieskiego kolorów (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Czerwony na zielonym </div>
      
    

Spotkacie się często z takim sposobem określania koloru w przykładach. Wrócimy do tego tematu, gdy będziemy bardziej szczegółowo omawiać CSS.