1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| "-//W3C//DTD XHTML 1.0 Strict//EN"
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
„http://www.w3.org/1999/xhtml”>
Style</
title
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/mysite. ess"
/
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
<br>href= <span>„http://www.htmlbook.ru/main.ess”</span> /
><br>
</
head
><br>
<body
><br>
<h1
>nagłówek</
h1
><br>
<р>Tekst</
р><br>
</
body
><br>
</
html
></p>
</td>
</tr></tbody></table><p>A plik stylu będzie wyglądał tak:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></p>
</td><td><p>H1( <br>kolor : #000080 ; <br>rozmiar czcionki : 2em ; <br>rodzina czcionek : Arial, Verdana, sans-serif ; <br>wyrównanie tekstu : środek ; <span>/* Wyśrodkowanie */</span><br>}
<br>P( <br>dopełnienie -lewo : 20px ; <br>}
</p>
</td>
</tr></tbody></table><p>Jak widać z powyższego kodu, do strony html dodawany jest wpis informujący przeglądarkę, skąd pobrać style. Sam plik stylu zawiera tylko opis stylów. To oddzielenie kodu html i css ułatwia rozwój i utrzymanie witryn. Zaleca się przestrzeganie tego stylu układu.</p>
<h3>Style globalne</h3>
<p>W przypadku używania stylów globalnych właściwości CSS są opisane w samym dokumencie i znajdują się w tytule strony internetowej. Pod względem elastyczności i możliwości ta metoda dodawania stylu jest gorsza od poprzedniej, ale pozwala również na przechowywanie stylów w jednym miejscu, w tym przypadku bezpośrednio na stronie za pomocą kontenera. <b><style>
</b>.Описанные в заголовке страницы стили можно использовать во всем документе (поэтому они и получили название «глобальные»). Хочется отметить, что такой подход к верстке страниц приводит к большим трудностям в сопровождении и применяется очень редко. Для примера неудачного использования такого подхода можно привести сервис ведения блогов Blogger.com . Созданные на нем блоги для оформления страниц используют как раз глобальные стили.</p>
<p>Вот пример использования глобальных стилей:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br></p>
</td><td><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
</span><br><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><br><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Глобальные стили<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
H1 {<br>
font-size: 1.2 em;<br>
font-family: Verdana, Arial, Helvetica, sans-serif;<br>
color: #333366;<br><<span>/
style
>
</span><br><<span>/
head
>
</span><br><<span>body
>
</span><br><hl>
Hello, world!<<span>/
hl>
</span><br><<span>/
body
>
</span><br><<span>/
html
>
</p>
</td>
</tr></tbody></table><h3>Внутренние стили</h3>
<p>Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут <b>style
</b>, а его значением выступает набор стилевых правил. Например:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers">
</td><td><p><p style=
<span>"font-size: 120%; font-family: monospace;<br>
color: сd66сс"
</span>>
Пример текста</р>
</p>
</td>
</tr></tbody></table><p>Внутренние стили рекомендуется применять на сайте <b>ограниченно
</b> или <b>вообще отказаться
</b> от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.</p>
<h3>Импорт CSS</h3>
<p>В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды <b>@import
</b>.</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><p><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Импорт<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
@import url("style/mysite.ess");<br>
H2 {<br>
font-size: 1.2 em;<br>
font-family: Arial, Helvetica, sans-serif;<br>
color: green;<br><<span>/
style
>
{
</span><br>font-family
:
Arial,
Verdana,
Helvetica,
sans-serif
;
<br>font-size
:
90%
;
<br>background
:
white
;
<br>color
:
black
;
<br>}
</p>
</td>
</tr></tbody></table><h3>Не забывайте об иерархии!</h3>
<p>При комбинированном применении различных стилей нужно помнить об их иерархии. <b>Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
</b> Таким образом, определения одних стилей можете перекрывать другие, будьте внимательны.</p>
<h2>Что дальше?</h2>
<p>Выше уже упоминались структурные единицы <b>CSS
</b> — селекторы. Но о синтаксисе CSS нужно писать отдельную статью, поэтому я и решил вынести этот материал в отдельный пост.</p>
<p>Теперь что касается стандартов: сейчас официально принят и поддерживается стандарт CSS 2.1, а в разработке находится CSS 3, который внесет огромное количество новшеств. О некоторых из них можно почитать в статье Будущее CSS разметки</p>
<p>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<p><b>CSS (Cascading Style Sheets), или каскадные таблицы стилей
</b>, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на <a href="https://bazava.ru/pl/izuchenie-osnov-yazyka-html-primer-s-rezultatom-html-osnovy-dlya.html">языках HTML</a> и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.</p>
<p>Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.</p>
<p>Объявление стиля состоит из двух частей: элемента веб-страницы — <b>селектора
</b>, и команды форматирования — <b>блока объявления
</b>. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.</p>
<br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2014/12/css_osnovy.png' align="left" width="100%" loading=lazy loading=lazy> Рис. 1. Структура объявления CSS-стиля
<h2>Виды каскадных таблиц стилей и их специфика</h2>
<i>
</i><h3>1. Виды таблиц стилей</h3>
<h4>1.1. Внешняя таблица стилей</h4>
<p><b>Внешняя таблица стилей
</b> представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега <link> , расположенного внутри раздела <head></head> . Такие стили работают для всех страниц сайта.</p>
<p>К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link> , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).</p><p>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/assets.css" media="all">
</head>
</p><p>Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .</p>
<h4>1.2. Внутренние стили</h4>
<p><b>Внутренние стили
</b> встраиваются в раздел <head></head> HTML-документа и определяются внутри тега <style></style>. Style wewnętrzne mają pierwszeństwo przed stylami zewnętrznymi, ale zastępują style wbudowane (określone za pomocą atrybutu style).</p><p>
<head>
<style>
h1,
h2 {
color: red;
font-family: "Times New Roman", Georgia, Serif;
line-height: 1.3em;
}
</style>
</head>
<body>
...
</body>
</p><h4>1.3. Style wbudowane</h4>
<p>Kiedy piszemy <b>style wbudowane</b>, kod CSS zapisujemy do pliku HTML, bezpośrednio w tagu elementu za pomocą atrybutu style:</p><p>
<p style="font-weight: bold; color: red;">Zwróć uwagę na ten tekst.</p>
</p><p>Takie style wpływają tylko na element, dla którego są ustawione.</p>
<h4>1.4. @importuj regułę</h4>
<p><b>@importuj regułę</b> umożliwia ładowanie zewnętrznych arkuszy stylów. Aby dyrektywa @import działała, musi być umieszczona w arkuszu stylów (zewnętrznym lub wewnętrznym) przed wszystkimi innymi regułami:</p><p>
<style>
@import url(mobile.css);
p {
font-size: 0.9em;
color: grey;
}
</style>
</p><p>Reguła @import służy również do dołączania czcionek internetowych:</p><p>@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=łac.,cyrylica);</p><h3>2. Rodzaje selektorów</h3>
<p><b>Selektory</b> reprezentują strukturę strony internetowej. Służą do tworzenia reguł formatowania elementów strony internetowej. Selektorami mogą być elementy, ich klasy i identyfikatory, a także pseudoklasy i pseudoelementy.</p>
<h4>2.1. Selektor uniwersalny</h4>
<p>Dopasowuje dowolny element HTML. Na przykład * (margin: 0;) zresetuje marginesy dla wszystkich elementów witryny. Selektora można również użyć w połączeniu z pseudoklasą lub pseudoelementem: *:after (style CSS) , *:checked (style CSS) .</p>
<h4>2.2. Selektor elementów</h4>
<p>Selektory elementów umożliwiają formatowanie wszystkich elementów <a href="https://bazava.ru/pl/tipy-dannyh-standartnye-tipy-dannyh-standartnye-funkcii-standartnye.html">tego typu</a> na wszystkich stronach serwisu. Na przykład h1 (rodzina czcionek: Lobster, kursywa;) ustawi ogólny styl formatowania dla wszystkich nagłówków h1.</p>
<h4>2.3. selektor klasy</h4>
<p>Selektory klas umożliwiają stylizowanie jednego lub więcej elementów o tej samej nazwie klasy, umieszczonych w różnych miejscach na stronie lub na stronie. <a href="https://bazava.ru/pl/yandeks-glavnaya-stranica-5-kak-yandeks-sdelat-startovoi-stranicei-v.html">różne strony</a> strona. Na przykład, aby utworzyć nagłówek z klasą nagłówka, dodaj atrybut class z nagłówkiem wartości do tagu otwierającego <h1>i ustaw styl dla określonej klasy. Style utworzone za pomocą klasy można zastosować do innych elementów, niekoniecznie tego typu.</p><p>
<h1 class="headline">Instrukcja obsługi <a href="https://bazava.ru/pl/iz-chego-sostoit-kompyuter-ustroistvo-sovremennogo-personalnogo-kompyutera-i-ego-osnovnye-sostavlyayu.html">komputer osobisty</a></h1>.headline ( text-transform: wielkie litery; kolor: jasnoniebieski; )</p><h4>2.4. Selektor identyfikatora</h4>
<p>Selektor ID umożliwia formatowanie <b>jeden</b> konkretny element. Identyfikator id musi być unikalny i może wystąpić tylko raz na jednej stronie.</p><p>
<div id="sidebar"></div>#pasek boczny ( szerokość: 300px; pływak: lewo; )</p><h4>2.5. Selektor potomków</h4>
<p>Selektory potomka stosują style do elementów znajdujących się wewnątrz elementu kontenera. Na przykład ul li (text-transform: uppercase;) wybierze wszystkie elementy li, które są dziećmi wszystkich elementów ul.</p>
<p>Jeśli chcesz sformatować dzieci danego elementu, musisz nadać temu elementowi klasę stylu:</p>
<p>p.first a (color: green;) - ten styl zostanie zastosowany do wszystkich linków, potomków akapitu z klasą first ;</p>
<p>p .first a (kolor: zielony;) - jeśli dodasz spację, to linki znajdujące się wewnątrz dowolnego tagu .first class będącego dzieckiem elementu będą stylizowane <p>Najpierw a (kolor: zielony;) - ten styl zostanie zastosowany do dowolnego linku znajdującego się wewnątrz innego elementu, oznaczonego klasą .first.</p>
<h4>2.6. Selektor dzieci</h4>
<p>Element potomny jest bezpośrednim dzieckiem elementu zawierającego. Element może mieć wiele elementów podrzędnych, a każdy element może mieć tylko jeden element nadrzędny. Selektor potomny umożliwia stosowanie stylów tylko wtedy, gdy element potomny znajduje się bezpośrednio po elemencie nadrzędnym i nie ma innych elementów pomiędzy nimi, tj. element potomny nie jest zagnieżdżony w niczym innym. <br>Na przykład p > strong wybierze wszystkie silne elementy, które są dziećmi elementu p.</p>
<h4>2.7. Selekcjoner siostry</h4>
<p>Relacje rodzeństwa występują między elementami, które mają wspólnego rodzica. Selektory elementów rodzeństwa pozwalają wybrać elementy z grupy elementów rodzeństwa.</p>
<p>h1 + p - zaznacza wszystkie pierwsze akapity bezpośrednio po dowolnym tagu <h1>bez wpływu na pozostałe akapity;</p>
<p>h1 ~ p zaznacza wszystkie akapity, które są rodzeństwem dowolnego nagłówka h1 i bezpośrednio po nim.</p>
<h4>2.8. Selektor atrybutów</h4>
<p>Selektory atrybutów wybierają elementy na podstawie nazwy atrybutu lub wartości atrybutu:</p>
<p>[atrybut] - wszystkie elementy zawierające określony atrybut, - wszystkie elementy, dla których ustawiony jest atrybut alt;</p>
<p>selector[atrybut] - elementy tego typu zawierające określony atrybut, img - tylko obrazki, dla których ustawiony jest atrybut alt;</p>
<p>selector[attribute="value"] - elementy tego typu zawierające określony atrybut z <a href="https://bazava.ru/pl/kak-poschitat-v-eksel-kolichestvo-konkretnyh-znachenii-podschet.html">konkretne znaczenie</a>, img — wszystkie obrazy, których tytuł zawiera słowo kwiat ;</p>
<p>selector[attribute~="value"] - elementy częściowo zawierające <a href="https://bazava.ru/pl/chto-znachit-oshibka-pri-poluchenii-dannyh-znacheniya-i-resheniya-oshibok-v-play.html">podana wartość</a>, na przykład, jeśli element ma wiele klas oddzielonych spacją, p to akapity, których nazwa klasy zawiera feature ;</p>
<p>selector[attribute|="value"] - elementy, których lista wartości atrybutów zaczyna się od podanego słowa, p - akapity, których nazwa klasy feature lub zaczyna się od feature ;</p>
<p>selector[atrybut^="wartość"] - elementy, których wartość atrybutu zaczyna się od podanej wartości, a - wszystkie linki zaczynające się od http:// ;</p>
<p>selector[attribute$="value"] - elementy, których wartość atrybutu kończy się podaną wartością, img - wszystkie obrazy w formacie png;</p>
<p>selector[attribute*="value"] - elementy, których wartość atrybutu zawiera określone słowo w dowolnym miejscu, a - wszystkie linki, których nazwa zawiera book .</p>
<h4>2.9. Selektor pseudoklasy</h4>
<p>Pseudoklasy to klasy, które w rzeczywistości nie są dołączone do znaczników HTML. Pozwalają na zastosowanie reguł CSS do elementów, gdy wystąpi zdarzenie lub jest zgodne z określoną regułą. Pseudoklasy charakteryzują elementy o następujących właściwościach:</p>
<p>:hover - dowolny element, nad którym znajduje się kursor myszy;</p>
<p>:focus - interaktywny element, do którego nawigowano za pomocą klawiatury lub aktywowano myszą;</p>
<p>:active - element, który został aktywowany przez użytkownika;</p>
<p>:valid - pola formularza, których zawartość została zweryfikowana w przeglądarce pod kątem zgodności z określonym typem danych;</p>
<p>:invalid - pola formularza, których zawartość nie pasuje do określonego typu danych;</p>
<p>:enabled - wszystkie aktywne pola formularza;</p>
<p>:disabled - wyłączone pola formularza, czyli w stanie nieaktywnym;</p>
<p>:in-range - pola formularza, których wartości mieszczą się w określonym zakresie;</p>
<p>:out-of-range - pola formularza, których wartości nie mieszczą się w ustawionym zakresie;</p>
<p>:lang() - elementy z tekstem w określonym języku;</p>
<p>:not(selector) - elementy, które nie zawierają podanego selektora - klasa, identyfikator, nazwa lub typ pola formularza - :not();</p>
<p>:target jest elementem #, do którego odwołuje się dokument;</p>
<p>:checked - wybrane (wybrane przez użytkownika) elementy formularza.</p>
<h4>2.10. Selektor pseudoklas strukturalnych</h4>
<p>Pseudoklasy strukturalne wybierają elementy potomne zgodnie z parametrem podanym w nawiasach:</p>
<p>:nth-child(odd) - nieparzyste elementy potomne;</p>
<p>:nth-child(even) - parzyste elementy potomne;</p>
<p>:nth-child(3n) - co trzeci element wśród dzieci;</p>
<p>:nth-child(3n+2) - wybiera co trzeci element, zaczynając od drugiego elementu potomnego (+2) ;</p>
<p>:nth-child(n+2) - wybiera wszystkie elementy, zaczynając od drugiego;</p>
<p>:nth-child(3) - wybiera trzeci element potomny;</p>
<p>:nth-last-child() - na liście elementów potomnych wybiera element o określonej lokalizacji, podobnie jak :nth-child() , ale zaczynając od ostatniego, w przeciwnym kierunku;</p>
<p>:first-child - pozwala na stylizację tylko pierwszego elementu potomnego znacznika;</p>
<p>:last-child - pozwala sformatować ostatni element potomny znacznika;</p>
<p>:only-child - wybiera element, który jest jedynym dzieckiem;</p>
<p>:empty - wybiera elementy, które nie mają dzieci;</p>
<p>:root - wybiera element będący korzeniem dokumentu - element html.</p>
<h4>2.11. Selektor pseudoklasy typu strukturalnego</h4>
<p>Wskaż określony typ tagu podrzędnego:</p>
<p>:nth-of-type() - wybiera elementy analogicznie do :nth-child() , biorąc pod uwagę tylko typ elementu;</p>
<p>:first-of-type - wybiera pierwsze dziecko danego typu;</p>
<p>:last-of-type - wybiera ostatni element danego typu;</p>
<p>:nth-last-of-type() - wybiera element danego typu na liście elementów zgodnie z określoną lokalizacją, zaczynając od końca;</p>
<p>:only-of-type — wybiera jedyny element określonego typu spośród dzieci elementu rodzica.</p>
<h4>2.12. Selektor pseudoelementów</h4>
<p>Pseudoelementy służą do dodawania treści, które są generowane za pomocą właściwości content:</p>
<p>:first-letter - wybiera pierwszą literę każdego akapitu, dotyczy tylko elementów blokowych;</p>
<p>:first-line - wybiera pierwszą linię tekstu elementu, dotyczy tylko elementów blokowych;</p>
<p>:before - wstawia wygenerowaną zawartość przed elementem;</p>
<p>:after — dodaje wygenerowaną zawartość po elemencie.</p>
<h3>3. Kombinacja selektorów</h3>
<p>Aby dokładniej wybrać elementy do formatowania, możesz użyć kombinacji selektorów:</p>
<p>img:nth-of-type(even) — zaznaczy wszystkie parzyste obrazy, których tekst alternatywny zawiera słowo css .</p>
<h3>4. Grupowanie selektorów</h3>
<p>Ten sam styl można zastosować do wielu elementów jednocześnie. Aby to zrobić, po lewej stronie deklaracji wypisz niezbędne selektory oddzielone przecinkami:</p><p>H1, h2, p, span ( kolor: pomidor; tło: białe; )</p><h3>5. Dziedziczenie i kaskada</h3>
<p>Dziedziczenie i kaskadowanie to dwa podstawowe pojęcia w CSS, które są ze sobą ściśle powiązane. Dziedziczenie oznacza, że elementy dziedziczą właściwości po swoim rodzicu (element, który je zawiera). Kaskada przejawia się na drodze <a href="https://bazava.ru/pl/chto-takoe-kesh-pochemu-i-kak-nuzhno-chistit-raznye-ego-vidy-kak.html">różne rodzaje</a> arkusze stylów są stosowane do dokumentu i jak sprzeczne reguły zastępują się nawzajem.</p>
<h4>5.1. Dziedzictwo</h4>
<p><b>Dziedzictwo</b> to mechanizm, dzięki któremu pewne właściwości są przekazywane z przodka na jego potomków. Specyfikacja CSS przewiduje dziedziczenie właściwości związanych z zawartością tekstową strony, takich jak color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visible , spacje i odstępy między wyrazami. W wielu przypadkach jest to wygodne, ponieważ nie musisz ustawiać rozmiaru czcionki i rodziny czcionek dla każdego elementu na stronie internetowej.</p>
<p>Właściwości formatowania bloku nie są dziedziczone. Są to background , border , display , float i clear , height i width , margin , min-max-height i -width , outline , overflow , padding , position , text-decoration , vertical-align i z-index .</p>
<h5>Dziedziczenie wymuszone</h5>
<p>Możesz użyć słowa kluczowego inherit, aby wymusić na elemencie dziedziczenie dowolnej wartości właściwości z elementu nadrzędnego. Działa to nawet w przypadku właściwości, które nie są domyślnie dziedziczone.</p>
<h5>Jak ustawiane są i działają style CSS</h5>
<p>1) Style mogą być dziedziczone z elementu nadrzędnego (właściwości dziedziczone lub przy użyciu wartości inherit);</p>
<p>2) Style w arkuszu stylów poniżej zastępują style w arkuszu stylów powyżej;</p>
<p>3) Jeden element można wystylizować od <a href="https://bazava.ru/pl/effektivnye-metody-i-priemy-raboty-s-informaciei-rabota-s.html">różne źródła</a>. Możesz sprawdzić, które style są stosowane w trybie programisty przeglądarki. Aby to zrobić, kliknij element. <a href="https://bazava.ru/pl/how-to-delete-if-the-right-mouse-button-does-not-work-when-you-rightclick-on-a-folder-or-file-the-computer-hangs-indefinitely.html">kliknij prawym przyciskiem myszy</a> myszy i wybierz "Wyświetl kod" (lub coś podobnego). Prawa kolumna zawiera listę wszystkich właściwości, które są ustawione dla tego elementu lub odziedziczone z elementu nadrzędnego, a także pliki stylów, w których są one określone, oraz numer seryjny wiersza kodu.</p>
<br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/01/nasledovanie-stiley.png' align="left" width="100%" loading=lazy loading=lazy>Ryż. 2. Tryb programisty w <a href="https://bazava.ru/pl/how-to-check-extensions-in-the-yandex-browser-how-to-enable-extensions-disabled-by-google-chrome-browser.html">Przeglądarka Google</a> Chrom <p>4) Podczas definiowania stylu możesz użyć dowolnej kombinacji selektorów — selektora elementu, pseudoklasy elementu, klasy lub identyfikatora elementu.</p><p>
<div id="wrap" class="box clear"></div> div (obramowanie: 1px solid #eee;) #wrap (szerokość: 500px;) .box (float: lewo;) .clear (clear: oba;)</p><h4>5.2. Kaskada</h4>
<p><b>Kaskadowe</b> to mechanizm kontrolujący efekt końcowy w sytuacji, gdy do tego samego elementu stosowane są różne reguły CSS. Istnieją trzy kryteria, które określają kolejność stosowania właściwości — reguła !ważna, specyfika i kolejność, w jakiej arkusze stylów są uwzględniane.</p>
<h5>Zasada!ważne</h5>
<p>Wagę reguły można określić za pomocą słowa kluczowego !important, które jest dodawane bezpośrednio po wartości właściwości, na przykład span (font-weight: bold!important;) . Regułę należy umieścić na końcu deklaracji przed nawiasem zamykającym, bez spacji. Taka deklaracja będzie miała pierwszeństwo przed wszystkimi innymi przepisami. Ta reguła pozwala anulować wartość właściwości i ustawić nową dla elementu z grupy elementów w przypadku, gdy nie ma bezpośredniego dostępu do pliku stylu.</p>
<h5>Specyficzność</h5>
<p>Dla każdej reguły przeglądarka oblicza <b>specyfika selektora</b>, a jeśli element ma sprzeczne deklaracje właściwości, brana jest pod uwagę reguła o najwyższej szczegółowości. Wartość swoistości składa się z czterech części: 0, 0, 0, 0 . Specyfika selektora jest zdefiniowana w następujący sposób:</p>
<p>0, 1, 0, 0 dodaje się dla id; <br>dla klasy 0, 0, 1, 0 dodaje się; <br>0, 0, 0, 1 jest dodawane dla każdego elementu i pseudoelementu; <br>dla stylu wbudowanego dodanego bezpośrednio do elementu, 1, 0, 0, 0 ; <br>uniwersalny selektor nie ma specyfiki.</p><p>H1 (kolor: jasnoniebieski;) /*swoistość 0, 0, 0, 1*/ em (kolor: srebrny;) /*swoistość 0, 0, 0, 1*/ h1 em (kolor: złoty;) /*swoistość: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (kolor: niebieski;) /*specyficzność: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (kolor: szary;) /*specyficzność 0, 0, 1, 0 */ #sidebar (color: orange;) /*swoistość 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*swoistość: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/</p><p>W rezultacie do elementu zostaną zastosowane te zasady, których specyfika jest większa. Na przykład, jeśli element ma dwie specyfiki o wartościach 0, 0, 0, 2 i 0, 1, 0, 1 , wygra druga reguła.</p>
<h5>Kolejność połączonych stołów</h5>
<p>Możesz utworzyć wiele zewnętrznych arkuszy stylów i połączyć je z tą samą stroną internetową. Jeśli w <a href="https://bazava.ru/pl/otlichie-5-ot-5s-tablica-kak-vizualno-otlichit-raznye-modeli-aifonov.html">różne stoły</a> spotka <a href="https://bazava.ru/pl/kak-ispolzovat-cvetovye-kody-dlya-cvetov-cvet-v-stilyah-mozhno.html">różne znaczenia</a> właściwości jednego elementu, to w rezultacie reguła z arkusza stylów na liście poniżej zostanie zastosowana do tego elementu.</p>
<p>Możesz połączyć kilka powiązanych właściwości CSS w jedną właściwość, aby zaoszczędzić czas i wysiłek.</p> <h3>Porównanie wartości indywidualnych i skróconych</h3><p>Rozważ następującą regułę dla marginesów (skróty dla dopełnienia i obramowania działają w ten sam sposób):</p><p>div.foo ( górny margines: 1 em; prawy margines: 1,5 em; dolny margines: 2 em; lewy margines: 2,5 em; )</p><p>Tę zasadę można zapisać krócej:</p><p>div.foo ( margines: 1em 1,5em 2em 2,5em; )</p> <h3>Określenie mniej niż czterech wartości dla skróconej właściwości</h3><p>Skrócona wartość może mieć mniej niż cztery wartości, jak podano poniżej. Wyniki są uporządkowane według liczby podanych wartości:</p> <h3>Katalog skrótów</h3><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><td bgcolor="#eaeaea" valign="top">Redukcje granic dla różnych właściwości</td>
<td bgcolor="#eaeaea" valign="top">
<p>Należy również wspomnieć, że można nawet ustawić wartości właściwości granicy (border ) tylko dla jednej granicy elementu w następujący sposób:</p>
<p>szerokość obramowania po lewej: 2px; styl obramowania po lewej: solidny; kolor lewego obramowania: czarny;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Skróty do niektórych właściwości margin (margin), padding ( padding ) i border ( border )</td>
<td bgcolor="#eaeaea" valign="top">Wszystko to działa w taki sam sposób, jak pokazano powyżej w sekcji „Wybieranie między jedną właściwością a skrótem” powyżej.</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Skróty czcionek</td>
<td bgcolor="#eaeaea" valign="top">Za pomocą jednej linii skrótu możesz zdefiniować rozmiar czcionki, grubość, styl, rodzinę i wysokość linii. Rozważmy na przykład następujący kod: <p>rozmiar czcionki: 1,5 em wysokość linii: 200% grubość czcionki: pogrubiona; styl czcionki: kursywa; rodzina czcionek: Georgia, „Times New Roman”, szeryf</p> Możesz to wszystko zdefiniować za pomocą następującej linii: <p>czcionka: 1,5em/200% pogrubiona kursywa Georgia, „Times New Roman”, szeryf;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Skrót od tła</td>
<td bgcolor="#eaeaea" valign="top">Za pomocą jednej linii CSS możesz zdefiniować kolor tła, obraz tła, powtórzenie obrazu i położenie obrazu. Weźmy następujący kod: <p>kolor tła: #000; obraz w tle: url(obraz.gif); powtarzanie w tle: bez powtórzeń; pozycja tła: u góry po lewej;</p> Można to przedstawić za pomocą następującego skrótu: <p>background:#000 url(image.gif) bez powtarzania w lewym górnym rogu;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Skróty dla list</td>
<td bgcolor="#eaeaea" valign="top">W tym przypadku podobna historia z <span>lista właściwości</span> umożliwia ustawienie wartości właściwości dla typu znacznika listy, pozycji i obrazu w jednym wierszu. Weźmy następujący kod: <p>typ-listy: okrąg; pozycja w stylu listy: wewnątrz; list-style-image: url(bullet.gif) ;</p> Odpowiada to następującemu: <p>styl listy: kółko wewnątrz url(bullet.gif);</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">
</td>
<td bgcolor="#eaeaea" valign="top">
</td>
</tr></table><h3>Stosowanie CSS do HTML</h3><p>Istnieją trzy sposoby zastosowania CSS do dokumentu HTML:</p><ul><li>strunowy;</li>
<li>zagnieżdżone;</li>
<li>zewnętrzne arkusze stylów.</li>
</ul><h3>Style linii</h3><p>Możesz zastosować arkusz stylów do elementu, używając atrybutu style w następujący sposób:</p><p>W ramach tego atrybutu wymienione są wszystkie właściwości CSS i ich wartości.</p><p>Zaletą stylów wbudowanych jest to, że przeglądarka będzie zmuszona do korzystania z tych ustawień. Wszystkie inne style zdefiniowane w innych arkuszach stylów, a nawet zagnieżdżone w <span>tytuł dokumentu</span>, zostaną zastąpione przez te style.</p><p>Poważnym problemem ze stylami inline jest to, że znacznie utrudniają one utrzymanie stylu. <a href="https://bazava.ru/pl/primery-css-dlya-hlebnyh-kroshek-sozdanie-ploskih-hlebnyh-kroshek-s-ispolzovaniem-css-klassicheskoe.html">Korzystanie z CSS</a> ma na celu oddzielenie prezentacji dokumentu od jego struktury, ale style wbudowane działają dokładnie na odwrót — rozpraszają reguły prezentacji w całym dokumencie.</p><p>Poza problemami z utrzymaniem, nie uzyskasz żadnych korzyści z istotnej części samego CSS: kaskadowania.</p> <h3>Style zagnieżdżone</h3><p>Zagnieżdżone arkusze stylów są umieszczane na początku dokumentu wewnątrz elementu stylu, jak na poniższej przykładowej stronie:</p><p><style type="text/css" media="screen">
p {
color:white;
background:blue;
padding:5px;
}
</style></p><p>Zaletą zagnieżdżonych arkuszy stylów jest to, że nie trzeba dodawać atrybutu stylu do każdego akapitu — można je wszystkie stylizować za pomocą jednej definicji. Oznacza to również, że jeśli musisz zmienić <a href="https://bazava.ru/pl/akkumulyator-i-vremya-raboty-vneshnii-vid-materialy-upravlyayushchie.html">wygląd zewnętrzny</a> wszystkich paragrafów będzie można to zrobić w jednym miejscu, jednak wszystko to jednak ogranicza się do jednego dokumentu.</p> <h3>Zewnętrzne arkusze stylów</h3><p>Zewnętrzne arkusze stylów oznaczają umieszczenie wszystkich definicji CSS w osobnym pliku, zapisanie go z rozszerzeniem pliku CSS, a następnie zastosowanie go do dokumentów HTML za pomocą elementu <i>połączyć</i> w tytule dokumentu. Na przykład:</p><p><link rel="stylesheet" href="styles.css"
type="text/css" media="screen"></p><p>Zewnętrzne arkusze stylów umożliwiają przechowywanie wszystkich definicji stylów w jednym pliku. Oznacza to, że możesz wprowadzać zmiany w całej witrynie, zmieniając tylko jeden . <a href="https://bazava.ru/pl/vstroennyi-perevodchik-veb-resursov-i-kontenta-v-yandex-browser-kak-nastroit.html">przeglądarka internetowa</a> może jednak pobrać go raz, a następnie buforować dla wszystkich innych dokumentów, które się do niego odwołują, co zmniejsza ilość pobieranych informacji.</p> <h3>Importowanie arkuszy stylów</h3><p>Istnieje inny sposób importowania zewnętrznych arkuszy stylów w <a href="https://bazava.ru/pl/kak-otkryt-fail-html-chto-takoe-htm-ili-html-fail-kak-prochitat-fail-html-na.html">pliki HTML</a>- Oświadczenie @import. Jest wstawiany do zagnieżdżonego arkusza stylów w taki sam sposób, jak zagnieżdżony CSS pokazany powyżej. Składnia wygląda tak:</p><p><style type="text/css" media="screen">
@import url("styles.css");
другие операторы импорта или стили CSS.
</style></p><p>Dwie podstawowe koncepcje CSS to: <i>dziedzictwo</i> oraz <i>kaskadowe</i>. <b>Dziedzictwo</b> dotyczy tego, w jaki sposób element w znacznikach HTML dziedziczy właściwości elementów przodków (w których jest zawarty) i przekazuje je swoim potomkom, podczas gdy <b>kaskadowe</b> zajmuje się deklaracjami CSS, które mają zastosowanie do dokumentu i jak sprzeczne reguły zastępują się nawzajem.</p> <h3>Dziedzictwo</h3><p><b>Dziedzictwo</b> w CSS jest mechanizmem, dzięki któremu pewne właściwości są przekazywane z elementu przodka do jego elementów potomnych.</p><p>Korzystając z dziedziczenia, możesz na przykład zdefiniować właściwości czcionki dla elementów html lub body, które będą dziedziczone przez wszystkie inne elementy. Możesz zdefiniować kolory tła i pierwszego planu dla konkretnego elementu kontenera, a kolor pierwszego planu będzie automatycznie dziedziczony przez elementy podrzędne w tym kontenerze.</p><p>Każdy element w <a href="https://bazava.ru/pl/kakoi-teg-dobavlyaet-izobrazhenie-v-html-dokument-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche-video.html">Dokument HTML</a> odziedziczy wszystkie odziedziczone właściwości swojego przodka, z wyjątkiem <a href="https://bazava.ru/pl/the-root-element-is-xml-xml-is-a-free-extensible-markup-language.html">element główny</a>(html ), który nie ma rodzica.</p> <h3>Kaskadowe</h3><p><b>Kaskadowe</b> jest mechanizmem, który rządzi efektem końcowym, gdy wiele sprzecznych deklaracji CSS jest zastosowanych do tego samego elementu. Istnieją trzy główne pojęcia, które rządzą kolejnością stosowania deklaracji CSS:</p><ul><li>Znaczenie</li>
<li>Specyficzność</li>
<li>Zamówienie <a href="https://bazava.ru/pl/kak-posmotret-skrytye-foto-v-kontakte-cherez-ishodnyi-kod.html">kod źródłowy</a></li>
</ul><p><i>Znaczenie</i> jest najważniejsza. Jeżeli dwie deklaracje mają jednakowe znaczenie, specyfika przepisów decyduje o tym, które z nich zostanie zastosowane. Jeśli reguły mają tę samą specyfikę, to kolejność kodu źródłowego kontroluje wynik.</p> <h3>Znaczenie</h3><p><b>Znaczenie</b> Deklaracje CSS zależą od tego, gdzie jest zdefiniowany. Sprzeczne deklaracje będą stosowane w następującej kolejności, późniejsze zastąpią poprzednie:</p><ul><li>Arkusze stylów agenta użytkownika</li>
<li>Regularne deklaracje w arkuszach stylów użytkownika</li>
<li>Regularne deklaracje w autorskich arkuszach stylów</li>
<li>Ważne deklaracje w arkuszach stylów autorów</li>
<li>Ważne deklaracje w arkuszach stylów użytkownika</li>
</ul><p><i>Arkusz stylów agenta użytkownika</i> to wbudowany arkusz stylów przeglądarki. Każda przeglądarka ma własne domyślne reguły, które określają sposób wyświetlania różnych <a href="https://bazava.ru/pl/css-fiksirovannyi-razmer-pri-lyuboi-shirine-bordyura-bonus.html">elementy HTML</a> jeśli żaden styl nie jest zdefiniowany przez użytkownika lub projektanta strony. Na przykład nieodwiedzone linki są zazwyczaj wyświetlane w kolorze niebieskim i podkreślone.</p><p><i>Arkusz stylów użytkownika</i> to arkusz stylów zdefiniowany przez użytkownika. Nie wszystkie przeglądarki obsługują arkusze stylów użytkownika, ale mogą być bardzo przydatne, szczególnie dla użytkowników z pewnymi rodzajami braków funkcjonalnych. Na przykład osoba z dysleksją może mieć arkusz stylów, który definiuje pewne czcionki i kolory, które ułatwiają czytanie.</p><p><i>Arkusz stylów autora</i> jest to, co zwykle nazywa się „arkuszem stylów”. Jest to arkusz stylów, który autor dokumentu (lub bardziej prawdopodobnie projektant witryny) napisał i dołączył (lub dołączył).</p><p>Aby zamienić zwykłą deklarację w ważną, musisz umieścić za nią !ważną dyrektywę. Jak widać, ważne deklaracje w arkuszu stylów użytkownika zastąpią wszystko inne, co ma sens.</p><p>Domyślny widok przeglądarki zostanie zastosowany tylko wtedy, gdy te deklaracje nie zostaną zastąpione przez żadne reguły w arkuszu stylów użytkownika lub autora, ponieważ arkusz stylów klienta użytkownika ma najniższy priorytet.</p> <h3>Specyficzność</h3><p><b>Specyficzność</b> jest definiowany jako miara tego, jak szczegółowy jest selektor jakiejś reguły. Selektor o niskiej wartości może pasować do wielu elementów (np. *, który dopasowuje każdy element w dokumencie), podczas gdy selektor o wysokiej wartości może pasować tylko do jednego elementu na stronie (np. #nav , który dopasowuje tylko element o identyfikatorze, który pasuje nawig. ).</p><p>Specyfikę selektora można łatwo obliczyć. Jeśli co najmniej dwie deklaracje są sprzeczne dla danego elementu, a wszystkie deklaracje mają jednakowe znaczenie, to deklaracja z najbardziej szczegółowym selektorem będzie miała pierwszeństwo w regule.</p><p>Specyfika składa się z czterech komponentów, które można nazwać a, b, c i d. Składnik a jest najbardziej ograniczający, d najmniej.</p><ul><li>Składnik a jest zdefiniowany bardzo prosto: jest to 1 dla deklaracji atrybutu stylu, w przeciwnym razie jest to 0 .</li>
<li>składnik b <i>
</i> to liczba selektorów identyfikatora <i>
</i> w selektorze (te, które zaczynają <i>z</i>#).</li>
<li>Składnik c <i>
</i> to liczba <span>selektory atrybutów</span>, w tym selektory klas - i pseudoklasy.</li>
<li>Komponent d to liczba typów elementów i pseudoelementów w selektorze.</li>
</ul><p>Po niewielkich obliczeniach można uzyskać ciąg tych czterech składników, który określa specyfikę dowolnej reguły. Deklaracje CSS w atrybucie style nie mają selektora, więc ich specyfika zawsze będzie wynosić 1,0,0,0 .</p><p>W tabeli przedstawiono kilka przykładów.</p><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><th bgcolor="#d8d8d8"><b>Selektor</b>
</th>
<th bgcolor="#d8d8d8">a</th>
<th bgcolor="#d8d8d8">b</th>
<th bgcolor="#d8d8d8">c</th>
<th bgcolor="#d8d8d8">d</th>
<th bgcolor="#d8d8d8"><b>Specyficzność</b>
</th>
</tr><tr><td bgcolor="#eaeaea" valign="top">h1</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0,0,0,1
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">.bla</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0,0,1,0
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">#bar</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">0,1,0,0
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top"><span>html>głowa+ciało ul#nav *.home a:link</span>
</td>
<td bgcolor="#eaeaea" valign="top">0
</td>
<td bgcolor="#eaeaea" valign="top">1
</td>
<td bgcolor="#eaeaea" valign="top">2
</td>
<td bgcolor="#eaeaea" valign="top">5
</td>
<td bgcolor="#eaeaea" valign="top">0,1,2,5
</td>
</tr></table><p>Pamiętaj, że łączące znaki (takie jak > , + i</p>
<td width="620">
<br><a href="https://bazava.ru/pl/t_st.htm#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20%D0%BA%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%83">Stosowanie arkusza stylów do dokumentu</a> <br><br><a href="https://bazava.ru/pl/t_st.htm#%D0%92%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20%D0%B2%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82">Osadzanie arkuszy stylów w dokumencie</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%97%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D1%82%D0%B8%D0%BB%D1%8F%20%D0%B4%D0%BB%D1%8F%20%D0%BE%D1%82%D0%B4%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE%20%D1%84%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">Ustalanie stylu dla pojedynczego fragmentu dokumentu</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%98%D0%BC%D0%BF%D0%BE%D1%80%D1%82%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Importowanie arkusza stylów</a> <br><br><a href="https://bazava.ru/pl/t_st.htm#%D0%A3%D0%BA%D0%B0%D0%B7%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%20%D0%BE%D0%B4%D0%BD%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE">Określanie wielu właściwości jednocześnie</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2">Selektory grupujące</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%9A%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Komentowanie arkusza stylów</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9">Właściwości stylu</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20background">właściwości tła</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%9E%D0%B1%D1%80%D0%B0%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2">Elementy oprawy</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2">Lista właściwości</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0">Właściwości tekstu</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%20%D0%B4%D0%BB%D1%8F%20%D1%83%D0%BF%D1%80%D0%BE%D1%89%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F%20%D1%81%D1%82%D0%B8%D0%BB%D1%8F">Grupowanie właściwości w celu łatwiejszego definiowania stylu</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%9D%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2">Dziedziczenie własności</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D1%85%20%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2">Korzystanie z selektorów kontekstowych</a> <br><a href="https://bazava.ru/pl/t_st.htm#%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B%20%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9%20HTML%20%D0%BD%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%8E%D1%82%D1%81%D1%8F%20%D0%BA%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%BC%D0%B8">Dlaczego arkusze stylów nazywane są kaskadowymi</a> <br><br><p>Arkusze stylów są dostarczane przez zalecenia W3C i są standardowym narzędziem do formatowania stron internetowych przy użyciu metod DTP. Microsoft Internet Explorer 3.0 był pierwszą przeglądarką obsługującą arkusze stylów. Przeglądarka Netscape Navigator obsługuje arkusze stylów od wersji 4.0B2 (Beta 2), dostępnej od lutego 1997 roku.</p>
<p>Szczegóły zaleceń W3C można znaleźć pod adresem: h <span>ttp://www.w3.org/pub/WWW/TR/WD-cssl.html</span> . <span>Standard W3C używa terminu „kaskadowe arkusze stylów poziomu 1 (CSSI”).</p>
<span>
<p>Na początek konieczne jest wyjaśnienie, co oznacza nazwa „arkusze stylów”. Większość nowoczesnych edytorów tekstu pozwala użytkownikowi zdefiniować styl, który będzie używany do formatowania dokumentu. W szczególności możesz wybrać styl akapitowy z pojedynczym odstępem między wierszami, czcionką Courier i jednocalowym lewym marginesem. Ten styl formatowania można następnie zastosować do dowolnej liczby akapitów w tym i innych dokumentach. Arkusze stylów NT</p>
</span> M <span>Działam dokładnie w ten sam sposób. Poniżej znajduje się krótka lista głównych funkcji:</span>
<span>
<ul><p>Zmiana odstępów między wierszami, słowami i poszczególnymi znakami.</p>
<p>Ustawia lewy, prawy, górny i dolny margines elementu (blok tekstu kontenera HTML).</p>
<p>Ustaw dopełnienie elementu.</p>
<p>Zmień rozmiar, styl i inne atrybuty czcionki elementu.</p>
<p>Ustawia obramowanie wokół elementu.</p>
<p>Włączenie <a href="https://bazava.ru/pl/how-to-replace-the-background-image-how-to-change-the-background-in-photoshop.html">zdjęcie w tle</a> i kolor tła elementu.</p>
</ul></span>
<p>Ogromną zaletą arkuszy stylów HTML jest możliwość oddzielenia operacji formatowania od treści dokumentu. Najpierw określa się, jak tekst powinien wyglądać w tym czy innym miejscu na stronie, a następnie wprowadza się sam tekst. Jeśli później zdecydujesz się np. zmienić kolor czcionki nagłówków na niebieski, wystarczy zmienić tylko styl tych nagłówków. Nie musisz wprowadzać żadnych zmian w tekście. <i>.
</i></p>
<p>Istnieją cztery metody zastosowania arkusza stylów do dokumentu:</p>
<ul><p>Łączenie — możesz połączyć dokument HTML z arkuszem stylów przechowywanym w osobnym pliku.</p>
<p>Osadzanie - możesz osadzić arkusz stylów w dokumencie HTML za pomocą kontenera<STYLE>
.</p>
<p>Задание стиля для отдельного фрагмента
документа (Inline) - можно определять элементы стиля
"на лету", т. е. указывать их в тэгах HTML,
например, в тэге абзаца <span></li>
<li><p>Импорт (Import) - можно использовать
зарезервированное слов @import для импортирования
таблицы стилей в HTML - документ.</p>
</ul><p>Как было указано выше, существует
возможность создания таблиц стилей в виде
<a href="https://bazava.ru/pl/proverka-lechenie-kompyutera-na-virusy-kak-proverit-na-virusy-kompyuter-ili.html">отдельного файла</a> для применения его ко всем
страницам cайта. Этот метод упрощает создание
сайта.</p>
<p>Хранить таблицу стилей следует в
текстовом файле с расширением.css. Его можно
создать при помощи любого текстового редактора.
Для связывания таблицы стилей с документом HTML
необходимо использовать тэг <LINK>
<span> следующим образом:
</p>
<p><LINK
<span>REL=STYLESHEET HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
</p>
<p>В атрибуте HREF
<span>указывается URL - адрес таблицы
стилей.
</p>
<p>Таблицу стилей необязательно хранить в
виде отдельного файла. Ее можно встроить
непосредственно в документ, однако в этом случае
она будет действовать только внутри файла этого
документа. Для распространения действия таблицы
на другие документы ее необходимо скопировать в
каждый из них.</p>
<p>Для включения таблицы стилей в документ
необходимо воспользоваться контейнером <STYLE>
<span>. Он
размещается между тэгами
</span><HTML>
и <span><BODY>
:
</p>
<p><HTML><br>
<HEAD> </HEAD><br>
<STYLE TYPE="text/css"><br>
STYLE definitions go here<br>
</STYLE> <br>
<BODY> </BODY> <br>
<HTML>
</p>
<p>Etykietka<STYLE>
<span> имеет единственный атрибут TYPE
, определяющий тип MIME (Multipurpose Internet
Mail Extension, стандарт <a href="https://bazava.ru/pl/elektronnaya-pochta-vhod-na-moyu-stranicu-moya-pochta-rabota-s-pismami-i.html">электронной почты</a> Internet). Для
того, чтобы браузеры, не поддерживающие таблицы
стилей, могли игнорировать тэг <STYLE>
,
его необходимо определить как "text/css"
.
</p>
<p>Можно определять стиль, что называется,
"на лету", оперативно внося требуемые
изменения. Например, если сначала определен
стиль документа с заголовком одного цвета, а
потом необходимо выделить цветом какой-то
элемент заголовка, можно это сделать внутри тэга
заголовка, не изменяя общий стиль документа.</p>
<p>Такой метод действует внутри тэга, где
определен или переопределен стиль при помощи
атрибута STYLE
он поддерживается
всеми подчиненными тэгами тэга <BODY>
<span>. Для оперативного определения стиля
необходимо добавить к нужному тэгу атрибут STYLE
и присвоить ему строковое
значение, указывающее новый стиль:
</p>
<p><H1
STYLE="color:
blu
е">
</p>
<p>Если оперативное указание стиля в
строке вступает в конфликт с другими методами
определения, оно всегда "берет верх".
Например, если при помощи связанного с
документом файла стиля цвет заголовка H1
<span> определен как
синий, а в самом тэге заголовка цвет изменен на
красный, браузер выведет этот заголовок шрифтом
красного цвета.
</p>
<p>Используя атрибут STYLE
c
тэгом <span><DIV>
,
можно определять стиль части документа,
расположенной в контейнере <DIV>
.
Это работает благодаря принципу
"наследования", о чем будет рассказано ниже.
Например, если необходимо установить цвет шрифта
для целого блока тэгов синим, можно расположить
эти тэги внутри контейнера
</span> <span><DIV>
и определить цвет шрифта
текста следующим образом:
</p>
<p><DIV STYLE="color: bluе">
<H1>This is a heading</H1><br>
<P>This is a paragraph. It will look blue in the user"s browser</P>
</DIV>
</p>
<p>Для изменения стиля нескольких слов или
даже символов можно использовать атрибут STYLE
совместно с тэгом <span>,
например:</p>
<p>This is a <SPAN STYLE="color:
blue">simple</SPAN> block of text
</p>
<p>Для того чтобы импортировать таблицу
стилей в HTML - документ, надо поместить в него
зарезервированное слово @import. Импортированный
файл должен размещаться в контейнере <STYLE>
.
Эта операция весьма похожа на встраивание
таблицы стилей, например:</p>
<p><STYLE TYPE="text/css"><br>
@import url(http://www.myserver.com/style.css) ;<br>
</STYLE>
</p>
<p>Jak wspomniano wcześniej, arkusze stylów są przechowywane w plikach tekstowych, które można łatwo edytować. Ich ręczne tworzenie nie jest trudne, ale istnieją specjalne edytory arkuszy stylów, takie jak popularny program Microsoft FrontPage.</p>
<p>Arkusze stylów umożliwiają zdefiniowanie stylu dla jednego lub więcej znaczników. Na przykład możesz utworzyć arkusz stylów, który definiuje style dla tagów <H1>
, <H2>
,
<P>I <EM>
<span>. Każda definicja nazywa się <i>reguła</i>
</span>(rule <span>mi). Reguła zawiera <i>selektor</i>(tag HTML), po którym następuje <i>deklaracja</i>(definicja stylu). Selektor jest łącznikiem między definicją a tagiem. Poniżej znajduje się przykład reguły określającej styl dla każdego z tagów nagłówka <H1>
:
</p>
<p>H1 (kolor: niebieski)</p>
<p>Deklaracja jest ujęta w nawiasy klamrowe. Każda deklaracja składa się z dwóch części: nazwy właściwości i przypisanej jej wartości, oddzielonych dwukropkiem. HTML zawiera dziesiątki właściwości (rozmiar czcionki, styl czcionki, kolor, prawy margines itp.), które zostaną omówione poniżej. Każda właściwość może przyjmować kilka wartości, z których jedna jest do niej domyślnie przypisana.</p>
<p>W poprzednim przykładzie określono tylko jedną właściwość koloru. Nic jednak nie stoi na przeszkodzie, aby w jednym tagu zdefiniować całą gamę właściwości, oddzielając je od siebie średnikiem:</p>
<p>HI (kolor: niebieski; rozmiar czcionki: 12 pkt; linia tekstu: środek)</p>
<p>W tym przykładzie przeglądarka wyświetli każdy nagłówek pierwszego poziomu za pomocą 12-punktowej niebieskiej czcionki i wyrówna je do środka okna. Wszystkie inne właściwości będą używać swoich wartości domyślnych (na przykład właściwość font-style zostanie ustawiona na normalny).</p>
<p>Jeśli chcesz zdefiniować ten sam styl dla wielu tagów, możesz umieścić je na osobnej liście:</p>
<p>P (rozmiar czcionki: 12 pkt) <br>UL (rozmiar czcionki: 12 pkt) <br>LI (rozmiar czcionki: 12 pkt)</p>
<p>HTML pozwala zrobić to samo w bardziej zwartej formie - w jednym wierszu:</p>
<p>P, UL, LI (rozmiar czcionki: 12 pkt)</p>
<p>Przecinek jest tutaj wymagany. Jeśli zostanie pominięty, zmieni się znaczenie reguły (patrz sekcja „ ” w dalszej części tego rozdziału).</p>
<p>Ponieważ arkusz stylów staje się coraz bardziej złożony, prawdopodobnie będziesz musiał podać więcej informacji o celu konkretnej reguły. Komentarze są umieszczane między znakami /* i */ i są ignorowane przez widzów, na przykład:</p>
<p>KORPUS (margines lewy: lin) /* Margines 1 cal */ <br>H1 (margin-lewy: -lin) /* Przesunięcie w lewo o 1 cal */ <br>H2 (margines-lewy: -lin) /* Przesunięcie w lewo o 1 cal */</p>
<p>HTML umożliwia zdefiniowanie szerokiej gamy właściwości arkusza stylów. Nazwy właściwości składają się z jednego, a częściej dwóch lub trzech słów oddzielonych myślnikiem. W nazwach złożonych pierwsze słowo zwykle reprezentuje kategorię i jest również skrótem nazwy właściwości (patrz sekcja „ ”).</p>
<p>Tabela zawiera przegląd właściwości arkusza stylów HTML Kolumna Kategoria pokazuje, czy właściwość można pogrupować z innymi właściwościami. Trzecia kolumna zawiera informacje o tym, czy właściwość jest dziedziczona przez znaczniki podrzędne (patrz rozdział " " o dziedziczeniu właściwości).</p>
<table border="1" cellspacing="1" bordercolor="#000000" cellpadding="3" width="469" height="1000"><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span><p><b>Dziedzictwo</b></p>
</span>
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span>
<p>Arkusze stylów HTML umożliwiają dekorowanie tła elementu strony kolorem lub obrazem. Należy zauważyć, że tutaj i poniżej omówimy użycie właściwości nie dla całej strony, ale dla osobnego elementu. Na przykład, jeśli zdefiniujesz tło dla tagu <UL>, wtedy tylko tagi będą miały to tło <UL>cała strona:</p>
<p>U <span>L (obraz w tle: URL(http://www.myserver.com/images/watermark.gif))</p>
<i>
</i>
<p>Zalecenia W3C zapewniają możliwość definiowania obramowań, marginesów i odstępów dla elementów strony. Możesz na przykład umieścić nagłówek w ramce lub zmienić marginesy w tagu akapitu<Р>tak, aby wciąć wszystkie akapity tekstu. Do tych celów możesz użyć następujących grup właściwości:</p>
<ul><li><i>
</i><p>border - służy do definiowania granicy z lewej, prawej, górnej i dolnej części elementu. Możesz ustawić szerokość, kolor i styl ramki.</p></li>
<li><i>
</i><p>margines — służy do definiowania marginesów z lewej, z prawej, u góry i u dołu elementu. Możesz także ustawić szerokość marginesów.</p></li>
<li><i>
</i><p>padding służy do wskazania wolnej przestrzeni między obramowaniem a zawartością elementu.</p></li>
</ul><i>
</i>
<span><i>
</i>
<p>Te właściwości służą do określania sposobu wyświetlania list. Można ich używać do zmiany pozycji znacznika (właściwość list-style-position), stylu lub obrazu znacznika (właściwości list-style-type i list-style-image).</p>
<p>Właściwości listy są dziedziczone, tj. jeśli właściwość jest zdefiniowana w tagu <UL>, będzie obowiązywać dla wszystkich tagów <LI>
<span>kontener UL .</p>
<i>
</i>
<p>Właściwości zapewniają pełną kontrolę nad sposobem renderowania tekstu przez przeglądarkę. Za ich pomocą można kontrolować kolor, rozmiar, czcionkę, odstępy między wierszami itp. Wszystkie właściwości tekstu zostaną szczegółowo opisane poniżej.</p>
<i>
</i>
<span><b><i>
</i>
</b>
<span><i>
</i>
<p>Wiele z opisanych powyżej właściwości można ze sobą zgrupować. Więc zamiast reguły</p>
<p>H1 (grubość czcionki: pogrubienie; styl czcionki: normalny; rozmiar czcionki: 12 punktów; rodzina czcionek: szeryfowa)</p>
<p>krótsze oświadczenie można napisać:</p>
<p>H1 (czcionka: pogrubiona normalna szeryfowa 12pt)</p>
<p>Arkusze stylów HTML umożliwiają grupowanie właściwości obramowania, tła, czcionki, listy, marginesów i dopełnienia. Rozważmy każdą z grup osobno.</p>
<p><i><u>graniczna grupa majątkowa</u>
</i></p>
<p>Właściwości obramowania można pogrupować na pięć różnych sposobów. Możesz zdefiniować właściwości dla <a href="https://bazava.ru/pl/kak-ochistit-istoriyu-soobshchenii-v-skype-kak-udalit-otdelnye-soobshcheniya.html">oddzielna strona</a> framework przy użyciu</p>
</span> b <span>order-top, border-right, border-bottom AND border-left lub zdefiniuj całe obramowanie naraz z obramowaniem. <p>Za pomocą każdej z tych właściwości możesz określić szerokość, styl i kolor obramowania, na przykład:</p>
</span>
<p>b top zamówienia: cienka kropkowana czarna</p>
<p><i><u>grupa właściwości tła</u>
</i></p>
<p>W grupie właściwości tła możesz określić wartości koloru, obrazu, powtórzenia, załącznika i pozycji, na przykład:</p>
<p>tło: biały adres URL (http://www.myserver.com/image/bg.gif) naprawiono powtarzanie-x w lewym górnym rogu</p>
<p><i><u>czcionka grupy właściwości</u>
</i></p>
<p>Grupie czcionek można nadać wagę, styl, rozmiar i wartości rodziny, na przykład:</p>
<p>czcionka: pogrubiona normalna 12pt razy, szeryfowa</p>
<p><i><u>lista właściwości grupy</u>
</i></p>
<p>Właściwości są grupowane przy użyciu właściwości list-style. Istnieje możliwość określenia obrazu dla znacznika, rodzaju i położenia znacznika, na przykład:</p>
<p>styl listy: kwadratowy adres URL (http://www.myserver.com/images/marker.gif) wewnątrz</p>
<p><i><u>marża grupa nieruchomości</u>
</i></p>
<p>W przypadku grupy marginesów możesz zdefiniować szerokość każdego z marginesów górnego, prawego, dolnego i lewego w następujący sposób:</p>
<p>margines: .5in 1in .5in 1in</p>
<p>Jeśli określona jest tylko jedna wartość, przeglądarka sprawi, że pozostałe pola będą miały taką samą szerokość. Jeśli jedna lub dwie wartości nie zostaną określone, marginesy o nie określonej wartości będą miały taką samą szerokość jak marginesy przeciwne. Na przykład, jeśli pominiesz ostatnią wartość (lewą), szerokość lewych marginesów będzie równa szerokości prawych marginesów, czyli 1 cal.</p>
<p><i><u>dopełnienie grupy właściwości</u>
</i></p>
<p>W grupie dopełnienia można określić wartości dla górnego, prawego, dolnego i lewego, na przykład:</p>
<p>wyściółka: 0,25 cala 0,25 cala 0,25 cala 0,25 cala</p>
<p>Jeśli określono tylko jedną wartość, przeglądarka przypisze tę samą wartość do brakujących wartości. Jeśli jedna lub dwie wartości nie zostaną określone, spacje z nie określonymi wartościami będą miały taką samą szerokość jak ich przeciwieństwa. Na przykład, jeśli pominiesz ostatnią wartość (po lewej), wolna przestrzeń między lewą stroną ramki a zawartością elementu będzie taka sama, jak spacja po prawej stronie.</p>
<p>W HTML znaczniki podrzędne dziedziczą niektóre właściwości znaczników nadrzędnych. Na przykład wszystkie tagi kontenera <BODY>
(<
P
>oraz <span><UL>) będzie miał pewne właściwości tagu <BODY>. Ten sam tag <LI>dziedziczy właściwości tagów <UL>. Rozważ następujący kod:</p>
<p><STYLE TYPE="text/css"> <br>
Р (color: blue) <br>
</STYLE> <br>
<BODY><br>
<P>Cześć. To jest akapit tekstu. <EM>To jest podkreślone</EM><P>
</BODY>
</p>
<span>
<p>Arkusz stylów tego dokumentu ustawia kolor znacznika</p>
</span><
P
>
<span>jednak niebieski to kolor znacznika</span><EM>
<span>nie zdefiniowany wprost (domyślnie czarny). Nie ma się czym martwić, ponieważ ten tag znajduje się w kontenerze nadrzędnym <P>I w ten sposób dziedziczy kolor niebieski. <p>Czasami konieczne jest zdefiniowanie dwóch (lub więcej) stylów dla jednego tagu. Na przykład może być konieczne określenie dwóch stylów tagu <LI>: jeden, gdy jest objęty tagiem</p>
</span><UL>
<span>, a drugi, gdy podlega tagowi <UL>. Można to zrobić za pomocą selektorów kontekstowych. <p>Selektor kontekstu określa dokładną sekwencję tagów, do których zostanie zastosowany określony styl. Innymi słowy, możesz określić, że jakiś styl ma być zastosowany, na przykład w tagu <LI>tylko jeśli ten znacznik jest znacznikiem podrzędnym <OL>
:</p>
<p>OL LI (typ-listy: dziesiętny)</p>
<p>Dla tego samego tagu <LI>możesz zdefiniować inny styl, który jest ważny tylko wtedy, gdy jest podporządkowany tagowi <UL>
:</p>
<p>UL LI (typ listy: kwadrat)</p>
<p>Zauważ, że lista selektorów nie jest oddzielona przecinkami. W przeciwnym razie wszystkim znacznikom listy zostanie przypisany ten sam styl.</p>
<p>W wytycznych W3C arkusze stylów są określane jako „kaskadowe arkusze stylów”. <i>"
</i> ponieważ do układu strony internetowej można użyć nie jednej, ale kilku tabel jednocześnie. Jednocześnie widz sam określa kolejność korzystania z tabel i rozwiązuje konflikty między nimi na zasadzie kaskadowania. Na przykład arkusz stylów dla strony może być określony nie tylko przez jej autora, ale także przez czytelnika, a następnie kaskadowe reguły decydują, który arkusz stylów zacznie obowiązywać.</p>
<p>Jak to działa? Przeglądarka przypisuje wagę każdej regule. Interpretując każdy tag, program przegląda wszystkie reguły tego tagu i sortuje je według wartości współczynnika wagowego. Wygrywa najbardziej „ważna” zasada.</p>
<p>Istnieją następujące ogólne zasady rozwiązywania konfliktów między arkuszami stylów:</p>
<ul>
<p>Pierwszeństwo typów arkuszy stylów w dokumencie (w porządku malejącym): bieżące przypisanie stylu (inline), osadzanie, łączenie.</p>
</ul><p>Możesz również zmienić wagę reguły za pomocą słowa kluczowego ważne. W poniższym przykładzie wartość czerwonej właściwości</p>
</span> przełęcz <span>lub wartość bezszeryfowa właściwości font-family jest oznaczona tym słowem kluczowym i dlatego przeglądarka nie powinna ich zastępować. Jeśli jednak dwie takie reguły są sprzeczne, konflikt jest rozwiązywany zgodnie z zasadami przedstawionymi powyżej. <p>H1 (kolor: czerwony ! ważna grubość czcionki: pogrubiona rodzina czcionek: bezszeryfowa ! ważna)</p>
<p>Klasa to definicja kilku stylów jednego elementu, z których każdy może być użyty w odpowiednim miejscu na stronie. Na przykład można zdefiniować trzy odmiany stylu nagłówka H1. Definiowanie odmian jest podobne do określania stylu, do nazwy znacznika dodawana jest tylko dowolna nazwa klasy, oddzielona kropką:</p>
<p>H1 niebieski (kolor: niebieski) H1.red (kolor: czerwony) H1.black (kolor: czarny)</p>
<p>Teraz, w tym tag w dokumencie <H1>, możesz określić w nim określony styl za pomocą atrybutu CLASS:</p>
<p><H1 CLASS=red>czerwony nagłówek</H1>
</p>
</span></td></tr></table></td>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
<div class='yarpp-related'>
<h3>Powiązana zawartość:</h3>
<ol>
<li><a href="https://bazava.ru/pl/usluga-mts-vam-zvonili-chto-eto-kak-podklyuchit-otklyuchit.html" rel="bookmark" title="Usługa "Wezwano Cię" od MTS - Jak wyłączyć?">Usługa "Wezwano Cię" od MTS - Jak wyłączyć?</a></li>
<li><a href="https://bazava.ru/pl/chto-budet-esli-postavit-datu-01-01-1970-sbros-nastroek-i-polnyi-sbros-apple-iphone.html" rel="bookmark" title="Co się stanie, jeśli wpiszesz datę 01">Co się stanie, jeśli wpiszesz datę 01</a></li>
<li><a href="https://bazava.ru/pl/sbros-nastroek-i-polnyi-sbros-apple-iphone-sbros-nastroek-i-polnyi-sbros-apple.html" rel="bookmark" title="Reset do ustawień fabrycznych i twardy reset Apple iPhone Poprawa dokładności Touch ID">Reset do ustawień fabrycznych i twardy reset Apple iPhone Poprawa dokładności Touch ID</a></li>
<li><a href="https://bazava.ru/pl/samaya-moshchnaya-akusticheskaya-sistema-v-mire-audiofil-millioner.html" rel="bookmark" title="Audiofilski milioner: najdroższe gadżety muzyczne Najdroższe głośniki na świecie">Audiofilski milioner: najdroższe gadżety muzyczne Najdroższe głośniki na świecie</a></li>
</ol>
</div>
</div>
</article>
<nav class="nav-single">
<h3 class="assistive-text">Nawigacja po wpisach</h3>
<span class="nav-previous"><a href="https://bazava.ru/pl/smartfony-sony-smartfony-sony-vse-smartfony-soni-iksperiya.html" rel="prev"><span class="meta-nav">Smartfony Sony Wszystkie smartfony Sony Xperia</span> Sony Xperia X może być...</a>
</span>
<!-- /next_post -->
<span class="nav-next"><a href="https://bazava.ru/pl/uznaem-kto-udalilsya-iz-druzei-vkontakte-chto-delat-esli-vkontakte.html" rel="next">Co zrobić, jeśli znajomi VKontakte zniknęli Jak dowiedzieć się, kto usunął mnie ze znajomych na VK <span class="meta-nav">→</span></a>
</span>
<!-- /next_post -->
</nav>
<div id="disqus_thread">
</div>
</div>
</div>
<div id="secondary" class="widget-area" role="complementary">
<aside id="text-10" class="widget widget_text">
<div class="textwidget">
</div>
</aside>
<aside id="text-3" class="widget widget_text">
<div class="textwidget">
<div class="ya-site-form ya-site-form_inited_no" onclick="return { 'action':'/searchresult','arrow':false,'bg':'transparent','fontsize':12,'fg':'#000000','language':'uk','logo':'rb','publicname':'bazava.ru','suggest':true,'target':'_blank','tld':'ua','type':3,'usebigdictionary':true,'searchid':1,'input_fg':'#000000','input_bg':'#ffffff','input_fontStyle':'normal','input_fontWeight':'normal','input_placeholder':null,'input_placeholderColor':'#000000','input_borderColor':'#7f9db9'} ">
<form action="/" method="get" target="_blank"><input type="hidden" name="searchid" value="2265218" /><input type="hidden" name="l10n" value="Wielka Brytania" /><input type="hidden" name="reqenc" value="" /><input type="search" name="text" value="" /><input type="submit" value="Wiedzieć" /></form>
</div>
<style type="text/css">
.ya-page_js_yes .ya-site-form_inited_no {
display: none;
}
</style>
<script type="text/javascript">
(function(w, d, c) {
var s = d.createElement('script'),
h = d.getElementsByTagName('script')[0],
e = d.documentElement;
if ((' ' + e.className + ' ').indexOf(' ya-page_js_yes ') === -1) {
e.className += ' ya-page_js_yes';
}
s.type = 'text/javascript';
s.async = true;
s.charset = 'utf-8';
s.src = (d.location.protocol === 'https:' ? 'https:' : 'http:') + '//site.yandex.net/v2.0/js/all.js';
h.parentNode.insertBefore(s, h);
(w[c] || (w[c] = [])).push(function() {
Ya.Site.Form.init()
})
})(window, document, 'yandex_site_callbacks');
</script>
</div>
</aside>
<aside id="categories-2" class="widget widget_categories">
<h3 class="widget-title">Kategorie</h3>
<ul>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/internet/">Internet</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/programs/">Programy</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/windows/">Okna</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/devices/">Urządzenia</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/android/">Android</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/computer/">Komputer</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/pl/category/apple/">Jabłko</a>
</li>
</ul>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries">
<h3 class="widget-title">ostatnie wejścia</h3>
<ul>
<li>
<a href="https://bazava.ru/pl/registraciya-v-mezhdunarodnom-konkurse-yunyh-chtecov-zhivaya-klassika-lichnyi.html">Konto osobiste Klasyki na żywo Wejście na konto osobiste konkursu Klasyki na żywo</a>
</li>
<li>
<a href="https://bazava.ru/pl/propadayut-druzya-v-kontakte-chto-delat-esli-vkontakte-ischezli-druzya-kak.html">Co zrobić, jeśli przyjaciele VKontakte zniknęli</a>
</li>
<li>
<a href="https://bazava.ru/pl/kakoi-operator-okazalsya-luchshim-v-rossii-ogromnyi-otryv-vybiraem.html">Który operator okazał się najlepszy w Rosji</a>
</li>
<li>
<a href="https://bazava.ru/pl/luchshie-sovetskie-po-zvuku-kassetnye-magnitofony-kassetnye-magnitofony.html">Magnetofony kasetowe ZSRR (15 zdjęć)</a>
</li>
<li>
<a href="https://bazava.ru/pl/kak-skryt-stranicu-vkontakte-kakogo-chisla-zakryvayut-vk-vk-mogut.html">Kiedy VK jest zamknięty?</a>
</li>
<li>
<a href="https://bazava.ru/pl/chistka-sistemy-ohlazhdeniya-macbook-chistka-macbook-ot-pyli-chem-opasno-bolshoe.html">Czyszczenie MacBooka z kurzu Dlaczego duże nagromadzenie kurzu jest niebezpieczne?</a>
</li>
<li>
<a href="https://bazava.ru/pl/chistka-makbuka-ot-nenuzhnyh-failov-kak-pochistit-imac-ot-pyli.html">Jak wyczyścić iMaca z kurzu?</a>
</li>
<li>
<a href="https://bazava.ru/pl/ubiica-aifona-s6-ot-kitaicev-vsya-pravda-o-kitaiskih-ubiicah-iphone-ot-xiaomi.html">Cała prawda o chińskich „zabójcach” iPhone’ach od Xiaomi, LeEco, Meizu i OnePlus</a>
</li>
<li>
<a href="https://bazava.ru/pl/ne-gruzitsya-stranica-gugl-ochen-dolgo-zapuskaetsya-brauzer-google-chrome.html">Uruchomienie przeglądarki Google Chrome trwa zbyt długo</a>
</li>
<li>
<a href="https://bazava.ru/pl/chto-luchshe-komp-ili-nout-chto-luchshe-dlya-programmista-luchshe-vybrat.html">Co jest lepsze dla programisty?</a>
</li>
</ul>
</aside>
<aside id="text-7" class="widget widget_text">
<div class="textwidget">
</div>
</aside>
</div>
</div>
<footer id="colophon" role="contentinfo">
<div class="site-info">
<a href="https://bazava.ru/pl/" title="Strona główna Portal sprzętu">Strona główna Portal sprzętu</a>
</div>
</footer>
</div>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "visibility_show":"show","visibility_hide":"hide","width":"Auto"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/wpfront-scroll-top/js/wpfront-scroll-top.min.js?ver=1.6'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-1", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-7'] } ;
</script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://bazava.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.9.1'></script>
<div id="wpfront-scroll-top-container"><img src="https://bazava.ru/wp-content/plugins/wpfront-scroll-top/images/icons/1.png" alt="" / loading=lazy loading=lazy></div>
<script type="text/javascript">function wpfront_scroll_top_init() { if(typeof wpfront_scroll_top == "function" && typeof jQuery !== "undefined") { wpfront_scroll_top({ "scroll_offset":100,"button_width":0,"button_height":0,"button_opacity":0.8,"button_fade_duration":200,"scroll_duration":400,"location":1,"marginX":20,"marginY":20,"hide_iframe":false,"auto_hide":false,"auto_hide_after":2} );} else { setTimeout(wpfront_scroll_top_init, 100);} }wpfront_scroll_top_init();</script>
</body>
</html>
|
