Каскадные таблицы стилей CSS (Cascading Style Sheets) презентация

Содержание

Слайд 2

CSS дополняет язык HTML и значительно расширяет его возможности.
Отделяя стиль представления документов от

содержимого, CSS упрощает создание веб-страниц и обслуживание сайтов.
За счет этого повышается и скорость разработки сайта
Отладка сайта становится более быстрой и удобной.
Появляется возможность одновременной работы с одним проектом сразу нескольким разработчикам: дизайнеру, верстальщику, программисту.

Преимущества CSS

Каскадные таблицы стилей

Слайд 3

Три способа вставить CSS

Внешняя таблица стилей - стилевое описание html-элементов в отдельном файле,

идеально подходит, когда стили должны применяться ко многим страницам
Внешние таблицы стилей хранятся в CSS файлах
Внутренняя таблица стилей (в head-секции) - стилевое описание для всех идентичных элементов html-документа.
Задается с помощью парного тега

Внутренняя таблица стилей

Как подключить?

Внутренние стили - в head-секции

Слайд 18

Используется непосредственно в самом элементе (в открывающем теге).
Действует только для этого

тега.

Используете атрибут style в соответствующем теге.
Атрибут style может содержать любое свойство CSS. 

Например, для какого - либо абзаца.


Пример показывает как изменить цвет и левый отступ абзаца

Встроенные стили.

Как подключить?

Слайд 19

Текстовые свойства CSS

Слайд 20

Декорация Текста

a {text-decoration:none;}  

h1{text-decoration:wavy overline lime;}
  h1{text-decoration:line-through;}
  h1{text-decoration:underline red;}
  h1{text-decoration:dashed underline overline;}
h1{text-decoration: solid underline purple 4px;}

Свойство

text-decoration в основном используется для того, чтобы удалить подчеркивание ссылок для целей дизайна:

Слайд 21

Трансформация текста

p.uppercase {text-transform:uppercase;}  p.lowercase {text-transform:lowercase;}  p.capitalize {text-transform:capitalize;} 

Свойство text-transform используется, чтобы изменять регистр букв в тексте.

Все

буквы заглавные

Все буквы малые

Заглавные только первые буквы в каждом слове

Слайд 22

Тег div для группировки тегов

Что такое блок (div)?


...




...

свойства блока:

Слайд 23

Свойства CSS, устанавливаемые для блоков

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam

nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus.

margin-right

margin-bottom

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

.box {width: 350px; border: 10px solid black;} 

Слайд 24

Настройка ширины контейнера

div{  
   width: 1170px;
}

На самом деле, свойство width для настройки ширины контейнеров

использовать не рекомендуется. Т.к. это приводит к необходимости горизонтального скроллинга страницы в том случае, если ширина области окна браузера, доступной для вывода страницы, меньше 1170px.
Решить эту проблему можно, воспользовавшись свойством max-width

div{  
   max-width: 1170px;
}

В этом случае – не будет горизонтальной полосы прокрутки

Выравнивание контейнера по центру страницы

.div {
    max-width: 1170px;  
   margin: 0 auto;
}

По умолчанию width: 100%;

Свойства CSS, устанавливаемые для блоков

Слайд 25

Настройка левого и правого внутренних отступов

Внутренние отступы — это нечто вроде защитного механизма,

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

.wrapper { max-width:1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

Свойства CSS, устанавливаемые для блоков

Слайд 26

Схлопывание внешних отступов

Свойства CSS, устанавливаемые для блоков

Отступы margin-top и margin-bottom иногда объединяются в один,
с размером равным наибольшему из

них (или размеру одного, если они равны).

div{
    background-color: gold;
  width:20%;
    padding-left: 16px;
    padding-right: 16px;
   margin-bottom: 50px;
   margin-top:20px;
  }

20px

50px, а не 20px + 50px

Имя файла: Каскадные-таблицы-стилей-CSS-(Cascading-Style-Sheets).pptx
Количество просмотров: 7
Количество скачиваний: 0
- Предыдущая
12 декабря - День Конституции Российской Федерации
Следующая -
Сервисно-ориентированные архитектуры. Анализ интересов клиента. Выбор вариантов решений

Похожие презентации

Тестування програмного забезпечення
Что такое CSS
Правовая охрана программ для ЭВМ и баз данных
Spring Framework
Коллекция ссылок на электронно-образовательные ресурсы
Тестовые задания
Eg conference. Media-social aspect in the production of animation studio pixar
Основы теории коммуникации
Технология программирования гетерогенных систем OpenCL. Лекция 1
Компьютерные объекты. Размер файла. Практическая работа № 1
Алгоритмы. Определение и способы записи алгоритмов
Формы. Построение формы
Возможности виртуальной реальности
Методические аспекты использования интерактивной системы голосования и тестирования Votum в дошкольных учреждениях
Алгоритм и его свойства
Программирование на языке Python
Электронные тесты
Панель HAAS. Режим список программ
Глобальная информационная инфраструктура
Информационные процессы Хранение информации
Что такое 3D моделирование
Логические элементы
Зміна пароля. Укргазбанк
Объекты алгоритмов
Язык программирования Python
Теоретические основы информатики. Информационные процессы. (Глава 1.4)
It’s a network. (Chapter 11)
Програмні засоби навчання іноземних мов
Обратная связь
Email: Нажмите что бы посмотреть