Презентация на тему: "Каскадные таблицы стилей CSS"
презентация к уроку на тему
Опубликовано 30.08.2016 - 23:01 - Зябухина Алла Владимировна
Презентация на тему: "Каскадные таблицы стилей CSS": понятие таблиц стилей, правила, формат написания правил CSS, особенности встраивания правил таблиц стилей в Web-документ.
Скачать:
| Вложение | Размер |
|---|---|
 prezentatsiya_na_temu_css.pptx | 220.97 КБ |
Предварительный просмотр:
Подписи к слайдам:
Каскадные таблицы стилей CSS Заголовки</ title> <style type="text/css"> h1 { color: #a6780a; font-weight: normal; } h2 { color: olive; border-bottom: 2px solid black; } </style> </head> <body> <h1> Заголовок 1</ h1> <h2> Заголовок 2</ h2> </body> </html></p><p class='slide-number'>Слайд 12</p><p>3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере. Выполняется это с помощью свойства @import:url("mystyles.css").</p><p class='slide-number'>Слайд 13</p><p>4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы. Пример: <H1 style =" color:red "> Заголовок 1. Отображается красным цветом </H1></p><p class='slide-number'>Слайд 14</p><p>Приоритеты CSS (от низшего к высшему), используемые при форматировании: 1. Связанная таблица стилей (по LINK) 2. Импортируемая таблица стилей (@ import ) 3. Правила с элементом html в качестве селектора 4. Правило с параметром CLASS в качестве селектора 5. Правило с параметром ID в качестве селектора 6. Встроенное в тэг html правило</p><p class='slide-number'>Слайд 15</p><p>Связанные , внедренные и импортированные таблицы стилей влияют на форматирование всех элементов документа. Встраивание таблицы стилей в конкретный тэг влияет только на отображение его элементов. Все способы встраивания таблиц стилей свободно могут сочетаться в одном документе. Вложенный элемент наследует правила форматирования элемента-родителя</p><p class='slide-number'>Слайд 16</p><p>Группирование Группирование селекторов H1 { font-family : Verdana } H2 { font-family : Verdana } H1 , H2 { font-family : Verdana } 2. Группирование определений H2 {font-weight: bold} H2 {font-size: 14pt} H2 {font-family: Verdana} H2 ( font-weight : bold ; font -size: 14pt; font-family : Verdana }</p><p class='slide-number'>Слайд 17</p><p>Группирование свойств H2 { font : bold 14pt Verdana } При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.</p><p class='slide-number'>Слайд 18</p><p>Наследование Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.</p><p class='slide-number'>Слайд 19</p><p>Идентификаторы Идентификатор элемента задается при помощи параметра id , в качестве значения которого указывается уникальное имя. На странице можно использовать только один идентификатор с определенным именем, но несколько идентификаторов с разными именами. Т.е. идентификатору соответствует только один элемент на странице. Параметр ID можно применять к любому элементу документа. #Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... }</p><p class='slide-number'>Слайд 20</p><p>Идентификаторы можно применять к конкретному тегу. Тег#Имя идентификатора { свойство1 : значение; свойство2 : значение; ... }</p><p class='slide-number'>Слайд 21</p><p>Пример <style type="text/css"> p{ color: blue} p#green {color: green} </style> </head> <body> <p> Обычный абзац</ p> <p id=“ green "> Текст параграфа с идентификатором </p> </body></p><p class='slide-number'>Слайд 22</p><p>Классы Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования. Тег.Имя_класса { свойство1 : значение ; свойство2 : значение ; ... }</p><p class='slide-number'>Слайд 23</p><p>Пример < STYLE type =" text/css "> H1.red {color: red} H1.blue {color:red; background-color: blue} </ STYLE > <BODY> < H1 class =" red "> Красный шрифт</ H1> < H1 class =" blue "> Красный шрифт на синем фоне</ H1> </BODY></p><p class='slide-number'>Слайд 24</p><p>Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента. .Имя класса { свойство1 : значение ; свойство2 : значение ; ... }</p><p class='slide-number'>Слайд 25</p><p>Пример < STYLE type =" text/css "> .red {color: red} .blue {color: red; background-color: blue} </ STYLE > <BODY> < P class =" red "> Красный шрифт</ P> < P class =" blue "> Красный шрифт на синем фоне</ P> < H1 class =" blue "> Заголовок красного цвета на синем фоне </H1> < H2 class =" red "> Заголовок красного цвета </H 2 > </BODY></p><p class='slide-number'>Слайд 26</p><p>Универсальный селектор Используется , если требуется установить одновременно один стиль для всех элементов веб-страницы , например, задать шрифт или начертание текста. * { Описание правил стиля }</p><p class='slide-number'>Слайд 27</p><p>Пример <head> < style type =" text/css "> * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ font-size: 96%; /* Размер текста */ } </ style > </head> <body> < p> А здесь какой-то текст </ p > </body></p><p class='slide-number'>Слайд 28</p><p>Контекстные селекторы Контекстный селектор состоит из простых селекторов разделенных пробелом. Тег1 Тег2 { ... } В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1. <Тег1> <Тег2> ... </Тег2> </Тег1></p><p class='slide-number'>Слайд 29</p><p>Пример < style type ="text/css"> P B { font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */ } </ style ></p><p class='slide-number'>Слайд 30</p><p>Селекторы атрибутов Простой селектор атрибута Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Селектор[атрибут] { Описание правил стиля } Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.</p><p class='slide-number'>Слайд 31</p><p>Пример <html> <head> <style type="text/ css "> Q {font-style: italic } Q[title] {color: maroon } </ style> </head> <body> <p> Продолжая известный закон Мерфи , который гласит: < q> Если неприятность может случиться, то она обязательно случится</ q>, можем ввести свое наблюдение: < q title=" Из законов Фергюссона-Мержевича ">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</ q>.</p> </body></html></p><p class='slide-number'>Слайд 33</p><p>Атрибут со значением Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного атрибута. Селектор[атрибут="значение"] { Описание правил стиля }</p><p class='slide-number'>Слайд 34</p><p>Пример <html> <head> <style type="text/ css "> A[target="_blank"] { background: url (images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */ } </ style> </head> <body> <p><a href ="1.html"> Обычная ссылка</ a> | < a href ="link2" target="_blank "> Ссылка в новом окне</ a></p> </body> </html></p><p class='slide-number'>Слайд 36</p><p>Значение атрибута начинается с определенного текста Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. [ атрибут= " значение"] { Описание правил стиля } Селектор[ атрибут= " значение"] { Описание правил стиля }</p><p class='slide-number'>Слайд 37</p><p>Пример <html> <head> <style type="text/ css "> A[ href ^="http://"] { font-weight: bold /* Жирное начертание */ } </ style> </head> <body> <p><a href ="1.html"> Обычная ссылка</ a> | < a href ="http://htmlbook.ru " target="_blank"> Внешняя ссылка на сайт htmlbook.ru</a></p> </body> </html></p><p class='slide-number'>Слайд 39</p><p>Значение атрибута оканчивается определенным текстом Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Селектор[атрибут$="значение"] { Описание правил стиля }</p><p class='slide-number'>Слайд 40</p><p>Пример <html> <head> <style type="text/ css "> A[ href $=". ru "] { /* Если ссылка заканчивается на . ru */ background: url (images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ padding-left: 12px; /* Смещаем текст вправо */ } A[ href $=".com"] { /* Если ссылка заканчивается на . com */ background: url (images/com.png) no-repeat 0 6px; padding-left: 12px;} </style> </head> <body> <p><a href ="http://www.yandex.com">Yandex.Com</a> | <a href ="http://www.yandex.ru">Yandex.Ru</a></p> </body></html></p></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2015/01/19/picture-554851-1421661241.jpg"><h6><a href="/npo-spo/ekonomika-i-upravlenie/library/2014/12/22/prezentatsiya-po-teme-stil-rukovodstva">презентация по теме "Стиль руководства"</a></h6><p class="search-excerpt">основные характеристики стиля руководства, решетка менеджмента...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2015/01/12/picture-562655-1421066111.jpg"><h6><a href="/npo-spo/ekonomika-i-upravlenie/library/2015/01/15/prezentatsiya-na-temu-statisticheskie-tablitsy">Презентация на тему «Статистические таблицы»</a></h6><p class="search-excerpt">Эта презентация предназначена для использования на уроке "Статистические таблицы". Представленная в презентации информация в наглядной и доступной форме способствует изучению основных средств. Пр...</p></div><div class="others"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2018/02/25/metodicheskaya-razrabotka-zanyatiy">Методическая разработка занятий на тему "Каскадные таблицы стилей CSS" по междисциплинарному курсу "Технология публикации цифровой мультимедийной информации" с учетом стандартов Worldskills по компетенции "Веб дизайн"</a></h6><p class="search-excerpt">Методическая разработка занятий на тему "Каскадные таблицы стилей CSS" по МДК04.02. Технология публикации цифровой мультимедийной информации в группе обучающихся по специальности 090302 Прог...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2019/02/08/picture-1114337-1549640374.jpg"><h6><a href="/npo-spo/obrazovanie-i-pedagogika/library/2019/02/11/prezentatsiya-k-vneklassnomu-meropriyatiyu">Презентация к внеклассному мероприятию "Конфликт. Стили поведения в конфликтных ситуациях"</a></h6><p class="search-excerpt">Презентация к внеклассному мероприятию....</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2021/04/05/picture-1126620-1617611026.jpg"><h6><a href="/npo-spo/sfera-obsluzhivaniya/library/2019/04/19/prezentatsiya-goticheskiy-stil-i-srednevekovyy-stil">Презентация Готический стиль и Средневековый стиль</a></h6><p class="search-excerpt">Презентация посвещена образам: одежда, украшения, причёски Готического стиля, Средневекового стиля...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2022/03/29/picture-1396354-1648512193.jpg"><h6><a href="/npo-spo/sfera-obsluzhivaniya/library/2022/03/30/prezentatsiya-otkrytogo-uroka-na-temu-tehnika">Презентация открытого урока на тему "Техника вышивания в якутском национальном стиле" по МДК 02.03 Конструирование швейных изделий в якутском национальном стиле Группа 29.02.04 КМиТШИ</a></h6><p class="search-excerpt">Презентация открытого урока на тему "Техника вышивания в якутском национальном стиле" по МДК 02.03 Конструирование швейных изделий в якутском национальном стиле Группа 29.02.04 КМиТШИ П...</p></div><div class="others"><h6><a href="/npo-spo/obrazovanie-i-pedagogika/library/2023/09/14/prezentatsiya-po-ud-informatika-tema-css">Презентация по УД Информатика. Тема CSS - Таблица стилей </a></h6><p class="search-excerpt">Презентация по УД Информатика. Тема CSS - Таблица стилей...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="All"></div>
<ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li>
</ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2016/08/30/prezentatsiya-na-temu-kaskadnye" data-title="презентация на тему: "каскадные таблицы стилей css"" data-image="https://nsportal.ru/sites/default/files/pictures/2014/12/09/picture-547407-1418117175.gif"></div></div>
<div class="add-new-comment-button my-button-large"></div>
</div>
</div>
</div>
</div>
</div>
</div> </div><!-- /content-inner -->
</div><!-- /content -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body>
</html>
<!-- Page cached by Boost @ 2024-11-05 06:38:22, expires @ 2025-02-25 06:38:22, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2016/08/30/prezentatsiya-na-temu-kaskadnye_ -->
Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это инструмент языка html, предоставляющий возможности по улучшению внешнего отображения страницы средствами структурного программирования. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов. Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей .
Преимущества использования CSS : Разграничение кода и оформления. Разное оформление для разных устройств. Расширенные по сравнению с HTML способы оформления элементов. Уменьшение размеров страниц. Ускорение загрузки сайта. Единое стилевое оформление множества документов. Централизованное хранение
Уровни CSS : Уровень 1 (CSS1) – принята 17.12.96, Уровень 2 (CSS2) – принята 12.05.98 Уровень 2 (CSS2.1) – принята 07.06.11 Уровень 3 ( CSS3) – разрабатывается
Правило таблиц CSS состоит из двух частей: селектор { свойство1 : значение ; свойство2 : значение } 1. Селектор – любой тэг html , для которого определение задает каким образом необходимо его форматировать. 2. Определение – состоит из двух частей: свойства значения
Пример P { color: #0000FF } P - это селектор. Он представляет собой имя тега
. color - это свойство (атрибут) стиля. Он задает цвет текста. #0000FF - это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB
Правила CSS 1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно каждый параметр. 2. Если для одного селектора определяются одинаковые атрибуты, но с разными значениями, то использоваться будет тот, что указан в коде последним. P { color: green } P { color: red } 3. Свойства и их значения в CSS не чувствительны к регистру, поэтому их можно набирать как заглавными, так и строчными символами.
Способы связывания документа и таблиц стилей: 1. Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц html. Для этого таблица стилей хранится в отдельном файле с расширением CSS. Присоединяется к документам с помощью тэга < LINK > , задаваемого в разделе < HEAD > . Пример : < HEAD > < LINK rel =" stylesheet " type =" text/css “ href =" mystyles.css "> В связываемом файле содержатся наборы правил CSS, определяющих форматирование документа.
Содержимое файла mystyles.css BODY {background-color: #000000; color: #FFFFFF} P {color: #0000FF} EM {color: #00FF00; font-weight: bold} .attention {color: #FF0000; font-style: italic} .bigtext {font-size: large}
2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе в стилевом блоке, ограниченном тэгами STYLE : Пример : < HEAD > < STYLE type =" text/css "> B {text-transform: uppercase} P {background-color: lightgray; text-align: center}