Omówienie podstawowych koncepcji dotyczących stylów CSS, takich jak reguły CSS, selektory, dziedziczenie itd. Informacje o dodawaniu stylów CSS do stron WWW w programie Dreamweaver.
Informacje o stylach CSS
Kaskadowe arkusze stylów (CSS) to zbiór reguł formatowania, które kontrolują wygląd zawartości na stronie internetowej. Używanie stylów CSS do formatowania strony oddziela zawartość od prezentacji. Zawartość strony — kod HTML — znajduje się w pliku HTML, a reguły CSS definiujące prezentację kodu znajdują się w innym pliku (zewnętrzny arkusz stylów) lub w innej części dokumentu HTML (zwykle w sekcji head). Oddzielenie zawartości od prezentacji znacznie ułatwia utrzymywanie wyglądu witryny z centralnego miejsca, ponieważ nie trzeba aktualizować każdej właściwości na każdej stronie za każdym razem, gdy zachodzi potrzeba wprowadzenia zmiany.Oddzielenie zawartości od prezentacji skutkuje również prostszym i czystszym kodem HTML, co zapewnia krótsze czasy ładowania przeglądarki i upraszcza nawigację dla osób z problemami dostępności (na przykład tych używających czytników ekranu).
CSS daje wielką elastyczność i kontrolę nad dokładnym wyglądem strony. Za pomocą CSS można kontrolować wiele właściwości tekstu, w tym konkretne czcionki i rozmiary czcionek; pogrubienie, kursywę, podkreślenie i cienie tekstu; kolor tekstu i kolor tła; kolor łączy i podkreślenie łączy; i nie tylko.Używając CSS do kontrolowania czcionek, można również zapewnić bardziej spójne traktowanie układu strony i wyglądu w wielu przeglądarkach.
Oprócz formatowania tekstu można używać CSS do kontrolowania formatu i pozycjonowania elementów blokowych na stronie internetowej. Element blokowy to autonomiczny fragment zawartości, zwykle oddzielony nową linią w HTML i wizualnie sformatowany jako blok. Na przykład znaczniki h1, znaczniki p i znaczniki div tworzą elementy blokowe na stronie internetowej. Można ustawić marginesy i obramowania dla elementów blokowych, umieścić je w określonym miejscu, dodać do nich kolor tła, opływać je tekstem i tak dalej. Manipulowanie elementami blokowymi jest w istocie sposobem na tworzenie układów stron za pomocą CSS.
Informacje o regułach CSS
Reguła formatowania CSS składa się z dwóch części — selektora i deklaracji (lub w większości przypadków bloku deklaracji). Selektor to termin (taki jak p, h1, nazwa klasy lub id), który identyfikuje formatowany element, a blok deklaracji określa, jakie są właściwości stylu.W poniższym przykładzie h1 to selektor, a wszystko, co znajduje się między nawiasami klamrowymi ({}) to blok deklaracji:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Pojedyncza deklaracja składa się z dwóch części: właściwości (takiej jak font-family) i wartości (takiej jak Helvetica). W poprzedniej regule CSS utworzono określony styl dla znaczników h1: tekst dla wszystkich znaczników h1 połączonych z tym stylem będzie mieć 16 pikseli wielkości, czcionkę Helvetica i będzie pogrubiony.
Styl (który pochodzi z reguły lub zbioru reguł) znajduje się w miejscu oddzielnym od faktycznego tekstu, który formatuje — zwykle w zewnętrznym arkuszu stylów lub w sekcji head dokumentu HTML.W ten sposób jedna reguła dla znaczników h1 może dotyczyć wielu znaczników jednocześnie (a w przypadku zewnętrznych arkuszy stylów reguła może dotyczyć wielu znaczników jednocześnie na wielu różnych stronach). W ten sposób CSS zapewnia niezwykle łatwą możliwość aktualizacji. Podczas aktualizacji reguły CSS w jednym miejscu formatowanie wszystkich elementów korzystających z zdefiniowanego stylu jest automatycznie aktualizowane do nowego stylu.
W programie Dreamweaver można tworzyć następujące rodzaje stylów:
Style klas umożliwiają stosowanie właściwości stylów do dowolnego elementu lub elementów na stronie.
Style znaczników HTML ponownie definiują formatowanie dla konkretnego znacznika, takiego jak h1. Po utworzeniu lub zmianie stylu CSS dla znacznika h1 cały tekst sformatowany za pomocą znacznika h1 zostaje natychmiast zaktualizowany.
Style zaawansowane ponownie definiują formatowanie dla konkretnej kombinacji elementów lub dla innych form selektorów dozwolonych przez CSS (na przykład selektor td h2 stosuje się gdy nagłówek h2 pojawia się wewnątrz komórki tabeli.) Style zaawansowane mogą również ponownie definiować formatowanie dla znaczników zawierających konkretny atrybut id (na przykład style zdefiniowane przez #myStyle stosują się do wszystkich znaczników zawierających parę atrybut-wartość id="myStyle").
Reguły CSS mogą być przechowywane w następujących miejscach:
Zewnętrzne arkusze stylów CSS
Kolekcje reguł CSS przechowywane w osobnym, zewnętrznym pliku CSS (.css) (nie w pliku HTML). Ten plik jest połączony z jedną lub wieloma stronami w witrynie za pomocą linku lub reguły @import w sekcji head dokumentu.
Osadzone arkusze stylów CSS
Kolekcje reguł CSS umieszczone w znaczniku style w części head dokumentu HTML.
Style wewnętrzne
Zdefiniowane w poszczególnych wystąpieniach znaczników w dokumencie HTML. (Nie zaleca się stosowania stylów wewnętrznych).
Program Dreamweaver rozpoznaje style zdefiniowane w istniejących dokumentach, o ile są zgodne z wytycznymi stylów CSS.Program Dreamweaver renderuje również większość zastosowanych stylów bezpośrednio w widoku Design.(Podgląd dokumentu w oknie przeglądarki jednak zapewnia najbardziej dokładne renderowanie strony na żywo.) Niektóre style CSS są renderowane inaczej w przeglądarkach Microsoft Internet Explorer, Netscape, Opera, Apple Safari lub innych, a niektóre nie są obecnie obsługiwane przez żadną przeglądarkę.
Informacje o stylach kaskadowych
Termin kaskadowanie odnosi się do sposobu, w jaki przeglądarka ostatecznie wyświetla style określonych elementów na stronie internetowej.Za style widoczne na stronie internetowej odpowiadają trzy różne źródła: arkusz stylów utworzony przez autora strony, dostosowane wybory stylu użytkownika (jeśli istnieją) oraz domyślne style samej przeglądarki. W poprzednich tematach opisano tworzenie stylów strony internetowej jako autor zarówno strony internetowej, jak i arkusza stylów dołączonego do tej strony.Jednak przeglądarki mają też swoje domyślne arkusze stylów, które dyktują renderowanie stron internetowych, a dodatkowo użytkownicy mogą dostosowywać swoje przeglądarki, dokonując wyborów, które wpływają na wyświetlanie stron internetowych.Ostateczny wygląd strony internetowej jest wynikiem reguł ze wszystkich trzech źródeł, które łączą się (lub „kaskadują"), aby renderować stronę internetową w optymalny sposób.
Typowy znacznik — znacznik akapitu lub znacznik <p> — ilustruje koncepcję. Domyślnie przeglądarki są wyposażone w arkusze stylów, które definiują czcionkę i rozmiar czcionki dla tekstu akapitu (czyli tekstu, który znajduje się między znacznikami <p> w kodzie HTML). W przeglądarce Internet Explorer na przykład cały tekst podstawowy, w tym tekst akapitu, wyświetla się domyślnie czcionką Times New Roman, Medium.
Jako autor strony internetowej możesz jednak utworzyć arkusz stylów, który zastąpi domyślny styl przeglądarki dotyczący czcionki akapitu i rozmiaru czcionki. Na przykład w arkuszu stylów można utworzyć następującą regułę:
p {
font-family: Arial;
font-size: small;
}
Gdy użytkownik ładuje stronę, ustawienia czcionki akapitu i rozmiaru czcionki ustalone przez autora zastępują domyślne ustawienia tekstu akapitu w przeglądarce.
Użytkownicy mogą dokonać ustawień, aby dostosować wyświetlanie przeglądarki w sposób optymalny dla własnych potrzeb.Na przykład w programie Internet Explorer użytkownik może wybrać Widok > Rozmiar tekstu > Największy, aby powiększyć czcionkę strony do bardziej czytelnego rozmiaru, jeśli uważa, że czcionka jest zbyt mała.Ostatecznie (przynajmniej w tym przypadku) wybór użytkownika zastępuje zarówno domyślne style przeglądarki dla rozmiaru czcionki akapitu, jak i style akapitu utworzone przez autora strony internetowej.
Kolejną ważną częścią stylów kaskadowych jest dziedziczenie. Właściwości większości elementów na stronie internetowej są dziedziczone — na przykład znaczniki akapitu dziedziczą określone właściwości ze znaczników body, znaczniki span dziedziczą określone właściwości ze znaczników akapitu itd.Jeśli więc utworzysz następującą regułę w arkuszu stylów:
body {
font-family: Arial;
font-style: italic;
}
Cały tekst akapitu na stronie internetowej (także tekst dziedziczący właściwości ze znaczników akapitowych) będzie pisany czcionką Arial, kursywą, ponieważ znacznik akapitu dziedziczy te właściwości ze znacznika treści (body). Jednak można określać reguły bardziej dokładnie i tworzyć style nadpisujące standardową formułę dla dziedziczenia. Na przykład jeśli w swoim arkuszu stylów utworzysz następującą regułę:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Cały tekst podstawowy będzie Arial i kursywą z wyjątkiem tekstu akapitu (i dziedziczonego), który będzie wyświetlany jako Courier normalny (niekursywa). Technicznie rzecz biorąc, znacznik akapitu najpierw dziedziczy właściwości ustawione dla znacznika body, ale następnie ignoruje te właściwości, ponieważ ma zdefiniowane własne właściwości. Innymi słowy, chociaż elementy strony ogólnie dziedziczą właściwości z góry, bezpośrednie zastosowanie właściwości do znacznika zawsze powoduje zastąpienie standardowej formuły dziedziczenia.
Kombinacja wszystkich czynników omówionych powyżej oraz innych czynników, takich jak specyficzność CSS (system, który nadaje różną wagę określonym rodzajom reguł CSS) i kolejność reguł CSS, ostatecznie tworzą złożoną kaskadę, w której elementy o wyższych priorytetach zastępują właściwości o niższych priorytetach. Więcej informacji o regułach rządzących kaskadą, dziedziczeniem i specyficznością podano na www.w3.org/TR/CSS2/cascade.html.
Informacje o formatowaniu tekstu i stylach CSS
Domyślnie program Dreamweaver formatuje tekst za pomocą stylów CSS (Cascading Style Sheet). Style nadawane tekstowi za pomocą Inspektora właściwości albo poleceń menu generują reguły CSS, osadzane w nagłówku bieżącego dokumentu.
Panel Projektant CSS również umożliwia tworzenie reguł i właściwości CSS oraz ich edytowanie. Panel Projektant CSS zapewnia znacznie bardziej rozbudowane możliwości edycji niż Inspektor właściwości. Wyświetla wszystkie reguły CSS zdefiniowane w bieżącym dokumencie, zarówno te osadzone w nagłówku dokumentu, jak i te z zewnętrznego arkusza stylów. Firma Adobe zaleca stosowanie panelu Projektant CSS (zamiast Inspektora właściwości) jako podstawowego narzędzia do tworzenia i edytowania stylów CSS. Dzięki temu kod jest bardziej przejrzysty i łatwiejszy w utrzymaniu.
Więcej informacji o programie CSS Designer podano w Układanie stron za pomocą programu CSS Designer.
Oprócz własnych stylów i arkuszy można stosować w dokumentach arkusze stylów dołączone do programu Dreamweaver.
Aby zapoznać się z samouczkiem formatowania tekstu za pomocą CSS, zobacz www.adobe.com/go/vid0153.
Informacje o skróconych właściwościach CSS
Specyfikacja CSS pozwala na tworzenie stylów przy użyciu skróconej składni znanej jako shorthand CSS.Skrócony CSS pozwala określić wartości kilku właściwości za pomocą jednej deklaracji. Na przykład właściwość font pozwala ustawić właściwości font-style, font-variant, font-weight, font-size, line-height i font-family w jednej linii.
Kluczowym zagadnieniem, które należy uwzględnić podczas używania skróconej notacji CSS, jest to, że wartości pominięte we właściwości skróconej CSS otrzymują swoją wartość domyślną.Może to spowodować nieprawidłowe wyświetlanie stron, gdy do tego samego znacznika przypisane są co najmniej dwie reguły CSS.
Na przykład reguła h1 pokazana poniżej używa pełnej składni CSS.Należy zauważyć, że właściwości font-variant, font-stretch, font-size-adjust i font-style otrzymały swoje wartości domyślne.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Przepisana jako pojedyncza właściwość skrócona, ta sama reguła może wyglądać następująco:
h1 { font: bold 16pt/18pt Arial }
Podczas pisania w notacji skróconej pominięte wartości są automatycznie przypisywane do ich wartości domyślnych.W związku z tym poprzedni przykład skróconej notacji pomija znaczniki font-variant, font-style, font-stretch i font-size-adjust.
Jeśli masz style zdefiniowane w więcej niż jednym miejscu (na przykład zarówno osadzone na stronie HTML, jak i importowane z zewnętrznego arkusza stylów) używając zarówno krótkiej, jak i długiej formy składni CSS, pamiętaj, że pominięte właściwości w regule skróconej mogą zastąpić (lub przesłonić) właściwości, które są wyraźnie ustawione w innej regule.
Z tego powodu program Dreamweaver domyślnie używa długiej formy notacji CSS.Zapobiega to możliwym problemom spowodowanym przez regułę skróconą zastępującą regułę długą.Jeśli otworzysz w programie Dreamweaver stronę internetową, która została zakodowana z użyciem skróconej notacji CSS, pamiętaj, że Dreamweaver utworzy nowe reguły CSS używając formy długiej.Możesz określić sposób, w jaki Dreamweaver tworzy i edytuje reguły CSS, zmieniając preferencje edycji CSS w kategorii Ustawienia CSS w oknie dialogowym Preferencje (Edycja > Preferencje w systemie Windows; Dreamweaver > Preferencje na komputerach Macintosh).
Dreamweaver a style CSS
W programie Dreamweaver można pracować z CSS na wiele sposobów:
- Panel Projektant CSS umożliwia przygotowanie stylów CSS przy minimum prac programistycznych. Więcej informacji: Tworzenie układu strony za pomocą panelu Projektant CSS.
- Kod CSS można również napisać ręcznie. Więcej informacji o funkcjach kodowania oferowanych przez Dreamweaver podano w sekcji Środowisko kodowania w programie Dreamweaver.
- Jeśli wolisz pracować nad plikami Sass, Scss lub Less, możesz napisać kod w swojej preferowanej składni i wykorzystać go w programie Dreamweaver. Więcej informacji podano w sekcji Preprocesory CSS.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
