Использование стилевых спецификаций. (Тема 3) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Использование стилевых спецификаций. (Тема 3), слайд №1

Использование стилевых спецификаций. (Тема 3), слайд №2

Использование стилевых спецификаций. (Тема 3), слайд №3

Использование стилевых спецификаций. (Тема 3), слайд №4

Использование стилевых спецификаций. (Тема 3), слайд №5

Использование стилевых спецификаций. (Тема 3), слайд №6

Использование стилевых спецификаций. (Тема 3), слайд №7

Использование стилевых спецификаций. (Тема 3), слайд №8

Использование стилевых спецификаций. (Тема 3), слайд №9

Использование стилевых спецификаций. (Тема 3), слайд №10

Использование стилевых спецификаций. (Тема 3), слайд №11

Использование стилевых спецификаций. (Тема 3), слайд №12

Использование стилевых спецификаций. (Тема 3), слайд №13

Использование стилевых спецификаций. (Тема 3), слайд №14

Использование стилевых спецификаций. (Тема 3), слайд №15

Использование стилевых спецификаций. (Тема 3), слайд №16

Использование стилевых спецификаций. (Тема 3), слайд №17

Использование стилевых спецификаций. (Тема 3), слайд №18

Использование стилевых спецификаций. (Тема 3), слайд №19

Использование стилевых спецификаций. (Тема 3), слайд №20

Использование стилевых спецификаций. (Тема 3), слайд №21

Использование стилевых спецификаций. (Тема 3), слайд №22

Использование стилевых спецификаций. (Тема 3), слайд №23

Использование стилевых спецификаций. (Тема 3), слайд №24

Использование стилевых спецификаций. (Тема 3), слайд №25

Использование стилевых спецификаций. (Тема 3), слайд №26

Использование стилевых спецификаций. (Тема 3), слайд №27

Использование стилевых спецификаций. (Тема 3), слайд №28

Использование стилевых спецификаций. (Тема 3), слайд №29

Использование стилевых спецификаций. (Тема 3), слайд №30

Использование стилевых спецификаций. (Тема 3), слайд №31

Использование стилевых спецификаций. (Тема 3), слайд №32

Использование стилевых спецификаций. (Тема 3), слайд №33

Использование стилевых спецификаций. (Тема 3), слайд №34

Использование стилевых спецификаций. (Тема 3), слайд №35

Использование стилевых спецификаций. (Тема 3), слайд №36

Использование стилевых спецификаций. (Тема 3), слайд №37

Использование стилевых спецификаций. (Тема 3), слайд №38

Использование стилевых спецификаций. (Тема 3), слайд №39

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Использование стилевых спецификаций. (Тема 3). Доклад-сообщение содержит 39 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Тема 3. Использование стилевых спецификаций 1. Понятие таблицы стилей 2. Подключение таблиц стилей к документу 3. Селекторы 4. Свойства основных элементов 5. Управление фоном 6. Позиционирование элементов 7. Форматирование текстовых элементов 8. Особенности спецификации CSS3

Слайд 2

Описание слайда:

1. Понятие таблицы стилей CSS (каскадные таблицы стилей): Расширяют возможности по оформлению страниц Отделяют содержание от форматирования Каскадные – последовательно используется несколько таблиц, порядок их применения определен алгоритмом браузера Версии CSS 2, CSS3

Слайд 3

Описание слайда:

CSS Таблица стилей состоит из последовательности правил. Правило состоит из селектора и набора деклараций. Например: H1 {color: red; font-size: 14pt; text-align: center;}

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

2. Подключение таблиц стилей Связывание документа с таблицей стилей, размещенной в файле: Встраивание таблицы стилей в документ: описание стилей Импорт из файла или другой страницы: @import url( Задание стиля для отдельного элемента с помощью атрибута STYLE: STILE=”color:blue”

Слайд 6

Описание слайда:

таблица стилей в отдельном файле

Слайд 7

Описание слайда:

Таблица стилей в тексте страницы … H1 {color: red; font-size: 14pt; text-align: center;} …

Слайд 8

Описание слайда:

Таблица стилей в отдельном файле

Слайд 9

Описание слайда:

Таблица стилей в теге ПРОБА Pr_1

Слайд 10

Описание слайда:

3. Селекторы {:;..} H1 {color: red; font-size: 14pt; text-align: center;} P,LI {font-size: 12pt;} Виды селекторов: имена тегов; классовые селекторы (Class Selectors); ID селекторы (ID Selectors); контекстные селекторы (Contextual Selectors); псевдоклассы и псевдоэлементы (Pseudo Classes, Pseudo element).

Слайд 11

Описание слайда:

Основные селекторы Классовые селекторы: H1.bl {color:blue; size:20pt} или .bl {color:blue} TEXT ID селекторы: #rd {color:red} TEXT TEXT Контекстные селекторы: OL LI {list-style-type: decimal} UL LI { list-style-type: square} H1 B, H2 B, H1 EM, H2 EM { color: red } .reddish H1 { color: red } DIV.sidenote H1 { font-size: large }

Слайд 12

Описание слайда:

дополнительные селекторы Селекторы на основе атрибутов H1[title] {color:blue; size:20pt} TEXT a[href="foo"] {color:red}

Слайд 13

Описание слайда:

Наследование и приоритет Наследование: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, quotes, text-align, text-indent, text-transform, visibility, white-space, word-spacing При применении разных правил к одному и тому же элементу учитываются источник (авторский, пользовательский, браузер), тип селектора, порядок следования и директива !important Директива повышения приоритета !important: div {font-size:40; color:black !important} pr_2_2

Слайд 14

Описание слайда:

Приоритеты при задании стилей в порядке возрастания Самым низким приоритетом обладают встроенные стили браузера Пользовательский стиль в браузере Наследуемые стили от родительских элементов css-стили, заданные во внешних файлах, применяются последовательно в порядке подключения . Это же правило относится и к взаимному расположению правил внутри таблицы стилей. По типу примененных селекторов: теги (h1, div, p…) классы и псевдоклассы (.item { }, :hover …) атрибуты ( [attr=”value”], [type=”checkbox”] …) ID-селекторы ( #main …) Стили, заданные в атрибуте style тега () Наиболее высоким приоритетом обладает декларация с сопроводительным словом !important

Слайд 15

Описание слайда:

4. Свойства основных элементов Группы свойств элементов: область размещения, позиционирование, фон, шрифт, текст, списки и т.д. Единицы измерения: px(пикселы), in(дюймы), cm(сантиметры), mm(миллиметры), pt(1pt=1/72in), pc(1pc=12pt), % (проценты от род. элемента), em (текущий размер шрифта) Цвет: именем, “red” и т.д. шестнадцатеричным значением, #6669FF с помощью функции rgb, rgb(100,100,150) или rgb(50%,60%,50%)

Слайд 16

Описание слайда:

Область размещения элемента

Слайд 17

Описание слайда:

Свойства, характеризующие область размещения элемента

Слайд 18

Описание слайда:

Задание свойств Свойства и их значения: Margin-left :40px;padding-top:30px; width:20%;max-width:900px; min-width:500px: Составные имена свойств: border-color:black; border-style:dotted; border-width:40px; Обобщенное свойство: border:” black dotted 40px”; Примеры записи обобщенных свойств: div {border:”2 solid red”}

Слайд 19

Описание слайда:

5. Управление фоном background-color: | transparent | inherit background-color: #9A8B7F; background-color: maroon; background-color: rgb(r,g,b); background-color: rgba(r, g, b, a); background-image:url(путь к файлу) | none[, url(путь к файлу) | none]* body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif); } background-attachment: fixed | scroll | local

Слайд 20

Описание слайда:

Фон Несколько изображений body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif); Размер и положение background-repeat: no-repeat, repeat-x, repeat; background-position: center 100px, 0px 250px; } background-size: 200px 50px; px - в пикселях или любых других единицах измерения, принятых в СSS. % - в процентах от размеров элемента, которому назначается фон. cover – Растягивает фоновое изображение на весь блок. contain – Растягивает фоновое изображение с сохранением пропорций до тех пор, пока его ширина или высота не упрётся в края блока. auto - Исходный размер изображения (по умолчанию). В случае если значение auto присвоено только одной из сторон, то её размер вычисляется относительно размера второй стороны с указанным размером. .fon1 {background-size: 200px 50px;} .fon2 {background-size: 20% 80%;} pr_4

Слайд 21

Описание слайда:

6. Позиционирование элементов Свойства, используемые для позиционирования

Слайд 22

Описание слайда:

display = {block, inline, inline-block, list-item, flex, grid, …, none} block - элемент показывается как блочный, происходит перенос строк в начале и в конце содержимого, т.е. в его строках даже при наличии места другие элементы не размещаются; inline - элемент отображается как встроенный в строку, поэтому содержимое элементов начинается с того места, где окончился предыдущий; inline-block - создается блочный элемент (можно задавать размеры), при этом рядом могут располагаться строчные элементы; list-item - элемент выводится как блочный и добавляется маркер списка; pr_5 flex – блок, пространство которого автоматически заполняется дочерними блоками; grid - для блока определяется виртуальная сетка, к которой могут привязываться дочерние элементы; none - временно удаляет элемент из документа, занимаемое им место не резервируется и Web-страница формируется так, словно элемента и не было. pr_6

Слайд 23

Описание слайда:

position={absolute, fixed, relative, static} position={absolute, fixed, relative, static} absolute - элемент удаляется из обычного потока документа подобно другим элементам, и его положение задается атрибутами left, top, right и bottom относительно края окна браузера; fixed - это значение похоже на absolute, привязывается к указанной параметрами left, top, right и bottom точке на экране, но не меняет своего положения даже при пролистывании страницы, разные браузеры реагируют на это свойство очень по разному; relative - положение элемента устанавливается относительно его исходного места, добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра; static - элементы отображаются как обычно, использование параметров left, top, right и bottom не изменяет местоположения. По умолчанию - static. pr_7

Слайд 24

Описание слайда:

float: left | right | none | inherit left - выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне. right - выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none - обтекание элемента не задается. inherit - наследует значение родителя.

Слайд 25

Описание слайда:

свойство clear (запрет обтекания ): свойство clear (запрет обтекания ): ♦ left — элемент должен находиться ниже всех плавающих элементов, параметр float которых выставлен в left; ♦ right — элемент должен находиться ниже всех плавающих элементов, параметр float которых выставлен в right; ♦ both — контейнер должен находиться ниже всех плавающих элементов, параметр float которых выставлен в left или right; ♦ none— поведение элемента по умолчанию (т. е. он может располагаться на одной линии с остальными плавающими элементами). pr_8

Слайд 26

Описание слайда:

Управление видимостью элементов и контента visibility={visible, hidden, collapse} visible - элемент отображается как видимый; hidden - элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы; collapse - применяется для содержимого ячеек таблиц, они реагируют, словно к ним было добавлено стилевое свойство display со значением none (строки и колонки убираются, а таблица перестраивается), Значение поддерживается не всеми браузерами. overflow={auto, hidden, scroll, visible} overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Смысл принимаемых значений: visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины; hidden - отображается только область внутри элемента, остальное будет обрезано; scroll - всегда добавляются полосы прокрутки; auto - полосы прокрутки добавляются только при необходимости. pr_9

Слайд 27

Описание слайда:

7. Форматирование текстовых элементов

Слайд 28

Описание слайда:

Свойства текстовых элементов (текст в целом)

Слайд 29

Описание слайда:

Свойства списков Например, list-style:”url(‘bg.im’) inside” cursor: auto (вид курсора по умолчанию для текущего элемента), crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, url('путь к курсору‘) pr_11

Слайд 30

Описание слайда:

8. Особенности спецификации CSS3 • закруглённые рамки; • создание тени к элементам; • линейные и сферические градиенты; • возможность задать прозрачный цвет; • возможность задать свой шрифт; • трансформации элементов; • анимация.

Слайд 31

Описание слайда:

Вендорные префиксы

Слайд 32

Описание слайда:

Закругления border-radius border-radius: 13em 0.5em/1em 0.5em 20em;

Слайд 33

Описание слайда:

Тень и градиент box-shadow, text-shadow Значения свойства: none - отменяет добавление тени. inset - тень выводится внутри элемента 4 числа - сдвиг по x, сдвиг по y, размытие, растяжение цвет - цвет тени в любом доступном CSS формате (по умолчанию тень черная). box-shadow: inset 0px 3px 20px 3px #f00, 3px 10px ; pr_13, pr_13_1 Градиентная заливка: linear-gradient(to top, #fefcea, #f1da36); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* для IE */ background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* для webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* для firefox 3.6+ */} Вместо left, top можно ставить координаты: background: -webkit-gradient(linear, 30% 30%, 70% 70%, from(#ccc), to(#000)); /* для webkit */} pr_14

Слайд 34

Описание слайда:

Прозрачность .o1 {opacity: 0;} /* Полная прозрачность */ .o2 {opacity: 0.05;} /* Почти совсем прозрачный */ .o3 {opacity: .3;} /* Можно и так писать без нуля вначале */ .o4 {opacity: 0.5;} /* Полупрозрачный */ .o5 {opacity: 0.874;} /* Можно задавать очень точную степень прозрачности */ .o6 {opacity: 1;} /* Совсем не прозрачный */ pr_15

Слайд 35

Описание слайда:

Шрифт @font-face { font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } P { font-family: Pompadur; } pr_16

Слайд 36

Описание слайда:

трансформации transform: функция; Функция: rotate scale scaleX scaleY … pr_18 transition: переход [, переход ]* Переход: None transition-property – список значений свойств transition-duration – длительность transition-timing-function – функция изменения времени transition-delay – задержка перед началом например, transition:background 3s ease-out 1s pr_17

Слайд 37

Описание слайда:

Анимация Animation - это обобщенное свойство: animation-name — имя анимации; animation-duration — время проигрывания анимации; animation-timing-function — метод расчета промежуточных значений свойств для анимации; animation-delay — задержка анимации; animation-iteration-count — количество циклов анимации; animation-direction — направление анимации; animation-play-state — определяет, проигрывается ли анимация или стоит на паузе. anima

Слайд 38

Описание слайда:

Список анимированных (для Safari и Chrome используется @-webkit-keyframes) переходов(ключевых кадров). Здесь — обозначение, которое определяет ключевой кадр (from или 0%, n%, to или 100%).

Слайд 39

Описание слайда:

Задание Опробовать разные селекторы и различное размещение таблиц стилей Выполнить задания из файла задание_1 Выполнить задания из файла задание_2 Создать страницу на основе шаблона из папки зад_шаб, максимально изменить оформление, разместить собственный контент и ссылки на свои страницы.