Podręcznik użytkownika Anuluj

Podstawowe informacje o stylach CSS

  1. Podręcznik użytkownika programu Dreamweaver
  2. Wprowadzenie
    1. Podstawy projektowania serwisów WWW o elastycznym układzie
    2. Dreamweaver — co nowego
    3. Programowanie zawartości WWW za pomocą programu Dreamweaver — przegląd
    4. Dreamweaver / Popularne pytania
    5. Skróty klawiszowe
    6. Wymagania systemowe programu Dreamweaver
    7. Podsumowanie funkcji
  3. Program Dreamweaver a platforma Creative Cloud
    1. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    2. Biblioteki Creative Cloud w programie Dreamweaver
    3. Używanie plików programu Photoshop w programie Dreamweaver
    4. Praca z programami Adobe Animate oraz Dreamweaver
    5. Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
  4. Przestrzenie robocze i widoki w programie Dreamweaver
    1. Przestrzeń robocza programu Dreamweaver
    2. Optymalizacja przestrzeni roboczej programu Dreamweaver do programowania wizualnego
    3. Wyszukiwanie plików według nazwy lub zawartości | Mac OS
  5. Konfigurowanie serwisów
    1. Informacje o serwisach programu Dreamweaver
    2. Konfigurowanie lokalnej wersji serwisu
    3. Nawiązywanie połączenia z serwerem publikacji
    4. Konfigurowanie serwera testowego
    5. Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
    6. Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
    7. Funkcje ułatwień dostępu w programie Dreamweaver
    8. Ustawienia zaawansowane
    9. Ustawianie preferencji serwisu dotyczących transferu plików
    10. Określanie ustawień serwera proxy w programie Dreamweaver
    11. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    12. Korzystanie z systemu Git w programie Dreamweaver
  6. Zarządzanie plikami
    1. Tworzenie i otwieranie plików
    2. Zarządzanie plikami i folderami
    3. Odbieranie plików i wysyłanie ich na serwer
    4. Pobieranie plików do edycji i odkładanie ich na serwer
    5. Synchronizacja plików
    6. Porównywanie plików w poszukiwaniu różnic
    7. Maskowanie plików i folderów w serwisie programu Dreamweaver
    8. Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
    9. Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
  7. Układ i projekt
    1. Korzystanie z wizualnych pomocy do układu
    2. Informacje o tworzeniu układu strony za pomocą stylów CSS
    3. Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
    4. Tworzenie i używanie zapytań o media w programie Dreamweaver
    5. Prezentacja zawartości za pomocą tabel
    6. Kolory
    7. Tworzenie reagujących projektów za pomocą układów elastycznej siatki
    8. Narzędzie Extract w programie Dreamweaver
  8. CSS
    1. Podstawowe informacje o stylach CSS
    2. Tworzenie układu strony za pomocą panelu Projektant CSS
    3. Korzystanie z preprocesorów CSS w programie Dreamweaver
    4. Ustawianie preferencji stylów CSS w programie Dreamweaver
    5. Przenoszenie reguł CSS w programie Dreamweaver
    6. Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
    7. Posługiwanie się znacznikami DIV
    8. Stosowanie gradientów na tło
    9. Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
    10. Formatowanie kodu
  9. Zawartość strony i zasoby
    1. Ustawianie właściwości strony
    2. Ustawianie właściwości CSS dla nagłówków i łączy
    3. Praca z tekstem
    4. Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
    5. Panel DOM
    6. Edytowanie w widoku aktywnym
    7. Kodowanie znaków dokumentu w programie Dreamweaver
    8. Zaznaczanie i wyświetlanie elementów w oknie Dokument
    9. Ustawianie właściwości tekstu na panelu Inspektor właściwości
    10. Sprawdzanie pisowni na stronie internetowej
    11. Używanie linii poziomych w programie Dreamweaver
    12. Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
    13. Praca z zasobami
    14. Wstawianie i aktualizowanie dat w programie Dreamweaver
    15. Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
    16. Wstawianie i edytowanie obrazów w programie Dreamweaver
    17. Dodawanie obiektów multimedialnych
    18. Dodawanie zawartości wideo w programie Dreamweaver
    19. Wstawianie wideo HTML5
    20. Wstawianie plików SWF
    21. Dodawanie efektów dźwiękowych
    22. Wstawianie obiektów audio HTML5 w programie Dreamweaver
    23. Praca z elementami bibliotek
    24. Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
  10. Łączenie i przeglądanie
    1. Informacje o łączeniu i przeglądaniu stron
    2. Tworzenie łączy
    3. Mapy obrazu
    4. Rozwiązywanie problemów dotyczących łączy
  11. Efekty i widgety jQuery
    1. Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver
    2. Używanie efektów jQuery w programie Dreamweaver
  12. Tworzenie kodu serwisów WWW
    1. Informacje o tworzeniu kodu w programie Dreamweaver
    2. Środowisko programistyczne w programie Dreamweaver
    3. Ustawianie preferencji kodowania
    4. Dostosowywanie ustawień kolorowania kodu
    5. Pisanie i edytowanie kodu
    6. Podpowiedzi i uzupełnianie kodu
    7. Zwijanie i rozwijanie kodu
    8. Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
    9. Linting: oczyszczanie kodu z błędów
    10. Optymalizacja kodu
    11. Edytowanie kodu w widoku Projekt
    12. Praca z zawartością znacznika HEAD strony
    13. Wstawianie dołączeń po stronie serwera w programie Dreamweaver
    14. Korzystanie z bibliotek znaczników w programie Dreamweaver
    15. Importowanie własnych znaczników do programu Dreamweaver
    16. Używanie zachowań JavaScript (instrukcje ogólne)
    17. Stosowanie wbudowanych zachowań JavaScript
    18. Omówienie języków XML i XSLT
    19. Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
    20. Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
    21. Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
    22. Formatowanie kodu
  13. Obiegi pracy związane z wieloma produktami
    1. Instalowanie i używanie rozszerzeń programu Dreamweaver
    2. Aktualizacje w aplikacji w programie Dreamweaver
    3. Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
    4. Praca z programami Fireworks i Dreamweaver
    5. Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
    6. Integracja programu Dreamweaver z aplikacją Business Catalyst
    7. Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
  14. Szablony
    1. Informacje o szablonach programu Dreamweaver
    2. Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
    3. Tworzenie szablonu programu Dreamweaver
    4. Tworzenie edytowalnych regionów w szablonach
    5. Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
    6. Używanie regionów opcjonalnych w szablonach
    7. Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
    8. Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
    9. Edytowanie, aktualizowanie i usuwanie szablonów
    10. Eksportowanie i importowanie zawartości XML w programie Dreamweaver
    11. Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
    12. Edycja zawartości w szablonach programu Dreamweaver
    13. Reguły składni dla znaczników szablonu w programie Dreamweaver
    14. Ustawianie preferencji podświetlenia dla regionów szablonów
    15. Korzyści wynikające z używania szablonów w programie Dreamweaver
  15. Urządzenia mobilne i obsługa wielu ekranów
    1. Tworzenie zapytań o media
    2. Zmiana orientacji strony na urządzeniach mobilnych
    3. Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver
  16. Dynamiczne serwisy, strony i formularze WWW
    1. Podstawowe informacje o aplikacjach internetowych
    2. Konfigurowanie komputera do programowania aplikacji
    3. Rozwiązywanie problemów z połączeniami z bazą danych
    4. Usuwanie skryptów połączenia w programie Dreamweaver
    5. Projektowanie stron dynamicznych
    6. Omówienie źródeł zawartości dynamicznej
    7. Definiowanie źródeł zawartości dynamicznej
    8. Dodawanie dynamicznej zawartości do stron
    9. Modyfikowanie dynamicznej zawartości w programie Dreamweaver
    10. Wyświetlanie rekordów z bazy danych
    11. Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
    12. Dodawanie własnych zachowań serwerowych w programie Dreamweaver
    13. Tworzenie formularzy w programie Dreamweaver
    14. Zbieranie informacji od użytkowników za pomocą formularzy
    15. Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
    16. Tworzenie formularzy WWW
    17. Rozszerzona obsługa elementów formularza w języku HTML5
    18. Tworzenie formularzy za pomocą programu Dreamweaver
  17. Tworzenie aplikacji metodą graficzną
    1. Tworzenie stron wzorca i szczegółów w programie Dreamweaver
    2. Tworzenie stron wyszukiwania i wyników
    3. Tworzenie strony wstawiania rekordów
    4. Tworzenie strony uaktualniania rekordów w programie Dreamweaver
    5. Tworzenie stron usuwania rekordów w programie Dreamweaver
    6. Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
    7. Tworzenie strony rejestracji
    8. Tworzenie strony logowania
    9. Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
    10. Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
    11. Korzystanie ze składników ColdFusion w programie Dreamweaver
  18. Testowanie, podgląd i publikacja serwisów WWW
    1. Podgląd stron
    2. Podgląd stron WWW programu Dreamweaver na wielu urządzeniach
    3. Testowanie serwisu programu Dreamweaver

 

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

CSS (Cascading Style Sheets) to zbiór reguł formatowania, które sterują wyglądem zawartości na stronie WWW. Sformatowanie strony za pomocą stylów CSS umożliwia rozdzielenie zawartości od prezentacji. Zawartość strony, kod HTML, znajduje się w pliku HTML. Natomiast reguły CSS, które definiują prezentację tego kodu, znajdują się w innym pliku (zewnętrznym arkuszu stylów), albo w innej części dokumentu HTML (zazwyczaj w sekcji nagłówka). Rozdzielenie zawartości i prezentacji znacznie ułatwia scentralizowaną obsługę wyglądu serwisu. Gdy chce się wprowadzić zmiany, nie trzeba modyfikować każdej właściwości na każdej stronie z osobna. Ponadto oddzielenie zawartości od prezentacji pozwala uzyskać prostszy i bardziej przejrzysty kod HTML, co skraca czas wczytywania się stron w przeglądarce i upraszcza nawigację osobom niepełnosprawnym (np. korzystającym z czytników ekranu).

CSS zapewnia elastyczność i kontrolę nad precyzyjnym wyglądem strony. Za pomocą stylów CSS można sterować wieloma właściwościami tekstu, np. czcionkami i ich rozmiarami; pogrubieniem, kursywą, podkreśleniem i cieniem tekstu; kolorem tekstu i kolorem tła; kolorem i podkreśleniem łączy; a także wieloma innymi właściwościami. Sterując czcionkami za pomocą stylu CSS można również zagwarantować bardziej spójną obsługę układu i wyglądu strony w wielu różnych przeglądarkach.

Obok formatowania tekstu, za pomocą stylów CSS można sterować formatem i położeniem elementów blokowych na stronie WWW. Element blokowy to samodzielny fragment zawartości, na ogół oddzielony nowym wierszem na stronie HTML i sformatowany graficznie w postaci bloku. Na przykład znaczniki h1 (nagłówek 1. rzędu), p (akapit) oraz div (rozdział) generują elementy blokowe na stronach WWW. Dla elementów blokowych można ustawiać marginesy i krawędzie, umieszczać je w określonym miejscu, dodawać kolor tła, oblewać je tekstem itd. Manipulowanie elementami blokowymi to podstawowa metoda tworzenia układu strony za pomocą stylów CSS.

Informacje o regułach CSS

Reguła formatowania CSS składa się dwóch części: selektora i deklaracji (lub, w większości przypadków, bloku deklaracji). Selektor to termin (odnoszący się do takich elementów, jak znacznik p, h1, nazwa klasy albo identyfikator), który identyfikuje formatowany element. Natomiast blok deklaracji definiuje właściwości stylu. W poniższym przykładzie, h1 to selektor, a cały tekst w klamrach ({}) 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, np. font-family (rodzina czcionek) oraz wartości, np. Helvetica. W poprzedniej regule CSS, utworzono styl dla znaczników h1: tekst wszystkich znaczników h1 powiązanych z tym stylem będzie miał rozmiar 16 punktów, czcionkę Helvetica i będzie pogrubiony.

Styl (który pochodzi z reguły lub zbioru reguł) jest przechowywany w innym miejscu, niż tekst, który formatuje. Zazwyczaj jest to zewnętrzny arkusz stylów albo sekcja nagłówka w dokumencie HTML. Zatem jedna reguła dla znaczników h1 może dotyczyć wielu znaczników naraz (a w przypadku zewnętrznego arkusza stylów, reguła może dotyczyć jednocześnie wielu znaczników na wielu różnych stronach). Dzięki temu standard CSS ogromnie ułatwia modyfikowanie wyglądu. Uaktualnienie reguły CSS w jednym miejscu powoduje, że formatowanie wszystkich używających jej elementów automatycznie przyjmuje nowy styl.

W programie Dreamweaver można tworzyć następujące rodzaje stylów:

  • Style klasy umożliwiają stosowanie właściwości stylu do dowolnych elementów na stronie.

  • Style znaczników HTML zmieniają definicję formatowania poszczególnych znaczników, np. h1. Gdy utworzysz lub zmienisz styl CSS dla znacznika h1, zmieni się automatycznie cały tekst sformatowany znacznikiem h1.

  • Style zaawansowane zmieniają definicję formatowania pewnych kombinacji elementów albo innych form selektorów, dozwolonych w standardzie CSS (np. selektor td h2 obowiązuje wtedy, gdy nagłówek h2 występuje w komórce tabeli). Style zaawansowane zmieniają także formatowanie znaczników, które zawierają określony atrybut id (np. style definiowane przez #mojStyl obowiązują dla wszystkich znaczników, które zawierają parę atrybut wartość: id="mojStyl").

Reguły CSS mogą być przechowywane w następujących miejscach:

Zewnętrzne arkusze stylów CSS

Zbiory reguł CSS, przechowywane w oddzielnym, zewnętrznym pliku CSS (.css), a nie w pliku HTML. Taki plik jest połączony z jedną lub wieloma stronami w serwisie WWW za pomocą łącza albo reguły @import, umieszczanej w sekcji nagłówka dokumentu.

Osadzone arkusze stylów CSS

Zbiory reguł CSS, dodane w znaczniku style w sekcji nagłówka 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, jeżeli spełniają one wytyczne CSS. W widoku Projekt program Dreamweaver bezpośrednio renderuje większość zastosowanych stylów. (Jednak wyświetlenie podglądu dokumentu w przeglądarce zapewnia najbardziej precyzyjne renderowanie strony „na żywo”). Niektóre style CSS są różnie renderowane w przeglądarkach Microsoft Internet Explorer, Netscape, Opera, Apple Safari i innych. Niektórych stylów nie obsługuje jak dotąd żadna przeglądarka.

Informacje o stylach kaskadowych

Termin kaskadowy odnosi się do sposobu, w jaki przeglądarka ostatecznie wyświetla style dla określonych elementów na stronie internetowej. Za style wyświetlane na stronie internetowej odpowiedzialne są trzy różne źródła: arkusz stylów utworzony przez autora strony, zaznaczenia stylów dostosowane przez użytkownika (jeśli są) i domyślne style przeglądarki. W poprzednich tematach opisane zostało tworzenie stylów dla strony internetowej jako tworzenie strony internetowej i arkusza stylów dołączonego do tej strony. Przeglądarki posiadają też swoje własne domyślne arkusze stylów dyktujące renderowanie stron internetowych, dodatkowo użytkownicy mogą dostosować swoje przeglądarki tworząc zaznaczenia określające wyświetlanie stron internetowych. Końcowe wyświetlanie strony internetowej jest wynikiem reguły wszystkich trzech źródeł razem wziętych („kaskadowanie”), co ma na celu renderowanie strony internetowej w optymalny sposób.

Często stosowany znacznik — znacznik akapitu, lub znacznik <p>— ilustruje koncepcję. Domyślnie, przeglądarki posiadają arkusze stylów definiujące czcionkę i rozmiar czcionki dla tekstu akapitu (tzn. tekstu umieszczonego między znacznikami <p> w kodzie HTML). Przykładowo w przeglądarce Internet Explorer cały tekst główny łącznie z tekstem akapitu, domyślnie wyświetlany jest czcionką Times New Roman, Medium.

Jednak, jako autor strony internetowej, możesz utworzyć arkusz stylów nadpisujący domyślny styl czcionki i rozmiar czcionki akapitu. Na przykład w swoim arkuszu stylów możesz utworzyć następującą regułę:

p { 
font-family: Arial; 
font-size: small; 
}

Gdy użytkownik wczytuje stronę, ustawienia kroju czcionki akapitu oraz rozmiaru czcionki określone przez autora strony zastępują domyślne ustawienia przeglądarki.

Użytkownicy mogą tworzyć zaznaczenia, aby dostosować wyświetlanie strony w przeglądarce w optymalny sposób do ich własnego używania. Na przykład w przeglądarce Internet Explorer użytkownik może wybrać polecenie z menu Widok > Rozmiar tekstu > Największy, aby powiększyć czcionkę do bardziej czytelnego rozmiaru, jeśli czcionka jest zbyt mała. Ostatecznie (przynajmniej w tym przypadku), wybór użytkownika nadpisuje domyślne style przeglądarki dla czcionki akapitu i rozmiaru czcionki oraz style akapitowe utworzone przez autora strony.

Kolejną ważną częścią stylów kaskadowych jest dziedziczenie. Właściwości dla 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 treści (body), znaczniki zakresu dziedziczą określone właściwości znaczników akapitowych itd. Zatem, jeśli w swoim arkuszu stylów utworzysz następującą regułę:

body { 
font-family: Arial; 
font-style: italic; 
}

Cały tekst akapitowy na stornie internetowej (także tekst dziedziczący właściwości ze znaczników akapitowych) będzie pisany czcionką Arial, kursywą ponieważ znacznik akapitowy dziedziczy te właściwości ze znaczników 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 treści (body) będzie pisany czcionką Arial, kursywą z wyjątkiem tekstu akapitowego (i jego dziedziczenia), który będzie wyświetlany za pomocą czcionki Courier (nie-kursywa). Technicznie, znacznik akapitu najpierw dziedziczy właściwości ustawione dla znacznika body, ale następnie je ignoruje, ponieważ ma własne zdefiniowane właściwości. Inaczej mówiąc, podczas gdy zwykle elementy strony dziedziczą właściwości z powyższych, bezpośrednia aplikacja właściwości znaczników zawsze powoduje nadpisanie formuły standardowej dla dziedziczenia.

Kombinacja wszystkich współczynników omawianych powyżej, oraz innych współczynników, np. specyfikacja CSS, oraz kolejność reguł CSS, ostatecznie tworzy złożoną kaskadę, gdzie elementy o wyższym priorytecie nadpisują elementy o niższym priorytecie. Więcej informacji na temat reguł rządzących kaskadami, dziedziczeniem i precyzją znajduje się na stronie internetowej 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.

Informacje o panelu Projektant CSS: Tworzenie układu strony za pomocą panelu Projektant CSS.

Oprócz własnych stylów i arkuszy można stosować w dokumentach arkusze stylów dołączone do programu Dreamweaver.

Samouczek przedstawiający formatowanie tekstu za pomocą stylów CSS można znaleźć na stronie internetowej www.adobe.com/go/vid0153_pl.

Informacje o skróconych właściwościach CSS

Specyfikacja CSS umożliwia tworzenie stylów w krótszej notacji. Nazywa się to skróconą składnią CSS. Skrócona składnia CSS umożliwia podanie wartości kilku właściwości w jednej deklaracji. Na przykład właściwość font umożliwia ustawienie w jednym wierszu właściwości font-style, font-variant, font-weight, font-size, line-height oraz font-family.

Korzystając ze skróconej składni CSS należy pamiętać, że opcje pominięte w skróconej właściwości CSS otrzymają wartości domyślne. Może to spowodować nieprawidłowe wyświetlanie stron, jeżeli do tego samego znacznika przypisano dwie lub więcej reguł CSS.

Np. przedstawiona poniżej reguła h1 stosuje pełną składnię CSS. Należy zauważyć, że właściwości font-variant, font-stretch, font-size-adjust oraz font-style otrzymały 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 
}

Ta sama reguła w postaci pojedynczej właściwości o składni skróconej wygląda następująco:

h1 { font: bold 16pt/18pt Arial }

Gdy stosuje się notację skróconą, właściwości pominięte przyjmują wartości domyślne. Zatem w poprzednim przykładzie pominięto właściwości font-variant, font-style, font-stretch oraz font-size-adjust.

Jeżeli style zdefiniowano w więcej niż jednym miejscu (np. zostały one zarówno osadzone w stronie HTML, jak i zaimportowane z zewnętrznego arkusza stylów) i użyto kombinacji pełnej i skróconej składni CSS, to trzeba pamiętać, że właściwości pominięte w regule skróconej mogą kaskadowo przesłaniać właściwości bezpośrednio zdefiniowane w innej regule.

Dlatego też program Dreamweaver domyślnie stosuje pełną notację składni CSS. Pozwala to uniknąć potencjalnych problemów wynikłych z przesłonięcia reguły w notacji pełnej przez regułę w notacji skróconej. Otwierając w programie Dreamweaver stronę WWW zapisaną w skróconej notacji CSS należy pamiętać, że program utworzy nowe reguły CSS w składni pełnej. Sposób, w jaki program Dreamweaver tworzy i edytuje reguły CSS, można zmienić w preferencjach edycji CSS w kategorii Style CSS okna dialogowego Preferencje (Edycja > Preferencje w systemie Windows lub Dreamweaver > Preferencje w systemie Macintosh).

Dreamweaver a style CSS

Program Dreamweaver udostępnia wiele metod pracy ze stylami CSS:

Logo Adobe

Zaloguj się na swoje konto