Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Уральский государственный педагогический университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Обработка_данных_ОЗО / Лабораторные_работы / Лабораторные_работы_CSS / лаб_ 1.doc

Скачиваний:

Добавлен:

24.04.2015

Размер:

215.55 Кб

Скачать

☆

<<< < Предыдущая 1 23 / 43 4 > Следующая >>>

Задание для самостоятельной работы

Создайте два стиля параграфа (синий цвет текста, выравнивание по ширине, тип Tahoma, размер 16) и (красный цвет текста, выравнивание по центру, тип Tahoma, размер 16, курсив). Используйте возможности наследования.

Примените созданный вами стиль вставив его в документы разными способами.

Теги Span и Div

Теги span и div широко используются вместе с селекторами классов. span предназначен для изменения стиля выделенной части текста, такой как отдельный символ или их набор, а div позволяет применять стиль сразу к целому блоку. Перед этим тегом, в отличие от span, автоматически добавляется перенос строки и пустое пространство, аналогично действию параграфа.

Тег span удобен для создания выделений в тексте, буквиц, цитат и др. div используется преимущественно для создания слоев.

Пример. Использование тега div

<tr><td>Подсказка</td></tr>

</table>

</div>

В примере параметром тега div, определяющим стиль блока, выступает идентификатор, предназначенный для управления cлоем.

Цвета с помощью css

CSS имеет несколько опций для определения цвета текста и фоновых областей на web-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом html, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц, предлагая более простые и удобные варианты управления цветом.

Установка цвета

Цвет, используя CSS, можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

P { color: navy; background-color: yellow }

2. По шестнадцатеричному значению

Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном html.

P { color: #F9E71A; background-color: #98560F }

3. С помощью RGB

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

P { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%) }

В таблице перечислены свойства элементов, предназначенных для задания цвета.

Свойство	Значение	Описание	Пример
color	Цвет	Устанавливает цвет текста	P { color: #330000 }
background-color	Цвет transparent	Цвет фона	BODY { background-color: #6699FF }
background-image	URL none	Фоновый рисунок	BODY { background-image: url (bg.gif) }
background-repeat	repeat repeat-x repeat-y no-repeat	Повторяемость фонового рисунка	BODY { background-image: url (bg.gif) background-repeat: repeat-y }
background-attachment	scroll fixed	Прокручиваемость фона вместе с документом	BODY { background-image: url (bg.gif) background-attachment: fixed }
background-position	Проценты Пикселы top center bottom left right	Начальное положение фонового рисунка	BODY { background-position: left top }

background-color

Задает цвет фона элемента. Главное отличие этого свойства от атрибута bgcolor в том, что с его помощью можно задать фоновый цвет для любого элемента. На первый взгляд, преимущество незначительное, однако после конкретного примера все становится на свои места. Допустим, нам надо сделать блок, в котором будет серый фон. С помощью html в таком случае без таблицы не обойтись, а вот с помощью css можно повесить стиль на элемент p, к примеру. Экономия кода налицо!

HTML (101 знак)

CSS (79 знаков)

<font color=#ffffff>Белый текст на сером фоне</font>

</td></tr></table>

p {

background-color: #666; color: #fff}

. . .

<p>Белый текст на сером фоне</p>

background-image

Задает графическое фоновое изображение элемента. Вообще если указывается фоновое изображение, то рекомендуется указывать и фоновый цвет, потому что рисунок может не загрузиться или пользователь отключит загрузку изображений. В этом случае текст может плохо читаться на фоне по умолчанию, так что лучше указывать приемлемый фон явно. Естественно, если устанавливать фоновое изображение для таблицы, то CSS не дает никаких преимуществ, однако с помощью CSS можно задать его для любого элемента.

HTML (112 знаков)

CSS (89 знаков)

<font color=#ffffff>Белый текст на фоновом рисунке</font>

</td></tr></table>

p {

. . .

<p>Белый текст на фоновом рисунке</p>

background-repeat

Если задано фоновое изображение, то определяет, будет ли повторяться это фоновое изображение и, если будет, то каким образом.

Значения:

• repeat: изображение повторяется по горизонтали и по вертикали

• repeat-x: изображение повторяется только по горизонтали

• repeat-y: изображение повторяется только по вертикали

• no-repeat: изображение не повторяется

В html подобного атрибута нет вообще, а по умолчанию изображение повторяется и по горизонтали, и по вертикали, так что работать с фоном только средствами html очень сложно.

Часто кодеры поступают следующим образом. Если надо, скажем, чтобы изображение не повторялось вообще, то делают рисунок таких размеров, чтобы его повторение не было заметно на любых мониторах. Это примерно 1600-1200 пикселей. Сами понимаете, что решение это не совсем удобное (увеличивается вес рисунка), но единственно возможное средствами html. С помощью css проблема решатся изящно и легко.

body { background-image: url(img/bg.gif);

background-repeat: no-repeat}

. . .

<body>Содержимое страницы на фоновом неповторяющемся рисунке</body>

background-attachment

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

Значения:

• fixed: фон будет оставаться неподвижным, а содержимое страницы будет перемещаться относительно него

• scroll: фон будет перемещаться вместе с остальным содержимым. Значение по умолчанию.

В html нет атрибута, равнозначного данному свойству, а по умолчанию любой фон перемещается при прокрутке страницы, то есть имеет значение scroll.

p {

background-repeat: no-repeat;

background-attachment: fixed}

. . .

<p>Текст на фоновом неповторяющемся и неподвижном рисунке</p>

background-position

Задает позиционирование фонового изображения. С помощью этого атрибута можно смещать фоновое изображение относительно левого верхнего угла элемента. Свойство имеет два параметра: первый определяет смещение по вертикали, второй - смещение по горизонтали.

В качестве значений можно указывать длину как положительную, так и отрицательную. Например, правило:

p {

background-position: -12px 50px}

смещает фоновое изображение на 12 пикселей влево и на 50 пикселей вниз от левого верхнего угла элемента p. Кроме того, можно указывать процентные соотношения. Проценты вычисляются относительно ширины и высоты блока элемента. Например, правило:

p {

background-position: 20% 40%}

смещает фоновое изображение на 20% вправо и на 40% вниз от левого верхнего угла блока элемента p. Значением по умолчанию является 0% 0%, что соответствует верхнему левому углу. Кроме того, можно вместо численных значений указывать выравнивание относительно элемента. Так для выравнивания по вертикали можно использовать три ключевых слова:

• top: выравнивание по верхнему краю;

• center: выравнивание по центру;

• bottom: выравнивание по нижнему краю.

Для выравнивания по горизонтали можно использовать ключевые слова:

• left: выравнивание по правому краю;

• center: выравнивание по центру;

• right: выравнивание по правому краю.

Таким образом, правило:

p {

background-position: 0% 0%}

эквивалентно правилу:

p {

background-position: top left}

В html нет атрибута, который бы соответствовал данному свойству, а значение по умолчания для фона, заданного средствами html, совпадает со значением по умолчания для фона, заданного с помощью css и составляет 0% 0%.

p {

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top center}

. . .

<p>Текст на фоновом неповторяющемся и неподвижном рисунке, который отцентрирован по горизонтали</p>

Очень часто дизайнеры любят выделять всякие заголовки разделов фоном. То есть брать и класть в фотошопе на цветную плашечку текст. Вот так.

У неопытного кодера при этом возникают определенные проблемы. Допустим, это у нас блок новостей Мы создаем класс таких блоков и с называем его news, что вполне логично. Класс и блок будут, например, такими:

.news {color: #000; font-size: 12px; width: 200px}

...