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”>
Stiluri</
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
>antet</
h1
><br>
<р>Text</
р><br>
</
body
><br>
</
html
></p>
</td>
</tr></tbody></table><p>Și fișierul de stil va arăta astfel:</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>culoare: #000080; <br>dimensiunea fontului: 2em; <br>font-family : Arial, Verdana, sans-serif ; <br>text-align : centru ; <span>/* Alinierea la centru */</span><br>}
<br>P( <br>padding -stânga : 20px ; <br>}
</p>
</td>
</tr></tbody></table><p>După cum puteți vedea din codul de mai sus, pe pagina html este adăugată o intrare care îi spune browserului de unde să obțină stilurile. Fișierul de stil în sine conține doar descrierea stilurilor. Această separare a codului html și css facilitează dezvoltarea și întreținerea site-urilor. Acest stil de aspect este recomandat să fie urmat.</p>
<h3>Stiluri globale</h3>
<p>Când se utilizează stiluri globale, proprietățile CSS sunt descrise în documentul însuși și se află în titlul paginii web. În ceea ce privește flexibilitatea și capacitățile, această metodă de adăugare a stilului este inferioară celei anterioare, dar vă permite și să stocați stiluri într-un singur loc, în acest caz chiar pe pagină folosind un container. <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/ro/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>. Stilurile interne au prioritate față de stilurile externe, dar înlocuiesc stilurile inline (specificate prin atributul stil).</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. Stiluri inline</h4>
<p>Când scriem <b>stiluri inline</b>, scriem codul CSS în fișierul HTML, direct în interiorul etichetei elementului folosind atributul style:</p><p>
<p style="font-weight: bold; color: red;">Fii atent la acest text.</p>
</p><p>Astfel de stiluri afectează numai elementul pentru care sunt setate.</p>
<h4>1.4. regulă @import</h4>
<p><b>regulă @import</b> vă permite să încărcați foi de stil externe. Pentru ca directiva @import să funcționeze, aceasta trebuie să fie plasată în foaia de stil (externă sau internă) înaintea tuturor celorlalte reguli:</p><p>
<style>
@import url(mobile.css);
p {
font-size: 0.9em;
color: grey;
}
</style>
</p><p>Regula @import este folosită și pentru a include fonturi web:</p><p>@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);</p><h3>2. Tipuri de selectoare</h3>
<p><b>Selectoare</b> reprezintă structura unei pagini web. Sunt folosite pentru a crea reguli pentru formatarea elementelor paginii web. Selectorii pot fi elemente, clasele și identificatorii acestora, precum și pseudo-clase și pseudo-elemente.</p>
<h4>2.1. Selector universal</h4>
<p>Se potrivește cu orice element HTML. De exemplu, * (marja: 0;) va reseta marginile pentru toate elementele site-ului. Un selector poate fi folosit și în combinație cu o pseudo-clasă sau pseudo-element: *:after (stiluri CSS) , *:checked (stiluri CSS) .</p>
<h4>2.2. Selector de elemente</h4>
<p>Selectoarele de elemente vă permit să formatați toate elementele <a href="https://bazava.ru/ro/tipy-dannyh-standartnye-tipy-dannyh-standartnye-funkcii-standartnye.html">de acest tip</a> pe toate paginile site-ului. De exemplu, h1 (familie de fonturi: homar, cursiv;) va seta stilul general de formatare pentru toate titlurile h1.</p>
<h4>2.3. selector de clasă</h4>
<p>Selectorii de clasă vă permit să stilați unul sau mai multe elemente cu același nume de clasă, plasate în locuri diferite pe pagină sau pe <a href="https://bazava.ru/ro/yandeks-glavnaya-stranica-5-kak-yandeks-sdelat-startovoi-stranicei-v.html">pagini diferite</a> site-ul. De exemplu, pentru a crea un titlu cu clasa de titlu, adăugați atributul de clasă cu titlul de valoare la eticheta de deschidere <h1>și setați stilul pentru clasa specificată. Stilurile create cu o clasă pot fi aplicate altor elemente, nu neapărat de acel tip.</p><p>
<h1 class="headline">Manual de utilizare <a href="https://bazava.ru/ro/iz-chego-sostoit-kompyuter-ustroistvo-sovremennogo-personalnogo-kompyutera-i-ego-osnovnye-sostavlyayu.html">calculator personal</a></h1>.titlu (text-transform: majuscule; culoare: albastru deschis; )</p><h4>2.4. Selector ID</h4>
<p>Selectorul ID permite formatarea <b>unu</b> element specific. ID-ul trebuie să fie unic și poate apărea o singură dată pe o singură pagină.</p><p>
<div id="sidebar"></div>#sidebar ( lățime: 300px; float: stânga; )</p><h4>2.5. Selector de descendenți</h4>
<p>Selectorii descendenți aplică stiluri elementelor situate în interiorul unui element container. De exemplu, ul li (text-transform: majuscule;) va selecta toate elementele li care sunt copii ale tuturor elementelor ul.</p>
<p>Dacă doriți să formatați copiii unui anumit element, trebuie să dați acelui element o clasă de stil:</p>
<p>p.first a (culoare: verde;) - acest stil va fi aplicat tuturor legăturilor, descendenți ai paragrafului cu clasa întâi ;</p>
<p>p .first a (culoare: verde;) - dacă adăugați un spațiu, atunci linkurile situate în interiorul oricărei etichete .first class care este un copil al elementului vor fi stilate <p>Mai întâi a (culoare: verde;) - acest stil va fi aplicat oricărui link situat în interiorul altui element, notat cu clasa .first.</p>
<h4>2.6. Selector de copii</h4>
<p>Un element copil este un copil direct al elementului său care îl conține. Un element poate avea mai multe elemente copil, iar fiecare element poate avea doar un element părinte. Selectorul copil permite aplicarea stilurilor numai dacă elementul copil vine imediat după elementul părinte și nu există alte elemente între ele, adică elementul copil nu este imbricat în nimic altceva. <br>De exemplu, p > strong va selecta toate elementele puternice care sunt copii ale elementului p.</p>
<h4>2.7. Sora selectoare</h4>
<p>Relațiile de frați apar între elemente care au un părinte comun. Selectoarele de elemente frați vă permit să selectați elemente dintr-un grup de elemente frați.</p>
<p>h1 + p - selectează toate primele paragrafe imediat după orice etichetă <h1>fără a afecta restul paragrafelor;</p>
<p>h1 ~ p va selecta toate paragrafele care sunt frați cu orice titlu h1 și imediat după acesta.</p>
<h4>2.8. Selector de atribute</h4>
<p>Selectorii de atribute selectează elemente în funcție de numele sau valoarea atributului:</p>
<p>[atribut] - toate elementele care conțin atributul specificat, - toate elementele pentru care este setat atributul alt;</p>
<p>selector[atribut] - elemente de acest tip care contin atributul specificat, img - doar pozele pentru care este setat atributul alt;</p>
<p>selector[atribut="valoare"] - elemente de acest tip care conțin atributul specificat cu <a href="https://bazava.ru/ro/kak-poschitat-v-eksel-kolichestvo-konkretnyh-znachenii-podschet.html">sens specific</a>, img — toate imaginile al căror titlu conține cuvântul floare ;</p>
<p>selector[atribut~="valoare"] - elemente care conțin parțial <a href="https://bazava.ru/ro/chto-znachit-oshibka-pri-poluchenii-dannyh-znacheniya-i-resheniya-oshibok-v-play.html">valoare dată</a>, de exemplu, dacă un element are mai multe clase separate printr-un spațiu, p sunt paragrafe al căror nume de clasă conține caracteristica ;</p>
<p>selector[atribut|="valoare"] - elemente a căror listă de valori de atribut începe cu cuvântul specificat, p - paragrafe al căror nume de clasă prezintă sau începe cu caracteristică;</p>
<p>selector[atribut^="valoare"] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http:// ;</p>
<p>selector[attribute$="valoare"] - elemente a căror valoare de atribut se termină cu valoarea specificată, img - toate imaginile în format png;</p>
<p>selector[atribut*="valoare"] - elemente a căror valoare de atribut conține cuvântul specificat oriunde, a - toate linkurile al căror nume conține book .</p>
<h4>2.9. Selector de pseudo-clase</h4>
<p>Pseudo-clasele sunt clase care nu sunt atașate etichetelor HTML. Acestea vă permit să aplicați reguli CSS elementelor atunci când are loc un eveniment sau respectă o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:</p>
<p>:hover - orice element care este trecut cu cursorul mouse-ului;</p>
<p>:focus - un element interactiv la care a fost navigat cu tastatura sau activat cu mouse-ul;</p>
<p>:active - elementul care a fost activat de utilizator;</p>
<p>:valid - câmpuri de formular al căror conținut a fost validat în browser pentru conformitatea cu tipul de date specificat;</p>
<p>:invalid - câmpuri de formular al căror conținut nu corespunde tipului de date specificat;</p>
<p>:activat - toate câmpurile de formular active;</p>
<p>:disabled - câmpuri de formular dezactivate, adică într-o stare inactivă;</p>
<p>:in-range - câmpuri de formular ale căror valori sunt în intervalul specificat;</p>
<p>:out-of-range - câmpuri de formular ale căror valori nu sunt incluse în intervalul setat;</p>
<p>:lang() - elemente cu text în limba specificată;</p>
<p>:not(selector) - elemente care nu conțin selectorul specificat - clasă, identificator, nume sau tip câmp de formular - :not() ;</p>
<p>:target este elementul # la care se face referire în document;</p>
<p>:checked - elemente de formular selectate (selectate de utilizator).</p>
<h4>2.10. Selector structural de pseudo-clasă</h4>
<p>Pseudoclase structurale selectează elementele copil conform parametrului specificat în paranteze:</p>
<p>:nth-child(odd) - elemente copil impar;</p>
<p>:nth-child(even) - chiar elemente copil;</p>
<p>:nth-child(3n) - fiecare al treilea element dintre copii;</p>
<p>:nth-child(3n+2) - selectează fiecare al treilea element, începând de la al doilea element copil (+2) ;</p>
<p>:nth-child(n+2) - selectează toate elementele, începând cu al doilea;</p>
<p>:nth-child(3) - selectează al treilea element copil;</p>
<p>:nth-last-child() - în lista de elemente copil, selectează elementul cu locația specificată, similar cu :nth-child() , dar începând de la ultimul, în sens invers;</p>
<p>:first-child - vă permite să stilați doar primul element copil al etichetei;</p>
<p>:last-child - vă permite să formatați ultimul element copil al etichetei;</p>
<p>:only-child - selectează un element care este singurul copil;</p>
<p>:empty - selectează elemente care nu au copii;</p>
<p>:root - selectează elementul care este rădăcina documentului - elementul html.</p>
<h4>2.11. Selector de pseudo-clase de tip structural</h4>
<p>Indicați un anumit tip de etichetă copil:</p>
<p>:nth-of-type() - selectează elemente prin analogie cu :nth-child() , luând în considerare doar tipul elementului;</p>
<p>:first-of-type - selectează primul copil al tipului dat;</p>
<p>:last-of-type - selectează ultimul element din tipul dat;</p>
<p>:nth-last-of-type() - selectează un element de tipul dat în lista de elemente în funcție de locația specificată, începând de la sfârșit;</p>
<p>:only-of-type - selectează singurul element de tipul specificat dintre copiii elementului părinte.</p>
<h4>2.12. Selector de pseudo-element</h4>
<p>Pseudo-elementele sunt folosite pentru a adăuga conținut care este generat folosind proprietatea conținut:</p>
<p>:first-letter - selectează prima literă a fiecărui paragraf, se aplică doar elementelor bloc;</p>
<p>:first-line - selectează prima linie a textului elementului, se aplică numai elementelor bloc;</p>
<p>:before - inserează conținutul generat înaintea elementului;</p>
<p>:after - Adaugă conținut generat după element.</p>
<h3>3. Combinație de selectoare</h3>
<p>Pentru o selecție mai precisă a elementelor pentru formatare, puteți utiliza combinații de selectoare:</p>
<p>img:nth-of-type(even) - va selecta toate imaginile par al căror text alternativ conține cuvântul css .</p>
<h3>4. Gruparea selectoarelor</h3>
<p>Același stil poate fi aplicat mai multor elemente în același timp. Pentru a face acest lucru, în partea stângă a declarației, enumerați selectorii necesari, despărțiți prin virgule:</p><p>H1, h2, p, span (culoare: roșie; fundal: alb; )</p><h3>5. Moștenire și cascadă</h3>
<p>Moștenirea și cascada sunt două concepte fundamentale în CSS care sunt strâns legate. Moștenirea înseamnă că elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă în mod <a href="https://bazava.ru/ro/chto-takoe-kesh-pochemu-i-kak-nuzhno-chistit-raznye-ego-vidy-kak.html">tipuri diferite</a> foile de stil sunt aplicate documentului și modul în care regulile conflictuale se suprascriu reciproc.</p>
<h4>5.1. Moştenire</h4>
<p><b>Moştenire</b> este mecanismul prin care anumite proprietăți sunt transmise de la un strămoș la descendenții săi. Specificația CSS prevede moștenirea proprietăților legate de conținutul text al unei pagini, cum ar fi culoarea , fontul , spațierea literei , înălțimea liniilor , stilul listei , alinierea textului , indentarea textului , transformarea textului , vizibilitatea , spații albe și spațiere între cuvinte. În multe cazuri, acest lucru este convenabil deoarece nu trebuie să setați dimensiunea și familia de fonturi pentru fiecare element de pe pagina web.</p>
<p>Proprietățile de formatare a blocurilor nu sunt moștenite. Acestea sunt fundal , chenar , afișare , float și clar , înălțime și lățime , margine , min-max-înălțime și -lățime , contur , overflow , padding , position , text-decoration , vertical-align and z-index .</p>
<h5>Moștenirea forțată</h5>
<p>Puteți utiliza cuvântul cheie moștenire pentru a forța un element să moștenească orice valoare de proprietate din elementul părinte. Acest lucru funcționează chiar și pentru proprietăți care nu sunt moștenite în mod implicit.</p>
<h5>Cum sunt setate și cum funcționează stilurile CSS</h5>
<p>1) Stilurile pot fi moștenite de la elementul părinte (proprietăți moștenite sau folosind valoarea de moștenire);</p>
<p>2) Stilurile din foaia de stil de mai jos suprascrie stilurile din foaia de stil de mai sus;</p>
<p>3) Un element poate fi stilat <a href="https://bazava.ru/ro/effektivnye-metody-i-priemy-raboty-s-informaciei-rabota-s.html">surse diferite</a>. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator al browserului. Pentru a face acest lucru, faceți clic pe element. <a href="https://bazava.ru/ro/how-to-delete-if-the-right-mouse-button-does-not-work-when-you-rightclick-on-a-folder-or-file-the-computer-hangs-indefinitely.html">Click dreapta</a> mouse-ul și selectați „Vizualizare cod” (sau ceva similar). Coloana din dreapta va lista toate proprietățile care sunt setate pentru acest element sau moștenite de la elementul părinte, precum și fișierele de stil în care sunt specificate și numărul de serie al liniei de cod.</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>Orez. 2. Modul dezvoltator în <a href="https://bazava.ru/ro/how-to-check-extensions-in-the-yandex-browser-how-to-enable-extensions-disabled-by-google-chrome-browser.html">browser Google</a> Crom <p>4) Când definiți un stil, puteți utiliza orice combinație de selectoare - un selector de element, o pseudo-clasă de element, o clasă sau un identificator de element.</p><p>
<div id="wrap" class="box clear"></div> div (chenar: 1px solid #eee;) #wrap (lățime: 500px;) .box (float: stânga;) .clear (clear: ambele;)</p><h4>5.2. Cascadă</h4>
<p><b>În cascadă</b> este un mecanism care controlează rezultatul final într-o situație în care reguli CSS diferite sunt aplicate aceluiași element. Există trei criterii care determină ordinea în care sunt aplicate proprietățile - regula !importantă, specificitatea și ordinea în care sunt incluse foile de stil.</p>
<h5>Regulă!important</h5>
<p>Greutatea unei reguli poate fi specificată folosind cuvântul cheie !important, care este adăugat imediat după valoarea proprietății, de exemplu, span (font-weight: bold!important;) . Regula trebuie pusă la sfârșitul declarației înaintea parantezei de închidere, fără spațiu. O astfel de declarație va avea prioritate față de toate celelalte reguli. Această regulă vă permite să anulați valoarea unei proprietăți și să setați una nouă pentru un element dintr-un grup de elemente în cazul în care nu există acces direct la fișierul de stil.</p>
<h5>Specificitate</h5>
<p>Pentru fiecare regulă, browserul calculează <b>specificitatea selectorului</b>, iar dacă elementul are declarații de proprietate conflictuale, se ia în considerare regula cu cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0 . Specificitatea selectorului este definită după cum urmează:</p>
<p>0, 1, 0, 0 se adaugă pentru id; <br>pentru clasa 0, 0, 1, 0 se adaugă; <br>Se adaugă 0, 0, 0, 1 pentru fiecare element și pseudo-element; <br>pentru un stil inline adăugat direct unui element, 1, 0, 0, 0 ; <br>selectorul universal nu are specificitate.</p><p>H1 (culoare: albastru deschis;) /*specificitate 0, 0, 0, 1*/ em (culoare: argintiu;) /*specificitate 0, 0, 0, 1*/ h1 em (culoare: auriu;) /*specificitate: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (culoare: albastru;) /*specificitate: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (culoare: gri;) /*specificitate 0, 0, 1, 0 */ #sidebar (culoare: portocaliu;) /*specificitate 0, 1, 0, 0*/ li#sidebar (culoare: aqua;) /*specificitate: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/</p><p>Ca urmare, acele reguli, a căror specificitate este mai mare, vor fi aplicate elementului. De exemplu, dacă un element are două specificități cu valorile 0, 0, 0, 2 și 0, 1, 0, 1, atunci a doua regulă va câștiga.</p>
<h5>Ordinea meselor conectate</h5>
<p>Puteți crea mai multe foi de stil externe și le puteți lega la aceeași pagină web. Dacă în <a href="https://bazava.ru/ro/otlichie-5-ot-5s-tablica-kak-vizualno-otlichit-raznye-modeli-aifonov.html">mese diferite</a> se va întâlni <a href="https://bazava.ru/ro/kak-ispolzovat-cvetovye-kody-dlya-cvetov-cvet-v-stilyah-mozhno.html">sensuri diferite</a> proprietățile unui element, apoi, ca rezultat, regula care se află în foaia de stil din lista de mai jos va fi aplicată elementului.</p>
<p>Puteți combina mai multe proprietăți CSS asociate într-o singură proprietate pentru a economisi timp și efort.</p> <h3>Compararea valorilor individuale și abreviate</h3><p>Luați în considerare următoarea regulă pentru margini (abrevierile pentru umplutură și chenare funcționează în același mod):</p><p>div.foo ( margine-sus: 1em; margine-dreapta: 1,5em; margine-jos: 2em; margine-stânga: 2,5em; )</p><p>Această regulă poate fi scrisă mai scurt:</p><p>div.foo (marja: 1em 1.5em 2em 2.5em; )</p> <h3>Specificarea mai puțin de patru valori pentru o proprietate scurtă</h3><p>Valoarea prescurtată poate avea mai puțin de patru valori, după cum este listat mai jos. Rezultatele sunt ordonate după numărul de valori furnizate:</p> <h3>Director de abrevieri</h3><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><td bgcolor="#eaeaea" valign="top">Reduceri de limite pentru diverse proprietăți</td>
<td bgcolor="#eaeaea" valign="top">
<p>De asemenea, trebuie menționat că puteți seta chiar și valorile proprietăților de margine (border ) pentru un singur chenar al unui element, după cum urmează:</p>
<p>chenar-stânga-lățime: 2px; border-left-style: solid; chenar-stânga-culoare: negru;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Comenzi rapide pentru unele proprietăți de margine (margină), padding (padding) și chenar (border).</td>
<td bgcolor="#eaeaea" valign="top">Toate acestea funcționează în același mod ca cel arătat mai sus în secțiunea „Alegerea între o singură proprietate și o comandă rapidă” de mai sus.</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Abrevieri de font</td>
<td bgcolor="#eaeaea" valign="top">Cu o singură linie de abreviere, puteți defini dimensiunea fontului, greutatea, stilul, familia și înălțimea liniei. De exemplu, luați în considerare următorul cod: <p>dimensiunea fontului: 1,5 em înălțimea liniei: 200% greutatea fontului: bold; font-style: italic; familie de fonturi: Georgia, „Times New Roman”, serif</p> Puteți defini toate acestea cu următoarea linie: <p>font: 1,5 em/200% aldine cursive Georgia, „Times New Roman”, serif;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Abreviere pentru fundal</td>
<td bgcolor="#eaeaea" valign="top">Cu o singură linie de CSS, puteți defini culoarea de fundal, imaginea de fundal, repetarea imaginii și poziția imaginii. Să luăm următorul cod: <p>culoare de fundal: #000; imagine de fundal: url(image.gif); background-repeat: fără repetare; fundal-poziție: stânga sus;</p> Aceasta poate fi reprezentată cu următoarea abreviere: <p>background:#000 url(image.gif) fără repetare, sus, stânga;</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">Abrevieri pentru liste</td>
<td bgcolor="#eaeaea" valign="top">În acest caz, o poveste similară cu <span>listă proprietăți</span> vă permite să setați valorile proprietăților pentru tipul, poziția și imaginea marcatorului de listă pe o singură linie. Să luăm următorul cod: <p>list-style-type: cerc; list-style-position: interior; list-style-image: url(bullet.gif) ;</p> Aceasta este echivalentă cu următoarele: <p>list-style: cerc în interiorul url(bullet.gif);</p>
</td>
</tr><tr><td bgcolor="#eaeaea" valign="top">
</td>
<td bgcolor="#eaeaea" valign="top">
</td>
</tr></table><h3>Aplicarea CSS la HTML</h3><p>Există trei moduri de a aplica CSS unui document HTML:</p><ul><li>şir;</li>
<li>cuibărit;</li>
<li>foi de stil externe.</li>
</ul><h3>Stiluri de linii</h3><p>Puteți aplica o foaie de stil unui element folosind atributul de stil astfel:</p><p>În cadrul acestui atribut, sunt listate toate proprietățile CSS și valorile acestora.</p><p>Avantajul stilurilor inline este că browserul va fi forțat să folosească aceste setări. Toate celelalte stiluri definite în alte foi de stil sau chiar imbricate în interior <span>titlul documentului</span>, vor fi înlocuite de aceste stiluri.</p><p>O problemă serioasă cu stilurile în linie este că fac întreținerea stilului mult mai dificilă. <a href="https://bazava.ru/ro/primery-css-dlya-hlebnyh-kroshek-sozdanie-ploskih-hlebnyh-kroshek-s-ispolzovaniem-css-klassicheskoe.html">Folosind CSS</a> are scopul de a separa prezentarea unui document de structura sa, dar stilurile inline fac exact opusul - dispersează regulile de prezentare pe tot documentul.</p><p>În afară de problemele de întreținere, nu veți obține niciun beneficiu din partea esențială a CSS în sine: cascada.</p> <h3>Stiluri imbricate</h3><p>Foile de stil imbricate sunt plasate în capul documentului în interiorul unui element de stil, ca în următoarea pagină de exemplu:</p><p><style type="text/css" media="screen">
p {
color:white;
background:blue;
padding:5px;
}
</style></p><p>Avantajul foilor de stil imbricate este că nu trebuie să adăugați un atribut de stil la fiecare paragraf - le puteți stila pe toate cu o singură definiție. Aceasta înseamnă, de asemenea, că dacă trebuie să te schimbi <a href="https://bazava.ru/ro/akkumulyator-i-vremya-raboty-vneshnii-vid-materialy-upravlyayushchie.html">aspect</a> toate paragrafele, va fi posibil să faceți acest lucru într-un singur loc, cu toate acestea, toate acestea sunt totuși limitate la un singur document.</p> <h3>Foi de stil externe</h3><p>Foile de stil externe înseamnă plasarea tuturor definițiilor CSS într-un fișier separat, salvarea acestuia cu o extensie de fișier CSS și apoi aplicarea documentelor HTML folosind elementul <i>legătură</i>în titlul documentului. De exemplu:</p><p><link rel="stylesheet" href="styles.css"
type="text/css" media="screen"></p><p>Foile de stil externe vă permit să stocați toate definițiile de stil într-un singur fișier. Aceasta înseamnă că puteți face modificări întregului site schimbând doar unul. <a href="https://bazava.ru/ro/vstroennyi-perevodchik-veb-resursov-i-kontenta-v-yandex-browser-kak-nastroit.html">browser web</a> cu toate acestea, îl poate descărca o dată și apoi îl poate stoca în cache pentru toate celelalte documente care se referă la el, ceea ce reduce cantitatea de informații descărcate.</p> <h3>Importul foilor de stil</h3><p>Există o altă modalitate de a importa foi de stil externe în <a href="https://bazava.ru/ro/kak-otkryt-fail-html-chto-takoe-htm-ili-html-fail-kak-prochitat-fail-html-na.html">fișiere HTML</a>- declarație @import. Este inserat într-o foaie de stil imbricată, în același mod ca și CSS imbricat prezentat mai sus. Sintaxa arată astfel:</p><p><style type="text/css" media="screen">
@import url("styles.css");
другие операторы импорта или стили CSS.
</style></p><p>Cele două concepte fundamentale ale CSS sunt <i>moştenire</i>și <i>în cascadă</i>. <b>Moştenire</b> are de-a face cu modul în care un element din marcajul HTML moștenește proprietățile elementelor sale strămoși (în care este conținut) și le transmite descendenților săi, în timp ce <b>în cascadă</b> se ocupă de declarațiile CSS care se aplică unui document și de modul în care regulile conflictuale se suprascriu reciproc.</p> <h3>Moştenire</h3><p><b>Moştenire</b>în CSS, este mecanismul prin care anumite proprietăți sunt transmise de la un element strămoș la elementele sale descendente.</p><p>Folosind moștenirea, puteți, de exemplu, defini proprietățile fontului pentru elementele html sau body, iar acestea vor fi moștenite de toate celelalte elemente. Puteți defini culorile de fundal și de prim-plan pentru un anumit element de container, iar culoarea de prim-plan va fi moștenită automat de elementele descendente din acel container.</p><p>Fiecare element din <a href="https://bazava.ru/ro/kakoi-teg-dobavlyaet-izobrazhenie-v-html-dokument-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche-video.html">document HTML</a> va moșteni toate proprietățile moștenite ale strămoșului său, cu excepția <a href="https://bazava.ru/ro/the-root-element-is-xml-xml-is-a-free-extensible-markup-language.html">element rădăcină</a>(html ) care nu are părinte.</p> <h3>În cascadă</h3><p><b>În cascadă</b> este mecanismul care guvernează rezultatul final atunci când mai multe declarații CSS conflictuale sunt aplicate aceluiași element. Există trei concepte principale care guvernează ordinea în care sunt aplicate declarațiile CSS:</p><ul><li>Importanţă</li>
<li>Specificitate</li>
<li>Ordin <a href="https://bazava.ru/ro/kak-posmotret-skrytye-foto-v-kontakte-cherez-ishodnyi-kod.html">cod sursa</a></li>
</ul><p><i>Importanţă</i> este cel mai semnificativ. Dacă două declarații sunt de importanță egală, specificul regulilor determină care dintre ele va fi aplicată. Dacă regulile au aceeași specificitate, atunci ordinea codului sursă controlează rezultatul.</p> <h3>Importanţă</h3><p><b>Importanţă</b> Declarațiile CSS depind de locul în care sunt definite. Declarațiile aflate în conflict se vor aplica în următoarea ordine, cele ulterioare le vor înlocui pe cele anterioare:</p><ul><li>Foi de stil pentru agentul utilizatorului</li>
<li>Declarații obișnuite în foile de stil ale utilizatorului</li>
<li>Declarații regulate în foile de stil ale autorului</li>
<li>Declarații importante în foile de stil ale autorului</li>
<li>Declarații importante în foile de stil ale utilizatorului</li>
</ul><p><i>Foaie de stil agent utilizator</i> este foaia de stil încorporată în browser. Fiecare browser are propriile reguli implicite care determină modul de afișare a diferitelor <a href="https://bazava.ru/ro/css-fiksirovannyi-razmer-pri-lyuboi-shirine-bordyura-bonus.html">elemente HTML</a> dacă nu este definit niciun stil de utilizator sau de designerul paginii. De exemplu, linkurile nevizitate vor apărea de obicei în albastru și subliniate.</p><p><i>Foaie de stil utilizator</i> este o foaie de stil definită de utilizator. Nu toate browserele acceptă foi de stil pentru utilizatori, dar pot fi foarte utile, mai ales pentru utilizatorii cu anumite tipuri de deficiențe funcționale. De exemplu, o persoană cu dislexie poate avea o foaie de stil care definește anumite fonturi și culori care fac mai ușor de citit.</p><p><i>Foaie de stil autor</i> este ceea ce se numește de obicei „foaia de stil”. Aceasta este o foaie de stil pe care autorul documentului (sau mai probabil designerul site-ului) a scris-o și inclusă (sau inclusă).</p><p>Pentru a transforma o declarație obișnuită într-una importantă, trebuie să plasați o directivă !importantă în spatele ei. După cum puteți vedea, declarațiile importante din foaia de stil a utilizatorului vor suprascrie orice altceva, ceea ce are sens.</p><p>Vizualizarea implicită a browserului va fi aplicată numai dacă aceste declarații nu sunt înlocuite de nicio regulă din foaia de stil a utilizatorului sau foaia de stil a autorului, deoarece foaia de stil a agentului utilizator are cea mai mică prioritate.</p> <h3>Specificitate</h3><p><b>Specificitate</b> este definită ca o măsură a cât de specific este selectorul unei reguli. Un selector specific scăzut poate potrivi mai multe elemente (cum ar fi *, care se potrivește cu fiecare element din document), în timp ce un selector specific înalt poate potrivi doar un element pe pagină (cum ar fi #nav , care se potrivește numai elementului cu un id care se potrivește nav).</p><p>Specificitatea selectorului poate fi ușor de calculat. Dacă două sau mai multe declarații sunt în conflict pentru un element dat și toate declarațiile sunt de importanță egală, atunci declarația cu cel mai specific selector va avea prioritate în regulă.</p><p>Specificitatea are patru componente, care pot fi denumite a, b, c și d. Componenta a este cea mai delimitantă, d este cea mai mică.</p><ul><li>Componenta a este definită foarte simplu: este 1 pentru declarația atributului de stil, altfel este 0 .</li>
<li>componenta b <i>
</i> este numărul de selectori de id <i>
</i>în selector (cele care pornesc <i>cu</i>#).</li>
<li>Componenta c <i>
</i> este un număr <span>selectoare de atribute</span>, inclusiv selectori de clasă - și pseudo-clase.</li>
<li>Componenta d este numărul de tipuri de elemente și pseudo-elemente din selector.</li>
</ul><p>După un mic calcul, puteți obține un șir din aceste patru componente, care determină specificul oricărei reguli. Declarațiile CSS din atributul style nu au un selector, deci specificitatea lor va fi întotdeauna 1,0,0,0 .</p><p>Tabelul prezintă câteva exemple.</p><table border="0" class="xml_table" cellpadding="2" cellspacing="1"><tr><th bgcolor="#d8d8d8"><b>Selector</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>Specificitate</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">.foo</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>head+body 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>Rețineți că caracterele de conectare (cum ar fi > , + și</p>
<td width="620">
<br><a href="https://bazava.ru/ro/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">Aplicarea unei foi de stil la un document</a> <br><br><a href="https://bazava.ru/ro/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">Încorporarea foilor de stil într-un document</a> <br><a href="https://bazava.ru/ro/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">Setarea unui stil pentru un singur fragment dintr-un document</a> <br><a href="https://bazava.ru/ro/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">Importul unei foi de stil</a> <br><br><a href="https://bazava.ru/ro/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">Specificarea mai multor proprietăți în același timp</a> <br><a href="https://bazava.ru/ro/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">Selectoare de grupare</a> <br><a href="https://bazava.ru/ro/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">Comentând o foaie de stil</a> <br><a href="https://bazava.ru/ro/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">Proprietăți de stil</a> <br><a href="https://bazava.ru/ro/t_st.htm#%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20background">proprietăți de fundal</a> <br><a href="https://bazava.ru/ro/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">Elemente de încadrare</a> <br><a href="https://bazava.ru/ro/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">Listă proprietăți</a> <br><a href="https://bazava.ru/ro/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">Proprietăți text</a> <br><a href="https://bazava.ru/ro/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">Proprietăți de grupare pentru definirea mai ușoară a stilului</a> <br><a href="https://bazava.ru/ro/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">Moștenirea proprietății</a> <br><a href="https://bazava.ru/ro/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">Utilizarea selectoarelor contextuale</a> <br><a href="https://bazava.ru/ro/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">De ce foile de stil sunt numite în cascadă</a> <br><br><p>Foile de stil sunt furnizate de recomandările W3C și sunt un instrument standard pentru formatarea paginilor Web folosind abordări de publicare desktop. Microsoft Internet Explorer 3.0 a fost primul browser care a suportat foi de stil. Browserul Netscape Navigator acceptă foi de stil începând cu versiunea 4.0B2 (Beta 2), disponibilă din februarie 1997.</p>
<p>Detalii despre recomandările W3C pot fi găsite la: h <span>ttp://www.w3.org/pub/WWW/TR/WD-cssl.html</span> . <span>Standardul W3C folosește termenul „cascading style sheets level 1 (CSSI”).</p>
<span>
<p>Pentru început, este necesar să clarificăm ce se înțelege prin denumirea „foi de stil”. Majoritatea editoarelor de text moderne permit utilizatorului să definească stilul care va fi folosit pentru formatarea documentului. În special, puteți alege un stil de paragraf cu o singură spațiere între rânduri, font Courier și o marjă stângă de un inch. Acest stil de formatare poate fi apoi aplicat la orice număr de paragrafe din acest document și din alte documente. Foi de stil NT</p>
</span> M <span>L acționează exact în același mod. Mai jos este o listă scurtă a principalelor caracteristici:</span>
<span>
<ul><p>Modificarea distanței dintre linii, cuvinte și caractere individuale.</p>
<p>Setează marginile din stânga, dreapta, de sus și de jos ale unui element (un bloc de text container HTML).</p>
<p>Setați umplutura unui element.</p>
<p>Modificați dimensiunea, stilul și alte atribute ale fontului unui element.</p>
<p>Setează o chenar în jurul unui element.</p>
<p>Includere <a href="https://bazava.ru/ro/how-to-replace-the-background-image-how-to-change-the-background-in-photoshop.html">imagine de fundal</a>și culoarea de fundal a elementului.</p>
</ul></span>
<p>Marele avantaj al foilor de stil HTML este capacitatea de a separa operația de formatare de conținutul documentului. În primul rând, se stabilește cum ar trebui să arate textul într-un loc sau altul pe pagină, apoi introduceți textul în sine. Dacă vă decideți mai târziu, de exemplu, să schimbați culoarea fontului titlurilor în albastru, va fi suficient să schimbați doar stilul acestor titluri. Nu trebuie să faceți nicio modificare textului. <i>.
</i></p>
<p>Există patru metode de aplicare a unei foi de stil la un document:</p>
<ul><p>Conectare - Puteți lega un document HTML la o foaie de stil stocată într-un fișier separat.</p>
<p>Încorporare - puteți încorpora o foaie de stil într-un document HTML folosind un container<STYLE>
.</p>
<p>Задание стиля для отдельного фрагмента
документа (Inline) - можно определять элементы стиля
"на лету", т. е. указывать их в тэгах HTML,
например, в тэге абзаца <span></li>
<li><p>Импорт (Import) - можно использовать
зарезервированное слов @import для импортирования
таблицы стилей в HTML - документ.</p>
</ul><p>Как было указано выше, существует
возможность создания таблиц стилей в виде
<a href="https://bazava.ru/ro/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>Etichetă<STYLE>
<span> имеет единственный атрибут TYPE
, определяющий тип MIME (Multipurpose Internet
Mail Extension, стандарт <a href="https://bazava.ru/ro/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>După cum am menționat mai devreme, foile de stil sunt stocate în fișiere text care sunt ușor de editat. Nu sunt greu de creat manual, dar există editori speciale de foi de stil, cum ar fi popularul program Microsoft FrontPage.</p>
<p>Foile de stil vă permit să definiți un stil pentru una sau mai multe etichete. De exemplu, puteți crea o foaie de stil care definește stilurile pentru etichete <H1>
, <H2>
,
<P>Și <EM>
<span>. Fiecare definiție este numită <i>regulă</i>
</span>(rul <span>e). Regula contine <i>selector</i>(etichetă HTML) urmată de <i>declaraţie</i>(definiția stilului). Selectorul este legătura dintre definiție și etichetă. Mai jos este un exemplu de regulă care specifică stilul pentru fiecare dintre etichetele de antet <H1>
:
</p>
<p>H1 (culoare: albastru)</p>
<p>Declarația este cuprinsă între paranteze. Fiecare declarație are două părți: numele proprietății și valoarea atribuită acesteia, separate prin două puncte. Există zeci de proprietăți incluse în HTML (font-size, font-style, color, margin-right, etc.), care vor fi discutate mai jos. Fiecare proprietate poate lua mai multe valori, dintre care una îi este atribuită implicit.</p>
<p>În exemplul anterior, a fost specificată o singură proprietate de culoare. Cu toate acestea, nimic nu vă împiedică să definiți o întreagă gamă de proprietăți într-o etichetă, separându-le unele de altele cu un punct și virgulă:</p>
<p>HI (culoare: albastru; dimensiune font: 12 pt; linie text: centru)</p>
<p>În acest exemplu, vizualizatorul va afișa fiecare antet de primul nivel în font albastru de 12 puncte și le va alinia la centrul ferestrei. Toate celelalte proprietăți își vor folosi valorile implicite (de exemplu, proprietatea stil font va fi setată la normal).</p>
<p>Dacă trebuie să definiți același stil pentru mai multe etichete, le puteți lista într-o listă separată:</p>
<p>P (dimensiunea fontului: 12 pt) <br>UL (dimensiunea fontului: 12 pt) <br>LI (dimensiunea fontului: 12 pt)</p>
<p>HTML vă permite să faceți același lucru într-o formă mai compactă - într-o singură linie:</p>
<p>P, UL, LI (dimensiunea fontului: 12 pt)</p>
<p>Aici este necesară virgula. Dacă este omisă, sensul regulii se va schimba (vezi secțiunea „ ” mai târziu în acest capitol).</p>
<p>Pe măsură ce foaia de stil devine mai complexă, probabil că va trebui să includeți mai multe informații despre scopul unei anumite reguli. Comentariile sunt plasate între caracterele /* și */ și sunt ignorate de spectatori, de exemplu:</p>
<p>BODY (marja-stânga: lin) /* Marja 1 inch */ <br>H1 (marja-stânga: -lin) /* Schimbați la stânga 1 inch */ <br>H2 (marja-stânga: -lin) /* Schimbați la stânga 1 inch */</p>
<p>HTML vă permite să definiți o mare varietate de proprietăți ale foii de stil. Numele de proprietăți constau dintr-unul, și mai frecvent două sau trei cuvinte, separate printr-o cratimă. În numele compuse, primul cuvânt reprezintă de obicei categoria și este, de asemenea, o prescurtare pentru numele proprietății (vezi secțiunea " ").</p>
<p>Tabelul oferă o prezentare generală a proprietăților foii de stil HTML. Coloana Categorie arată dacă o proprietate poate fi grupată cu alte proprietăți. A treia coloană conține informații despre dacă proprietatea este moștenită sau nu de sub-etichete (consultați secțiunea „ ” despre moștenirea proprietății).</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>Moştenire</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>Foile de stil HTML vă permit să decorați fundalul unui element de pagină cu o culoare sau o imagine. Trebuie menționat că aici și mai jos vom vorbi despre utilizarea proprietăților nu pentru întreaga pagină, ci pentru un element separat. De exemplu, dacă definiți un fundal pentru o etichetă <UL>, atunci numai etichetele vor avea acest fundal <UL>întreaga pagină:</p>
<p>U <span>L (imagine de fundal: URL(http://www.myserver.com/images/watermark.gif))</p>
<i>
</i>
<p>Recomandările W3C oferă posibilitatea de a defini margini, margini și spații albe pentru elementele paginii. Puteți, de exemplu, să includeți titlul într-un cadru sau să modificați marginile din eticheta de paragraf<Р>astfel încât să se indenteze toate paragrafele de text. În aceste scopuri, puteți utiliza următoarele grupuri de proprietăți:</p>
<ul><li><i>
</i><p>chenar - folosit pentru a defini chenarul din stânga, dreapta, sus și jos al unui element. Puteți seta lățimea, culoarea și stilul cadrului.</p></li>
<li><i>
</i><p>margine - folosită pentru a defini marginile la stânga, la dreapta, sus și jos ale unui element. De asemenea, puteți seta lățimea marginilor.</p></li>
<li><i>
</i><p>padding sunt folosite pentru a indica spațiul liber dintre chenar și conținutul elementului.</p></li>
</ul><i>
</i>
<span><i>
</i>
<p>Aceste proprietăți sunt utilizate pentru a specifica modul în care sunt afișate listele. Ele pot fi folosite pentru a schimba poziția markerului (proprietatea list-style-position), stilul sau imaginea markerului (proprietățile list-style-type și list-style-image).</p>
<p>Proprietățile listei sunt moștenite, adică dacă o proprietate este definită într-o etichetă <UL>, va fi valabil pentru toate etichetele <LI>
<span>container UL .</p>
<i>
</i>
<p>Proprietățile vă oferă control complet asupra modului în care vizualizatorul redă textul. Cu ajutorul lor, puteți controla culoarea, dimensiunea, fontul, spația dintre linii etc. Toate proprietățile textului vor fi descrise în detaliu mai jos.</p>
<i>
</i>
<span><b><i>
</i>
</b>
<span><i>
</i>
<p>Multe dintre proprietățile descrise mai sus pot fi grupate între ele. Deci, în loc de regulă</p>
<p>H1 (greutatea fontului: bold; stilul fontului: normal; dimensiunea fontului: 12pt; familia de fonturi: serif)</p>
<p>se poate scrie o afirmație mai scurtă:</p>
<p>H1 (font: bold normal serif de 12 puncte)</p>
<p>Foile de stil HTML vă permit să grupați proprietățile de chenar, fundal, font, listă, marjă și umplutură. Să luăm în considerare fiecare dintre grupuri separat.</p>
<p><i><u>grup de proprietate de frontieră</u>
</i></p>
<p>Puteți grupa proprietățile chenarului în cinci moduri diferite. Puteți defini proprietăți pentru <a href="https://bazava.ru/ro/kak-ochistit-istoriyu-soobshchenii-v-skype-kak-udalit-otdelnye-soobshcheniya.html">latura separata</a> cadru folosind</p>
</span> b <span>comandă-sus, chenar-dreapta, chenar-jos ȘI chenar-stânga sau definiți întreaga chenar simultan cu chenar. <p>Cu fiecare dintre aceste proprietăți, puteți specifica lățimea, stilul și culoarea chenarului, de exemplu:</p>
</span>
<p>b order-top: subțire punctat negru</p>
<p><i><u>grup de proprietăți de fundal</u>
</i></p>
<p>În grupul de proprietăți de fundal, puteți specifica valori pentru culoare, imagine, repetare, atașament și poziție, de exemplu:</p>
<p>fundal: alb URL(http://www.myserver.com/image/bg.gif) repetare-x fix sus stânga</p>
<p><i><u>fontul grupului de proprietăți</u>
</i></p>
<p>Grupului de fonturi i se poate da greutate, stil, dimensiune și valori de familie, astfel:</p>
<p>font: bold normal de 12 pt ori, serif</p>
<p><i><u>listează grupul de proprietăți</u>
</i></p>
<p>Proprietățile sunt grupate folosind proprietatea de tip listă. Este posibil să specificați o imagine pentru marker, tipul și poziția markerului, de exemplu:</p>
<p>stil listă: URL pătrat (http://www.myserver.com/images/marker.gif) în interior</p>
<p><i><u>grup de proprietate în marjă</u>
</i></p>
<p>Pentru grupul de margini, puteți defini o lățime pentru fiecare dintre marginile de sus, dreapta, jos și stânga, astfel:</p>
<p>margine: .5in 1in .5in 1in</p>
<p>Dacă este specificată o singură valoare, vizualizatorul va face ca celelalte câmpuri să aibă aceeași lățime. Dacă nu sunt specificate una sau două valori, marginile cu valoarea nespecificată vor avea aceeași lățime ca și marjele opuse. De exemplu, dacă omiteți ultima valoare (stânga), lățimea marginilor din stânga va fi egală cu lățimea marginilor din dreapta, adică 1 inch.</p>
<p><i><u>grup de proprietăți de umplutură</u>
</i></p>
<p>În grupul de umplutură, puteți specifica valori pentru sus, dreapta, jos și stânga, de exemplu:</p>
<p>umplutură: .25in .25in .25in .25in</p>
<p>Dacă este specificată o singură valoare, vizualizatorul va atribui aceeași valoare valorilor lipsă. Dacă nu sunt specificate una sau două valori, spațiile cu valorile nespecificate vor avea aceeași lățime ca opuse. De exemplu, dacă omiteți ultima valoare (stânga), spațiul liber dintre partea stângă a cadrului și conținutul elementului este același cu spațiul din partea dreaptă.</p>
<p>În HTML, etichetele secundare moștenesc unele dintre proprietățile etichetelor părinte. De exemplu, toate etichetele containerului <BODY>
(<
P
>și <span><UL>) va avea unele proprietăți de etichetă <BODY>. Aceeași etichetă <LI>moștenește proprietățile etichetei <UL>. Luați în considerare următorul cod:</p>
<p><STYLE TYPE="text/css"> <br>
Р (color: blue) <br>
</STYLE> <br>
<BODY><br>
<P>Buna ziua. Acesta este un paragraf de text. <EM>Acest lucru este subliniat</EM><P>
</BODY>
</p>
<span>
<p>Foaia de stil a acestui document stabilește culoarea etichetei</p>
</span><
P
>
<span>albastrul este însă culoarea etichetei</span><EM>
<span>nu este definit în mod explicit (implicit este negru). Nu este nimic de care să vă faceți griji aici, deoarece această etichetă se află în containerul părinte <P>Și astfel moștenește culoarea albastră. <p>Uneori devine necesar să definiți două (sau mai multe) stiluri pentru o etichetă. De exemplu, poate fi necesar să specificați două stiluri pentru etichetă <LI>: unul pentru când este supus unei etichete</p>
</span><UL>
<span>, iar al doilea atunci când este supus etichetei <UL>. Acest lucru se poate face folosind selectoare de context. <p>Selectorul de context determină secvența exactă de etichete pentru care va fi aplicat un anumit stil. Cu alte cuvinte, puteți specifica că un anumit stil ar trebui aplicat, de exemplu, într-o etichetă <LI>numai dacă această etichetă este o etichetă subordonată <OL>
:</p>
<p>OL LI (tip listă-stil: zecimal)</p>
<p>Pentru aceeași etichetă <LI>puteți defini un stil diferit care este valabil numai dacă este subordonat unei etichete <UL>
:</p>
<p>UL LI (tip listă: pătrat)</p>
<p>Rețineți că lista de selectoare nu este separată prin virgulă. În caz contrar, tuturor etichetelor de listă li se va atribui același stil.</p>
<p>Foile de stil sunt denumite „foi de stil în cascadă” în ghidurile W3C. <i>"
</i> deoarece pentru aspectul unei pagini Web, puteți utiliza nu unul, ci mai multe tabele simultan. În același timp, privitorul însuși determină succesiunea utilizării tabelelor și rezolvă conflictele dintre ele conform principiului cascadării. De exemplu, o foaie de stil pentru o pagină poate fi determinată nu numai de autorul acesteia, ci și de cititor, iar apoi regulile în cascadă decid ce foaie de stil va avea efect.</p>
<p>Cum functioneazã? Browserul atribuie o pondere fiecărei reguli. Când interpretează fiecare etichetă, programul analizează toate regulile acestei etichete și le sortează în funcție de valoarea coeficientului de greutate. Cea mai „greută” regulă câștigă.</p>
<p>Există următoarele principii generale pentru rezolvarea conflictelor dintre foile de stil:</p>
<ul>
<p>Prioritatea tipurilor de foi de stil în document (în ordine descrescătoare): atribuirea stilului curent (inline), încorporare, legare.</p>
</ul><p>De asemenea, puteți modifica ponderea regulii folosind cuvântul cheie important. În exemplul următor, valoarea proprietății roșii</p>
</span> col <span>sau și valoarea sans-serif a proprietății font-family sunt marcate cu acest cuvânt cheie și, prin urmare, vizualizatorul nu ar trebui să le înlocuiască. Cu toate acestea, în cazul în care două astfel de reguli sunt în conflict, conflictul este rezolvat conform principiilor evidențiate mai sus. <p>H1 (culoare: roșu ! important font-weight: bold font-family: sans-serif ! important)</p>
<p>O clasă este o definiție a mai multor stiluri ale unui element, fiecare dintre acestea putând fi folosit în locul potrivit pe pagină. De exemplu, puteți defini trei variante ale stilului de titlu H1. Definirea variațiilor este similară cu specificarea unui stil, doar un nume de clasă arbitrar este adăugat la numele etichetei, separat de un punct:</p>
<p>H1 albastru (culoare: albastru) H1.roșu (culoare: roșu) H1.negru (culoare: negru)</p>
<p>Acum, inclusiv eticheta în document <H1>, puteți specifica un stil specific în el folosind atributul CLASS:</p>
<p><H1 CLASS=red>antet roșu</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>Continut Asemanator:</h3>
<ol>
<li><a href="https://bazava.ru/ro/ne-gruzitsya-stranica-gugl-ochen-dolgo-zapuskaetsya-brauzer-google-chrome.html" rel="bookmark" title="Lansarea browserului Google Chrome durează prea mult">Lansarea browserului Google Chrome durează prea mult</a></li>
<li><a href="https://bazava.ru/ro/chto-luchshe-komp-ili-nout-chto-luchshe-dlya-programmista-luchshe-vybrat.html" rel="bookmark" title="Ce este mai bine pentru un programator?">Ce este mai bine pentru un programator?</a></li>
<li><a href="https://bazava.ru/ro/kak-ochistit-vnutrennii-nakopitel-na-androide-fly-udalit.html" rel="bookmark" title="Eliminați actualizările aplicațiilor native neutilizate sau dezactivați-le complet">Eliminați actualizările aplicațiilor native neutilizate sau dezactivați-le complet</a></li>
<li><a href="https://bazava.ru/ro/kak-vklyuchit-gadzhety-na-windows-10-windows-desktop-gadgets---besplatnaya-programma.html" rel="bookmark" title="Windows Desktop Gadgets este un program gratuit disponibil pentru descărcare">Windows Desktop Gadgets este un program gratuit disponibil pentru descărcare</a></li>
</ol>
</div>
</div>
</article>
<nav class="nav-single">
<h3 class="assistive-text">Post navigare</h3>
<span class="nav-previous"><a href="https://bazava.ru/ro/skachat-vidzhety-dlya-windows-10-na-temperaturu.html" rel="prev"><span class="meta-nav">Descărcați widget-uri pentru Windows 10 pentru temperatură</span> Ideea de gadgeturi desktop...</a>
</span>
<!-- /next_post -->
<span class="nav-next"><a href="https://bazava.ru/ro/ne-gruzitsya-google-chrome-pochemu-brauzer-google-chrome-tormozit-dolgo.html" rel="next">De ce browserul Google Chrome încetinește, se încarcă mult timp și ce trebuie făcut <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="Regatul Unit" /><input type="hidden" name="reqenc" value="" /><input type="search" name="text" value="" /><input type="submit" value="Să știi" /></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">Categorii</h3>
<ul>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/internet/">Internet</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/programs/">Programe</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/windows/">Windows</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/devices/">Dispozitive</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/android/">Android</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/computer/">Un calculator</a>
</li>
<li class="cat-item cat-item-4"><a href="https://bazava.ru/ro/category/apple/">Măr</a>
</li>
</ul>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries">
<h3 class="widget-title">Intrări recente</h3>
<ul>
<li>
<a href="https://bazava.ru/ro/dolgo-ne-otkryvaetsya-gugl-hrom-google-chrome-silno-gruzit-processor.html">Google Chrome încarcă puternic procesorul: scăpați de miner</a>
</li>
<li>
<a href="https://bazava.ru/ro/gugl-hrom-ploho-zagruzhaet-stranicy-pochemu-ne-zapuskaetsya-gugl.html">De ce nu pornește Google Chrome</a>
</li>
<li>
<a href="https://bazava.ru/ro/gugl-hrom-ne-gruzitsya-pochemu-brauzer-google-chrome-tormozit-dolgo-gruzitsya-i-chto.html">De ce browserul Google Chrome încetinește, se încarcă mult timp și ce trebuie făcut</a>
</li>
<li>
<a href="https://bazava.ru/ro/propadayut-yarlyki-windows-7-video-kak-otkatit-sistemu-s-pomoshchyu-tochki.html">Video: cum să derulați înapoi sistemul folosind un punct de restaurare</a>
</li>
<li>
<a href="https://bazava.ru/ro/kak-chistit-klavishi-na-noutbuke-kak-ochistit-klavishi-noutbuka.html">Cum să curățați tastele laptopului fără a scoate tastatura?</a>
</li>
<li>
<a href="https://bazava.ru/ro/emulyator-obraza-diska-windows-10-osobennosti-sozdaniya-virtualnyh.html">Caracteristici de creare de discuri virtuale, aplicarea acestora</a>
</li>
<li>
<a href="https://bazava.ru/ro/zagruzochnyi-uefi-usb-skopirovat-na-cd-kak-sozdat-zagruzochnuyu.html">Cum să creați o unitate flash UEFI bootabilă folosind Rufus</a>
</li>
<li>
<a href="https://bazava.ru/ro/zagruzochnyi-efi-iso-obraz-kak-sozdat-zagruzochnuyu-fleshku-uefi-s.html">Cum să creați o unitate flash UEFI bootabilă folosind Rufus</a>
</li>
<li>
<a href="https://bazava.ru/ro/ne-otklyuchaetsya-zavershenie-raboty-chto-delat-esli-ne-vyklyuchaetsya.html">Ce trebuie să faceți dacă computerul nu se oprește prin „Start”</a>
</li>
<li>
<a href="https://bazava.ru/ro/skachat-programmu-dlya-izgotovleniya-fotokollazhei-programma-dlya.html">Creator de colaje</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/ro/" title="Portal Hardware de acasă">Portal Hardware de acasă</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>
|
