Probabil că toată lumea știe asta HTML specifică structura documentului și css(Cascading Style Sheets, cascading style sheets) este responsabil pentru proiectarea unei pagini web, poziția și aspectul elementelor. S-a întâmplat ca HTML și CSS să nu fie folosite separat. Orice pagină web este, de fapt, o combinație de cod HTML și cod CSS. Fără cunoștințe de bază despre acestea tehnologii, nu va fi posibilă alcătuirea corectă a unui singur document. Mulți dintre noi am studiat aceste tehnologii mai detaliat. Dar personal, nu am reușit niciodată să „înțeleg” pe deplin toate adevărurile și posibilitățile CSS. În continuare, voi încerca să scot în evidență cel mai mult Puncte importante lucruri de știut despre CSS.
Ce sunt foile de stil în cascadă?
Stilurile sunt un set de setări care controlează aspectul și poziția elementelor paginii web. Priviți imaginile de mai jos pentru a înțelege diferența:
Codul sursă pentru un astfel de document arată astfel:
1 2 3 4 5 6 7 8 9 10 11 12 13
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns => <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” / > <titlu > Flexagon</titlu> <link rel="stylesheet" href="style.ess" type="text/css" /> </cap> <corp> <h1 > Flexagoc</h1> <р>Flexagoc este o figură de hârtie care are trei sau mai multe laturi. La început pare că acest lucru este imposibil, dar amintiți-vă de banda Möbius, pentru că are o singură față, spre deosebire de o foaie de hârtie, și, totuși, este reală. La fel de real este flexagonul, care este ușor de făcut și de lipit acasă. Arată ca un hexagon cu două fețe, dar dacă îl îndoiți într-un mod special, vom vedea a treia latură. Este ușor de observat că avem de-a face cu exact trei fețe dacă le colorăm în culori diferite. Îndoind flexagonul, vom observa pe rând toate suprafețele acestuia.</p> </corp> </html>
Codul HTML în sine nu s-a schimbat, iar singura adăugare este șirul . Se referă la un fișier de stil extern numit style.css. Conținutul acestui fișier este afișat mai jos:
dimensiunea fontului: llpt; culoare de fundal : #f0f0f0 ; /* Culoarea de fundal a paginii web */ culoare: #333; /* Culoarea textului corpului */ }
h1 ( culoare: #a52 a2 a; /* Culoare antet */ dimensiunea fontului: 24pt /* Dimensiunea fontului în puncte */ font-family: Georgia, Times, serif ; /* Familie de fonturi */ font-weight : normal ; /* Stil normal de text */ }
p( text-align : justificare ; /* Justifică alinierea */ margin-left : borg; /* Umplutură din stânga în pixeli */ margine-dreapta: Yurh; /* Umplutura dreapta in pixeli */ chenar-stânga: lpx solid #999; chenar - jos : lpx solid #999 ; padding -stânga : Yurh; umplutură - jos : 1Opx; }
În dosar stil.css tocmai a descris toți parametrii de design ai unor etichete cum ar fi, <corp>, și<p > Rețineți că etichetele în sine în codul HTML sunt scrise ca de obicei. Deoarece fișierul de stil poate fi referit din orice document web, acest lucru are ca rezultat date mai puțin repetitive. Și datorită separării codului și designului, crește flexibilitatea gestionării tipului de document și viteza de lucru pe site.
Tipuri de stil
Există mai multe tipuri de stiluri care pot fi aplicate împreună aceluiași document. Acestea sunt stilul browser, stilul autorului și stilul utilizatorului.
Stil browser. Stiluri similare se aplică atunci când utilizați HTML „pur”.
Stilul utilizatorului. Acesta este un stil pe care utilizatorul site-ului îl poate activa prin setările browserului. Acest stil are prioritate și suprascrie aspectul original al documentului.
Dacă apare un conflict la schimbarea stilului aceluiași element de document, atunci stilul utilizatorului are prioritate, urmat de stilul autorului și stilul browserului.
Cum se adaugă stiluri la o pagină?
Există mai multe moduri de a adăuga stiluri CSS la o pagină:
Stiluri înrudite
Când utilizați stiluri legate, descrierea selectoarelor și a valorilor acestora se află în dosar separat, de regulă, cu extensia css, iar eticheta este folosită pentru a lega documentul la acest fișier . Această etichetă este plasată în container
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. Eu insumi <a href="https://danykom.ru/ro/kak-podklyuchit-stilevoi-fail-k-veb-stranice-podklyuchenie-css/">fișier de stil</a> conține doar descrierea stilurilor. Această separare a html și <a href="https://danykom.ru/ro/programma-dlya-programmirovaniya-html-css-tak-li-vazhny-redaktory-koda/">cod css</a> 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 sale, această metodă de adăugare a unui stil este inferioară celei anterioare, dar vă permite și să stocați stiluri într-un singur loc, în <a href="https://danykom.ru/ro/vosstanovleniya-r-studio-obzor-r-studio---programmy-dlya-vosstanovleniya/">acest caz</a> direct 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>Внутренний или встроенный стиль является по существу расширением для <a href="https://danykom.ru/ro/html-elementy-odinochnye-i-parnye-tegi-otkryvayushchii-i-zakryvayushchii-teg-ponyatie/">одиночного тега</a> используемого на <a href="https://danykom.ru/ro/oficialnaya-stranica-doktor-veb-tekushchie-plaginy-i-programmy/">текущей веб-странице</a>. Для определения стиля используется атрибут <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>При комбинированном применении <a href="https://danykom.ru/ro/dlya-bolee-effektivnoi-kommunikacii-razlichnye-stili-kommunikacii-i/">различных стилей</a> нужно помнить об их иерархии. <b>Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
</b> Таким образом, определения одних стилей можете перекрывать другие, будьте внимательны.</p>
<h2>Что дальше?</h2>
<p>Выше уже упоминались структурные единицы <b>CSS
</b> — селекторы. Но о синтаксисе CSS нужно писать отдельную статью, поэтому я и решил вынести этот материал в отдельный пост.</p>
<p>Теперь что касается стандартов: сейчас официально принят и поддерживается стандарт CSS 2.1, а в разработке находится CSS 3, который внесет <a href="https://danykom.ru/ro/ne-zaryazhaetsya-telefon-vozmozhnye-prichiny-i-sposoby-ih/">огромное количество</a> новшеств. О некоторых из них можно почитать в статье Будущее CSS разметки</p>
<p>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<p>Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых <a href="https://danykom.ru/ro/lending-chto-takoe-kak-sozdat-vostrebovannost-osnovnaya/">сложных задач</a> для веб-мастера. Написать HTML-код страницы так, чтобы все <a href="https://danykom.ru/ro/tekstovye-i-graficheskie-redaktory-primery-graficheskie-redaktory-rabota-s/">графические изображения</a> и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок.</p>
<p>Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство <a href="https://danykom.ru/ro/balans-na-ekrane-ot-bilaina-opisanie-kak-podklyuchit-ili-otklyuchit-polnyi/">полного контроля</a> над HTML-разметкой, представляются в свете рассматриваемой проблемы, как <a href="https://danykom.ru/ro/nekaya-profile-powered-by-punbb-luchshie-instrumenty-dlya-kraud-marketinga/">хороший инструмент</a> для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.</p>
<p>Использование CSS открывает новые специфические возможности, аналогов которым нет с <a href="https://danykom.ru/ro/standartnyi-html-kod-html-programmnyi-kod/">стандартном HTML</a>. Например, возможно установить межбуквенные и межстрочные расстояния для текста, точно указать положение рисунка на заднем плане без его мозаичного выкладывания по всему документу.</p>
<p>Вообще, Каскадные таблицы стилей позволяют задуматься о дизайне веб-страницы, об эстетической стороне восприятия информации пользователем, а не только об утилитарной.</p>
<p>С <a href="https://danykom.ru/ro/preprocessor-css-obzor-vybor-primenenie-pochemu-my-stali/">применением CSS</a> растет скорость создания новой страницы. Стили, определенные один раз, могут быть использованы неограниченное число раз в любом месте документа. <a href="https://danykom.ru/ro/kak-izmenit-nik-v-yutube-vazhnaya-professionalnaya-detal/">Важной деталью</a> является возможность задать стили в отдельном файле в виде присвоения различных свойств тегам и создании <a href="https://danykom.ru/ro/sekrety-veb-dizaina-v-stile-kartochek-uluchshennyi-polzovatelskii-opyt/">пользовательских стилей</a>. Переопределение стилей в таком файле вызовет <a href="https://danykom.ru/ro/otklyuchenie-avtomaticheskih-izmenenii-kak-izmenit-vid-kavychek-s/">автоматическое изменение</a> стиля отображения всех объектов, для которых применялся измененный стиль.</p>
<p>Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:</p>
<ol><li>Переопределение стиля в элементе разметки</li>
<li>Размещение описания стиля в заголовке документа с использованием тега style</li>
<li>Размещение ссылки на <a href="https://danykom.ru/ro/the-difference-is-6p-from-6-plus-geometry-and-appearance/">внешнее описание</a> через <a href="https://danykom.ru/ro/nastroika-canonical-chto-eto-zachem-i-kak-rel-canonical-atribut-tega/">тег link</a></li>
<li>Импорт стиля в документ</li>
</ol><p>доступного в CSS стиля к <a href="https://danykom.ru/ro/stek-vidy-funkciya-udaleniya-elementa-iz-steka-po-dannym-primer-steka/">данному элементу</a> разметки. При таком способе переопределения изменения коснутся только того элемента, за который отвечает <a href="https://danykom.ru/ro/meloch-form-html-vvod-dannyh-polya-formy---teg-otpravlyaem-dannye-na/">данный тег</a> и не будут отражаться на других элементах, также выводимых этим тегом в другом месте страницы. Позволяет применить <a href="https://danykom.ru/ro/shablony-v-microsoft-word-zachem-nuzhny-shablony-stili-i-shablony-v-tekstovom/">нужный стиль</a> к конкретному участку документа.</p>
<p>Переопределить <a href="https://danykom.ru/ro/kak-zapolnit-fail-pdf-podborka-bystryh-reshenii-po-rabote-s/">стандартный элемент</a> разметки или создать собственный с требуемыми свойствами отображения можно с помощью парного тега style, находящегося в заголовке документа перед тегом body. Также с помощью тега style создаются произвольные классы. Их использование допускает однократно задать одинаковые свойства отображения для <a href="https://danykom.ru/ro/chto-takoe-anime-taitl-taitl-dolzhen-otrazhat-sut-stranicy-teg/">разных тегов</a>. Удобно, например, задавать одинаковый шрифт для текста и находящихся в нем гиперссылок. Если при этом не задан цвет и стиль подчеркивания, то эти параметры останутся для гиперссылок прежними и они останутся выделенными среди обычного текста.</p>
<p>Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».</p>
<p>Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь <a href="https://danykom.ru/ro/pochemu-kopiruyutsya-faily-bolshe-4-gb-ne-poluchaetsya-skopirovat-fail-na/">внешнего файла</a> с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.</p>
<p>Но у любой технологии есть свои недостатки. Есть они и у технологии CSS. Точнее, больше всего недостатков видится в применении CSS. Это обусловлено неполной совместимостью CSS с различными браузерами даже последних версий и возникающего из-за этого отсутствия пропагандируемой в CSS точности отображения страницы в <a href="https://danykom.ru/ro/kak-ochistit-cookies-v-raznyh-brauzerah-kak-pochistit-cookies-kuki-v/">различных браузерах</a>. Импорт стиля, например, поддерживается далеко не всеми браузерами. По этой причине многие веб-мастеры пока еще опасаются применения всех <a href="https://danykom.ru/ro/svg-skript-randomnogo-izmeneniya-cveta-stilizaciya-svg-s-pomoshchyu-css-vozmozhnosti-i/">возможностей CSS</a> используя только некоторые.</p>
<p>Блокировка кегля шрифта при отображении текста в браузере позволяет приобрести уверенность в точном расположении всех элементов страницы на компьютере пользователя, но лишает пользователя возможности пользователя выбрать удобный для чтения размер шрифта самостоятельно. Такой подход является, по существу, неуважением к посетителю сайта.</p>
<p>Часто про CSS говорят, что с их помощью легко менять дизайн всего сайта сразу. Для этого достаточно переопределить стили в файле стилей. Но настоящий дизайнер, решившийся на изменение дизайна сайта, никогда не остановится только на переделке отображения шрифтов.</p>
<p>Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.</p>
<p>Хорошо
Плохо
</p>
<p>В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.</p>
<p>В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).</p>
<p>Рисунок 1</p>
<p>Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web</p>
<h3>1. Определение цветов. Уроки CSS</h3>
<p>При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует <a href="https://danykom.ru/ro/perevesti-shestnadcaterichnoe-chislo-v-dvoichnoe-onlain-perevod-chisel-iz-odnoi/">шестнадцатеричному числу</a> от 00 до FF (0 и 255 в <a href="https://danykom.ru/ro/kak-perevodit-chisla-iz-desyatichnoi-sistemy-perevod-chisel-v-dvoichnuyu/">десятичной системе</a> счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.</p>
<p>В таблице приведены названия некоторых цветов и их коды. Более <a href="https://danykom.ru/ro/tablica-integralov-polnaya-dlya-studentov-28-sht-pervoobraznaya/">полные таблицы</a> цветов и их коды можно просмотреть в папке <b>colors
</b>, расположенной в папке <b>CD
</b>.</p>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; background-color: #ffffff;"><tbody><tr><td style="width: 30%;">
<p><b>Цвет
</b></p>
</td>
<td style="width: 20%;">
</td>
<td style="width: 30%;">
<p><b>Цвет
</b></p>
</td>
<td style="width: 20%;">
</td>
</tr><tr style="background-color: #eeeeee;"><td>
<p>Black (черный)</p>
</td>
<td>
</td>
<td>
<p>Silver (серебряный)</p>
</td>
<td>
</td>
</tr><tr><td>
<p>Maroon (темно-бордовый)</p>
</td>
<td>
</td>
<td>
<p>Red (красный)</p>
</td>
<td>
</td>
</tr><tr style="background-color: #eeeeee;"><td>
<p>Green (зеленый)</p>
</td>
<td>
</td>
<td>
<p>Lime (известь)</p>
</td>
<td>
</td>
</tr><tr><td style="width: 210px;">
<p>Olive (оливковый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Yellow (желтый)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr style="background-color: #eeeeee;"><td style="width: 210px;">
<p>Navy (темно-синий)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Blue (синий)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr><td style="width: 210px;">
<p>Purple (фиолетовый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Fuchia (фуксия)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr style="background-color: #eeeeee;"><td style="width: 210px;">
<p>Teal (темно-зеленый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
</td>
<td style="width: 200px;">
</td>
</tr><tr><td style="width: 210px;">
<p>Gray (серый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>White (белый)</p>
</td>
<td style="width: 200px;">
</td>
</tr></tbody></table><p><b><i>Таблица <a href="https://danykom.ru/ro/kody-cvetov-na-russkom-uchebnik-html-cveta-rgb-cveta-bezopasnoi/">безопасных цветов</a> для разработки дизайна сайта
</i>
</b></p>
<p>Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.</p>
<p>Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.</p>
<p>Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.</p>
<p>Таблицу безопасных цветов можно просмотреть в папке <b>CD
</b><b>/
</b><b>colors
</b>.</p>
<h3>2. Определение CSS</h3>
<p>Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:</p>
<ul><li>первый - средствами <b><i>таблиц стилей
</i>
</b><b><i>CSS
</i>
</b> (более прогрессивный и правильный метод),</li>
<li>второй - средствами <b><i>атрибутов у тегов
</i>
</b><b><i>HTML
</i>
</b>.</li>
</ul><p>Начнем сразу с более прогрессивного метода.</p>
<p><b>CSS - Cascading Style Sheets
</b> (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.</p>
<p><b><i>Назначение:
</i>
</b> позволяет автоматически изменить <a href="https://danykom.ru/ro/vstroennye-tablicy-v-html-dokumentah-vstraivanie-stilei-v-html/">стиль HTML</a> элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать <a href="https://danykom.ru/ro/perenosnoi-signal-kvadratnogo-shchita-zelenogo-cveta-ploskii-ekran-shchit/">зеленый цвет</a> и он применится сразу на десяти страницах.</p>
<p><b><i>Обратная ситуация:
</i>
</b> мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.</p>
<p>При использовании же таблицы стилей нам придется только один раз это сделать, изменив зеленый цвет заголовка на красный в самой таблице стилей, и он автоматически изменится на всех десяти web-страницах.</p>
<p>Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.</p>
<p><b>Синтаксис
</b><b>CSS
</b><b>-элемента
</b></p>
<p><b>селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}
</b>
</p>
<p>Вначале пишется имя селектора, например, h1, это означает, что все стилевые свойства будут применяться к тегу <h1>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства со значениями разделяются между собой точкой с запятой, в конце этот символ можно опустить.</p>
<p>Стилевых свойств со значениями может быть сколько угодно много, их последовательность значения не имеет.</p>
<p><b><i>CSS не чувствителен к регистру, переносу строк, пробелам и <a href="https://danykom.ru/ro/simvol-tabulyacii-chr-kodirovka-ascii-american-standard-code-for-information-interchange---bazovaya/">символам табуляции</a>,
</i>
</b> поэтому форма записи зависит от желания разработчика.</p>
<p><i>Например
</i><i>:
</i></p>
<p><b>h1 {font-family:Arial; font-size:14pt}
</b></p>
<p>или тот же самое можно записать так:</p>
<p><b> font-family:Arial;
</b></p>
<p><b> font-size:14pt
</b></p>
<p>В этом примере:</p>
<ul><li>h1 - селектор, в данном случае HTML-элемент,</li>
<li>font-family и font-size - стилевые свойства,</li>
<li>Arial - значение свойства font-family,</li>
<li>14pt - значение свойства font-size.</li>
</ul><p><b>Способы включения таблиц стилей в HTML-документ
</b></p>
<ol><li>Внешняя таблица стилей (связанный стиль).</li>
<li>Внедренная таблица стилей (глобальный стиль).</li>
<li>Внутренние стили.</li>
</ol><h3>3. Внешняя таблица стилей CSS (связанный стиль)</h3>
<p>Определяет стиль всего сайта.</p>
<p>Является текстовым файлом с расширением css.</p>
<p><link rel="stylesheet" href="style.css" type="text/css" /></p>
<p>В данном примере таблица стилей написана в текстовом файле style.css.</p>
<p><b>Практическое задание 1
</b>
</p>
<p>1. Откройте чистый документ в Notepad++ и сохраните его в папке <b>public_html
</b> под именем <b>style
</b><b>.
</b><b>css
</b>. Обратите внимание, чтобы в поле <b>Тип файла
</b> было установлено <b>All types
</b> (рисунок 2).</p>
<p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.2.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 2</p>
<p>2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле <b>main
</b><b>.
</b><b>html
</b> с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):</p>
<p>Рисунок 3</p>
<p>В наших уроках CSS давайте разберем, что здесь написано согласно синтаксису CSS-элемента, о котором мы говорили выше в этом уроке.</p>
<ul><li>h1 - селектор, т.е. <a href="https://danykom.ru/ro/parametry-css-width-i-height-dlya-zadaniya-razmerov-elementov-html-stranicy/">элемент html</a>, к которому применяется стиль;</li>
<li>text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);</li>
<li>color:#0000FF; - стилевое свойство color (цвет текста) со значением <a href="https://danykom.ru/ro/chto-takoe-filtr-sinego-cveta-v-planshete-kompyuternaya-programma-filtr-sinego/">синего цвета</a> #0000FF (значение взято из таблицы цветов);</li>
<li>font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;</li>
<li>стилевые свойства со значениями разделены между собой точкой с запятой;</li>
<li>и так далее, все согласно синтаксису.</li>
</ul><p>Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом <b>main
</b><b>.
</b><b>html
</b> и <b>style
</b><b>.
</b><b>css
</b>. Для этого откройте файл main.html и между тегами <b><
</b><b>head
</b><b>>
</b> и <b></
</b><b>head
</b><b>>
</b> вставьте конструкцию <b><link rel="stylesheet" href="style.css" type="text/css" />,
</b><b>как
</b> на рисунке 4.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.4.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 4</p>
<p>3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.5.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 5</p>
<p>В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник <b>Sprav_CSS.doc
</b>.</p>
<p>4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле <b>style
</b><b>.
</b><b>css
</b> <b>h
</b><b>2
</b> (рисунок 6).</p>
<p>Рисунок 6</p>
<p>5. Проверьте результат в браузере, он должен совпадать с рисунком 7.</p>
<p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.7.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 7</p>
<p>6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле <b>style
</b><b>.
</b><b>css
</b> сделаем следующую запись для селектора <b>p
</b> (рисунок 8).</p>
<p>Рисунок 8</p>
<p>7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора <b>body
</b> добавим запись (рисунок 9)</p>
<p>Рисунок 9</p>
<p>8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.10.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 10</p>
<p>Думаю из данного урока CSS, принцип использования внешней таблицы стилей понятен. Для того, чтобы легко и красочно оформлять свои
<b>web
</b>-странички, надо по справочнику изучать стилевые свойства и их значения и пробовать на практике. Чем больше Вы помните таких свойств и значений без обращения к справочнику, тем выше Ваш профессионализм.
</p>
<p><b>Исследовательские задания
</b></p>
<ol><li>Используя справочник <b>Sprav_CSS.doc,
</b> оформите стилями заголовок <b><
</b><b>h
</b><b>3>
</b> в файле main.html. Свойства стилей на выбор.</li>
<li>Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.</li>
<li>Для списка «Площади домов» в качестве маркера примените изображение <b>spisok_1.gif
</b> из папки <b>html_css_2
</b>. Остальные параметры по желанию.</li>
<li>В качестве фона web-страницы примените через стили изображение <b>fon9.jpg
</b> из папки <b>html_css_2
</b>.</li>
<li>С использованием стилей сделайте шрифт абзацев полужирным.</li>
</ol><p>Примерный результат на рисунке 11.</p>
<p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.11.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Рисунок 11</p>
<h3>4. Классы в стилевых спецификациях</h3>
<p>В нашем уроке CSS мы рассмотрим классы в стилевых спецификациях применяются в том случае, если необходимо определить несколько разновидностей стиля одного элемента. При определении класса к <a href="https://danykom.ru/ro/v-pamyat-o-keywords-dlya-chego-nuzhen-meta-teg-keywords-pochemu-on-ne-rabotaet-i/">нужному тегу</a> добавляется произвольное <a href="https://danykom.ru/ro/kak-podobrat-domennoe-imya-dolzhno-byt-unikalnym-pravilo-2/">уникальное имя</a> класса, отделяемое точкой.</p>
<p>Например, у нас в тексте есть несколько заголовков <b>h
</b><b>1
</b> и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом</p>
<p><i>h1.golub{color:blue}
</i></p>
<p><i>h1.krasn{color:red}
</i></p>
<p><i>h1.zelen{color:green}
</i></p>
<p>После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.</p>
<p>Теперь при использовании тега <b><
</b><b>h
</b><b>1>
</b> в документе необходимо установить атрибут <b>class
</b>, чтобы указать, какой именно стиль нужно применить:</p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>golub
</i><i>">
</i><i>
</i><i>Это голубой заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>krasn
</i><i>">
</i><i>
</i><i>Это красный заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>zelen
</i><i>">
</i><i>
</i><i>Это зеленый заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><b>Практическое задание 2
</b>
</p>
<p>1. Откройте файл <b>shablon
</b><b>.
</b><b>html
</b>. Сохраните его под новым именем <b>ploshady
</b><b>.
</b><b>html
</b>в папке <b>public_html
</b>.</p>
<p>2. Напишите между тегами <title> и новый заголовок «Площади домов».
3. В содержимое
скопируйте текст из файла Площади домов.txt
из папки html
_
ccs
_2
.
4. Стили будем писать в том же файлеstyle
.
css
, который у нас создан в предыдущем уроке. Поэтому в файле ploshady
.
html
установите связку с этой таблицей стилей, вставив между тегами
и (рисунок 12)
Рисунок 12
5. Отформатируйте заголовки тегом
и присвойте каждому заголовку свой класс (рисунок 13).
Рисунок 13
Ваш файл ploshady
.
html
сейчас должен выглядеть следующим образом (рисунок 14).
Рисунок 14
6. В таблице стилей style
.
css
создайте следующую запись (рисунок 15)
Рисунок 15
7. Проверьте web-страницу в браузере. Результат на рисунке 16.
Рисунок 16
8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt.
Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):
Рисунок 17
Практическое задание 3
Под каждый заголовком в файле ploshady
.
html
есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:
Рисунок 18
5. ID-стиль для специфического элемента
Уроки CSS включают изучение так называемых id-стилей.
Любому элементу можно присвоить идентификаторid
, а затем поставить в соответствие этому элементу какой-либо стиль, используя id
.
Например:
Запись в файле таблиц стилей будет следующая
#
test
{
color
:#00
ffff
}
Теперь можно поставить этот стиль в соответствие любому элементу в документе html:
...
...
В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.
Практическое задание 4
Сделаем заготовку для будущего меню нашего сайта.
1. Откройте файл shablon
.
html
и сохраните его под новым именем menu
.
html
в папке public_html.
2. В содержимое страницы файла menu
.
html
внесите текст из файла menu
.
txt
из папкиhtml
_
css
_2
.
3. Средствами html-тегов отформатируйте файл следующим образом:
для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег
;
для списка «Категории проектов» используйте нумерованный список ;
для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список
4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif
). Результат должен совпасть с рисунком 19.
Рисунок 19
5. Для этого меню сделаем отдельную таблицу стилей под именем style
_
menu
.
css
.
Установите связку между файлом menu
.
html
и таблицей стилей style
_
menu
.
css
, вставив запись между тегами
и в файле menu
.
html
.
6. Создайте чистый документ и сохраните его под именем style
_
menu
.css
в своей папке.
7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue
. Т.е. код будет выглядеть следующим образом (рисунок 20):
Рисунок 20
8. В файле style
_
menu
.
css
стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):
Рисунок 21
9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown
. Т.е. код будет выглядеть следующим образом (рисунок 22):
Рисунок 22
10. В файле style
_
menu
.
css
стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):
Рисунок 23
11. И добавим еще цвет фона файлу menu.html (рисунок 24)
Рисунок 24
12. В результате получим следующую web-страницу (рисунок 25)
Рисунок 25
В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:
style
.
css
style
_
menu
.
css
ploshady
.
html
menu
.
html
Здравствуйте уважаемые читатели блога сайт. После блока статей посвященных HTML я решил познакомить вас с CSS, так как средств разметки недостаточно для оформления документов. И вообще, изучение HTML это лишь первый этап в процессе обучения созданию сайтов, следующим шагов является изучение CSS. Так давайте же узнаем что такое CSS и зачем они нужны
.
Если посмотреть страницы с чистым HTML, то они выглядят невзрачно. Однообразный текст, таблицы без рамок, тоскливая черно-белая расцветка... Конечно, сделать страницы сайта ярче можно и средствами html, но такой подход только загромождает исходный код и не предоставляет никакой гибкости. Поэтому в современной верстке за внешнее оформление страниц сайта отвечает язык стилевой разметки CSS
или просто таблица стилей.
Каскадные таблицы стилей
(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой web-страницы и отдельных ее элементов. Эти параметры определяют фон страницы, цвет текста, выравнивание абзацев, параметры рамки таблицы и многое другое.
Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете . А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.
Поэтому минимальные знания возможностей каскадных таблиц стилей скорей всего потребуются вам как при создании сайта с нуля, так и при внесении изменений в уже существующий проект. В первую очередь эти знания понадобятся при работе над дизайном сайта.
Добавление стилей или как подключить CSS к HTML документу
Прежде чем говорить о синтаксисе или о свойствах каскадных таблиц стилей, необходимо научиться подключать их к html документу. Всего существует три способа подключения css к html.
1. Первый способ заключается в размещении стилей в отдельном файле или нескольких файлах с расширением.css. В этом случае для подключения CSS стилей используется link
, в котором прописан путь до внешнего файла стилей. Помещается этот метатег в раздел заголовков соответствующей веб страницы между тегами head. Вот формат его написания:
Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».
Так примерно будет выглядеть строчка подключения стилей CSS в html коде:
... .css"/>
...
Преимущество этого способа состоит в том, что внешнюю таблицу стилей
можно привязать сразу к нескольким веб страницам.
2. Второй способ заключается в написании так называемых глобальных стилей
, которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style
и обычно помещают в секцию заголовка между тегами head:
...
...
Dezavantajul acestei metode este că regulile CSS de stil global se aplică numai paginii web în care sunt scrise.
3. A treia cale este așa-numitele stiluri încorporate sau interne. Pentru a face acest lucru, pur și simplu trebuie să o plasați în eticheta html necesară atribut de stil, care include ca parametri un set de proprietăți CSS:
Paragraf cu fundal gri și text roșu
Mai mult, proprietățile specificate în atributul style se aplică doar unui element html. De obicei, această metodă de includere a stilurilor este utilizată în etapa de depanare a designului site-ului, iar apoi proprietățile CSS rezultate sunt transferate într-un fișier cu stiluri externe.
Crearea stilurilor CSS. Sintaxa foilor de stil în cascadă - reguli, proprietăți, selectoare.
Acestea. o regulă de stil include un selector de stil și o listă de proprietăți de stil cu valorile lor în acolade ("(" și ")"):
selector folosit pentru a lega elementele paginii web la care ar trebui să-și extindă acțiunea;
perechile „Proprietate: Valoare” sunt separate prin punct și virgulă („;”) și pot fi oricât de multe doriți;
între ultima pereche „Proprietate: Valoare” și acolada de închidere, simbolul punct și virgulă poate fi omis;
proprietate de stil reprezintă unul dintre parametrii elementului de pagină html: culoarea textului, caracterul fontului, valoarea indentării;
spațiile și liniile noi atunci când scrieți regulile CSS nu sunt critice, browserul le ignoră, astfel încât să puteți formata codul după cum doriți;
de asemenea, codul nu face distincție între majuscule și minuscule.
Pentru a fi mai clar, să ne uităm la câteva exemple.
Să analizăm această regulă CSS:
body este un selector care este numele etichetei ;
background este o proprietate de stil care stabilește parametrii de fundal;
#0000FF este valoarea proprietății de stil de fundal, care este un cod de culoare în format RGB.
Ca urmare, acest stil va fi aplicat elementului de corp al paginii web și va picta fundalul paginii în culoarea specificată. Stilul considerat se numește stilul de înlocuire a etichetei, deoarece numele etichetei fără caractere este specificat ca selector< и >.
Acest stil spune că browserul va afișa orice text plasat în etichete.
verde și dați-i o dimensiune a fontului de 24 de pixeli.
Ca selector de etichete, pe lângă numele etichetei, puteți specifica Clasă:
text galben (culoare: galben)
Numele clasei trebuie să fie format din litere latine, cifre și cratime și trebuie să înceapă cu o literă. Și în definirea unei reguli CSS, numele clasei trebuie să fie precedat de un punct, ceea ce înseamnă că clasa de stil este în curs de definire. Acest stil va fi aplicat tuturor etichetelor care au atribut de clasă iar valoarea lui va fi numele clasei de stil fără punct:
Acest paragraf are text portocaliu
În exemplu, am atașat etichetei
regula css cu numele clasei text galben. Ca urmare, textul din acest paragraf va fi afișat în portocaliu.
Atributul clsss poate fi setat la mai multe nume de clase de stil separate prin spații. În acest caz, efectul claselor de stil va fi:
text cursiv (stil font: cursiv)
text galben cu caractere cursive
În acest exemplu, eticheta
Am legat două clase simultan: text galben și text cursiv. Ca urmare, conținutul etichetei va fi afișat cu font galben și italic.
Pe lângă clase, puteți utiliza regulile css ca selector identificator Un care specifică numele unic al elementului. Aici totul este la fel ca și în cazul claselor de stil, doar că există câteva diferențe:
în selectorul de reguli CSS este specificat și numele identificatorului, dar în locul unui punct, înaintea numelui acestuia este plasat un semn hash „#”;
legarea la elementul html se face prin atributul id, a cărui valoare este setată la numele stilului fără semnul lire sterline;
valoarea atributului id trebuie sa fie unica in cadrul paginii, adica in codul html nu poate exista decat un singur element cu valoarea data atributului id, altfel codul nu va fi valabil.
Să ne uităm la un exemplu pentru claritate:
#textcenter(text-align: center;)
Textul central
O regulă css este atașată elementului p (paragraf) folosind atributul id, care aliniază textul la centrul paginii. Nu mai este permisă crearea de elemente în pagină cu această valoare de atribut id, altfel codul html nu va fi valid.
Pe lângă modalitățile considerate de descriere a stilurilor, css vă permite să creați stiluri combinateși setați mai multe stiluri identice deodată. Să vedem un exemplu:
h1.redtext, p puternic (culoare: roșu)
În exemplu, sunt specificați doi selectori separați prin virgule: „h1.redtext” și „p strong”. Primul selector spune că în toate elementele h1 care au o valoare a atributului de clasă egală cu textul roșu, textul va fi afișat cu roșu. În al doilea selector, același lucru se va întâmpla pentru toate elementele puternice care sunt imbricate în eticheta p:
Acest titlu este afișat cu roșu
text simplu, text roșu
CSS (Foi de stil în cascadă) sau Foi de stil în cascadă, sunt folosite pentru a descrie aspectul unui document scris într-un limbaj de marcare. Stilurile CSS sunt de obicei folosite pentru a crea și stiliza paginile web și elementele interfeței cu utilizatorul scrise în HTML și XHTML, dar pot fi aplicate și oricărui tip de document XML, inclusiv XML, SVG și XUL.
Foile de stil în cascadă descriu modul în care elementele sunt formatate folosind proprietăți și valorile valide pentru acele proprietăți. Pentru fiecare element, puteți utiliza un set limitat de proprietăți, alte proprietăți nu vor avea niciun efect asupra acestuia.
Declarația de stil constă din două părți: elementul paginii web − selector, și comenzi de format - bloc de anunțuri. Selectorul spune browserului ce element să formateze, iar blocul de declarare (codul între acolade) listează comenzile de formatare - proprietăți și valorile acestora.
Orez. 1. Structura de declarare a stilului CSS
Tipuri de foi de stil în cascadă și specificul acestora
1. Tipuri de foi de stil
1.1. Foaie de stil externă
Foaie de stil externă este un fișier text cu extensia .css, care conține un set de stiluri CSS pentru elemente. Fișierul este creat în editorul de cod, la fel ca o pagină HTML. Fișierul poate conține doar stiluri, fără markup HTML. O foaie de stil externă este atașată unei pagini web folosind o etichetă situat in interiorul sectiei
. Aceste stiluri funcționează pentru toate paginile site-ului.
Puteți atașa mai multe foi de stil la fiecare pagină web adăugând mai multe etichete în succesiune , specificând scopul acestei foi de stil în atributul etichetă media. rel="stylesheet" indică tipul de link (link către foaia de stil).
Atributul type="text/css" nu este cerut de standardul HTML5, deci poate fi omis. Dacă atributul lipsește, este implicit tip="text/css" .
1.2. Stiluri interne
Stiluri interneîncorporat în secțiune
document HTML și sunt definite în interiorul etichetei. Stilurile interne au prioritate față de stilurile externe, dar înlocuiesc stilurile inline (specificate prin atributul stil).
...
1.3. Stiluri inline
Când scriem stiluri inline, scriem codul CSS în fișierul HTML, direct în interiorul etichetei elementului cu atribut de stil:
Fii atent la acest text.
Astfel de stiluri afectează numai elementul pentru care sunt setate.
1.4. regulă @import
regulă @import 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:
Regula @import este folosită și pentru a include fonturi web:
Selectoare 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.
2.1. Selector universal
Se potrivește cu orice element HTML. De exemplu, * (marja: 0;) va anula 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) .
2.2. Selector de elemente
Selectoarele de elemente vă permit să formatați toate elementele de acest tip pe toate paginile site-ului. De exemplu, h1 (familie de fonturi: homar, cursiv;) va seta stilul general de formatare pentru toate titlurile h1.
2.3. selector de clasă
Selectorii de clasă vă permit să stilați unul sau mai multe elemente cu același nume de clasă plasat locuri diferite pagina sau pe pagini diferite site-ul. De exemplu, pentru a crea un titlu cu clasa de titlu, trebuie să adăugați atribut de clasă cu valoarea titlului în eticheta de deschidere
și setați stilul pentru clasa specificată. Stilurile create cu o clasă pot fi aplicate altor elemente, nu neapărat de acel tip.
Selectorul ID permite formatarea unu element specific. ID-ul trebuie să fie unic și poate apărea o singură dată pe o singură pagină.
#sidebar ( lățime: 300px; float: stânga; )
2.5. Selector de descendenți
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.
Dacă doriți să formatați copiii unui anumit element, trebuie să dați acelui element o clasă de stil:
p.mai întâi a (culoare: verde;) - stilul dat se va aplica tuturor legăturilor, descendenți ai paragrafului cu clasa întâi;
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
Mai întâi a (culoare: verde;) - acest stil va fi aplicat oricărui link situat în interiorul altui element, notat cu clasa .first.
2.6. Selector de copii
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. De exemplu, p > strong va selecta toate elementele puternice care sunt copii ale elementului p.
2.7. Sora selectoare
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.
h1 + p - selectează toate primele paragrafe imediat după orice etichetă
fără a afecta restul paragrafelor;
h1 ~ p va selecta toate paragrafele care sunt frați cu orice titlu h1 și imediat după acesta.
2.8. Selector de atribute
Selectorii de atribute selectează elemente în funcție de numele sau valoarea atributului:
[atribut] - toate elementele care conțin atribut specificat, — toate elementele pentru care este setat atributul alt;
selector[atribut] - elemente de acest tip care contin atributul specificat, img - doar pozele pentru care este setat atributul alt;
selector[attribute="valoare"] — elemente de acest tip care conțin atributul specificat cu o anumită valoare, img — toate imaginile ale căror nume conțin cuvântul floare ;
selector[atribut~="valoare"] - elemente care conțin parțial valoarea dată, de exemplu, dacă un element are mai multe clase separate printr-un spațiu, p - paragrafe al căror nume de clasă conține caracteristică ;
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ă;
selector[atribut^="valoare"] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http:// ;
selector[attribute$="valoare"] - elemente a căror valoare de atribut se termină cu valoarea specificată, img - toate imaginile în format png;
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 .
2.9. Selector de pseudo-clase
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:
:hover - orice element care este trecut cu cursorul mouse-ului;
:focus - un element interactiv la care a fost navigat cu tastatura sau activat cu mouse-ul;
:active - elementul care a fost activat de utilizator;
:valid - câmpuri de formular al căror conținut a fost validat în browser pentru conformitatea cu tipul de date specificat;
:invalid - câmpuri de formular al căror conținut nu corespunde tipului de date specificat;
:activat - toate câmpurile de formular active;
:disabled - câmpuri de formular dezactivate, adică într-o stare inactivă;
:in-range - câmpuri de formular ale căror valori sunt în intervalul specificat;
:out-of-range - câmpuri de formular ale căror valori nu sunt incluse în intervalul setat;
:lang() - elemente cu text în limba specificată;
:not(selector) - elemente care nu conțin selectorul specificat - clasă, identificator, nume sau tip câmp de formular - :not() ;
:target este elementul # la care se face referire în document;
:checked - elemente de formular selectate (selectate de utilizator).
2.10. Selector structural de pseudo-clasă
Pseudoclase structurale selectează elementele copil conform parametrului specificat în paranteze:
:nth-child(odd) - elemente copil impar;
:nth-child(even) - chiar elemente copil;
:nth-child(3n) - fiecare al treilea element dintre copii;
:nth-child(3n+2) - selectează fiecare al treilea element, începând de la al doilea element copil (+2) ;
:nth-child(n+2) - selectează toate elementele, începând cu al doilea;
:nth-child(3) - selectează al treilea element copil;
:nth-last-child() - în lista de elemente copil, selectează elementul cu locație specificată, similar cu :nth-child() , dar invers față de ultimul;
:first-child - vă permite să stilați doar primul element copil al etichetei;
:last-child - vă permite să formatați ultimul element copil al etichetei;
:only-child - selectează un element care este singurul copil;
:empty - selectează elemente care nu au copii;
:root - selectează elementul care este rădăcina documentului - elementul html.
2.11. Selector de pseudo-clase de tip structural
Indicați un anumit tip de etichetă copil:
:nth-of-type() - selectează elemente prin analogie cu :nth-child() , luând în considerare doar tipul elementului;
:first-of-type - selectează primul copil al tipului dat;
:last-of-type - selectează ultimul element din tipul dat;
: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;
:only-of-type - selectează singurul element de tipul specificat dintre copiii elementului părinte.
2.12. Selector de pseudo-element
Pseudo-elementele sunt folosite pentru a adăuga conținut care este generat folosind proprietatea conținut:
:first-letter - selectează prima literă a fiecărui paragraf, se aplică doar elementelor bloc;
:first-line - selectează prima linie a textului elementului, se aplică numai elementelor bloc;
Pentru o selecție mai precisă a elementelor pentru formatare, puteți utiliza combinații de selectoare:
img:nth-of-type(even) - va selecta toate imaginile par al căror text alternativ conține cuvânt css.
4. Gruparea selectoarelor
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:
H1, h2, p, span (culoare: roșie; fundal: alb; )
5. Moștenire și cascadă
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 apare în modul în care diferitele tipuri de foi de stil sunt aplicate unui document și în modul în care regulile conflictuale se suprascriu reciproc.
5.1. Moştenire
Moştenire 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.
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 .
Moștenirea forțată
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.
Cum sunt setate și cum funcționează stilurile CSS
1) Stilurile pot fi moștenite de la elementul părinte (proprietăți moștenite sau folosind valoarea de moștenire);
2) Stilurile din foaia de stil de mai jos suprascrie stilurile din foaia de stil de mai sus;
3) Stilurile din diferite surse pot fi aplicate unui element. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator al browserului. Pentru a face acest lucru, faceți clic dreapta pe element ș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ăr de serie linii de cod.
4) Când definiți un stil, puteți utiliza orice combinație de selectori - un selector de element, o pseudo-clasă de element, o clasă sau un identificator de element.
În cascadă 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.
Regulă!important
Greutatea unei reguli poate fi setată 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.
Specificitate
Pentru fiecare regulă, browserul calculează specificitatea selectorului, 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ă:
0, 1, 0, 0 se adaugă pentru id; pentru clasa 0, 0, 1, 0 se adaugă; Se adaugă 0, 0, 0, 1 pentru fiecare element și pseudo-element; pentru un stil inline adăugat direct unui element, 1, 0, 0, 0 ; selectorul universal nu are specificitate.
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.
Ordinea meselor conectate
Puteți crea mai multe foi de stil externe și le puteți lega la aceeași pagină web. Dacă în mese diferite se va întâlni sensuri diferite proprietățile unui element, apoi, ca rezultat, regula care se află în foaia de stil din lista de mai jos va fi aplicată elementului.
Serghei Savenkov
un fel de recenzie „rare”... parcă s-ar grăbi undeva
Orez. 1. Structura de declarare a stilului CSS 
Orez. 2. Modul dezvoltator în