Dlaczego warto używać CSS?
Do czego są potrzebne style CSS?
Po co w ogóle stosować style CSS? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej, a jeśli i to Cię nie przekona, radzę poszukać sobie bardziej przydatnego zajęcia (np. szydełkowanie z wykorzystaniem techniki haftu ozdobnego 😉).
- Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać.
- Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania (zobacz: Elementy zdeprecjonowane), będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji CSS.
- Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.
- Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku!
- Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie.
- Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.
- Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia:
- Różne wartości pogrubienia czcionki (9 rodzajów)
- Dodatkowe możliwości formatowania tekstu
Przykład
To jest nadkreślenie tekstu
Ten paragraf został napisany małymi literami, ale dzięki transformacji, jest wyświetlany za pomocą wielkich liter.
Ten akapit zaczyna się wcięciem, którego można użyć jako tabulatora, rozpoczynającego każdy nowy akapit (normalny znak tabulatora wpisany w kodzie źródłowym strony, jest ignorowany przez przeglądarkę internetową, podczas wyświetlania dokumentu).
Odstęp pomiędzy literami w tym paragrafie został powiększony.
- Nowe własności tła
Przykład
Tło pod tekstem
Powtarzanie tła w poziomie
Kliknij tutaj, aby zobaczyć przykład strony z nieruchomym pojedynczym tłem.
Gradient (płynne przejście kolorów)
- Obramowanie
Przykład
Obramowanie tekstu
Zaokrąglone narożniki
Cień pod elementem
- Dodatkowe właściwości wykazów (list)
Przykład
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci...
- Nowy model obramowania tabeli
Przykład
komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 - Pozycjonowanie
Przykład
To nie jest obrazek!To nie jest obrazek! - Zmiana kształtu kursora.Kursor wczytany z pliku:
Przykład
Wskaż ten tekst myszką
Wskaż ten tekst myszką - Zmiana wyglądu odsyłacza, po wskazaniu go myszką
Przykład
Wskaż ten tekst myszką - Dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania.
- I wiele innych. Dodatkowo w ciągłym opracowaniu są style poziomu trzeciego (CSS 3), które oferują jeszcze więcej rozwiązań. Aby dowiedzieć się więcej, sprawdzaj stronę organizacji W3C oraz najnowsze specyfikacje.