Введение в CSS - презентация, доклад, проект скачать

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

Содержание ▲

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

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

Слайд 1

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

Введение в CSS CSS (каскадные таблицы стилей)

Слайд 2

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

До появления CSS До появления CSS, дизайнеры и верстальщики прописывали стили внутри html тегов. Это довольно неудобно, так как при желании изменить какой-либо стиль, необходимо делать изменения во многих местах, да и кроссбраузерность никто гарантировать не мог. После своего появления каскадные таблицы стилей решили все эти проблемы. Рассмотрим способы подключения стилей к странице.

Слайд 3

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

Способы подключения стилей к странице (1) 1. Подключение CSS отдельным внешним файлом с расширением .css. Самый удобный способ. Он гарантирует максимально лёгкое и удобное редактирование стилей и не нагружает ими страницу. К самой странице подключается так: Между тегами вставляется код: Соответственно, файл стилей должен называться style.css и находиться в одной папке с самим файлом html.

Слайд 4

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

Способы подключения стилей к странице (2,3) 2. Встраивание блока стилей в саму страницу. Удобство этого метода состоит в том, что не надо создавать дополнительных файл, а главный недостаток - нагрузка стилями html кода. Подключается так: Стили… 3. Встраивание стилей в сами теги. Самый неудобный способ, так как затрудняет последующее редактирование и нагружает страницу. Подключается так: внутри кода пишется style=”стили”

Слайд 5

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

Преимущества использования CSS Очищение html-кода от стилей Ускорение загрузки страниц сайта Максимальная кроссбраузерность Расширенные возможности работы со стилями Возможность достижения интересных графических эффектов

Слайд 6

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

Оформление заголовков Заголовок - один из важнейших аспектов преставления текста. Он даёт читателю понятие об основной теме текста, его направлении и т.д. В языке html, заголовки задаются тегом , , .... Цифра после буквы h называется уровнем заголовка и определяет высоту и ширину символов. (h1 - самый большой). Оформлять заголовок можно непосредственно в коде, но это оказывается крайне неудобным и громоздким. Посмотрим, как это можно сделать оптимальным образом - с помощью CSS. Существует довольно много стилей, которые могут быть применены к заголовку. Мы можем изменить размер шрифта, его положение на странице, цвет, начертание и т.д. Попробуем сделать это в несколько этапов.

Слайд 7

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

1. Задание цвета. Создадим html файл и запишем туда такой код: h1 {color:#003366;} h2 {color:#e2b500;} h3 {color:#9d0000;} Основной заголовок Заголовок 2-го уровня Заголовок 3-го уровня Все стили прописываются в фигурных скобках через ;

Слайд 8

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

2.Выравнивание Теперь поставим заголовок 1-го уровня по центру страницы. Для этого в списке стилей h1, после color:#......; добавим такой стиль: text-align:center; h1 {color:#003366; text-align:center;} h2 {color:#e2b500;} h3 {color:#9d0000;}

Слайд 9

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

3. Начертание Теперь изменим начертание шрифта для заголовка 2-го уровня. Для примера возьмём шрифт Verdana. Добавим только для h2 такой стиль: font-family: Verdana; h1 {color:#003366; text-align:center;} h2 {color:#e2b500; font-family: Verdana;} h3 {color:#9d0000;}

Слайд 10

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

4. Фон и граница Для примера, выделим заголовок 3-го уровня фоновым цветом. и границей (сделаем вид блока). Добавим для него такие стили: background: #d4e6ff; border: solid 1px #006cff; width: 200px; h1 {color:#003366; text-align:center;} h2 {color:#e2b500; font-family: Verdana;} h3 {color:#9d0000; background: #d4e6ff; border: solid 1px #006cff; width: 200px;}

Слайд 11

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

Задание стилей основного блока (пример 1) /* Задание стилей основного блока */ .body { color:#333; /* Задание цвета текста */ background-color: #d2efff; /* Задание цвета фона */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ border-top-style: none; /* Удаление верхней границы блока */ font-size: 12px; /* Задание размера шрифта */ padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */ }

Слайд 12

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

Пример 2 использования файла CSS

Слайд 13

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

для html-файла Страница текст текст текст 0 текст текст текст текст текст текст текст текст текст текст текст0 текст текст текст текст текст текст текст текст текст 2 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 3 текст текст текст текст текст текст текст текст 8 текст текст текст текст текст текст текст текст текст текст текст lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j

Слайд 14

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

Вставка swf-файла

Слайд 15

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

Урок Создание простого блока

Слайд 16

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

Создание простого блока (css-файл) /* Задание стилей всего блока */ #block{ width: 250px; /* Задание ширины блока */ } /* Задание стилей заголовка */ .head { text-align:center; /* Выравнивание заголовка по центру блока */ color: #fff; /* Задание цвета заголовка (тут - белый) */ background-color: #0274b0; /* Задание цвета фона (тут - синий) */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ font-size: 15px; /* Задание размера шрифта заголовка */ font-weight:bold; /* Задание полужирного начертания шрифта */ padding: 7px 0 7px 0; */ Задание верхнего и нижнего отступов текста заголовка от границ блока */ }

Слайд 17

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

Задание стилей основного блока /* Задание стилей основного блока */ .body { color:#333; /* Задание цвета текста */ background-color: #d2efff; /* Задание цвета фона */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ border-top-style: none; /* Удаление верхней границы блока */ font-size: 12px; /* Задание размера шрифта */ padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */ }

Слайд 18

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

ПРОСТОЙ БЛОК Уроки CSSвёрстки. Начнем с простого, и рассмотрим один из способов создания стандартного блока, состоящего из "шапки" и основной части... ПРОСТОЙ БЛОК Уроки CSSвёрстки. Начнем с простого, и рассмотрим один из способов создания стандартного блока, состоящего из "шапки" и основной части...

Слайд 19

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

Урок Прижимаем footer к низу страницы

Слайд 20

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

Прижимаем footer к низу страницы (css) html, body { margin: 0; padding: 0; height: 100%; /* не забываем это свойство для html и body */ } #conteiner { position: relative; min-height: 100%; /* минимальная высота контейнера, ее понимают все браузеры за исключением IE6 */ } /* ниже фильтр * html так называемый CSS хак, через который можно задать любое свойство предназначенное для IE6 */ * html #conteiner { height: 100%;} #header {position: relative; height: 2.5em;}

Слайд 21

$/* элемент ниже позволяет не наезжать подвалу на контент, он должен быть не меньше подвала по высоте */ .end_content { position: relative; height:...$

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

/* элемент ниже позволяет не наезжать подвалу на контент, он должен быть не меньше подвала по высоте */ .end_content { position: relative; height: 2.6em;} #footer { background-color:#1C7FFF; color:#FFF; position: relative; margin-top: -2.5em; /* свойство должно быть равным высоте элемента, не забываем про отрицательное значение */ height: 2.5em; }

Слайд 22

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

title content footer title content footer

Слайд 23

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

Урок Пример безтабличной верстки

Слайд 24

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

Простой шаблон

Слайд 25

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

Часть 2 CSS-навигация

Слайд 26

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

Правила оформления списков В html различается 2 вида списков: нумерованный и ненумерованный (маркированный). Они задаются тегами "ol" и "ul" соответственно. Элементы обоих видов списков задаются тегом "li". Для примера, составим простой маркированный список (именно с ними чаще всего приходится работать в CSS): Пункт 1 Пункт 2 Пункт 3

Слайд 27

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

Для нумерованных (ol) Оформление (стиль) задаётся одним атрибутом: list-style-type. Значения этого атрибута – фиксированы и различны для нумерованных и маркированных списков. Для нумерованных (ol): decimal – арабские цифры (по умолчанию); lower-roman – малые римские цифры; upper-roman – большие римские цифры; lower-alpha – малые (строчные) латинские буквы; upper-alpha – большие (прописные) латинские буквы

Слайд 28

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

Для маркированных (ul) Для маркированных (ul): disk – простой круг (по умолчанию); circle – кольцо; square – квадрат; lower-alpha – малые (строчные) латинские буквы; none – отмена оформление (благодаря этому значению атрибута маркированные списки удобно использовать как меню и т.д.).

Слайд 29

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

Mаркер-рисунок Также, можно задать рисунок как маркер списка. Делается это так: list-style-image: url(Адрес рисунка)

Слайд 30

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

Положение маркера С помощью стилей можно задать и положение маркера относительно текста. Это задаётся атрибутом list-style-position. Он имеет следующие значения: outside – вне текста (по умолчанию); inside – внутри текста; Все стили могут быть заданы в одном атрибуте list-style. Например: list-style: inside

Слайд 31

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

Меню с помощью списка (1) Создадим вертикальное меню с помощью списка. Начнем с создания файла стилей style.css и файла index.html с таким начальным кодом (содержанием): Пункт 1 Пункт 2 Пункт 3

Слайд 32

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

Меню с помощью списка (2) Дальше работаем только с css файлом. Запишем в css файл такой код: ul {list-style:none;} li a {color:#fff; text-decoration:none; padding: 4px 7px; width:120px; background:#0076ba; display:block; border:1px solid #fff; font-weight:bold;} Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки. Должно получиться так:

Слайд 33

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

Меню с помощью списка (3) Теперь добавим эффектов при наведении мыши на кнопку: li a:hover { background:#d36800; } Вот, и всё. Наше меню готово.

Слайд 34

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

Атрибут CSS 2.0 «z-index» (1) Атрибут z-index допустимо применять только к свободно позиционированным объектам, то есть у всех слоёв должен стоять атрибут position:relative. Как можно догадаться из вида атрибута z-index, он определяет положение объектов по оси Z и создает, таким образом, иллюзию трёхмерности страницы. Любой элемент может быть выше или ниже другого.

Слайд 35

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

Атрибут CSS 2.0 «z-index» (2) По умолчанию значение атрибута z-index – auto. При этом значении элементы идут один за другим по порядку написания в коде. Атрибут может быть задан положительным, отрицательным числом, или нулём. Например: z-index:5; Объект с большим значением атрибута z-index будет перекрывать атрибут с меньшим его значением. То есть объект с z-index равным 5 перекроет объект с z-index равным 3. Атрибут поддерживается Internet Explorer начиная с версии 4.0. Для тегов frame и iframe поддерживается Internet Explorer начиная с версии 5.5.

Слайд 36

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

Применение атрибута z-index Атрибут применяется чаще всего для позиционирования сложных и/или активных блоков. В остальных случаях, когда код более-менее прост, стараются обходиться без этого атрибута, ведь ничего не мешает расположить, в коде, объект, находящийся выше над объектом, находящимся ниже. Ещё есть некоторые проблемы при использовании атрибута z-index к активным блокам, да и есть множество более простых способов оформления. Итак, не смотря на то, что без атрибута z-index можно легко прожить, он остаётся достаточно востребованным в современной вёрстке.

Слайд 37

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

z-index. Пример. index.html Сделаем эффект лёгкой тени для текста без использования картинок, зато с использованием слоёв и атрибута z-index. Как обычно, создадим файлы index.html и style.css. Запишем в веб-страницу стандартный начальный код: //сам слой Любой текст //слой тени Любой текст

Слайд 38

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

z-index. Пример. style.css В style.css запишем: #text { font:30px Tahoma; position: relative; color:#002f5f; z-index:2;} #shadow {font:30px Tahoma; position: relative; color:#ccc; top:-35px; left:2px; z-index:1;} Заметим, что z-index тени меньше, чем у самого текста. Это значит, что тень будет именно там, где и должна быть – под текстом. Если сделали всё правильно должно получиться так:

Слайд 39

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

Сравнение двух типов верстки (блочного и табличного) Рассмотрим их достоинства и недостатки, попробуем найти оптимальный и максимально эффективный тип верстки… Итак, начнём с описания старейшего типа верстки – табличного. Он основан на теге “table” и имеет примерно такую структуру: Содержание первого столбца Содержание второго столбца Таким образом, мы задали таблицу, состоящую из 1 строки и 2 столбцов. Для ясности: “tr” обозначает строку, а “td” – столбец. - По умолчанию, для таблиц применены следующие стили: - Граница (border): 0 пикселей (нет) - Поля ячеек (cellpadding): 1 пиксель - Интервал ячеек (cellspacing): 2 пикселя

Слайд 40

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

Достоинства и недостатки табличного позиционирования У таблиц множество положительных сторон, многие из которых субъективны. Однако, есть и бесспорные: - С помощью таблиц можно добиться практически любого расположения элементов - Таблицы имеют привычный для пользователя вид - С помощью таблиц можно точно закрепить любой элемент - Вёрстка с помощью таблиц проста для понимания и освоения Однако, у противников таблиц есть свои аргументы. Некоторые из них вполне убедительны: - Таблицы бывают очень громоздки - Таблицы не всегда способны обеспечить полную кроссбраузерность и поддержку различных разрешений экрана - Таблицы замедляют скорость загрузки страниц сайта (спорное утверждение, о нём поговорим ниже).

Слайд 41

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

Достоинства и недостатки блочной верстки Блочной вёрсткой, называется вёрстка, выполненная без использования таблиц. В HTML-коде используются такие теги как div, span и многие другие. Сама же форма страницы формируется с помощью стилей (CSS). Положительные стороны блоков: - Малый размер кода - Основа дизайна – CSS - Широкие возможности позиционирования элементов - Быстрая загрузка страниц Отрицательные стороны блоков: - Практически никогда не удаётся достигнуть полной кроссбраузерности - Метод сложен для понимания новичками - Большой файл стилей

Слайд 42

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

Что выбрать? Очень многие веб-разработчики, которые считают себя «продвинутыми» призывают к полному отказу от табличной верстки, как от устаревшего способа. Но эти люди частенько забывают одну очень важную деталь – многие посетители их сайтов будут пользоваться устаревшими браузерами, которые могут поддерживать CSS только на базовом уровне (Internet Explorer 6, например). В некоторых типах браузеров и ОС могут происходить неприятные искажения. Вот тогда и начинаются различные скрипты, исправляющие эти изъяны и практически сводящие на нет все преимущества CSS. В практике были случаи, когда идеальные с точки зрения HTML и CSS блоки вели себя неадекватно от некоторых типов активного содержимого. Есть ещё, конечно, проблема свободно позиционированных объектов, а точнее проблема не в них, а в понимании таких объектов браузерами Internet Explorer. Итак, понятно, что чистая блочная вёрстка не эффективна. Как на счёт табличной? Действительно, многие браузеры загружают таблицу как единое целое, замедляя таким образом работу сайта. Действительно, таблицы делают код излишне объемным. Действительно, табличная вёрстка в какой-то степени ограничивает фантазию дизайнера. Вот и закончен наш анализ. Он показал, что мы, без сомнения, можем создать шаблон только на блоках, или только на таблицах. Однако, нужно заметить, что и тот, и другой шаблоны не будут совершенными (есть исключения, разумеется). Самым логичным типом вёрстки – будет грамотный «симбиоз» таблиц и блоков, их дополнение друг друга. Именно такой подход позволит создавать действительно качественные сайты.

Слайд 43

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

Что такое спрайт? Спрайт – одно изображение, в состав которого включено некоторое количество более мелких изображений. По структуре, спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута, для каждого объекта выбирается часть этой картинки, которая и показывается. Конечно, Вы имеете полное право спросить: «Зачем создавать спрайт, если можно просто воспользоваться несколькими картинками, как это делается обычно?». Ответ будет довольно простым: спрайт подгружается один раз и при наведении курсора на элемент изменения происходят мгновенно, без подгрузки другой картинки. Это существенно улучшает его восприятие и уменьшает количество HTTP запросов, что в свою очередь ускоряет загрузку страницы. Само собой, у спрайтов есть ограничения. Наш объект должен быть фиксирован по ширине и /или высоте. Спрайты очень часто используются в меню, или других элементах, изменяющихся при наведении мыши. В практическом примере, мы будем делать именно меню для сайта.

Слайд 44

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

Пример. Спрайт-меню. index.html Создадим вертикальное меню, состоящее из 5 элементов. Сделаем его, используя маркированный список. Создадим файлы index.html и style.css. В код веб-страницы запишем стандартное начало: Спрайт-меню Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5

Слайд 45

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

Пример. Спрайт-меню. style.css (1) Перейдём к оформлению. Сначала в style.css отменим оформление для всего списка: ul {list-style:none;} Потом зададим вид пункта меню, без наведения на него мыши: #menu li a { padding:7px 10px; color:#666; text-decoration: none; display: block; font:13px Arial; font-weight:bold; background: url(menu.png); width:200px; margin:3px;}

Слайд 46

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

Пример. Спрайт-меню. style.css (2) Теперь зададим стили для меню при наведении на него мыши и при клике на него: #menu li a:hover { color: #fff; background: url(menu.png) 0 -30px; } #menu li a:active { color: #fff; background: url(menu.png) 0 -60px; }

Слайд 47

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

Бестабличная верстка – обтекания, или CSS Float Обтекание картинки текстом использовалось с самого начала формирования стандартов верстки. Позже – в CSS появился атрибут float, призванный обеспечить такую возможность. Всё казалось бы логичным, но это – не так, в чем Вы и убедитесь в этом примере. Сам атрибут выглядит так: float:left – обтекание по левому краю float:right – обтекание по правому краю float:none – нет обтекания (по умолчанию) С использованием обтекания связано очень много искажений и проблем. Это, в первую очередь, связано с неинуитивностью самой концепции float в CSS. Тем не менее, атрибут помогает реализовать различные идеи, многие из которых, просто не имеют другого исполнения.

Слайд 48

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

Сферы использования CSS Float Обтекание фиксированного объекта другими объектами Формирование колонок, заключенных в блоки Принудительное выравнивание объекта по левому или правому краю родителя Выделение блока (объекта) из основного потока (содержания) Создание частей сложных конструкций

Слайд 49

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

Основные особенности работы с float Объект со стилем float позиционируется по левому/правому краю, вне общего потока и игнорируя другие установки Блоки с float игнорируются основным потоком. Например: при создании фона – их содержание не учитывается Для обтекаемых объектов необходимо задавать ширину (любым способом). Крайне желательно задавать высоту (см. предыдущий пункт) Разные браузеры по разному понимают простейшие операции с такими блоками. Особые проблемы возникают с устаревшими версиями IE Блоки с атрибутом Float выравниваются по верхней границе элемента - родителя Возможны проблемы с отображением ссылок внутри Float блоков.

Слайд 50

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

Основные проблемы работы с float Основная проблема при реальной верстке с помощью обтеканий – то, что блок с таким стилем как бы сжимается, не обращая никакого внимания на содержание. Решить эту проблему можно задав высоту блока, или задав фон с помощью самой страницы (стиль для html,body). Для предотвращения наезда нижних элементов основного потока на блок с float, используют специальный атрибут – clear. Он имеет следующие варианты: clear:none – нет контроля обтекания clear:left – контроль обтекания по левому краю clear:right – контроль обтекания по правому краю clear:both – контроль обтекания по обоим краям Атрибут clear чаще всего используется для создания «подвала».

Слайд 51

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

Шаблон персонального сайта – основа дизайна float. index.html Мои друзья Российсая школа CSS GZweb.ru Wallpapers Day Интересные события Российская школа CSS оживилась У GZweb.ru новый дизайн Моя галерея

Слайд 52

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

Шаблон персонального сайта – основа дизайна float. style.css #leftcolumn { background:#e7e7e7; display: inline; color: #333; margin-right:10px; padding:10px; width: 246px; height:auto; [b] float: left;[/b] border:2px solid #ddd; }

Слайд 53

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

2 вариант. index.html Попытаемся сделать простую структуру из двух колонок, но вместо float: right; для правой ставим margin-left:***px; Вот код для html файла:

Слайд 54

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

2 вариант. style.css html,body { width:1000px; margin:0 auto; padding-top:10px; } #left { float:left; width:250px; background:#cbcbcb; border:3px solid #004167; height:300px; padding:10px; }

Слайд 55

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

В Опере и подобных браузерах это будет выглядеть так

Слайд 56

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

А в IE6 будет так На рисунке ясно видно, что браузер добавил три пикселя между блоками, хотя по логике, их там не должно быть. Можно, конечно предположить, что это произошло из-за влияния границы и/или внутреннего отступа. Уберём их и посмотрим, что получится:

Слайд 57

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

Проблема решена Итак, простой манипуляцией со стилями исправить проблему не удалось. Зато, исправить её можно значительно проще. Добавим в html такой код: #right { margin-left: 280px; }

Теги Введение

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