Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 4 видеоуроку по CSS Размер: 28.39 kB, скачали: 581 раз.
Скачать таблицу цветов Размер: 47.78 kB, скачали: 1006 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Если с цветом все просто, то есть задали мы свойство color, и текст стал такого цвета, то с фоном немного сложнее. Это из-за того, что в CSS мы можем задать не только само изображение фона, и не только цвет фона, как в HTML, а можем задать дополнительные свойства, такие как повторение, расположение и фиксация. Сейчас я вам все это покажу на реальном примере.
Как задать фон страницы с помощью CSS?
Я открываю свой сайт. Он имеет фон — это изображение, которое повторяется вправо и вниз. Также мой сайт имеет изображение «Оставьте свой отзыв». Оно не повторяется, но при перемещении страницы оно фиксируется, то есть я прокручиваю страницу и всегда могу нажать эту кнопку. На самом деле эта тема уже немного другая. Она называется «Позиционирование элементов». Мы ее будем рассматривать в конце данного видеокурса. Вы наверняка спросите, почему я вам это сейчас показываю. А потому что с фоном можно сделать то же самое, то есть его можно повторять, его можно расположить в какой-либо части сайта и зафиксировать либо не зафиксировать.
Давайте перейдем в код таблицы стилей и опробуем все на практике. Для того, чтобы рассказать эту тему от начала до конца я удалю все, что мы ввели в свойство background:
body { background: }
Итак, приступим. Что нам нужно сделать первым делом? Нам нужно задать цвет фона. Почему цвет так важен? Он важен потому, что если у человека задан фон на сайте, но не задан цвет, то у посетителя, у которого отключено отображение картинок, вместо фона будет показан белый цвет. А теперь представьте, каково будет его возмущение, если на сайте, к тому же, цвет текста — белый. Это нужно предусмотреть. Мы создадим сейчас цвет фона.
Давайте определимся с тем цветом, который мы хотим задать фону. Для этого я прикладываю таблицу цветов к этому видеоуроку. Например, я хочу задать сайту голубой цвет #33CCFF. Естественно в таблице представлены не все цвета. Существуют и другие оттенки. Но здесь выделены основные — так называемые RGB-цвета. Первые две цифры отвечают за красный (Red), вторые — за зеленый (Green), третьи — за синий (Blue).
body { background: #33CCFF;}
Фон мы задали. Давайте сохраним нашу страницу и проверим ее в браузере. Открываем. Мы видим, что цвет фона стал тем самым, который мы выбрали.
Снова перейдем в код. Сейчас мы зададим фоновое изображение. Как это сделать? Оно задается с помощью url, который есть адрес нашей страницы, то есть сейчас мы введем адрес изображения, которое хотим сделать фоном. Если мы откроем папку сайта, зайдем в папку img, то увидим, что у нас есть изображение bg.JPG. Пропишем его вместо нашего фона. Не забываем указывать папку img.
body { background: #33CCFF url(img/bg.jpg);}
Давайте сохраним. Посмотрим, что получилось. Наше изображение стало фоном нашего сайта. Почему я сказал не «страницы», а «сайта»? Потому что если привязывать данный файл стилей к каждой странице, то в этом случае фон будет копироваться на все страницы, если, конечно, на страницах не задан фон по умолчанию.
Теперь давайте разберемся с повторением. Если мы перейдем на нашу страницу, то увидим, что фон — это лишь небольшое изображение, которое просто копируется вниз и вправо. Если мы отменим повторение, то на странице наше изображение будет выглядеть, как одно, и не будет размножено. Также стоит отметить, что можно выбрать только правое повторение и только нижнее повторение.
Давайте перейдем в код. Для того чтобы изображение повторялось, нужно добавить просто слово repeat. Сейчас оно стоит по умолчанию.
body { background: #33CCFF url(img/bg.jpg) repeat ;}
Чтобы оно не повторялось, нужно перед словом repeat поставить приставку no- .
body { background: #33CCFF url(img/bg.jpg) no-repeat ;}
Давайте сохраним и проверим, повторяется оно у нас или нет. Мы видим, что наше изображение не повторяется, поэтому оставшаяся часть фона залита выбранным нами цветом.
Повторение в CSS
Теперь давайте попробуем повторить его по оси Х (слева направо) и по оси Y (сверху вниз). Чтобы это сделать, нам нужно поставить repeate-x (по оси Х).
body { background: #33CCFF url(img/bg.jpg) repeat-x;}
Сохраним. Сейчас изображение повторяется только по оси Х. Это очень полезная возможность для шапок или футеров сайта, где наше изображение копируется только вправо, а на него налагается какой-либо текст.
Чтобы скопировать изображение по оси Y, нам надо прописать repeate-y.
body { background: #33CCFF url(img/bg.jpg) repeat-y;}
И оно у нас повторилось по оси Y.
Давайте поставим, чтобы изображение у нас не повторялось.
body { background: #33CCFF url(img/bg.jpg) no-repeat ;}
Фиксация в CSS
Теперь давайте разберемся с фиксацией нашего фонового изображения. То есть, если мы сейчас перейдем на наш сайт, обновим страницу и попробуем прокрутить вниз, то мы увидим, что изображение у нас не фиксируется, а остается вверху страницы. Нам нужно, чтобы оно прокручивалось вместе с полосой.
Перейдем в код и добавим слово fixed (фиксировать). По умолчанию стоит scroll.
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed;}
Сохраним, обновим и переместим ползунок. Как мы видим, наше фоновое изображение передвигается вместе с ним. Как я уже показывал, на моем сайте по такому же принципу передвигается кнопочка «Оставить свой отзыв».
Позиционирование в CSS
Теперь давайте разберемся с позиционированием. Как таковое, позиционирование мы будем разбирать в конце данного видеокурса, сейчас мы научимся лишь позиционировать наше фоновое изображение. Для этого нам нужно указать отступы от верхнего и левого края. Указывать их можно как относительными, так и абсолютными значениями. Что это значит? Есть два типа единиц: относительная и абсолютная. Относительная единица— это пиксели, проценты и др. А абсолютная — это миллиметры, сантиметры. Сначала указывается значение отступа от левого края. Давайте попробуем поставить это значение в 20 пикселей, а потом укажем от верхнего края — 40 пикселей.
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 20px 40px;}
Сохраним и посмотрим, как все получилось. Получили два отступа: от левого и верхнего краев.
Если мы укажем значения отступов в абсолютных величинах, т.е. поставим, например, 2см и 4см:
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 2cm 4cm;}
то это выглядит соответственно.
Почему абсолютные значения называются абсолютными, а относительные — относительными? Сантиметр одинаков везде, поэтому он называется абсолютным, а проценты зависят, например, от размеров экрана: если на одном экране 10% — это примерно 3см, то на другом это может быть примерно 1см. Абсолютными величинами очень редко пользуются. В основном обходятся именно относительными: пикселями, процентами, есть еще такая буква «m» (величина зависит от буквы m), например:
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 30em 20em;}
Это означает «30 букв m в ширину и 20 — в высоту». Сохраняем. Получили желаемое. Такой прием используется в зарубежных странах. В России он используется достаточно редко, хотя бы потому, что буква m – буква английского алфавита.
Есть и другие относительные величины, но используются они совсем редко, поэтому я советую вам обходиться пикселями и процентами. Я делаю именно так.
Значения можно задавать еще и словами: если указать top (верх) и right (право).
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed top right;}
То есть в верхнем правом углу у нас будет отображаться изображение. Если укажем bottom left:
body { background: #33CCFF url(img/bg.jpg) no-repeat fixed bottom left;}
то оно будет отображаться в нижнем левом углу. Возможно, это немного трудно освоить, но вы поэкспериментируйте, попытайтесь повторять за мной. Поставьте изображению повторение, фиксирование, задайте позиционирование, и такой практикой вы добьетесь нужного вам результата.
Как задать цвет текста с помощью CSS?
На этом с фоном мы покончили и сейчас разберемся с цветом текста. С ним все просто. Он может принимать как значение кода (решетка и код RGB), так и значение словами (например, red – красный, purple – фиолетовый).
.red { color: red; }
.purple { color: purple;}
Есть несколько таких слов, которые браузер понимает, но, например, для оттенков таких слов нет. Например, #660066 – оттенок фиолетового цвета и для него нет соответствующего английского слова. Мы можем задать темно-серый цвет с помощью слова gray, но мы не можем задать какой-либо оттенок этого темно-серого цвета. Такого слова просто напросто нет. Поэтому нам нужно указывать код. Также код можно сократить. Если у вас первые два символа, вторые два символа и третьи два символа повторяются, то мы можем сократить каждый второй символ. Код оттенка фиолетового станет трехзначным кодом #606. Это дает браузеру понять, что первые два символа — две шестерки, вторые — два нуля и третьи — тоже две шестерки. Мы сохраним и проверим это сейчас. Ничего с цветом текста не изменилось.
На этом урок можно закончить. Возможно, это была немного трудная тема, но если вы поэкспериментируете, то в итоге будете с ней «на ты». До встречи в следующем видеоуроке, посвященному работе над текстом и его оформлением!
Info-line.net
Урок посмотрел, хороший. А вот правда при скачивании. точнее когда извлекаешь из архива пишет что файл index.swf повреждён.
Спасибо. Перезалил. *THUMBS UP*
Привет, а вот вопросы задать не совсем касающийся уроков можно? Если можно то куда писать? Прям сюда? Просто у меня реально нет знакомых кто бы понимал в этом, а если пишешь на форумах там все такие умные. что аж писать больше не охота. Спасибо!
Я пока еще об этом не думал, честно говоря. =)
Запишу себе в планах. Думаю для такой ситуации лучше всего подходит форум, поэтому в след. месяце я этим займусь.
Если есть какие-нибудь идеи по осуществлению такой задумки без помощи форума, прошу их сообщить мне, с помощью кнопки «Оставить свой отзыв» в левой стороне сайта.
Пока можете задавать вопросы в комментариях, а также используя кнопку «Оставить свой отзыв» и выбрав потом в выпадающем списке «Задать вопросы» *DRINK*
Ну понеслась.)) Каким размером лучше делать фон? Как я понимаю чем меньше тем лучше для загрузки страницы, этот вариант подходит допустим как у Вас на сайте. А вот если я хочу рисунок? Солнце, небо, дома и т.д ведь тогда картинка должна быть большая и значит сайт будет долго грузиться? Я хочу сделать именно картинку, то есть шапка будет к примеру 1000 на 300 px, а вокруг неё фон. Но опять же, ведь у всех разные мониторы, значит кому то будет не удобно, хотя куча сайтов щас как то под монитор автоматом уменьшаются, как этого добиться? Я в общем хочу объёмный сайт с минимум текстА и максимум картинок, ну вот нашёл как пример . Заранее спасибо!
В фотошопе можно использовать «сохранить для web» и там выбирать нужные параметры, регулируя вес изображения и его качество.
Сейчас уже редко у кого стоит монитор с разрешением менее чем 768×1024. Не совсем понятен вопрос. Приведи пример, пожалуйста.Если взять мой сайт, то левый и правый блоки указаны в пикселях, контент указан в %, благодаря этому сайт отображается нормально на всех разрешениях.
Для удобства просмотра в маленьких разрешениях(менее 1024 пикселя в ширину), я указал свойство min-width(то есть задал минимальную ширину контента), о котором мы еще будем говорить в видеоуроках.
Самое главное — это желание учиться и хотеть действовать. Все в твоих руках! 8)Приветик, урока нового вижу пока нету((( вот ещё вопросы возникли, сразу говорю спасибо за ответы, очень помогаешь!!! Сайт мой пробный про АВИАЦИЮ вроде подходит к концу, делал я его в adode Dreamwea cs3. Программа хорошая, но конечно своеобразная, хотя там многое делается за два клика. Ну вот задам пару вопросов самых щас важных. 1) у меня там есть раздел автор, туда я повесил инфу о себе и связь с аськой.Хочу туда повесить форму для комментариев, то-есть что бы на это странице люди писали свои комменты, как сложно это сделает? если ли готовые скрипты? как прописать путь и т.д. 2) есть раздел АЭРОПОРТЫ я туда текст вставил, слева текст одной компании, потом справа другой и т.д хочу туда картинку...не понимаю как(((( например слева текст, справа картинка
Скоро появится урок. И последующие будут выходить чаще, чем раньше.
1) Форму комментариев лучше писать на php, можно взять и готовые скрипты. Инструкции к ним обычно прилагаются. Для этого достаточно вбить в поисковике соответствующую фразу.
2) Если правильно тебя понял, то:
Чтобы текст обтекал изображение, нужно задать изображению атрибут align со значением right (изображение справа, текст слева) или left (изображение слева, текст справа). Есть и другие значения у этого атрибута, подробнее в курсе по HTML.
Пример:
Чушь какая то(((( на своём сайте поменял фон и тему...блин при переходе по страницам белое поле((((( что опять я не так сделал
Вопрос немного не по теме. Но все же отвечу:
Не заметил никаких проблем у вас на сайте. Переход по страницам работает исправно.
Извини, я наверное достал тебя уже((. Ну хотя это понятно,если какие то вопросы не стоит задать просто напиши это, мне реально больше не у кого просить помощи, да и с этой страницей для комментариев, про которую я спрашивал, не нашёл я в поиске ни чего, нашёл конечно, но как куда вставлять я не понимаю файл php что бы комменты появлялись на одной странице. как прописать путь...((((((((((. Ладно, ещё раз извини...
Да нет, не достал, задавай вопросы. Я же сайт создавал для того, чтобы помогать) 8)
Так, на счет скрипта php! *THUMBS UP*
У себя на компьютере ты не сможешь его использовать, если не установлено необходимое программное обеспечение.
Скачайте набор Denwer с сайта .
Там есть скрины по установке. Видеокурс по установке денвера, я буду записывать чуть позже.
После того как установите денвер, то скачать и установить скрипт можете .
Также можно установить комментарии на JavaScript. Там не потребуется устанавливать ничего такого =) . Но не советую по этим причинам:
1. JavaScript — язык, который работает на стороне клиента, что сужает нам возможности.
2. JavaScript у некоторых пользователей может быть отключен.
Здравствуйте!
Большое спасибо за уроки!
Есть вопрос, по теме, что я делаю неправильно?
Цвета нет, ни у фона ни у шрифта.
Код писал в notepad++, а когда открывал в программе Adobe Dreamweaver CS3, то шрифт вообще не читался.
Доброе время суток.
1. Убедитесь, установлена ли связь css файла со страницей. Для этого надо в html файле между тегами
и добавить такую строчку:где «файл стилей» — путь к файлу стилей.
2. Убедитесь, что перед кодом цвета стоит символ #. То есть, например:
3. Убедитесь, что вы правильно прописали стили. Попробуйте сделать все в точности как показано в уроке, возможно это поможет найти ошибку.
Если все вышеописанное не помогло, напишите пожалуйста исходный код файла стилей. Для этого нужно поместить ваш код в комментариях между: [css] и [/css]
Возможно вы забыли добавить в Dreamveawer файл стилей. В следствии чего, Dreamveawer действуя как редактор, увидел лишь один файл — index.html
Если проблема именно в этом, то для ее решения нужно создать в панели управления сайтами свой сайт, где указать папку, в которой располагаются ваши файлы сайта(index.html и style.css).
Если же проблема не в этом, то желательно было бы услышать ее подробное описание.
P.S. Попробуйте повторить все в точности, как показано в видеоуроке и возможно заметите ошибку. Если же не поможет, то скиньте мне исходники файлов(index.html и style.css), это значительно ускорит решение проблемы. 😉
По поводу DENWER, установил, а при запуске пишет ошибку «found at least 1 errors» весь инет облазил, в основном пишут что касперский блокирует, я его отключил, всё ровно эта ошибка(( может ты что то знаешь?
Честно говоря, впервые об этом слышу. Я так понял ты установил, а потом отключил. Может попробуй отключить и переустановить(или же поискать способы решения этой проблемы в интернете). У меня NOD32 и никаких проблем с ним не возникало.
Единственная проблема, была с сервером IIS, я его отключил в панели управления и все заработало как положено.