Tworzenie stron internetowych nie działa dla osób o słabych nerwach. Oprócz wiedzy, musisz mieć kreatywny sposób myślenia, interesy perfekcjonisty i precyzji precyzji podczas układania strony. CSS jest niezbędny w tej kwestii. I wiedzieć, że jego podstawy są niezbędne dla każdego webmastera.
Czym jest CSS?
Ci, którzy znają HTML, nie muszą wiedzieć, że jest to język znaczników strony. Ale jego twórcy postanowili dodać znaczniki, które są odpowiedzialne za wygląd i wygląd. To tylko z takim podejściem, kod strony stał się zbyt obszerny i praktycznie nieczytelny. Oczywiście, ta metoda nie doprowadziła nigdzie, więc było to kompleksowe rozwiązanie: HTML jest odpowiedzialny za układ strony, CSS - za wizualne projektowanie.
Skrót CSS oznacza Cascading Style Sheets (Cascading Style Sheets). Składa się z parametrów odpowiedzialnych za wizualizację obiektów na stronie.
Zalety CSS
Kaskadowe arkusze stylów pozwalają webmasterowi nie tylko stworzyć dobry zasób, ale także uczynić go czytelnym, znacznie zmniejszając jego rozmiar. Za pomocą CSS można ustawić parametry, które nie są możliwe w znacznikach HTML strony. Dzięki CSS możesz dosłownie zmienić wygląd stron zasobów za pomocą zaledwie kilku kliknięć. Jest to bardzo wygodne, zwłaszcza jeśli masz witrynę wielostronicową. Wszelkie zmiany w projekcie dokonywane są w kaskadowym arkuszu stylów, a nie w wyniku zmiany parametrów na każdej stronie zasobów. I tylko dzięki CSS możesz tworzyć znaczniki blokowe.
Połączenie CSS
Mówiąc o podstawowych zasadachCSS, najpierw musisz nauczyć się podłączyć kaskadowy arkusz stylów do pliku HTML. Ten proces jest dość prosty. Przede wszystkim musisz utworzyć dokument HTML. Dla tych, którzy jeszcze nie wiedzą, są one tworzone w programie Notebook. Następnie, używając funkcji "Zapisz jako", musisz podać rozszerzenie HTML.
W dokładnie taki sam sposób tworzony jest kaskadowy arkusz stylów, należy podać tylko rozszerzenie pliku css. Wynikowy dokument musi zostać zapisany w tym samym folderze, co pliki HTML. Załóżmy, że dokument arkusza stylów nazywa się style.css. Aby połączyć się z dokumentem HTML, musisz użyć tagu odpowiedzialnego za podłączanie plików zewnętrznych. Pomiędzy tagami należy wpisać:
Jest to prawdopodobnie jeden z najwygodniejszych sposobów podłączania zewnętrznych plików.
Zasada CSS
Badanie CSS powinno zaczynać się od nauki składni. W kaskadowym arkuszu stylów nie ma tagów, skryptów ani opcji. Jest tylko jedna reguła do naśladowania. Składa się z selektora i bloku stylów. Na przykład w kaskadowym arkuszu stylów podano pozycję: body {background: black; kolor: biały}. Tu ciało i jest selektorem odpowiedzialnym za stylistyczne formatowanie treści strony; tło: czerń i kolor: biały to właściwości i ich znaczenie. Są one zapisywane przecinkami. Ta pozycja powoduje, że tło witryny jest czarne, a tekst jest biały.
Selektory
Cóż, kontynuujemy intensywne wprowadzanie do CSS. Strony układu będą trudne do zrobienia bez wiedzy o selektorach. Jeśli właściwości i ich znaczenie są jasne, to dodatkowa wiedza o selektorachpomóc w tworzeniu pożądanego układu strony. Co musisz wiedzieć o selektorach? Po pierwsze, ich odmiany:
Identyfikator. Jako selektory można używać nazw elementów strony. W przypadku, gdy na przykład konieczne jest wyróżnienie akapitu tekstu w innym kolorze, należy dodać identyfikator. Jest określony przez parametr id.
Warto pamiętać, że jednego identyfikatora można użyć tylko raz. W tym przykładzie selektor ma nazwę różową, jeśli potrzebujesz jeszcze jednego identyfikatora, wtedy wystarczy podać inną nazwę (różowy2 zielony itp.). Klasy Selektor klasy jest używany, jeśli kilka obiektów musi mieć ustawione te same parametry. Na przykład dla dwóch akapitów tekstu należy określić czerwony kolor.
Klasy mogą być dowolną liczbą obiektów. W przypadku tego samego obiektu można określić zarówno klasę, jak i identyfikator - nie jest to sprzeczne ze znacznikami CSS. Ale ponieważ identyfikator ma wyższy priorytet, obiekt użyje własnego stylu. Kiedy znaczniki strony w CSS należy to wziąć pod uwagę. Identyfikatory i klasy mogą być używane dla dowolnych obiektów. A jeśli chcesz umieścić jeden styl tekstu i obrazów, nie możesz podać nazwy elementu, jak w przykładzie (p # różowy, p.red). Możesz po prostu umieścić kropkę lub kratę. Możesz także grupować selektory. Na przykład h1 h2 h3 {color: red; font-sixe: 17px}.
Układ strony
Podczas badania znaczników strony można zrozumieć, że istnieje kilka jej odmian:
Tablichna. Kiedy nie było kaskadowego arkusza stylów, tenznacznik był głównym. Pozwoliło to na dokładne umieszczenie obiektów zasobu od siebie nawzajem. Ale kod jest bardzo duży i słabo indeksowany przez wyszukiwarki. Inną wadą tej metody jest szybkość pobierania. Dopóki cała tabela nie zostanie pobrana, użytkownik nie zobaczy nawet początku tekstu.
Blok. To jest główny sposób nazywania stron. Jego użycie stało się możliwe tylko dzięki opracowaniu i ulepszeniu arkusza stylów.
Korzyści z układu bloków
Układ strony blokowej za pomocą CSS ma kilka niezaprzeczalnych zalet. Po pierwsze, styl obiektowy jest oddzielny od dokumentu HTML, co znacznie zwiększa czytelność kodu i pozwala szybko wprowadzać zmiany wizualne. Po drugie, istnieje możliwość nałożenia jednej warstwy na drugą, co kilkakrotnie ułatwia proces pozycjonowania. Oczywiście takie strony są szybciej pobierane i indeksowane przez wyszukiwarki. Układ strony w CSS ułatwia konfigurowanie nowoczesnych efektów wizualnych. Jedyną wadą tego podejścia jest inne "zrozumienie" przez przeglądarki. Niektóre odzwierciedlają zasób w formie, w jakiej widzi go webmaster. Ale są przeglądarki, które zniekształcają obraz, więc jeśli masz dużą liczbę klas i selektorów, powinieneś używać hacków, które sprawiają, że kod jest w różnych przeglądarkach.
Jak stworzyć układ blokowy strony?
Najpierw należy utworzyć układ. Powinien to być zwykły obraz z rozszerzeniem psd. Po utworzeniu (zakup lub pobranie) konieczne jest obcięcie obrazubloków i umieścić w jednym folderze (najlepiej osobno). Fragmenty te będą używane jako tło dla bloków. W dokumencie HTML dla układu bloków używany jest znacznik. Wszystko w nim jest nazywane warstwą, a format tej warstwy jest ustawiony w kaskadowym arkuszu stylów przy użyciu klas lub identyfikatorów. Pierwsza czynność po ukształtowaniu strony zostanie podzielona na części, w HTML ustawiona zostanie struktura strony, przy użyciu znacznika i przypisany selektor dla każdej warstwy. Na przykład, jeśli jest to menu, wpisz: id = menu. Następnie należy połączyć kaskadowy arkusz stylów i ustawić własne parametry dla każdej warstwy. Najprostszy kod ma następującą postać.
Ustaw parametry
Przykład pokazuje, jak ustawione są parametry dla bloków CSS. Układ układu strony jest podany w pikselach, chociaż w większości przypadków lepiej jest użyć zainteresowania. W oknie przeglądarki ta strona będzie miała formę "przyciętą z różnych części płótna", ponieważ w tym przykładzie użyto tylko koloru obszaru bloku. Ale jeśli zastąpisz go obrazem tła, możesz uzyskać nie tylko piękny, ale także funkcjonalny produkt.
Pomiędzy znacznikami można zapisać wszelkie niezbędne informacje o wymaganym formatowaniu. Każdy tekst napisany w tym znaczniku jest natychmiast nakładany na warstwę w sformatowanym bloku. Obiekty między nimi zostaną automatycznie zmniejszone, aby nie przekroczyć rozmiaru bloku. Ten przykład to tylko niewielka część wszystkiego, co webmaster ma do czynienia z pracą nad jakością.charakterystyka zasobu. Podczas tworzenia dobrego zasobu sieciowego, hacki często mogą być wykorzystywane do zakupu Crossbredów. Możesz edytować kody stron w specjalnych edytorach, co znacznie upraszcza pracę, choć nie pozbawia webmastera potrzeby ręcznej edycji.
Każdy może stworzyć stronę samodzielnie. Najważniejsze - zrozumieć, że zarówno CSS, HTML zostały stworzone przez ludzi i przeznaczone dla ludzi. Podstawy znaczników strony są dostępne dla wszystkich, a tworzenie zasobów sieciowych to nie tylko przywilej wybranych, ale może to być także codzienna aktywność każdego, kto chce.
