CSS: połącz się z dokumentem internetowym

Nauka CSS jest kolejnym po HTML i wymaganym krokiem w opanowaniu programowania internetowego. Technologia ta znacznie rozszerza możliwości znakowania stron w Internecie, a także skraca czas pracy projektanta layoutu na projekcie i zmniejsza ilość kodu. Temat jest łatwy do zrozumienia, a włączenie czcionek CSS nie sprawia trudności uczniom.

Kaskadowe arkusze stylów

CSS (ang. English Cascade Style Sheets - Cascade Style Sheets) to język znaczników stron internetowych, na których Haakon Wium Li rozpoczął pracę w 1994 roku.

W 1996 roku jego twórczość została doceniona przez World Wide Web Consortium W3C, pierwsza wersja CSS1 została wydana. Od tego czasu język przeszedł zmiany i dostosowania w kierunku poprawy i poprawy.

Przy użyciu CSS podłączenie go do kodu HTML uzupełnia i rozszerza możliwości tego ostatniego:

• zmiana tekstu na stronie, gdy tylko kreator może rysować. Jednocześnie funkcjonalność jest szersza niż nawet wśród takich mastodontów wśród edytorów tekstów takich jak MS Word lub LibreOffice;
• pozwala na stosowanie formatowania do dużych dokumentów lub znacznej ich liczby w obrębie tej samej witryny, co powoduje, że webmasterzy poświęcają mniej czasu i wysiłku;
• ponieważ ilość kodu jest zmniejszana, zwiększa się prędkość ładowania strony, co jest bardzo ważne dla użytkowników z wolnym lub ograniczonym połączeniem;
• posiada narzędzia do układu różnych przeglądarek - bardzo ważny czynnik przy zwiększaniu typów urządzeń z dostępem do Internetu (gadżety).

Obecnie używany CSS4, pracujący w parze z HTML5, spełnia wszystkie potrzeby nowoczesnego budowania witryn. Wielu informatyków uważa, że ​​CSS4 osiągnął szczyt swojego rozwoju, a kolejne wersje nie zostaną opublikowane - nie są konieczne.

Składnia

Połączenie CSS ze znacznikami HTML odbywa się za pomocą pary tagów , wewnątrz której umieszczona jest instrukcja zachowania elementu na stronie internetowej, która ma następującą składnię:

p {text-indent: 5%;} 

Stosując ten styl do tagu

w całym dokumencie akapity będą wcięte w 5% od początku linii.

Konstrukcja jest nazywana deklaracją stylu i musi być umieszczona w części nagłówkowej dokumentu internetowego zawierającej informacje techniczne między znacznikami. . Struktura deklaracji stylu dla znacznika

jest to:

1. p - identyfikator.
2. text-indent jest właściwością stylu.
3. 5% - wartość nieruchomości.

Są to specjalne terminy, definicje używane w podręcznikach, które są powszechne wśród programistów. Powinny pamiętać!

Pracuj z czcionką

Informacja w postaci tekstu jest tym, co 99% odwiedzających przyszłą stronę przyjdzie w poszukiwaniu potrzebnych danych. Dlatego czytelność czcionki, jej estetyka i łatwość percepcji wizualnej odgrywają ważną rolę w frekwencji zasobów. Połączenie CSS tutaj będzie działaniem, które jest w stanie spełnić wymienione wymagania.

Technologia manipulowania czcionkami ma bogaty zestaw narzędzi. Najbardziej przejrzysty w postaci tabeli jest zapewnienie innego sposobu łączenia czcionek CSS dla znacznika.

który wyrównuje tekst:

Przykład w jaki sposób przeglądarka wyświetli każdą deklarację stylu:

Wiele stylów jest używanych do pracy z tekstem. Pełną listę ich, ich cel, ich właściwości i wartości można znaleźć w podręcznikach podręcznika CSS.

Zewnętrzne pliki CSS

Połączenie CSS można wykonać za pomocą plików zewnętrznych. W tym przypadku, oprócz głównego dokumentu HTML, dokument ze stylami jest tworzony osobno i znajduje się w tym samym katalogu, co sam dokument HTML. Ich liczba może być dowolna. Algorytm łączenia zewnętrznych plików CSS składa się tylko z dwóch kroków:

1. W edytorze tekstu utwórz dokument ze stylami, podaj jego rozszerzenie .css. Z tym tagiem nie określono.
2. W dokumencie HTML w nagłówku dokumentu (między tagami ) musisz odwołać się do tego pliku, używając następującej konstrukcji:

    ​ 

Zamiast style.css musisz podać swój adres pliku. W takim przypadku adresowanie może być zarówno bezwzględne, jak i względne. Zalety są oczywiste:

• pliki zewnętrzne można zastosować do dowolnej liczby stron internetowych w witrynie;
• jeśli podasz adresowanie bezwzględne, to do kilku stron. Oczywiście, z tym, znacznik jest napisany raz i nie ma potrzeby przepisywania stylu dla każdej strony;
• gdy programista używa tej metody, użytkownik końcowy nie będzie mógł wyświetlić kodu CSS. W ten sposób możesz chronić swoją kreatywność przed plagiatem.

Ponadto podczas pracy z kodem znaczników projektant układu strony popełnia błędy. Są łatwiejsze do znalezienia i poprawienia w osobnym pliku o małym rozmiarze niż w zwykle uciążliwym kodzie HTML.

Korzystanie z technologii JavaScript

Podczas formatowania tekstu na stronie internetowej często konieczne jest ustawienie stylu dla określonego fragmentu, który różni się od otaczającego. Jeśli ten styl zostanie zastosowany wielokrotnie na stronie internetowej lub w dużym dokumencie internetowym, wygodnie jest zaimplementować połączenie CSS poprzez JavaScript poprzez konstrukcję:

Znów, zamiast style.css zapisywany jest względny lub bezwzględny adres zewnętrznego pliku z rozszerzeniem .css.

Ta metoda zostanie szczegółowo przeanalizowana podczas studiowania programowania w JavaScript. Wspomnienie o nim tutaj jest posunięciem naprzód, ale niezbędne do pracy z tekstami na tym poziomie.