Style CSS (kaskadowe arkusze stylów)

Szybki hosting dla WordPressa

Czym są style CSS?

Od samego początku powstania języka HTML był on skierowany raczej do prezentacji czystego tekstu, wzbogaconego o tabele, listy itp. Nie przewidziano natomiast zaawansowanej obsługi prezentowanego materiału. W wersji HTML 1 nie było nawet możliwości zmiany czcionki czy też jej koloru. W późniejszych wersjach, wprowadzono odpowiednie znaczniki tj. <font>, <color>, które mimo, że oferowały możliwości zmiany koloru, rodzaju i wielkości czcionki, to były tworami ograniczonymi.

 

Od wersji HTML 4 pojawiły się tzw. kaskadowe arkusze stylów (Cascading Style Sheets). Umożliwiają one nadanie specjalnych właściwości wszystkim znacznikom w dokumencie oraz tworzenie klas z właściwościami, które możesz przypisać do wybranego znacznika w dowolnym miejscu dokumentu.

<html>
<head>
   <title>Moja strona</title>
 <style type="text/css">
 <!-- 
   BODY    { color: #000000; background-color: #ffffff; }
   P, DIV  { font-size: 9pt; }
   .title  { font-weight: bold; font-size: 14pt; }
 -->
 </style>
</head>
  1. Style definiujesz w nagłówku strony. Rozpoczynasz od otworzenia znacznika <style> i określenia, z czym masz do czynienia – type=”text/css”.
  2. Znaki wstawione w tej lini oznaczają otwarcie komentarza. Jest to zabezpieczenie dla starszych przeglądarek, które nie obsługują CSS – dzięki temu mogą one całkowicie zignorować ten blok.
  3. Definiujesz pierwszy styl – dla znacznika <body>. Linia z definicją stylu jest podzielona na dwie części:
    • nazwa stylu – w przykładzie nazwą jest BODY,
    • właściwości – są one ograniczone znakami }.

    Każdy parametr podany we właściwościach posiada następującą składnię:

    • nazwa parametru – np. color:
    • wartość parametru – np. #000000;

    W przykładzie ustawiasz dla całego ciała dokumentu kolor czcionki na czarny, kolor tła dokumentu na biały.

  4. Definiujesz styl dla znaczników <p> i <div>. Ustalasz rozmiar czcionki na 9 punktów.
  5. Oprócz nadawania właściwości dla znaczników HTML istnieje możliwość definiowania własnych stylów. Dzięki temu, oprócz właściwości globalnych poszczególnych znaczników możesz wstawić styl dla konkretnego ciągu tekstu. W tej linii definiujesz właśnie taki własny styl. Można go poznać po tym, że jego nazwę poprzedza kropka. Twój styl będzie służyć do wypisania tytułu – aby go odróżnić od reszty tekstu ustalamy, że czcionka będzie pogrubiona, a jej wielkość wyniesie 14 punktów.
  6. Zamykasz komentarz.
  7. Zamykamy definicję stylów.

Jak używać stylów?

Jeżeli masz już zdefiniowane style, możesz z nich korzystać. Style globalne, które nadałeś znacznikom, będą automatycznie nadawane przez przeglądarkę. Natomiast własne style musisz wstawiać ręcznie w ciele dokumentu.

Oto przykład ciała dokumentu, do którego zastosujesz style użyte w poprzednim przykładzie.

  <body> 
  <div class="title">Ala ma kota</div> 
  <p>Ala ma kota</p> 
  <p style="font-size: 8pt;">Koniec</p> 
  Zwykły tekst 
  </body>
  1. Otwierasz ciało (body) dokumentu. Jak widać nie podajesz żadnych parametrów – wszystko masz zdefiniowane w stylach. Został ustalony kolor czcionki, tła dokumentu oraz domyślna czcionka.
  2. W tej linii do znacznika <div> dodajesz parametr class=”title”. Oznacza on dodanie do stylu znacznika <div> ustalonego w nagłówku, właściwości stylu title. Nie musisz tutaj poprzedzać nazwy stylu kropką. Jest ona wymagana jedynie podczas definicji stylu, aby odróżnić style użytkownika od stylów globalnych dla znaczników. Podsumowując, tekst “Ala ma kota” będzie posiadał następujące właściwości:
    • ustalone w stylu BODY – “color: #000000; background-color: #ffffff; “
    • ustalone w stylu DIV – “font-size: 9pt;”
    • ustalone w stylu .title – “font-weight: bold; font-size: 14pt;”

    Style są nadawane w tej właśnie kolejności – zaczynając od nadrzędnego, po kolei zdążając do najniższego. Dlatego też ustawienie stylu DIV zostało zastąpione przez styl .title.

  3. Wstawiasz zwykły paragraf. Tekst w nim umieszczony będzie wyświetlony z użyciem stylów BODY oraz P.
  4. Czasami zachodzi potrzeba zmiany stylu tylko dla jednego fragmentu w dokumencie. Nie trzeba do tego definiować całkiem nowego stylu, bezpośrednio w znaczniku możesz zdefiniować styl podręczny. W przykładzie, w znaczniku <p> do stylu P dodajesz styl podręczny style=”font-size: 8pt;”, który zmienia wielkość czcionki. Hierarchia stylów dla tekstu “Koniec” będzie wyglądać następująco:
    • ustalone w stylu BODY – “color: #000000; background-color: #ffffff;”
    • ustalone w stylu P – “font-size: 9pt;”
    • ustalone w stylu podręcznym – “font-size: 8pt;”
  5. Wypisujesz zwykły tekst – bez dodatkowych znaczników. Tekst ten obowiązuje tylko styl BODY.
  6. Zamykasz ciało (body) dokumentu.

Jest to krótka prezentacja stylów CSS. Kaskadowe arkusze stylów (CSS) umożliwiają nadanie tekstu wielu właściwości, które nie zostały tu pokazane.

Bezpieczny hosting dla Twojej strony WWW

Przygotowaliśmy miejsce, w którym Twoja strona WWW i poczta e-mail będą się czuły komfortowo.


  • Czy artykuł był pomocny ?
  • Tak   Nie
Szukaj
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Najczęściej zadawane pytania
Dodatkowe narzędzia hostingu
Statystyki serwera (nowe)
Połączenie SSH
Statystyki serwera (stare)
WebFTP
Autoinstalator
Kontrola wersji (SVN)
Listy mailingowe
Poczta home.pl
Obsługa poczty webmail
Programy pocztowe
Nowa platforma home.pl
Częste pytania
Bezpieczeństwo
Instalacje
Panel klienta
Domeny
Hosting
Serwer Apache
Bazy danych
Certyfikaty SSL
Zamawianie SSL
Instalacja i konfiguracja SSL
Poczta e-mail
WordPress Hosting SSD
Dodatki od partnerów
Poprzednia platforma home.pl
Certyfikaty SSL
Zamawianie certyfikatów SSL
Konfiguracja i instalacja SSL
Panel home.pl
Informacje podstawowe
Pulpit
Usługi
Płatności
Profil
Centrum Pomocy
Operacje w Panelu home.pl
Serwery
WebFTP
Informacje podstawowe
Konfiguracja serwerów
Serwery Unix
Serwery Windows
Obsługa baz danych
phpMyAdmin (MySQL)
phpPgAdmin (PgSQL)
myLittleAdmin (MSSQL)
Sklep internetowy eSklep
Panel usługi eSklep
RODO w sklepie internetowym
Panel sklepu internetowego
Pierwsze kroki
Promocja sklepu
Sprzedaż
Pierwsze uruchomienie
Dodatki od partnerów
Asortyment
Klienci
Integracje
Inne integracje
Systemy aukcyjne
Baza produktów
Aplikacje
App store
Aplikacja mobilna
Marketing
Modyfikacja wyglądu
Dokumentacja
Dla deweloperów
Style graficzne
Inne zagadnienia
Raporty i statystyki
Zawartość
Filmy instruktażowe
Konfiguracja sklepu
Rozliczenia i dokumenty
Faktury
Zmiana danych (cesja)
Rozliczenia i płatności
Dokumenty do pobrania
Produkty i usługi
Kreator Stron WWW
eCommerce
Moduły
Ustawienia
Szablony
Nawigacja
Publikacja i dodatki
Szybki start
Prestahosting
Profesjonalne usługi IT
Certyfikaty SSL
Przywracanie danych
Udostępnienie logów
Operacje na plikach i bazach danych
WordPress
Terminal płatniczy SumUp
Wordpress hosting SSD
Domeny
Informacje podstawowe
Rejestracja / opłacanie
Konfiguracja domen
Transfer domen
Giełda domen
Dodatki do domen
Serwery VPS
Skrzynki e-mail
Microsoft Exchange
Cloud Email Xchange
Obsługa skrzynek w Panelu home.pl
Jak zarejestrować Personal email lub Business email?
Bezpieczeństwo
eKsięgowość
Reklama internetowa
Reklama Allegro Ads
Tworzenie stron WWW
Contact LEADer
Reklama banerowa Google
Zakupy Google
Google Ads (AdWords)
eKampanie Google
SEMSTORM
Pozycjonowanie
rankingCoach
Baza wiedzy
Facebook
Systemy CMS
Internet w praktyce
Przydatne programy
Konfiguracja programów FTP
Zagadnienia techniczne
.htaccess
mod_rewrite
Kursy i specyfikacje
Kurs HTML
Kurs PHP
Kurs SQL
Rejestracja usług
Program prowizyjny
RODO w home.pl
English
Website Builder
Marketplace
Control Panel
Webmail
FTP
Office 365
WordPress
SSL certificate
Aplikacje w marketplace
SimplySign
Antywirus ESET
Ochrona WWW
AVG Secure VPN
Backup WWW
SiteLock
Dropsuite Email Backup
CCleaner
Antywirus Kaspersky
Dropbox - dysk w chmurze
Płatności PayU
Programy antywirusowe AVAST
Office 365
AVG PC TuneUp
Reklama na start
Google AdWords
Zareklamuj stronę WWW na Facebook
Cloud Email Xchange
Brand24
Microsoft OneDrive
FreshMail.pl
Tłumaczenia online
G Suite - poczta Gmail
Acronis Backup
Informacje podstawowe
Ustawienia dodatkowe
Panel użytkownika
Panel administratora
Dla biznesu
Kalendarz pracy 2020
lub