Dzień dobry wszystkim. Aleksiej Gulynin jest w kontakcie. W tym pierwszym artykule na temat CSS chciałbym ogólnie porozmawiać o CSS i o tym, jak . CSS to kaskadowe arkusze stylów(lub po prostu można je nazwać stylami), które odpowiadają za sposób wyświetlania elementów na Twojej stronie HTML. Jeśli po prostu dodasz elementy do strony HTML bez atrybutów, wszystkie zostaną umieszczone od góry do dołu i wyrównane do lewej strony przeglądarki. Jest nudno i monotonnie.

Elementy HTML stanowią szkielet naszej strony, tj. html odpowiada za CO wyświetlić na stronie. CSS z kolei odpowiada JAK wyświetlić wszystkie te elementy. Możesz utworzyć tę samą stronę HTML i wymyślić dla niej tysiące opcji projektowych. A wszystko to będzie wyglądało jak różne witryny. Możesz surfować po Internecie i zobaczyć, ile pięknych miejsc znajduje się na jego połaciach.

NA ten moment, powinieneś był to zrozumieć, jeśli chcesz tworzyć Piękny design, to bez znajomości CSS nie będziesz w stanie tego zrobić. Dlatego śmiało zapoznaj się z tą nauką zwaną CSS.

Połączmy plik stylu CSS ze stroną HTML. Odbywa się to w nagłówku dokumentu, pomiędzy znacznikami .. :

Zastanówmy się, co tutaj napisaliśmy. Pliki stylów są łączone za pomocą znacznika łącza. Znany nam już atrybut href wskazuje ścieżkę do pliku stylów. Tutaj możesz określić zarówno bezwzględne, jak i ścieżki względne. W w tym przypadku zakłada się, że nasz plik style.css znajduje się w tym samym katalogu co plik, w którym umieszczamy style. Atrybut type="type/css" wskazuje, że typ dokumentu to css, atrybut rel="stylesheet" informuje przeglądarkę, że uwzględniamy style (rel z angielskiego „relacja” - relacje).

Możesz także stylizować elementy na inne sposoby. Stwórzmy stronę HTML o następującej treści:

Pierwszy paragraf

Pierwszy paragraf

Pierwszy paragraf

Pierwszy paragraf

Oprócz utworzenia pliku stylu, za pomocą znacznika możemy zapisywać style w nagłówku dokumentu

Pierwszy paragraf

Akapit drugi

Trzeci akapit

Czwarty akapit

Style można także ustawić bezpośrednio w elemencie za pomocą atrybutu style (jest to tzw. styl inline). Zmieńmy drugi akapit na zielony i wyrównany do prawej. Aby to zrobić, musisz dodać następującą konstrukcję:

Akapit drugi

Teraz widzimy, że akapit zmienił kolor na zielony i jest wyrównany do prawej strony.

Istnieje inny sposób dodawania stylów do strony HTML. Ten importowane style. Są one ustawiane w nagłówku strony, ale z pliku, a nie bezpośrednio:

Podczas dodawania stylów do strony możesz napotkać sytuacje konfliktowe. Na przykład w pliku stylu możemy ustawić kolor tekstu wszystkich akapitów (znacznik p) na czerwony i zastosować styl wbudowany do jednego z nich. W jaki sposób przeglądarka może określić, jakiego koloru użyć? Zdefiniujmy priorytety jakie wykorzystuje przeglądarka:

1) Style z pliku (mają najniższy priorytet)
2) Importowane style
3) Style osadzone
4) style inline (mają najwyższy priorytet, czyli przeglądarka wykona je jako pierwsza).

W tym artykule dowiedziałeś się, jak to możliwe połącz CSS ze stroną HTML i jak zastosować te style.

Aleksiej Gułynin był w kontakcie, zostawcie swoje komentarze, do zobaczenia w kolejnych artykułach.

Tworzyć plik css tak samo proste jak HTML. Po prostu idź do dowolnego Edytor tekstu, na przykład Notatnik, i tam utwórz plik rozszerzenie css. Nadajmy mu standardową nazwę - styl.css.

Gratulacje! Twój plik jest gotowy. Na razie jest pusta, ale później można ją wypełnić odpowiednią treścią. Poniżej przyjrzymy się podstawom - sposobom łączenia css.

Zewnętrzne arkusze stylów

Być może zewnętrzne CSS- jest to najbardziej poprawne i optymalne rozwiązanie dla witryny. Wystarczy wskazać na stronie znacznik linku(utworzony w celu dołączenia innych plików) z linkiem do arkusza stylów i style są połączone!

Uwaga

Na linii z link do tagu Zakłada się, że style.css znajduje się w tym samym katalogu (folderze), co ten plik.

Linia ze znacznikiem link zakłada, że ​​style.css znajduje się w tym samym katalogu (folderze), co nasz plik (np. indeks.html). Jeżeli zmieniła się lokalizacja pliku css, należy odpowiednio zmodyfikować atrybut href. Na przykład często zdarza się, że do tworzenia używa się CSS osobny folder(co jest wygodne i logiczne). Ale wtedy atrybut href będzie wyglądał inaczej:

Wewnętrzne arkusze stylów

Czasami można zobaczyć inną konstrukcję CSS, która jest wstawiana bezpośrednio do znacznik HTML

Tekst koloru niebieskiego, rozmiar 14 pikseli

Zaletą jest to, że możesz natychmiast ustawić style w tym samym pliku. Istotną wadą jest to, że określone właściwości zostaną przypisane konkretnego elementu, w tym przypadku akapit. A więc wszystkie korzyści Zdalne połączenie właściwości zostają utracone.

Wbudowane arkusze stylów

Jest łatwiejszy sposób Wstawki CSS. Jeśli nie chcesz tworzyć osobnego pliku CSS, a potrzebujesz tylko użyć kilku właściwości, ta opcja będzie odpowiednia. Zacznijmy od razu od przykładu

Nagłówek pierwszego poziomu

Nagłówek drugiego poziomu, niebieski

Nagłówek trzeciego poziomu

Z przykładu widać, że style napisaliśmy tuż przed zamknięciem etykieta na głowę wewnątrz znaczników otwierających i zamykających styl. Właściwie tag styl można też wpisać ciało, ale jeśli chcesz, żeby Twoje posty wyglądały na uporządkowane i aby osoba, która zobaczy ten kod po Tobie, nie łapała się za głowę, to lepiej pisać style w jednym miejscu.

Wada wbudowanego arkusza stylów jest również oczywista - takich wpisów trzeba będzie dokonać dla każdej strony osobno.

Dzień dobry wszystkim.

Tak więc w jednym z poprzednich artykułów się zapoznaliśmy.

Ale nie przyglądaliśmy się zbytnio żadnemu z nich ważne pytanie. Mianowicie - jak powiązać style CSS z kodem HTML strony naszej witryny.

To pytanie jest naprawdę bardzo ważne. Mimo wszystko jeśli niepoprawnie powiążemy style CSS na strony naszej witryny, wówczas nie będziemy mogli używać tych stylów. Przeglądarka po prostu je zignoruje i nie zobaczymy rezultatu, jaki daje użycie niektórych stylów.

Możesz powiązać style CSS z kodem strony różne sposoby a dzisiaj postaramy się rozważyć je wszystkie.

Zaczynajmy.

Z natury łączenia kaskadowych arkuszy stylów CSS Dokument HTML odróżniają zewnętrzne i wewnętrzne arkusze stylów.

1. Wewnętrzne arkusze stylów CSS.

Wewnętrzne arkusze stylów znajdują się bezpośrednio na naszej stronie internetowej. Tak, tak... Bezpośrednio w kodzie HTML każdej strony.

Jest to oczywiście trochę niewygodne, ale nadal istnieje taka możliwość i nie mogę o tym nie wspomnieć.

Zatem pierwszym sposobem połączenia stylów CSS z kodem strony jest użycie tagu, mają zastosowanie do całej zawartości dokumentu HTML. Może być ich tyle, ile chcesz, nawet wszystkie style dla całej witryny. Ale to jest trochę błędne. Porozmawiam o tym nieco później, kiedy przyjrzę się zewnętrznym arkuszom stylów.

Czasami musisz zapisuj style CSS w kodzie HTML.

Na przykład, kiedy coś publikujesz baner reklamowy na Twojej stronie - wstawiasz kod tego banera do kodu strony.

Aby ten baner wyświetlał się poprawnie (aby nie wychodził poza przydzielone mu granice, być może potrzebuje ramki itp.), czasami trzeba dołączyć do niego kilka instrukcji CSS.

Ale jednocześnie wprowadzając zmiany stół ogólny style nie mają sensu. Baner jest zjawiskiem przejściowym. Dziś jedno, jutro drugie. Dlatego łatwiej jest napisać dla niego style bezpośrednio w kodzie tego banera.

Oznacza to, że musimy łączyć style CSS tylko z konkretnego elementu strony. Odbywa się to bardzo prosto - za pomocą atrybutu style.

Style zapisane w ten sposób wpływają tylko na element, w którym są umieszczone. W tym przypadku tylko dla tego akapitu (tag

). I żaden inny!

2. Zewnętrzne arkusze stylów.

Nazywany zewnętrznym Tabele CSS style oznacza, że ​​są one zapisane nie w treści dokumentu HTML, ale w osobnym pliku specjalny plik. Pliki te mają rozszerzenie .css

Tak więc, zgodnie z obietnicą, powiem Ci, dlaczego lepiej jest korzystać z zewnętrznych arkuszy stylów.

Faktem jest, że dzięki temu strony Twojej witryny ładują się nieco szybciej. Może na ułamek sekundy, ale szybciej. Ten zmniejsza obciążenie Twojej witryny i wygodniejsze dla odwiedzających - muszą krócej czekać na załadowanie stron.

Dlaczego to się dzieje.

Jeśli style CSS Twojej witryny są włączone osobny plik, wówczas przeglądarka użytkownika nie musi ładować tych stylów przy każdym ładowaniu Nowa strona. Pobrał je raz, umieścił w pamięci podręcznej (obszarze pamięci na komputerze odwiedzającego) i podczas pobierania Następna strona bierze stamtąd style.

Istnieją dwa sposoby dołączania plików arkuszy stylów CSS do strony internetowej.

Pierwsza metoda, najczęstsza, polega na użyciu tagu z atrybutami: rel = "stylesheet" type = "text/css" href = "style file.css" wewnątrz kodu nagłówka strony (znacznik ).

Na przykład:

1 2 3 4

<głowa > ..... <link rel = „arkusz stylów” type = „text/css” href = „style.css” > </głowa>

Przykładowe dane w załączeniu strona CSS style zapisane w pliku style.css. Obowiązują one w całym dokumencie.

Jest inny sposób dołącz zewnętrzne arkusze stylów do HTML dokument. Używa to dyrektywy @import. Umożliwia import zawartości pliku CSS do bieżącego arkusza stylów.

Można go używać zarówno do dodawania niektórych arkuszy stylów do innych, jak i do dołączania pliku arkusza stylów do dokumentu HTML. Aby to zrobić, musisz napisać to wewnątrz tagu

Poniżej znajduje się przykład implementacji CSS w oparciu o powyższą składnię:

Nagłówek

Ustęp.

Otrzymujemy następujący wynik:

Atrybuty

Wbudowany CSS - atrybut stylu

Możesz użyć tego atrybutu na dowolnym elemencie HTML, aby zdefiniować reguły stylu. Zasady te będą miały zastosowanie wyłącznie do tego elementu. Oto ogólna składnia:

<элемент style = "...правила стиля...">

Atrybuty

Przykład

Poniżej znajduje się przykład wbudowanego CSS opartego na powyższej składni:

Wbudowany CSS

Otrzymujemy następujący wynik:

Zewnętrzne style CSS - element

Element można wykorzystać do podłączenia zewnętrznego Plik CSS ov do swojego dokumentu HTML.

Zewnętrzny arkusz stylów CSS to osobny plik tekstowy z rozszerzeniem .css. Definiujesz w tym wszystkie zasady stylu plik tekstowy, a następnie możesz dołączyć plik CSS do dowolnego dokumentu HTML za pomocą tego elementu .

Oto ogólna składnia dołączania zewnętrznego pliku CSS:

Atrybuty

Atrybuty są powiązane z elementami lub zasady zdefiniowane w dowolnym plik zewnętrzny arkusze stylów.

Dowolna reguła zdefiniowana w tagach, zastępuje reguły zdefiniowane w dowolnym zewnętrznym pliku CSS.

Każda reguła zdefiniowana w zewnętrznym pliku arkusza stylów ma najniższy priorytet w CSS, a reguły zdefiniowane w tym pliku będą miały zastosowanie tylko wtedy, gdy dwie poprzednie reguły nie mają zastosowania.

Obsługa przez starsze przeglądarki

Istnieje wiele starszych przeglądarek, które nie obsługują CSS. Dlatego musimy zadbać o zapisanie inline CSS w naszym dokumencie HTML. Poniższy fragment kodu pokazuje, jak można użyć znaczników komentarzy do ukrycia CSS przed starszymi przeglądarkami:

Istnieją co najmniej trzy sposoby wiązania style CSS do strony internetowej. W artykule szczegółowo opisano te metody wiązania i przedstawiono wyczerpujące wyjaśnienia.

Najpierw powinieneś wyjaśnić, dlaczego w ogóle musisz powiązać cokolwiek ze stroną internetową i dlaczego style CSS są umieszczane w osobnym pliku.

Od czasu pojawienia się zestawów stylów treści stron internetowych (CSS) wśród twórców stron internetowych postuluje się bardzo przydatną zasadę: „oddziel treść od jej prezentacji!”

Oznacza to, że strona internetowa zawiera puste miejsce Kod HTML, a cały projekt jest umieszczony w oddzielnych zestawach zasady CSS i najlepiej poza tą stroną internetową. To upiekło dwie pieczenie na jednym ogniu.

Po pierwsze, kod HTML pozostał czysty. Zawierała tylko treść i znaczniki. Co znacząco odciążyło wagę strony.

Po drugie, podział ten umożliwił wydajniejszą edycję stylów projektowania bez wpływu na samą stronę internetową.

Pojawiły się nawet całe galerie z przykładami stron, gdzie wystarczyło po prostu zastąpić jeden plik stylu CSS innym, a strona natychmiast uległa całkowitej przemianie pod względem wyglądu i struktury rozmieszczenia bloków.