CSS: что это? CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно
таблицы стилей - это свод стилевых описаний, тех или
иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
Слайд 3
CSS: В чем прелесть? Спецификация CSS (Cascading Style
Sheets) позволяет остаться в рамках декларативного характера разметки страницы
и дает полный контроль над формой представления элементов HTML-разметки
Слайд 4
CSS: влияние на технологию Сначала нужно определиться с
номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на
типы, например,: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.. У каждого узла этот перечень может быть своим. Для каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонентов страницы). После этого разрабатывается навигационная карта узла и форма ее реализации на страница
Слайд 5
CSS: влияние на технологию Для каждого стандартного компонента
страницы разрабатывается стиль его отображения (CSS-описатель). Теперь остается только
рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.
Слайд 6
Способы применения CSS переопределение стиля в элементе разметки размещение
описания стиля в заголовке документа в элементе STYLE размещение
ссылки на внешнее описание через элемент LINK импорт описания стиля в документ
непосредственно в самом элементе. Такой способ хорош лишь в
том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
Слайд 8
Внедрение CSS в HTML документ 2. Написать стилевое описание
для всех идентичных элементов HTML документа. Такой способ оправдывает
себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
Слайд 9
Внедрение CSS в HTML документ 3. Вынести стилевое описание
элементов HTML в отдельный файл CSS. Это позволит управлять
дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Слайд 10
Переопределение стиля Под переопределением стиля в элементе разметки мы
понимаем применение атрибута STYLE у данного элемента разметки:
Заголовок
первого уровня
Слайд 11
Элемент STYLE Элемент STYLE позволяет определить стиль отображения для:
стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор
id)
Слайд 12
Пишется так: это параграф с индивидуальным стилем Всё
что будет написано между кавычками атрибута style и будет являться стилевым
описанием для данного элемента, в данном случае элемента
. например:
это параграф с индивидуальным стилем
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента
font-size:16px}
p {color: #ff0000; font-size:14px}
Всё о дизайне
На этом сайте Вы найдёте любую информацию о дизайне.
Заказать дизайн
У нас Вы можете по выгодным ценам приобрести лучший шаблон!!
Как стать дизайнером
Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!
Слайд 17 Тег принято внедрять в заголовок HTML документа между тегами . Атрибут
тега type - сообщает браузеру, какой синтаксис использовать для правильной
интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css. Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису: Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
Слайд 18
Импорт стиля Импортировать стиль можно либо внутрь элемента STYLE,
либо внутрь внешнего файла, который представляет собой описатель стиля.
Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
Слайд 19
Синтаксис Синтаксис описания стилей в общем виде представляется следующим
образом:
selector[, selector[, ...]]{attribute:value;
[atribute:value;...]}
или
selector selector [selector ...]
{attribute:value;[atribute:value;...]} Первый вариант перечисляет селекторы, для которых действует данное
описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.
Слайд 20
Описание селектора Селектор - имя элемента разметки i, em
{color:#003366,font-style:normal} a, i {font-style:normal;font-weight:bold;
text-decoration:line-through} Первая строка этого описания перечисляет селекторы-элементы, которые
будут отображаться одинаково: Это курсив и это тоже курсив
Это курсив и это тоже курсив Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:
kuku
kuku
отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку
мы отобразим темно-красным цветом по белому фону. Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону.
Слайд 22
Селектор - идентификатор объекта Описание стиля для объекта задается
строкой, в которой селектор представляет собой имя этого объекта
Слайд 23
Наследование и переопределение Сначала применяются стили умолчания браузера Стили
умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа).
Прилинкованные стили переопределяются описаниями стилей в элементе STYLE Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки
Слайд 24
Элемент DIV DIV позволяет применить атрибуты стиля, связанные с
границей блокаDIV позволяет применить атрибуты стиля, связанные с границей
блока, отступами блока от границ старшего элементаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:
...
Слайд 25
Элемент SPAN Элемент разметки SPAN - это обобщенный строковый
элемент разметки, применение которого не приводит к образованию блока
текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п.
Слайд 29
Обтекание блока текста Атрибут float определяет плавающий блок текста.
Он может принимать значения: left - блок прижат к
левой границе охватывающего блок элемента; rigth - блок прижат к правой границе охватывающего блок элемента; both - текст может обтекать блок с обеих сторон. Атрибут clean – запрет обтекания:
У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.
Слайд 30
Управление цветом Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;}
Цвет фона: ... ...
style="background-color:#003366;
color:white;">как строковые элементы разметки p {background: gray http://kuku.ru/kuku.gif no-repeat fixed
- размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt); font-variant - вариант начертания (обычный или мелкими буквами - капитель).
Слайд 32
Гарнитура Эта строка набрана пропорциональным шрифтом с
засечками. Эта строка набрана пропорциональным шрифтом без засечек.