Методическое пособие

Каскадные таблицы стилей и их применение

Автор Петриченко В.А.

Педагог дополнительного образования
научно-технического отдела

Санкт-Петербург 2019

---

Содержание

Аннотация        2

1. Основные сведения        2

2. Способы создания стилей        4

3. Правила формирования стилей        6

4. Литература и интернет-ресурсы        10        

---

Аннотация

В методическом пособии представлен теоретический и практический материал по формальному языку описания внешнего оформления html-документа.

Все примеры расположены в папке:

J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\

Методичка находится в папке J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\Методичка по CSS

1. Основные сведения

Каскадные таблицы стилей (Cascading Style Sheet – CSS) - формальный язык описания внешнего вида документа, стандарт стилей, объявленный консорциумом  W3C (WWW Consorcium). Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

CSS – это язык, содержащий набор свойств, для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык (селекторы разного типа) для установления связи с HTML-элементами.

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

С помощью CSS можно назначить размер шрифта, выбрать шрифт и цвет.

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

Заголовок 1     Текст 1   Заголовок 2     Текст 2   Заголовок 3     Текст 3

Для задания собственных стилей можно использовать  3 способа.

2. Способы создания стилей

2.1. Внутритекстовые стили

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

Primer 1.html   style="font-size:24px; font-family:Arial; color: #00F; text-align:center;">       Заголовок 1       Текст 1   Заголовок 2     Текст 2   Заголовок 3     Текст 3

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

2.2. Встраиваемые стили на html-страницу

Для применения стиля на все тэги данной  html-станицы можно их встроить в управляющую часть html-кода страницы с помощью тэга

 

style="font-size:30px; font-family:Arial; color: #00F; text-align:center;">

      Заголовок 1

 

   

Текст 1

 

Заголовок 2

   

Текст 2

 

Заголовок 3

   

Текст 3

В раздел управляющих тэгов вставляем тэг 

<style type=”text/css”>

h2                                                         - селектор

{

       font-size:20px;

       font-family: Arial;                      - правило

       color: #0FF;

}

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

Таким образом, встраиваемые стили действуют на отображение элементов только данной страницы.

2.3. Внешние таблицы стилей

Для создания внешних таблиц стилей создается файл, например, style.css, в котором содержатся описания всех стилей всего сайта (набор деклараций для описания стилей всего сайта).

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

primer3.html   Заголовок 1     Текст 1   Заголовок 2     Текст 2   Заголовок 3     Текст 3

style-primer.css h1 {         font-size:30px;         font-family:Arial;         color: #00F;         text-align:center; } h2 {         font-size:20px;         font-family:Arial;         color: #0FF; }

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

3. Правила формирования стилей

Таблица стилей состоит из набора определений стилей, которые формируются двумя компонентами:

• Селектором (один или несколько селекторов, разделенных запятыми).
• Блоком описаний свойств – атрибутов и значений, заключенных в фигурные скобки.

h1,  h2 {

        font-family:Arial;

        color: #00F;

        text-align:center;

}

Виды селекторов

Существует 3 вида селекторов:

1. Селектор типа (имя тэга)

Это имя тэга, к которому относится правило.

p {

  font-size: 1.0tm;

}

2. Селектор – класс (class=””)

Применяется для группы тэгов одного типа, но по-разному оформленных. Например, на странице есть  несколько элементов

Текст

, но оформлены они по-разному. Чтобы отличить одно оформление от другого используют селектор типа class.

class=”sidebar”> Текст

.

.sidebar {

  color: #FFF;

}

Тогда тэги,

текст

будут оформлены по умолчанию, а цвет текста для тэгов с классом sidebar будут иметь текст белого цвета.

3. Селектор идентификатор ( id=””)

Селектор-идентификатор  применяется для присваивания стиля одному конкретному элементу.

#logo {

    width: 100px;

    height: 60px;

    margin-top: 20px;

    margin-left: 40px;

}

4. Комбинированные  селекторы

   

#logo  img {

    padding:3px;

    border: 1px solid #eeeeee;

}

В данном примере используется комбинация из двух селекторов:  идентификатор  #logo  и  селектор типа -  img.

5. Дочерние селекторы

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

primer 4.html       Text 1     Text 2                           Text 3	.sidebar p {         color: #FF0000; }
Тот же код для дочернего селектора	.sidebar > p {         color: #FF0000; }

Если мы применим селектор

.sidebar p {

        color: #FF0000;}

то все абзацы будут оформлены красным цветом.

Если мы напишем селектор:

.sidebar > p {

        color: #FF0000;

}

В этом случае красным цветом оформятся родительские абзацы

Text 1

и  

Text 2

, т.к. только они являются дочерними абзацами слоя с class= “sidebar.”

6. Смежные селекторы

Смежные селекторы ссылаются на элемент, расположенный непосредственно после обозначенного селектором элемента.

primer-5.html Заголовок       Текст 1     Текст 2   p  {    color: #cdcdcd; h2 {     color: #00FF00; } h2+p {    color: # FF0000; }

При этом только смежный элемент будет оформлен данным правилом.

7. Селекторы псевдоклассов

a: link        вид ссылки после загрузки страницы

a: visited   вид посещенной ссылки

a: hover    вид ссылки при наведении мыши

a: active    вид ссылки при щелчке на ней

На главную

Данная последовательность обязательно при назначении стилей.

8. Псевдокласс    : first-child

Текст 1     Текст 2

p {font-size: 100%; } .article p:first-child {         font-size: 150%;         color: red; }

Первый по порядку дочерний элемент обозначаемого родителя.

Литература

Дуванов А.А. Web-конструирование. DHTML.-СПб.: БХВ-Петербург, 2012.-512 с.: ил.

Интернет-ресурсы

1. Рекомендации по оформлению кода HTML/CSS  https://habr.com/ru/post/143452/

2. Справочник htmlbook.ru   http://htmlbook.ru/samcss/sosednie-selektory