'

CSS

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





Слайд 0

CSS


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


×

HTML:





Ссылка: