Prostota koncepcji CSS umożliwia łączenie reguł stylu z zewnętrznego pliku, ze strony znacznika, poprzez atrybut stylu na znaczniku lub przez javascript. Nie ma nic skomplikowanego w kompilacji i stosowaniu zasad CSS, ale do prawidłowego użycia konieczne jest zrozumienie jego miejsca, logiki pracy i miejsca w projektowaniu stron internetowych.

Elementy i przepływ dokumentu HTML

Sposób tworzenia strony internetowej nie jest ważny. Najważniejsze jest to, że jest odbierany z serwera przez przeglądarkę odwiedzającego. Przeglądarka buduje drzewo obiektów strony (DOM), koncentrując się na składni HTML i CSS. Za pomocą języka javascript można uzupełnić elementy strony o funkcje. Idealną opcją jest to, że przeglądarka otrzymuje nagłówki i treść strony, uruchamia połączenie z serwerem AJAX, a wymagana zawartość jest wypełniana w taki sposób, jaki jest potrzebny w bieżącej sesji, i zmienia się w zależności od działań użytkownika.


Wersja klasyczna to przeglądarka plików HTML, CSS, JS i działa zgodnie z instrukcjami. Kolejność przejścia znaczników HTML jest ważna, ale reguły CSS mogą zmienić ich rzeczywistą pozycję w oknie przeglądarki. Poprawna kombinacja kolejności rejestrowania znaczników HTML i reguł CSS pozwala prawidłowo wyświetlać informacje i zapewniać niezbędne funkcje strony. We wszystkich przypadkach istnieją proste reguły:

rozpoznawany jest strumień danych, zgodnie z odpowiednią składnią (HTML, CSS, JS);

liczba przerw nie ma znaczenia, jedno miejsce jest ważne;

Tłumaczenia wierszy, tabulacji i innych podobnych znakównie ma znaczenia;

Komentarze, które nie mogą być wzajemnie powiązane.

Składnia reguły CSS umieszczona w stylu znacznika ma priorytet. Style określone w tagu stylu i połączone z pliku zewnętrznego są równoważne. Tagi nie mają wpływu na styl. Kod javascript może odczytywać i zapisywać style znaczników, tworzyć nowe znaczniki i style.


Aby poprawić wygodę czytania, można łączyć wielkie i małe litery. Składnia reguł CSS umożliwia korzystanie z rejestru, ale nie ma znaczenia, kiedy jest używany.

Przykład projektowania struktur CSS

Podstawowe wymagania dla stylów są jednolite: nazwa obiektu, którego dotyczy reguła, oraz lista reguł w nawiasach klamrowych. Obiektem może być nazwa znacznika (body, p, h1 div, img) lub nazwa klasy. Ciąg nazwy obiektu może zawierać kilka nazw, a każdy pseudoelement lub pseudo-klasa może być przypisany do każdego z nich. Lista reguł - ciąg linii przez znak ";". Każda reguła zawiera nazwę - element składni języka CSS (za pomocą symbolu ":") ciąg wartości. W większości reguł ciąg wartości jest jedną wartością, ale, jak widać z tego przykładu, wartości można ustawić na wiele.

Working File Version

Składnia CSS nie określa, czy należy dopasować, czy nie. Sposób na napisanie - w jednej linii lub kilku - jest smakiem programisty. Możesz utworzyć kilka reguł dla jednego tagu z rzędu, ale możesz umieścić wszystkie reguły w jednym kontenerze "{" "}". Taka "owsianka" jest typowa dla nowoczesnych systemów zarządzania witryną (CMS), które tworzą zestawy niezmiennych (dlastandardowe) w jednym nieczytelnym pliku, który jest szybciej czytany i rozumiany przez przeglądarkę.
Wszystkie style, które CMS uważa za istotne dla programisty, są napisane w stylu klasycznym, który można łatwo przeglądać i modyfikować.

Idealna "składnia" CSS

Idealnie uważany za system, który nie istnieje i jego funkcja jest wykonywana. Zwykle używają plików CSS: są łatwe do połączenia z dokumentem HTML i można je szybko zmienić. Podświetlanie składni HTML i CSS jest dostarczane przez wszystkie nowoczesne edytory kodu. Na przykład PhpStorm idealnie współpracuje z wieloma formatami. Przede wszystkim jest to bardzo wygodne do pracy. Ale najważniejsze - sprawdza połączenie pliku HTML z opisami CSS. Wszystkie podświetlone i połączone. Ten produkt testuje również pliki pod kątem użyteczności, a składnia CSS i klasy są świetnym narzędziem. Zasady dla prostych opisów złożonych systemów - dotyczy to CSS. W ciągu ostatnich pięciu lat HTML i CSS "wzajemnie korzystny" ewoluowały i osiągnęły "doskonałość". Ale ta perfekcja jest dziwnie, sztywno i nadal wymaga pracy wykwalifikowanego programisty (często zespołu) w celu stworzenia profesjonalnego zasobu sieciowego. W tym przykładzie tworzony jest ciąg opisujący zestaw stylów. Jak zwykle, używana jest składnia CSS, z jednym wyjątkiem: zamiast linków do obrazów wstawiana jest zawartość obrazu. To jest koszt tej metody kształtowania stylu. Ten problem jest rozwiązany, zasadniczo inny - styl jest tworzony w locie.
Pierwotnie utworzono opis - ciąg znaków. Następnie element StyleLL zostanie utworzony jako znacznik styluOkreśla typ tego znacznika i wstawia do niego treść. Wreszcie, nowy obiekt zostaje wszczepiony w ciało, które natychmiast zaczyna działać.

Tworzenie HTML i CSS "w locie"

Rzadki zakres, a nie każdy zasób sieciowy powinien zostać natychmiast odzwierciedlony w całości. Powszechne jest pisanie stron od razu, rysowanie stylów i tworzenie procedur obsługi zdarzeń. Na stronie nowoczesnego CMS nie ma innych opcji. Opracowanie ręcznie wykonanej strony zapewnia znacznie większą swobodę działania, ale jest to masa ręcznej pracy. CMS ma już zestaw szablonów i stylów. Nie trzeba wiele robić, aby stworzyć nową stronę. Przykładem tworzenia stylu w locie nie jest składnia pliku CSS w zwykłym znaczeniu, ale wynik jest absolutnie równoważny. Strumień danych, który przeglądarka otrzymuje z serwera, może być zbudowany inaczej. Wersja klasyczna tworzy zestaw plików HTML, CSS i JS. Jeśli go nie tworzysz i rozwijaj logikę tworzenia strumienia w locie:

tworzenie zestawu znaczników HTML w razie potrzeby;

tworząc zestaw stylów CSS dla każdego przedsiębiorstwa znaczników;

zapewnienie mechanizmu wymiany informacji na temat technologii AJAX.

W tym scenariuszu, gdy witryna zostanie zainicjowana w przeglądarce, mała ilość danych ulegnie zaognieniu, co zainicjuje proces tworzenia strony i stylów, których potrzebuje. W zależności od działań użytkownika, przepływ danych z serwera zmieni jego zawartość, ale nie w kontekście transferu stron lub gotowych tagów i danych - w tym sensie, że dokładnie tam, gdzie dokładnie i jak dokładnie utworzyć.

Przejścieod sztywności do mobilności

W zwykły sposób wszystko statycznie lub dynamicznie. Podczas tworzenia w locie, podczas tworzenia tagów istnieją style, a logika tworzenia jest programowana. Zazwyczaj strona jest programowana na serwerze, kod JS instrukcji obsługi jest rozwijany w przeglądarce, a struktura strukturalna powiązanych ze sobą reguł jest tworzona. Jeśli chcesz coś zmienić - proces się powtarza. Podczas programowania tworzenia strony w locie nie tworzy się HTML + CSS, ale proces ich tworzenia. Proces tworzenia czegoś jest okazją do przewidywania sytuacji i rozgałęzienia w zależności od sytuacji. Programowanie procesu tworzenia strony i serwowania jej plików sprawia, że ​​witryna jest bardziej dynamiczna i mobilna, a także ewoluuje.