'

CSS

Понравилась презентация – покажи это...





Слайд 1

CSS


Слайд 2

CSS Cascading Style Sheets — каскадные таблицы стилей


Слайд 3

Назначение css CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое. При замене 1-ой строки в css-стилях дизайн сайта может измениться в большом количестве страниц сайта.


Слайд 4

Преимущества использования Инструкции CSS лучше хранить в виде отдельного текстового файла с расширением .css(часто называется main.css) Идея CSS -отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.


Слайд 5

Отрывок html-кода <h1>Уроки css</h1> < p>Очень важно, нужно ………….</p> ____________________________________ Ни слова об оформлении


Слайд 6

/* оформление заголовка: */ h1 { color: red; background-color: yellow; font: Tahoma; } /* оформляем абзацы текста: */ p { color: grey; line-height: 150%; }


Слайд 7

В 6 слайде описаны стили для всех заголовков и параграфов документа


Слайд 8

Селекторы p {}: селектор элемента соответствует всем элементам на странице с указанным названием


Слайд 9

Селекторы .example{}: селектор класса соответствует всем элементам, которые имеют атрибут class с указанным значением


Слайд 10

Подключение css в коде Web-страниц, которые будут использовать стили из .css файла, нужно сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">


Слайд 11

Пример подключения <LINK REL=STYLESHEET TYPE="text/css" HREF=«main.css“> main.css находится в той же папке, что и .html файл


Слайд 12

<p class=«news"> параграфу присвоен стиль класса news. <li class=" news"> Списку присвоен стиль класса news


Слайд 13

СВОЙСТВА АБЗАЦА text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;} .wrong {text-decoration: line-through;}


Слайд 14

СВОЙСТВА АБЗАЦА text-align Определяет выравнивание элемента. P {text-align: justify} H1 {text-align: center}


Слайд 15

ЕДИНИЦЫ ИЗМЕРЕНИЯ


Слайд 16

СВОЙСТВА АБЗАЦА text-indent Устанавливает отступ первой строки текста. P {text-indent: 50pt;}


Слайд 17

СВОЙСТВА АБЗАЦА letter-spacing Расстояние между буквами по горизонтали. P {letter-spacing: 5px;}


Слайд 18

классы Ссылок классы Ссылок A:active{} Таблица стилей для активных ссылок (при нажатии) A:link{} Таблица стилей для собственно ссылок A:visited{} Таблица стилей для посещённых ссылок A:hover {} Таблица стилей для ссылок при наведении указателя мыши


Слайд 19

Полная инф-ия http://htmlbook.ru/content/osnovy-css


Слайд 20

Задания 1. Создать main.css 2. Определить стили для нескольких видов параграфов(3-4) с разными шрифтами(по размеру и начертанию), отступами, расстояниями 3. Определить стили для ссылок, списков,заголовка 4.Использовать все стили на своих страницах(5-6 страниц).


Слайд 21

Задания 5. http://css-tricks.com/examples/ButtonMaker/# Сгенерировать кнопку и получить исходный код. Сделать комментарии к 2-м строкам кода. Разместить на странице.


×

HTML:





Ссылка: