Найти на сайте
ГлавнаяИнтернет

Каскадная таблица стилей css.

Здравствуйте уважаемые читатели блога сайт. После блока статей посвященных 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:


...

...

Недостаток этого способа в том, что правила CSS глобальных стилей применяются только к той веб-странице, в которой они прописаны.

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style , который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Селектор {
Свойство: Значение;
Свойство: Значение;
...
Свойство: Значение
}

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

  • селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
  • пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
  • между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
  • свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
  • пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
  • так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

  • body — это селектор, который представляет из себя имя тега ;
  • background — свойство стиля, с помощью которого задаются параметры фона;
  • #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега , потому что в качестве селектора указано имя тега без символов < и >.

Рассмотрим еще пример:

h1 {
font-size: 24px;
color: green;
}

Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги

зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс :

Yellowtext {color:yellow}

Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут class и его значение будет равно имени стилевого класса без точки :

В этом абзаце оранжевый текст

В примере мы привязали к тегу

Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

В качестве значения атрибута clsss можно задавать несколько имен стилевых классов, разделив их пробелами. В этом случае действие стилевых классов сложится:

Cursivtext {font-style: italic}

желтый текст курсивом

В этом примере к тегу

Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор , который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

  • в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
  • привязка к html элементу осуществляется через атрибут id , в качестве значения которого устанавливают имя стиля без знака решетки;
  • значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

#textcenter{text-align: center;}

Текст по центру

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Этот заголовок отображается красным цветом


обычный текст, красный текст

Наверное всем известно, что HTML задает структуру документа, а CSS (Cascading Style Sheets, каскадные таблицы стилей) отвечает за оформление веб-страницы, положение и вид элементов. Так сложилось, что HTML и CSS отдельно не используются. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих
технологий не получится грамотно сверстать ни один документ. Многие из нас изучали эти технологии подробнее. Но лично мне до конца так и не удалось «постичь» все истины и возможности CSS. Далее я постараюсь выделить самые важные моменты, которые нужно знать о CSS.

Что такое каскадные таблицы стилей?

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Посмотрите на рисунки ниже, чтобы понять разницу:

Исходный код такого документа имеет вид:

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= >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
<title > Флексагон</ title >
<link rel = "stylesheet" href = "style.ess" type = "text/css" / >
</ head >
<body >
<h1 > Флексагок</ h1 >
<р> Флексагок представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.</ р>
</ body >
</ html >

Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

body {

font-size : llpt;
background-color : #f0f0f0 ; /* Цвет фона веб-страницы */
color : #333 ; /* Цвет основного текста */
}
h1 {
color : #а52 а2 а; /* Цвет заголовка */
font-size : 24pt ; /* Размер шрифта в пунктах */
font-family : Georgia, Times, serif ; /* Семейство шрифтов */
font-weight : normal ; /* Нормальное начертание текста */
}
p {
text-align : justify ; /* Выравнивание по ширине */
margin-left : бОрх; /* Отступ слева в пикселах */
margin-right : Юрх; /* Отступ справа в пикселах */
border-left : lpx solid #999 ;
border -bottom : lpx solid #999 ;
padding -left : Юрх;
padding -bottom : 1Opx;
}

В файле style.css как раз и описаны все параметры оформления таких тегов как, <body > , и <p >
Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объема повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.

Типы стилей

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.

Стиль браузера . Подобные стили применяются при использовании «чистого» HTML.

Стиль пользователя. Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.

Если возникает конфликт при изменении стиля одного и того элемента документа, то стиль пользователя имеет самый высокий приоритет, далее следует стиль автора и стиль браузера.

Как добавить стили на страницу?

Добавить CSS стили на страницу можно несколькими способами:

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер .

Подключить эти стили можно следующим образом:

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" >


Стили</ 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 >Заголовок</ h1 ><br> <р>Текст</ р><br> </ body ><br> </ html ></p> </td> </tr></tbody></table><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></p> </td><td><p>H1 { <br>color : #000080 ; <br>font-size : 2em ; <br>font-family : Arial, Verdana, sans-serif ; <br>text-align : center ; <span>/* Выравнивание по центру */ </span><br>} <br> P { <br>padding -left : 20px ; <br>} </p> </td> </tr></tbody></table><p>Как видно из кода выше, на html-страницу добавляется запись, сообщающая браузеру откуда нужно получать стили. Сам <a href="/stilevoi-fail-css-podklyuchenie-css-k-html-dokumentu/">стилевой файл</a> содержит только описание стилей. Такое разделение html и <a href="/html5-kommentarii-v-kode-kak-pisat-v-css-kommentarii-v-kode-kommentarii-v/">css кода</a> облегчает разработку и сопровождение сайтов. Такому стилю верстки рекомендуется придерживаться.</p> <h3>Глобальные стили</h3> <p>При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в <a href="/zashchita-lichnyh-dannyh-na-telefone-na-sluchai-poteri-ili-krazhi-zashchita-lichnyh/">данном случае</a> прямо на странице с помощью контейнера <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>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации <a href="/elementy-yandeks-bara-yandeks-bar-dlya-razlichnyh-brauzerov-vizualnyi/">различных браузеров</a>. Готовьтесь к трудностям.</p> <p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p> <p><i>Каскадные (многоуровневые) таблицы стилей </i><i> </i><i>- </i><i> </i><i><b>cascading style sheets (CSS) </b> </i> - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики. Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.</p><p>CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).</p><p>Впервые идея форматирования HTML-документов с <a href="/css---vyravnivanie-po-centru-vertikalnoe-vyravnivanie-elementov-s/">помощью CSS</a> была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками, и по сей день.</p><p>Что значит слово <i>"каскадный"? </i>Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Браузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей. Это означает, что вы можете использовать все три типа стилей, и браузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей. Другой аспект каскадирования - <i>наследование (</i><i>inheritance </i><i>). </i> Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами <a href="/vstavka-izobrazheniya-v-html-kod-stranicy-vstavka-izobrazheniya-v/">страницы HTML</a>. Например, если вы примените определенный цвет текста в теге <i><р> </i>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.</p><p>Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.</p><p>Существует три метода для применения таблицы стилей к документу HTML:</p><ul><p><b>Встроенный (Inline). </b> Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать <a href="/freimy-shablony-html-dlya-ponyatie-freima-v-html-atributy-tega-frame-dlya-nastroiki/">внешний вид</a> отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.</p><p><b>Внедренный (Embedded) </b> Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.</p><p><b>Связанный (Linked или External) </b>Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей <i><b>(master styles) </b> </i>, которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение.css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.</p> </ul><p>Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Синтаксис всех методов, используемых для применения стилей к <a href="/kak-otkryt-fail-s-kompyutera-v-brauzere-preobrazovanie-html-faila-v/">документа HTML</a>, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:</p><ul><p><b>Указатель (Selector). </b> Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка <b>(H1) </b> или абзаца <b>(Р) </b>. Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.</p><p><b>Свойство (Property). </b> Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.</p><p><b>Значение (Value). </b> Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня <b>H1 </b>(указатель) и вы включаете свойство <b>type family </b>(семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.</p><p><b>Описание (Declaration). </b> Свойства и значения объединяются, образуя описание.</p><p><b>Строка (Rule). </b> Указатель и описание образуют строку</p> </ul><p>Итак, каскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:</p><p><b>body{background:black} </b></p><p>В данном случае объявлено правило форматирования тега <i><b>body </b> </i>, а именно - свойству стиля <i><b>background </b> </i>присвоено значение <i><b>black </b> </i> (черный). В результате применения этого правила цвет фона всего документа изменится на черный.</p><p>Свойства CSS должны находиться в фигурных скобках. Для каждого тега HTML можно указать не одно, а несколько свойств стиля.</p><p>Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).</p><p><b>body{background:black;color:white} </b></p><p>Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:</p><p><b>background:black; </b></p><p><b>color:white} </b></p><p>Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:</p><p><b>body,td,h1{ </b></p><p><b>background:black; </b></p><p><b>color:white} </b></p><p>Встроенный стиль применяется к любому тегу HTML с помощью атрибута <b>style </b><i> </i>следующим образом:</p><p><b><P style="font: 12pt Courier New">The text in this line will </b></p><p><b>display as 12 point text using the Courier New font. </b></p> </b></p><p><b><p><b>The text in this line will display as 18 point text using the </b></p><p><b>Arial font. </b></p> </b></p><p>Посмотрим на результат:</p><p>The text in this line will display as 12 point text using the Courier New font.</p><p>The text in this line will display as 18 point text using the Arial font.</p><p>Можно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили. Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <i><b><div> (division - раздел) </b> </i> и <i><b><span> (промежуток) </b> </i>. Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <i><b><div> </b> </i> и <i><b><span> </b> </i> состоит в том, что <i><b><div> </b> </i> создает принудительный разрыв строки,a <i><b><span> </b> </i> -нет. Следовательно,нужно использовать <i><b><span> </b> </i> для изменения стиля любой части текста, меньшей абзаца.</p><p>Вот пример работы тега <i><b><div> </b> </i>:</p><p><b><div style="font-family: Garamond; font-size: 18 pt;>"AII of the </b></p><p><b>text within this section is 18 point Garamond. </b></p><p>AII of the text within this section is 18 point Garamond.</p><p>и тега <i><b><span> </b> </i>:</p><p><b><span style="color:#ff3300;"> This text appears in the color red, </b></p><p><b>with no line break after the closing span tag </span> and the rest of </b></p><p><b>1. </b> Создаем папку, в которой будут наша html страница, и каскадная таблица стилей. Пусть, папка будет называться "css"</p><p><b>2. </b> Создаем простую html страничку (index.html).</p><p><b>3. </b> Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.</p><p>В результате получится документ показанный на рисунке 2.1:</p><p>Рисунок 2.1</p><p>Все, файл который будет содержать в себе стили css готов.</p><p>Теперь давайте подключим созданную таблицу стилей к файлу index.html.</p><p>Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:</p><p><b><link href="style.css" rel="stylesheet" type="text/css"> </b></p><p>Здесь, в атрибуте <b>href="style.css" </b> прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.</p><p>Например, если наш файл index.html будет иметь такой код, рисунок 2.2:</p><p><img src='https://i0.wp.com/studfiles.net/html/2706/1150/html_9phP5XeW90.EBoA/img-rARfMB.png' height="166" width="353" loading=lazy></p><p><b>Рисунок 2.2 </b></p><p>Если же все будет сделано и сохранено правильно, то в браузере Вы увидите следующее, рисунок 2.3.</p> <p><b>СSS - Cascading Style Sheets (Таблицы Каскадных Стилей) </b> - <i>это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. </i></p> <p>С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.</p> <p>CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.</p> <p>Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.</p> <p>Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.</p> <p>Существует <b>три вида таблиц </b> стилей:</p> <p><b>Внутренние таблицы стилей - </b>(Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.</p> <p><b>Глобальные таблицы стилей </b> - (Global Style Sheets) определяют стиль элементов во всем документе.</p> <p><b>Связанные таблицы стилей - </b>(Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.</p> <p><b>Основным понятием CSS является стиль </b> – <i>т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы </i>.</p> <p><b>Практическое освоение CSS </b></p> <p>Существует <b>четыре способа связывания документа и таблицы стилей </b>:</p> <ol><li><b>Связывание - </b> позволяет использовать одну таблицу стилей для форматирования многих страниц HTML</li> <li><b>Внедрение - </b> позволяет задавать все правила таблицы стилей непосредственно в самом документе</li> <li><b>Встраивание в теги документа </b> - позволяет изменять форматирование конкретных элементов страницы</li> <li><b>Импортирование </b>- позволяет встраивать в документ таблицу стилей, расположенную на сервере</li> </ol><p>Остановимся на каждом из этих способов более подробно.</p> <p><b>1. Связывание </b></p> <p>Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <i>LINK </i>, располагающегося внутри тега <i>HEAD </i> ваших страниц:</p> <p><LINK REL=STYLESHEET TYPE="text/css" HREF="URL"></p> <p><b>Первые два параметра </b> этого тега являются <b>зарезервированными именами </b>, требующимися для того, <i>чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. </i></p> <p>Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.</p> <p><b>2. Внедрение </b></p> <p>Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега <i>HEAD </i>, в теге <i>STYLE type="text/css">... </STYLE> </i>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. <b>Параметр <i>type="text/css" </i> </b> является обязательным и <i>служит для указания браузеру использовать CSS </i>.</p> <p><b>3. Встраивание в теги документа </b></p> <p>Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью <b>параметра <i>STYLE </i> </b>, используемого при применении CSS с большинством <a href="/standartnye-tegi-html-tegi-chto-eto-takoe-i-kakie-oni/">стандартных тегов</a> HTML. Этот <b>метод нежелателен </b>, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.</p> <p><b>4. Импортирование </b></p> <p>В теге <i><STYLE> </i> можно <i>импортировать </i> внешнюю таблицу стилей с помощью свойства <i>@import </i> таблицы стилей: <br><b>@import: url(mystyles.css); </b> <br> Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. <b>Значение свойства @import </b> является <i>URL файла таблицы стилей </i>.</p> <p><b>Структура и правила. </b></p> <p><b>Правила каскадных таблиц </b> состоят из <b>селектора </b> и <b>определения. </b></p> <p><b>Селекторы </b></p> <p><b>Синтаксисис </b>: <i>селектор {свойства} </i></p> <p>Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.</p> <p><b>ПРИМЕР </b><b>: </b><i>H1 {color:red; size:20pt;} </i></p> <p>Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).</p> <p>Правила каскадных таблиц стилей, в которых в качестве селектора используются <a href="/osnovnye-tegi-html-html-osnovnye-tegi/">теги HTML</a>, влияют на отображение всех элементов заданного типа в документе.</p> <p>Следующее правило отображает без подчёркивания все ссылки в документе.</p> <p>< STYLE TYPE="text/css"></p> <p>A {text-decoration:none; }</p> <p><b>Классы. </b><b>Классовые селекторы. </b></p> <p>А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется <b>параметр CLASS = "имя класса" </b> или <b>идентификатор ID=«имя элемента», </b> присваивающиеся любому элементу страницы. Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой.</p> <p><b>Синтаксис: </b> <i>селектор.класс {cвойства} </i></p> <p><b>CLASS </b>- атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.</p> <p><b>ПРИМЕР </b><b>: </b><i>H1.blue {color:blue; size:20pt;} </i></p> <p>Все элементы H1 с атрибутом CLASS="blue" станут синими.</p> <p>Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования.</p> <p>Например, можно определить два класса для отображения заголовка первого уровня:</p> <p><STYLE TYPE="text/css"></p> <p>H1.red {color: red; }</p> <p>H1.blue (color:red; background-color: blue}</p> <p><H1 CLASS="red">Красный шрифт</H1></p> <p><H1 CLASS="blue">Красный шрифт на синем фоне</H1></p> <p>В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе <b>задаётся имя класса с лидирующей точкой без указания конкретного элемента </b>, т.е. классы могут быть описаны без явного привязывания их к определенным элементам.</p> <p><b>Синтаксис: </b> .<i>класс {свойства} </i> (<b>перед </b> именем класса <b>ставится точка </b>)</p> <p><b>ПРИМЕР </b>: .green {color:green;}</p> <p>В данном случае все элементы с атрибутом CLASS="green" станут зелеными.</p> <p><b>ПРИМЕР </b><b>: </b></p> <p><STYLE TYPE="text/css"></p> <p>Red {color: red; }</p> <p>Blue (color:red; background-color: blue}</p> <p>Теперь два класса red и blue можно применять к любым элементам документа:</p> <p><P CLASS="red">Красный шрифт</P></p> <p><P CLASS="blue">Красный шрифт на синем фоне</P></p> <p>Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.</p> <p><b>Идентификаторы. </b><b> ID селекторы. </b></p> <p>Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.</p> <p><b>Параметр <i>ID </i>, </b> как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.</p> <p><b>Cинтакс: </b> <i>#id {свойства} </i></p> <p>ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.</p> <p>Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, <b>предваряя его символом #: </b></p> <p><STYLE TYPE="text/css"></p> <p>#myID {letter-spacing: 1em; }</p> <p>H1#form3 (color:red; background-color: blue}</p> <p><P ID=myID>Разрежённые слова в абзаце</P></p> <p><H1 ID=form2>Чёрный заголовок</P></p> <p>В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.</p> <p>Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.</p> <p><b>ПРИМЕР </b><b>: </b></p> <p><title> Пример CSS

Blue {color:blue; font-style:italic}

#boldunderline {text-decoration:underline; font-weight:bold}

Здравствуйте, это моя домашняя страница.

Пока еще в стадии разработки...

Но скоро откроется

Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст).

Контекстуальные селекторы.

Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.

ПРИМЕР : P EM {color:silver;}

В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.

Свойства элементов, управляемых с помощью CSS

Рассмотрим механизм, с помощью которого стили присваиваются элементам Web-страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.),

а параметры в фигурных скобках – список свойств элемента и присвоенных им значений .

Пример :

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять.

  • СВОЙСТВА ШРИФТА
  • ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
  • СВОЙСТВА ТЕКСТА
  • РАЗМЕРЫ ЭЛЕМЕНТА
  • СВОЙСТВА ТАБЛИЦЫ
  • ЕДИНИЦЫ ИЗМЕРЕНИЯ

Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.

Группирование

Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. А также если нужно придать нескольким элементам веб-страницы одинаковые свойства, то при определении селекторы перечисляются через запятую перед блоком свойств.

Например, следующие правила

H1 {font-family: Verdana}

H2 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2 {font-family: Verdana}

Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня

H2 {font-weight: bold}

H2 {font-size: 14pt}

H2 {font-family: Verdana}
можно сгруппировать в виде одного правила, сгруппировав определения:

H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;}

Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:

H2 {font: bold 14pt Verdana}

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.

Наследование

В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет?

Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом , если для него не определено правило форматирования?

В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом.

Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.

Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом BODY:

BODY {color: black;

font-family: "Times New Roman";

background: url(picture.gif) white;

Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.

Существует способ скрыть от устаревших браузеров описания стилей , располагающихся в теге , и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.