Каскадные таблицы стилей и их применение
методическая разработка по информатике и икт

Петриченко Вера Алексеевна

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

Скачать:


Предварительный просмотр:

Государственное бюджетное учреждение дополнительного образования 
Дворец детского (юношеского) творчества Красногвардейского района
Санкт-Петербурга "На Ленской"

        

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

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

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

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

Санкт-Петербург 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

   

Текст 1

 

Заголовок 2

   

Текст 2

 

Заголовок 3

   

Текст 3

пример1-1.png

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

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

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

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

Primer 1.html

Пример 1-2. Внутритекстовый стиль

 

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


Пример 3. Внешнее подключение стилей

 

Заголовок 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;

}

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

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

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

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

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;

}

Пример-4.png

Тот же код для дочернего селектора

.sidebar > p {

        color: #FF0000;

}

Пример-4-2.png

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

.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;

}

Пример-5.png

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

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;

}

Пример-6.png

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

Литература

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

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

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

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


По теме: методические разработки, презентации и конспекты

Таблица "Стили речи"

Таблица "Стили речи" поможет при планировании урока, сэкономит время учителя....

Занятие 3. Таблица "Стили речи. Задания"

Заполнить таблицу, используя  материалы презерт ации и книги "Практическая стилистика"...

Таблица "Стили речи"

Таблица "Стили речи" заполняется после изучения учащимися презентации и материала из учебника "Практическая стилистика"....

Таблица "Стили речи"

Материал для учащихся. Обобщающая таблица "Стили речи"...

Каскадные таблицы стилей. Учебно-методические материалы.

Пособие содержит материалы в обеспечение проведения занятий по теме «Каскадные таблицы стилей» двухгодичного курса «Создание Web-страниц».При изучении этой темы учащиеся знакомятся с современной техно...

Каскадные таблицы стилей. Тест по теме: Свойства шрифта.

Тест, с возможностью самостоятельно проверить правильность ответа на вопросы, автоматического подсчета правильных ответов по теме «Каскадные таблицы стилей. Свойства шрифта», выставлении оценки, а так...

Лингвистическое краеведение. Тексты для анализа: определение стилей речи. Таблица "Стили речи"

Лингвистическое краеведение. Тексты для анализа: определение стилей речи. Таблица "Стили речи"...