Co to jest kod CSS i gdzie się znajduje. Podstawy CSS dla początkujących. Korzyści ze stosowania CSS

Krótko wyjaśnia, czym są kaskadowe arkusze stylów (CSS). Za jego pomocą możesz stworzyć prosty dokument, który wykorzystasz w kolejnych rozdziałach.

Informacje: Co to jest CSS

Kaskadowe arkusze stylów = CSS to język odpowiedzialny za wizualną prezentację dokumentów użytkownikowi.

Pod dokument zrozumiemy zbiór informacji o opisanej strukturze strony język znaczników.

A wydajność Prezentacja dokumentu użytkownikowi oznacza z kolei jego przekształcenie w formę łatwą do zrozumienia. Przeglądarki takie jak Firefox, Chrome czy Internet Explorer zostały stworzone w celu wizualnego wyświetlania dokumentów, na przykład na ekranie komputera, projektorze lub wydruku drukarki.

Przykłady

Strona internetowa, którą teraz czytasz, jest dokumentem. Struktura informacji, które widzisz na stronie, jest zwykle opisana za pomocą języka znaczników HTML (HyperText Markup Language).
Okna dialogowe w programach komputerowych, zwane także oknami modalnymi, są zwykle również dokumentami. Takie okna można również opisać za pomocą języka znaczników, takiego jak XUL (XML User Interface Language), który można znaleźć na przykład w niektórych aplikacjach Mozilli.

W tym przewodniku bloki z tytułem Więcej szczegółów, takie jak poniższe, zawierają dodatkowe informacje i linki do zasobów, które pozwalają głębiej zagłębić się w zagadnienie, któremu poświęcona jest dana sekcja. Możesz wykorzystać te materiały od razu lub pominąć te bloki i wrócić do nich później.

Więcej szczegółów

Dokument to nie to samo co plik. Niemniej jednak dokument można przechowywać w jednym pliku.

W przypadku strony, którą teraz czytasz, sytuacja jest nieco bardziej skomplikowana. Kiedy Twoja przeglądarka żąda danej strony, serwer uzyskuje dostęp do bazy danych i generuje dokument, składając go kawałek po kawałku z kilku dokumentów, z których każdy z kolei może znajdować się w kilku plikach. Jednak w tym samouczku będziesz mógł także pracować z dokumentami, z których każdy jest reprezentowany przez jeden plik.

Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych sekcjach tej witryny:

W drugiej części tego samouczka zobaczysz przykłady tych języków znaczników.

Więcej szczegółów

W ujęciu CSS program wyświetlający użytkownikowi dokument, tzw agent użytkownika(UA). Przeglądarka jest jednym z typów UA. CSS nie jest zatem dostępny tylko w przeglądarce ani w wersji wizualnej, ale w pierwszej części tego samouczka będziesz pracować z CSS tylko w przeglądarce.

Inne definicje i terminy związane z CSS można znaleźć w Definicjach specyfikacji CSS stworzonej przez konsorcjum World Wide Web Consortium (W3C), społeczność międzynarodową, która ustala otwarte standardy sieciowe.

Aby działać: Utwórz dokument

Utwórz nowy folder na swoim komputerze do ćwiczeń.
Otwórz edytor tekstu i utwórz nowy plik tekstowy. Plik ten będzie zawierał dokument do kilku następnych ćwiczeń.
Skopiuj i wklej poniższy kod HTML, a następnie zapisz plik jako doc1.html. Przykładowy dokument
C rosnąco S styl S cześć
Otwórz nową kartę lub okno w przeglądarce i otwórz właśnie utworzony plik.
Powinieneś zobaczyć linię pisaną wielkimi literami pogrubioną:

C rosnąco S styl S cześć
To, co faktycznie zobaczysz, może się nieznacznie różnić, ponieważ domyślne ustawienia Twojej przeglądarki i tej encyklopedii będą prawdopodobnie inne: niewielkie różnice w czcionce, odstępach i kolorach nie są zbyt istotne.

Co dalej?

Utworzony dokument nie korzystał jeszcze z CSS. W następnej sekcji dowiesz się, jak używać CSS do stylizowania dokumentu.

Artykuł wprowadzający na temat CSS, z którego zapoznasz się z ogólnymi koncepcjami tego, czym jest CSS i do czego jest potrzebny. Przyjrzyjmy się pokrótce jego składni i możliwościom. Zacznijmy od definicji

1. Definicja CSS

CSS(z angielskiego „Kaskadowe arkusze stylów”, kaskadowe arkusze stylów) - lista stylów dla witryny w formacie HTML

Czym jest styl? Z grubsza rzecz biorąc, styl to sposób, w jaki element wygląda na stronie. Na przykład dowolny tekst można zapisać w rozmiarze 10 lub 14 pikseli. Możesz pisać na czarno lub na niebiesko. Możesz podkreślić/przechylić/przekreślić itp. Wszystko, co jest związane z formatowaniem tekstu, odbywa się za pomocą CSS.

Ale to tylko niewielka część możliwości. CSS odpowiada za całą wizualizację wszystkich tagów HTML. Nawet w przypadku zmian dynamicznych: rozwijane menu, podświetlanie linków po najechaniu myszką.

Lista wszystkich stylów jest często nazywana w żargonie webmasterów „arkuszem stylów CSS”.

2. Cele i zadania CSS

Uczyń stronę piękniejszą (pod względem designu), stwórz przyjazny interfejs i po prostu tak, aby strony chociaż w jakiś sposób różniły się od siebie
Oddziel kod HTML od kodu stylu i opisu projektu

3. Składnia CSS (seletory)

Każda właściwość i styl jest opisana za pomocą „selektorów”. Jego składnia jest następująca

Selektor (atrybut: wartość;)

Selektor- może to być nazwa stylu lub tagu. Nawiasy klamrowe opisują określone zasady. Opis zawsze trzyma się tego samego standardu: „nazwa atrybutu: wartość”. Każda reguła musi kończyć się średnikiem.

Na przykład

.nazwa_stylu (atrybut1: wartości1; atrybut2: wartości2; ... );

Istnieje wiele opcji określania stylów CSS. Spójrzmy na najpopularniejsze z przykładami.

/*Ustalanie ogólnego stylu*/ .global_style (rozmiar czcionki: 12px; kolor: czerwony; ) /**/font.style1 (rozmiar czcionki: 10px; kolor: niebieski; ) /* Ustawianie ogólnego stylu tylko dla znacznika czcionki*/ #global_style2 (rozmiar czcionki: 14px; kolor: czerwony; ) h1 (rozmiar czcionki: 19px;)

Styl global_style może być używany jako klasa dla wszystkich tagów. Na przykład,

style1 może być użyte tylko w tagu ponieważ w definicji określono czcionkę.style1.

Trzecią opcją zadania jest przejście przez siatkę (#). Podobnie jak w pierwszym przypadku jest on definiowany dla wszystkich elementów, przy czym należy go określić nie poprzez klasę, lecz poprzez atrybut id:

W ostatniej opcji po prostu podaliśmy nazwę tagu

i przepisał mu styl. Oznacza to, że teraz wszystkie tagi

odziedziczą wartość tego stylu.

4. Jak i gdzie ustawić style CSS

5. Jakie są zalety korzystania z CSS

Łatwa zmiana projektu. Wystarczy zmienić styl w jednym miejscu, a będzie on zmieniał się na każdej stronie serwisu
Tylko w ten sposób można zmienić wygląd witryny
Prosta składnia języka

6. Problemy z CSS w przeglądarkach

Starsze przeglądarki nie obsługują wszystkich funkcji CSS. Powoduje to problemy z wyświetlaniem. Na przykład efekt, który miał na celu poprawę postrzegania treści, może wywołać efekt odwrotny. Jeśli jakaś właściwość nie jest obsługiwana, istnieje ryzyko nakładania się bloków, tekstów itp.

Prefiksy częściowo rozwiązują ten problem. Zasadniczo jest to po prostu słowo umieszczone przed argumentem w arkuszu stylów. Każda przeglądarka ma swój własny prefiks.

-moz- dla przeglądarki Firefox
-webkit- dla przeglądarek Chrome i Safari (obie przeglądarki korzystają z tego samego silnika renderującego)
-ms- dla przeglądarki Internet Explorer
-o- dla przeglądarki Opera

7. Odpowiedzi na najczęściej zadawane pytania

7.1. Co to jest CSS3

Ostatnio często można spotkać się z koncepcją CSS3. Zasadniczo jest to ten sam CSS, ale z zestawem nowych argumentów, które zapewniają dodatkowe możliwości w zakresie różnych efektów. Na przykład świecący tekst. Wiele przeglądarek nie obsługuje takich właściwości, dlatego zaleca się używanie takich efektów w minimalnych ilościach.

7.2. Jaka jest różnica między CSS i HTML?

HTML stanowi szkielet Twojej strony (są to linki, zdjęcia, treść). A CSS określa, jak to wszystko będzie wyświetlane użytkownikowi. Zatem HTML i CSS to zasadniczo różne rzeczy, ale są ze sobą powiązane. Zasadą dobrej formy jest oddzielenie kodów od siebie, aby nie pomieszać ich na jednej stronie.

Skrót CSS oznacza Kaskadowe Arkusze Stylów. Jeśli wierzysz (a w takich sprawach należy wierzyć), CSS to mechanizm dodawania stylu do dokumentu internetowego. Style rozumiane są jako zasady określające wygląd i projekt dokumentu - zarządzanie czcionkami, kolorami na stronie i rozmieszczeniem elementów.

Zastanówmy się, jakiego rodzaju są to tabele, do czego służą i dlaczego nagle „stają się kaskadowe”?

Dlaczego należy oddzielać treść od projektu?

Klasyczna zasada „dziel i rządź” znana jest już od czasów starożytnego Rzymu. Wielokrotnie pozwalał postaciom różnych epok odnosić sukcesy w grach wojskowo-politycznych. On też nam pomoże.

HTML był pierwotnie używany do strukturyzowania tekstu (tutaj jest nagłówek, tutaj jest akapit, a to jest lista). Wyświetlanie poszczególnych elementów było zdeterminowane ich atrybutami i w dużej mierze pozostawione zostało uznaniu przeglądarki. Ponieważ nadal chciałem kontrolować wygląd, zaczęły pojawiać się znaczniki projektu, takie jak lub . W rezultacie treść dokumentu i jego konstrukcja są ze sobą ściśle powiązane. Kod stał się uciążliwy, nieelastyczny i trudny do odczytania. Na przykład tak:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elita

Oczywiste wady:

dużo niepotrzebnych struktur niezwiązanych bezpośrednio ze znacznikami treści – duży rozmiar pliku, zwiększony ruch i czas ładowania;
Trudno jest zmienić projekt. Na przykład, jeśli chcesz zmienić kolor, będziesz musiał wyszukać wszystkie atrybuty;
znaczne ograniczenia opcji formatowania. Wielu tagów po prostu nie da się poprawnie skonfigurować przy użyciu samych atrybutów;
nie ma możliwości dostosowania projektu do różnych typów urządzeń wyświetlających (monitor PC, drukarka, ekran PDA, przeglądarka głosowa itp.);
kod traci swoje logiczne znaczniki (semantykę), w wyniku czego:
- słabo indeksowane przez roboty wyszukujące, bo muszą przetworzyć masę „śmieci”;
- Dostępność dla użytkowników korzystających z przeglądarek niewizualnych jest znacznie ograniczona.

Wydzielenie wszystkich zasad rejestracji do osobnego bloku (pliku) pozwala rozwiązać te problemy. Kod staje się prostszy i znacznie łatwiejszy w obsłudze. Sam HTML staje się tym, czym miał być – językiem semantycznego oznaczania dokumentów:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elita

Plusy korzystania z CSS:

Kod jest podzielony na treść i projekt. Otrzymujemy łatwiejszy i bardziej zrozumiały kod;
plik projektu jest pobierany tylko raz i buforowany, co zmniejsza ruch, czas pobierania i obciążenie serwera;
prostota samego języka CSS + zasada oddzielania designu od treści - skraca się czas tworzenia i utrzymywania serwisu;
Pojedynczy CSS kontroluje renderowanie wielu stron HTML. Zmiany w projekcie dokonywane są szybciej;
CSS zapewnia dodatkowe możliwości formatowania, które byłyby niewyobrażalne przy użyciu samych atrybutów;
zaimplementowano mechanizm łączenia różnych CSS dla różnych typów urządzeń wyświetlających;
zwiększenie kompatybilności z różnymi platformami poprzez zastosowanie standardów sieciowych.

Kaskadowe arkusze stylów

Zatem CSS jest ogólnie uznanym międzynarodowym standardem. CSS to potężne narzędzie, jeden z głównych elementów niemal każdej strony internetowej, bez którego nie można sobie wyobrazić współczesnego tworzenia stron internetowych.

Arkusze stylów mogą być wewnętrzne (w pliku HTML) lub zewnętrzne. Tabele zewnętrzne są najwygodniejsze i są plikami z rozszerzeniem css. Zagadnienia te zostaną omówione szerzej w jednym z kolejnych artykułów.

Arkusz stylów składa się z zestawu reguł, które określają, w jaki sposób dany element będzie wyświetlany, tj. jakie style zostaną do niego zastosowane.

Przykładowy fragment CSS:

Reguł może być wiele, każda składa się z dwóch części (można sobie wyobrazić, że są to kolumny): do czego stosujemy style (selektor) i jakie style faktycznie stosujemy (blok definicji). Dlatego całą konstrukcję nazwano „stołem”. A więc „arkusz stylów”. Ale dlaczego nagle „kaskada”?

Dziedziczenie kaskadowe

Faktem jest, że CSS wykorzystuje dziedziczenie od rodzica do dziecka, co pozwala na definiowanie stylów w oparciu o te już opisane wcześniej dla rodziców. W takim przypadku powstaje sytuacja, gdy dla elementu odpowiednie są właściwości z kilku reguł jednocześnie. Standard CSS określa kolejność priorytetów stosowania reguł stylu, dzięki czemu wyniki są przewidywalne. Model ten nazywany jest „kaskadą”.

Konkluzja

CSS to potężna technologia, która pozwala opisać zasady projektowania dokumentu HTML i oddzielić je od treści. Jednym z kluczowych wymagań, jakie stawia współczesny rynek pracy projektantowi układu, jest dogłębna znajomość CSS. Jednak CSS jest dość łatwy do nauczenia. Aby w tym pomóc, istnieje nasz.

Jak pamiętacie, HTML jest językiem znaczników, ale jego twórcy tak chcieli ułatwić życie twórcom witryn, że dodali do niego elementy i parametry odpowiedzialne za wygląd strony: tagi , , , i tak dalej.

Jednak w pewnym momencie kod strony stał się na tyle uciążliwy i nieczytelny, że stało się jasne, że ta ścieżka prowadzi „donikąd”. Następnie zdecydowano się na oddzielenie znaczników strony (HTML) od jej projektu wizualnego (CSS). Razem HTML i CSS mogą zdziałać cuda, jak wkrótce zobaczysz.

Co to jest CSS

CSS (Kaskadowe arkusze stylów) - kaskadowe arkusze stylów.
Styl- zbiór parametrów definiujących zewnętrzną reprezentację obiektu. Załóżmy na przykład, że chcemy, aby wszystkie nagłówki pierwszego poziomu (tagi
) na jednej stronie będzie czerwony, rozmiar - 24 i będzie napisany kursywą, a na drugiej stronie będzie niebieski, rozmiar - 12. Nasz tytuł to obiekt, a kolor, rozmiar i styl to parametry. Tyle, że parametry naszego obiektu są różne dla różnych stron, tzn. różnią się stylem.
Każdy element strony może mieć swój własny styl (akapity, nagłówki, linie, tekst...). Zbiór stylów wszystkich elementów nazywa się arkusz stylów.
Jeżeli dla jednego elementu określono kilka stylów (jak w przykładzie z nagłówkami), to kaskadowe, który określa priorytet określonego stylu.
Korzyści z CSS

CSS może znacznie zmniejszyć rozmiar kodu i sprawić, że będzie on czytelny.
CSS pozwala ustawić parametry, których nie można ustawić w samym HTML. Na przykład usuń podkreślenia z linków.
CSS ułatwia zmianę wyglądu stron. Wyobraź sobie, że stworzyłeś witrynę internetową składającą się z 50 stron, na których wszystkie nagłówki są niebieskie. Po pewnym czasie chciałeś zmienić kolor niebieski na zielony. Będziesz musiał przejrzeć wszystkie 50 stron i zmienić kolor w odpowiednim atrybucie. W CSS wystarczy to zrobić tylko raz, w arkuszu stylów.
CSS jest powiązany z tzw. układem blokowym strony internetowej.
Czas przejść od słów do czynów, zaczniemy w następnej lekcji.
Witam, drodzy czytelnicy bloga. Dzisiaj chcę zacząć szczegółowo mówić o CSS (materiały zostaną zgromadzone w odpowiedniej sekcji).
Czas zająć się tym po zapoznaniu się z HTML. Język znaczników stylu odpowiada za wygląd zewnętrzny stron serwisu i bez jego zrozumienia bardzo trudno będzie coś poprawić, przenieść czy dopasować.
Oczywiście CSS wygląda na znacznie bardziej skomplikowany w porównaniu do HTML, ale tu chodzi o kwestię układu w różnych przeglądarkach, ale jeśli chodzi o poprawienie jakiegoś drobnego szczegółu w projekcie własnej strony internetowej, to nie potrzebujesz dużo inteligencji. Ogólnie rzecz biorąc, postaramy się szczegółowo przeanalizować jego podstawy, a niuanse ich filigranowego użycia pozostawimy do opcjonalnego przestudiowania (opcjonalnie). Ale wszyscy webmasterzy muszą znać podstawowe pojęcia.
Co to jest język CSS i do czego służy?
Skrót CSS oznacza kaskadowe arkusze stylów lub, w tłumaczeniu na język rosyjski, kaskadowe arkusze stylów. Co to jest i dlaczego kiedyś wynaleziono ten język?
Zatem w oparciu o to, co badaliśmy nieco wcześniej, możemy powiedzieć, że znaczniki dokumentu internetowego odbywają się za pomocą tagów tego języka. Te. Za pomocą języka HTML tworzymy strukturę naszych dokumentów (stron internetowych). Przykładowo w czystym HTML możemy określić inne elementy struktury dokumentu, a nawet nadać im taki wygląd, jakiego potrzebujemy w przeglądarce.
Jednak czas podyktował potrzebę stosowania coraz większej liczby atrybutów projektu wizualnego w HTML, co mocno zaśmiecało kod źródłowy. W związku z tym zaproponowano inną, bardziej obiecującą opcję rozwoju - utworzenie odrębnego języka znaczników stylu CSS. Ta opcja miała wiele zalet w porównaniu ze zwykłym zwiększaniem liczby atrybutów projektu.
Dlaczego? Czy pamiętasz, jak możesz ustawić kolor fragmentu tekstu w czystym HTML? Zgadza się, przy pomocy . Co się stanie, jeśli chcesz pokolorować kilka akapitów tekstu jednocześnie żądanym kolorem?
Następnie wewnątrz każdego z nich (znacznik akapitu P jest blokowy, co oznacza, że nie można go umieścić wewnątrz wbudowanego elementu czcionki) wstaw znaczniki czcionki z żądaną wartością koloru w atrybucie Kolor.
Wszystko to strasznie zaśmieci kod źródłowy, co jest bardzo, bardzo niepożądane, ponieważ ucierpi prędkość ładowania witryny i nastąpi nadmierne obciążenie sprzętu komunikacyjnego w Internecie. Twórcy nie mogli tego zrobić.
Dlatego wymyślili następujące wyjście z obecnej sytuacji. Programiści z W3C postanowili zaprojektować wszystkie wizualne reprezentacje dokumentu internetowego w postaci specjalnego języka znaczników stylu, który nazwali kaskadowymi arkuszami stylów lub po prostu CSS (czytaj jako CSS). Jaka jest istota technologii?
I chodzi o to, że łącząc stylowy język znaczników z dowolnymi dokumentami (stronami), będziemy mogli ustawić wizualną reprezentację wszystkich tych elementów (tworzonych przez znaczniki HTML), które pojawią się w tym dokumencie.
W Internecie istnieje zasób, który pomaga bardzo wyraźnie zobaczyć, jak strona internetowa może zmienić swój wygląd tylko dlatego, że jest do niej podłączony inny plik kaskadowego arkusza stylów. Moim zdaniem to będzie najlepsza odpowiedź na pytanie: co to jest CSS i dlaczego jest potrzebny?.
Podstawowy widok dokumentu (strony internetowej) można zobaczyć, klikając ten link:
Nic specjalnego, ale jeśli klikniesz link „Wyświetl wszystkie projekty” w lewym menu, możesz zobaczyć dziesiątki, a nawet setki opcji projektu dla tej samej strony internetowej, podłączając inny arkusz stylów (inny plik arkusza stylów).
Należy pamiętać, że źródłowy kod HTML pozostaje dokładnie taki sam i Zmienia się tylko projekt CSS. Niesamowite, prawda?!
CSS nie jest językiem znaczników w tym samym znaczeniu, co na przykład HTML. Jest to stylistyczny język znaczników - ma własną składnię, własną treść wewnętrzną i pod wieloma względami będzie bardzo różnił się od tego, co już wcześniej badano.
Ponadto, w porównaniu do HTML, język znaczników stylu jest znacznie bardziej złożony. Jest w nim wiele niuansów, które musisz znać oprócz podstawowych pojęć. W HTML nie było żadnych specjalnych niuansów - przestudiowałeś wszystkie elementy i możesz łatwo pracować z kodem. Wydaje mi się, że CSS można porównać do szachów – nie wystarczy wiedzieć, jak poruszają się wszystkie figury, trzeba jeszcze umieć grać.
Czym więc jest i z czego się składa? Ten rzekomy język może być podzielić na dwie części:
Reguły informujące przeglądarkę, jak powinien wyglądać element na ekranie.
Selektory to etykiety, które pozwalają przeglądarce zrozumieć, które elementy kodu HTML będą potrzebne, aby zastosować te reguły.

Zobaczmy teraz, jak projekt określony w stylach jest połączony z kodem źródłowym strony internetowej. Istnieją trzy główne sposoby używając CSS z HTML:
Załącznik - kod CSS jest zapisywany bezpośrednio w żądanym znaczniku elementu za pomocą atrybutu Style
Osadzanie — cały kod stylu dokumentu internetowego jest zapisywany w jego nagłówku (wewnątrz znaczników Head) przy użyciu elementu Style
Łączenie - cały kod CSS jest umieszczany (wyciągany) w osobnym pliku zewnętrznym, który jest łączony z dokumentem za pomocą elementu Link w jego nagłówku

Cóż, widzisz, jak wiele się już nauczyliśmy o języku znaczników stylu. Teraz jest czas, aby o tym porozmawiać składnia. Ogólnie rzecz biorąc, jest to dość proste:
Jedna reguła w kodzie CSS składa się z dwóch elementów – właściwości (w naszym przykładzie jest to ) i jej wartości (w naszym przykładzie jest to kolor czerwony i #CCCCCC). Warunkiem jest oddzielając właściwość od jej wartości dwukropkiem.
Dalej. Jedna zasada jest z konieczności oddzielona od drugiej średnik. Po ostatniej regule nie można już używać średnika, jednak aby uniknąć przesady, najlepiej jest przyjąć zasadę, aby zawsze go używać. nie mają one żadnego znaczenia w kodzie CSS i możesz je ustawić według własnego uznania.
Używanie stylu do łączenia CSS z kodem HTML
Cóż, teraz spójrzmy na przykłady wszystkich sposobów stosowania reguł stylu do naszego dokumentu, które istnieją i które zostały opisane ogólnie powyżej.
Pierwsza metoda nazywa się metodą Osadzanie CSS w HTML używając atrybutu Styl:
Zobaczmy, jak możemy użyć tej metody do ustawienia koloru i tła akapitu:
Jaka jest metoda zagnieżdżania
Jak widać jednym prostym ruchem pokolorowaliśmy tekst akapitu na czerwono (kolor:czerwony) i jednocześnie umieściliśmy pod nim szare tło (tło:#cccccc). Styl odnosi się do tych sześciu, których można używać w połączeniu z absolutnie dowolnymi tagami (są one wymienione na dole zrzutu ekranu):
W CSS będziemy również aktywnie korzystać z uniwersalnych, ale zostanie to omówione w kolejnych artykułach, ale na razie rozważaliśmy możliwość wykorzystania Style do łączenia reguł projektowania stylów z określonymi elementami kodu HTML. Pozwala na użycie zestawu tych samych reguł (w nieograniczonych ilościach) jako wartości.
Metoda zagnieżdżania wykorzystująca atrybut Styl jest bardzo prosta do wdrożenia w praktyce, niemniej jednak odbywa się to w rzeczywistym układzie używany bardzo rzadko. Ale za jego pomocą możesz bardzo łatwo spróbować z czymś poeksperymentować, a dopiero potem przenieść wszystkie te reguły do osobnego pliku z arkuszami stylów CSS.
Następny sposób łączenia języka znaczników stylu nazywa się metodą osadzanie CSS w HTML. Metoda ta zasadniczo różni się od omawianej wcześniej metody inwestycyjnej.
Zamiast dołączać do każdego tagu na stronie atrybut Style zawierający reguły języka stylów, napiszemy teraz wszystkie reguły CSS potrzebne dla tego dokumentu internetowego w jednym styl tagu, który z kolei zostanie umieszczony w nagłówku tego dokumentu (pomiędzy elementami Head).
Czy pamiętasz, czym jest Head i gdzie jest zapisany w strukturze dokumentu internetowego? Jeśli nie pamiętasz, spójrz na ten schemat blokowy:
Te. w kodzie mogłoby to wyglądać tak:
... ...
Mętnawy? Cóż, teraz spróbuję to zilustrować:
Aby zapobiec pomyleniu przez przeglądarkę reguł stylu z językiem znaczników hipertekstowych, w elemencie Styl należy określić wymagany atrybut Wpisz z wartością „text/css”(nagłówek treści multimedialnych dla kaskadowych arkuszy stylów). To. Kod zawarty w tym elemencie będzie interpretowany przez przeglądarkę jako CSS.
Przyjrzyjmy się bliżej przykładowi podanemu tuż powyżej. Jak widać styl rządzi ujęte w nawiasy klamrowe, a przed nimi zapisany jest tzw. selektor w formie łacińskiej litery „P”. Dlaczego ten selektor jest potrzebny?
Jak inaczej możemy wskazać przeglądarce, że te reguły CSS będą musiały zostać zastosowane tylko do znaczników akapitu (selektor P) danego dokumentu internetowego i do niczego więcej.
Tutaj ponownie poruszyliśmy kwestię składni. W przypadku stosowania metod wbudowanych i zagnieżdżania wszystkie reguły języka znaczników stylu muszą być ujęte w nawiasy klamrowe i poprzedzone znakiem koniecznie stój lub kilka selektorów:
Selektor CSS (Właściwość: Wartość; Właściwość: Wartość)
Stosując metodę zagnieżdżania nie używaliśmy selektora i nawiasów klamrowych, ponieważ dla przeglądarki było już jasne, że te reguły CSS należy zastosować dokładnie do znacznika, w którym zapisano atrybut Style.
W przypadku stosowania metody osadzania lub zagnieżdżania sytuacja z określeniem, do kogo adresowane są te reguły stylu, stała się bardziej skomplikowana i konieczne było użycie nawiasów klamrowych i selektorów. To. wskazujemy przeglądarce, że powinieneś zastosować ten zestaw reguł CSS (ujęty w nawiasy klamrowe) do wszystkich akapitów, a ten zestaw - do czegoś innego.
W najprostszym przypadku jako selektora można użyć nazwy tagu, do którego należy zastosować reguły języka CSS, ujętej w nawiasy klamrowe otwierające się bezpośrednio po nazwie selektora. W naszym przykładzie selektorem jest nazwa znacznika akapitu „P”. Bardziej szczegółowo o selektorach w języku znaczników stylów porozmawiamy w następnym artykule (patrz link powyżej).
Podsumujmy sposób osadzania kodu CSS w dokumencie HTML - wszystkie reguły stylu potrzebne dla tego dokumentu zostaną opisane w jednym znaczniku Style, a nie w wielu różnych elementach, jak miałoby to miejsce w przypadku zastosowania opisanej powyżej metody osadzania powyżej.
Eksportowanie arkuszy stylów CSS do osobnego pliku za pomocą Link
Ostatni sposób integracji kodu stylu z dokumentem internetowym to tzw metoda łączenia. Najłatwiej zilustrować tę metodę:
Główna różnica w stosunku do metod omówionych powyżej (zagnieżdżanie i osadzanie) polega na tym, że podczas korzystania z metody łączenia wszystkie zasady języka CSS są przenoszone do osobnego pliku zewnętrznego. Będzie to znowu tekst (jak każdy dokument HTML) i zwykle ma przypisane rozszerzenia .css, dzięki czemu można przypisać specjalny program () do otwarcia go na komputerze lokalnym z systemem Windows.
Podczas korzystania z zewnętrznego pliku CSS, special Etykieta łącza, który jest ponownie zapisywany pomiędzy otwierającym i zamykającym elementem Head w nagłówku strony internetowej. Link jest klasyfikowany jako niewidoczny w przeglądarce.
W tym przypadku przeglądarka znajdzie określony plik arkusza stylów (poprzedzony nim w atrybucie Href znacznika Link), załaduje go i zastosuje określone w nim reguły języka CSS do zewnętrznego projektu bieżącego dokumentu HTML.
Ogólnie rzecz biorąc, linkowanie jest bardzo podobne do wykorzystania tagu Style opisanego nieco wcześniej, jednak może znacznie przyspieszyć ładowanie stron witryny i zmniejszyć obciążenie sprzętu komunikacji internetowej.
W przypadku korzystania z elementu Style (metoda osadzona) za każdym razem przeglądarka będzie musiała wczytać osadzone w nim reguły CSS i selektory wraz z kodem HTML dokumentu, a w przypadku korzystania z zewnętrznego pliku arkusza stylów, przeglądarka tylko musi raz załadować plik Style.css i dopiero potem pobrać go z własnej pamięci podręcznej (obszar na dysku twardym komputera użytkownika) podczas projektowania innych stron witryny.
Atrybut type=”text/css” znacznika Link oznacza, że ta treść multimedialna będzie niczym więcej niż językiem znaczników stylu. Ale także podczas łączenia pliku CSS i dokumentu HTML jest on używany Atrybut Rel z wartością arkusza stylów. Faktem jest, że Link (hiperłącze serwisowe) można wykorzystać do zupełnie innych celów.
Jeśli spojrzysz na kod źródłowy tej strony w przeglądarce, zobaczysz, że w obszarze Head znajduje się całe mnóstwo różnych tagów Link:
Cel każdego z tych hiperłączy do usług jest określony przez wartość atrybutu Rel. Na przykład rel="shortcut icon" służy do wskazania ścieżki do pliku, a rel="alternate" może służyć do wskazania alternatywnej wersji strony (przykładem alternatywnej reprezentacji dokumentu HTML może być): .
Otóż w przypadku korzystania z atrybutu rel="stylesheet" w Linku ustawiamy przeglądarkę ścieżka do pliku arkusza stylów(w atrybucie HRef ścieżkę tę można określić w formie bezwzględnej lub względnej). Te. Za pomocą atrybutu Rel mówimy przeglądarce jak będzie wyglądał plik, którego ścieżka jest podana w HRef (arkusz stylów - z CSS).
Na stronach prawie zawsze stosowana jest metoda wiązania CSS i HTML (zewnętrzny plik arkusza stylów). Atrybuty i znaczniki stylu są zwykle używane tylko i wyłącznie do testowania, chociaż mogą pojawić się konkretne zadania, gdy ich użycie jest uzasadnione (na przykład podczas projektowania). Jednak w prawdziwej pracy na stronach internetowych wykorzystywane są pliki zewnętrzne, czyli tzw. metoda wiązania.
Tym samym żegnam się i przysięgam, że w najbliższej przyszłości nastąpi kontynuacja. Powtarzam jeszcze raz, że nauka CSS jest zwykle znacznie trudniejsza niż nauka HTML, dlatego postaram się opisać wszystko tak szczegółowo i przejrzyście, jak to tylko możliwe.

Powodzenia! Do zobaczenia wkrótce na stronach bloga
Możesz być zainteresowany
Styl listy (typ, obraz, pozycja) - reguły CSS umożliwiające dostosowanie wyglądu list w kodzie HTML
Wyświetl (blok, brak, inline) w CSS - ustaw typ wyświetlania elementów HTML na stronie internetowej
Do czego służy CSS, jak połączyć kaskadowe arkusze stylów z dokumentem HTML i podstawowa składnia tego języka
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obrazu tła elementów HTML
Priorytety w CSS i ich wzrost dzięki Ważnym, kombinacji i grupowaniu selektorów, stylów użytkownika i autora
Wysokość, szerokość i przepełnienie - reguły CSS opisujące obszar treści w układzie blokowym
Jednostki wymiarowe (piksele, Em i Ex) oraz zasady dziedziczenia w CSS Różne style linków wewnętrznych i zewnętrznych poprzez CSS
Selektory pseudoklas i pseudoelementów w CSS (hover, First-child, First-line i inne), relacje pomiędzy znacznikami kodu HTML
Płynnie i przejrzyście w CSS - narzędzia do układania bloków