Witajcie drodzy czytelnicy remontcompa! Nazywam się Roman Nahvat i przedstawiam wam szereg artykułów na temat języka w stylu CSS3. Skrót CSS pochodzi od angielskich arkuszy stylów kaskadowych, co oznacza kaskadowe arkusze stylów. Styl lub CSS to zestaw opcji formatowania zastosowanych do elementów dokumentu HTML w celu zmiany ich wyglądu. Sam HTML jest tylko standardowym językiem dla dokumentów HTML i służy do strukturyzacji zawartości strony HTML, więc HTML jest tylko pierwszym krokiem w procesie uczenia się, jak tworzyć strony. Następnym krokiem jest nauczenie się stylów lub CSS, co zrobimy. Istnieje kilka sposobów dodawania stylów do strony internetowej. Każda metoda różni się pod względem możliwości i celu. W tym artykule przyjrzymy się trzem sposobom dodawania stylów do dokumentu HTML..

Prawie skomplikowane lub naucz się CSS3. Część 1. Pojęcie CSS. Sposoby łączenia stylów CSS z dokumentem HTML

Utwórz standardową strukturę dokumentu HTML, jak pokazano poniżej.

Pomiędzy tagami wpisz tytuł dokumentu HTML, na przykład „Metody łączenia stylów CSS”

Używanie tagów

i

dodaj tytuł do strony z tekstem „Co to jest CSS”

Pod tytułem za pomocą tagów

i

utwórz mały akapit z tekstem, jak pokazano poniżej

Zapisz ten dokument na dysku flash w folderze CSS pod indeksem nazw z rozszerzeniem .html

Podaj indeks nazw, wybierz typ pliku html

Otrzymujemy następujące.

Przejdziemy do folderu CSS, w którym znajduje się nasz zapisany dokument HTML o nazwie indeks. Otwórz w przeglądarce internetowej

Jak widać, zawartość utworzonej przez nas strony internetowej była wyświetlana w oknie przeglądarki internetowej, a mianowicie nagłówek z tekstem „Co to jest CSS” i akapit rozpoczynający się od słów „CSS jest językiem stylu, który definiuje ...”

Korzystając z atrybutu align (przypisując mu wartość środkową), wyrównamy tytuł do tekstu „Co to jest CSS” na środku strony internetowej

Otrzymujemy następujące.

Zmień kolor tekstu akapitu ze standardowego czarnego na inny. Używamy tagu

Istnieje wiele kolorów HTML, na przykład dla tekstu akapitu na utworzonej przez nas stronie wybierz kolor DeepSkyBlue

Ustaw atrybut koloru znacznika na DeepSkyBlue

Przeładowujemy naszą stronę internetową i widzimy, że tekst akapitu zmienił kolor z czarnego na określony przez nas

W ten sam sposób zmień kolor tekstu tytułowego, na przykład na czerwony.

Otrzymujemy następujące

Przywrócimy tekst nagłówka i akapitu na naszej stronie do pierwotnego stanu, tzn. Usuniemy atrybut wyrównania i tagi ...

Po usunięciu tagów ... i atrybutu wyrównania uzyskujemy oryginalny wygląd strony internetowej

Jeśli powyżej zmieniliśmy kolor i układ tekstu nagłówka i akapitu na stronie internetowej za pomocą tagów HTML, teraz zrobimy to samo, ale używając CSS. Jak wspomniano powyżej, w tym artykule rozważymy trzy sposoby dodawania stylów do strony internetowej, a mianowicie: Dodawanie stylów wewnętrznych do strony internetowej; Dodawanie globalnych stylów do strony internetowej; Dodawanie powiązanych stylów do strony internetowej; Rozważ dodanie wewnętrznego stylu do strony internetowej. Wewnętrzny styl jest rozszerzeniem pojedynczego znacznika, który jest używany na stronie internetowej. Atrybut style służy do definiowania stylu, a jego wartością jest określony zestaw reguł stylu. Zmień kolor tekstu tytułowego na stronie na czerwony, a także wyśrodkuj go za pomocą stylu wewnętrznego. Aby oznaczyć

dodaj atrybut stylu, a następnie zapiszemy właściwości stylu, a mianowicie: text-allign: center, color: red

Otrzymujemy następujące.

W rezultacie otwierając plik index.html w przeglądarce internetowej, widzimy, że tekst tytułu na stronie internetowej jest czerwony i wyśrodkowany.

W ten sam sposób, używając atrybutu stylu, zmień kolor tekstu akapitu ze standardowej czerni na głęboki błękit

Przeładowujemy stronę index.html i widzimy zmianę koloru akapitu.

Zmień kolor tekstu tytułowego na stronie na czerwony i wyśrodkuj go, tym razem używając stylu globalnego. Jeśli zastosowany zostanie styl globalny, właściwości CSS zostaną umieszczone między tagami i, a one (i tagi) z kolei zostaną umieszczone między tagami i .

Pomiędzy tagami iw nawiasach klamrowych piszemy właściwości stylu dla nagłówka strony internetowej (tag

) i dla akapitu (tag

): h1 text-align: center; color: red - umieść tekst tytułu na środku strony i zmień jego kolor na czerwony p color: deepskyblue - zmień kolor akapitu na deepskyblue

W rezultacie otrzymujemy taki sam wynik, jak przy użyciu stylów wewnętrznych.

Rozważ ostatni sposób dodawania stylów do strony internetowej, a mianowicie użycie powiązanych stylów. Istotą pokrewnych stylów jest to, że są one zdefiniowane w pliku innym niż dokument HTML i mają rozszerzenie .css. Utwórz wciąż pusty dokument i zapisz go na dysku flash w folderze CSS pod stylem nazwy i rozszerzeniem .css

Zapisz.

Utworzono plik stylu z rozszerzeniem .css

Na razie pozostaw plik style.css pusty.

Aby połączyć dokument HTML (w naszym przypadku jest to index.html) z plikiem stylów style.css, używamy znacznika. Tag powinien znajdować się wewnątrz tagów ... Napiszmy następujący wiersz między tagami: gdzie: rel = "stylesheet" - atrybut tagu, który informuje przeglądarkę internetową, że style zostaną połączone; atrybut href = "style.css" wskazuje ścieżkę do pliku stylów style.css

Podczas tworzenia plików stylów należy przestrzegać poniższych zasad (przy dodawaniu stylów globalnych należy przestrzegać tych samych zasad). Jednym z głównych elementów pliku stylów jest selektor. Selektor określa, który element w dokumencie HTML ma zastosować określone parametry stylu. Selektor to tagi, klasy i identyfikatory. Po określeniu selektora umieszczane są nawiasy klamrowe, w których zarejestrowana jest właściwość stylu, a następnie wskazana jest jego wartość, na przykład znacznik html h1 jest wskazany jako selektor na poniższym schemacie, kolor: jako właściwość stylu zapisywana jest wartość właściwości stylu

Ponieważ chcemy umieścić tekst tytułu (tag

) na środku strony i ustaw tekst na czerwony, a także tekst akapitu (tag

) wyświetlamy w kolorze deepskyblue, w pliku stylów style.css piszemy linie: h1 text-align: center; color: red and p color: deepskyblue gdzie: h1 text-align: center; color: red - wyrównaj tekst nagłówka („Czym jest CSS”) na środku i ustaw tekst na czerwony p color: deepskyblue - ustaw tekst akapitu („CSS jest językiem stylu, który definiuje ...”) kolor deepskyblue

W wyniku połączenia pliku style.css z dokumentem html index.html widzimy, że tekst tytułu na stronie internetowej jest wyśrodkowany i ma czerwony kolor. Tekst akapitu również zmienił kolor na deepskyblue

Ciąg dalszy w artykule: Prawie skomplikowany lub naucz się CSS3. Część 2. Typy selektorów CSS