Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 3 видеоуроку по CSS Размер: 28.37 kB, скачали: 709 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Переходим на рабочий стол. Еще в прошлом видеоуроке я создал папку Site. Если вы ее не создали, то сделайте это сейчас. Заходим в эту папку. В ней у вас должна быть папка img и файл index.html. Скачать их вы сможете с нашего сайта во втором видеоуроке по CSS в дополнительных материалах.
Основы CSS
Итак, приступим. Для начала перейдем в редактор notepad. Создаем новый файл. Создать его можно, нажав на кнопку «новый». Теперь сохраним его. Для этого заходим Файл-> Сохранить как, выбираем нашу папку Site и сохраняем в нее файл под именем style.css. Теперь перейдем в папку, чтобы проверить. Документ style.css у нас имеется в наличии, но пока он нам не нужен. Сначала нужно разобраться с документом index.html. Для этого выбираем Edit with Notepad++, находим теги <head></head> и вставляем между ними тег <link> (в переводе с английского — ссылка, связка).
<head> <title>Главная страница</title> <link > </head>
Связка HTML+CSS
Тег мы ввели, осталось разобраться с тем, что мы хотим связать с нашим документом. А связать мы хотим именно тот css-файл, который создали — style.css. Прописываем два атрибута: rel и type. Что же они задают и какие параметры имеют? Оба они задают тип. Атрибут rel задает тип отношения этого документа к нашему css-документу и принимает только два значения: stylesheet и alternate – второй нам не понадобится, применять мы будем только первый. Второй атрибут type задает, так называемые «майнтайпы», про которые можно вообще забыть, потому что вводить нам нужно всегда text/css. По сути, про оба этих атрибута можно забыть и просто копировать их при создании новых документов.
<head> <title>Главная страница</title> <link rel="stylesheet" type="text/css"> </head>
Есть и третий атрибут — href. С ним вы уже знакомы из курса по HTML. Он задает путь к нашему css-файлу. Так как наш css-файл лежит в корневой папке сайта, то прописываем просто название — style.css. Жмем «Сохранить».
<head> <title>Главная страница</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Что мы сейчас сделали? Мы связали файл index.html с файлом style.css. Таким образом, все стили, которые мы создадим в файле style.css будут применяться в документе index.html.
Селекторы, свойства, значения
Перейдем в style.css. Сейчас мы начнем вводить стили, и вы увидите всю мощь этой технологии. Но сначала я расскажу о том, как их вводить. Давайте пропишем три строчки, а потом разберемся с ними по порядку.
body { background: #ccffff;}
.purple { color: #660066;}
#bg_yellow { background: #ffff66;}
Написали. Наверняка вы заметили сходства. То, что подчеркнуто на видео красным: body, .purple, #bg_yellow – называются селекторами (от английского «select» – выделение). Подчеркнутое зеленым: background, color – называются свойствами. Например, свойство color задает цвет текста. Подчеркнутое синим: #ccffff, #660066, #ffff66 – называются значениями. В HTML мы их приписывали к атрибутам, то есть у нас шел атрибут, например rel, а потом — значение, например stylesheet. У CSS именно такая форма записи.
Что такое класс и идентификатор в CSS?
Что же такое селектор? В качестве селектора могут применяться как теги, так и, непривычные для новичков названия — классы и идентификаторы. Классы и идентификаторы мы будем прописывать чуть позже, и вы с ними разберетесь.
После селектора следуют свойства. Это может быть как background, которое означает «фон», так и color – «цвет» и другие. Далее прописывается значение, которое придается свойству.
Практика CSS
Давайте просто сохраним наш документ, нажав на кнопочку «Сохранить» и проверим его в браузере — что у нас изменилось. Просто проверим. Как мы видим, изменился фон. Больше никаких изменений не произошло.
Что же мы сделали? Почему цвет фона поменялся? Как мы видим, мы присвоили тегу <body> background (фон) цветом ccffff. Таким образом, файл index.html занес тегу <body> свойство background со значением голубого цвета. Цвет мы могли ввести и так:
body { background-color: #ccffff;}
Это бы означало только цвет фона. А вводя просто background, мы можем задать и путь к изображению, которое станет изображением фона, и в случае его отсутствия на сервере, будет применяться цвет, который написан у нас сейчас. Давайте пропишем изображение. В кавычках указывается путь к изображению. Так как изображение находится в папке img, мы прописываем путь через эту папку.
body { background: url('img/info-line.png') #ccffff;}
Сохраняем. Переходим в браузер и обновляем страницу. Мы видим, что фоном нашей страницы стало изображение info- line.png.
Фон я выбрал, конечно, не самый лучший, и он смотрится у нас криво, поэтому давайте его заменим. Я специально прикладываю к этому видеоуроку изображение bg.jpg. Нам его нужно скопировать в папку Site. Открыв папку Site, скопировать в папку img. Теперь заходим в наш код css и прописываем путь к этому изображению.
body { background: url('img/bg.jpg') #ccffff;}
Сохраняем. Проверим в браузере. Ну вот, так симпатичнее.
На свойстве background в этом видеоуроке я останавливаться не буду, так как он посвящен не свойствам, а основам их написания. Свойство background мы разберем в следующем видеоуроке.
На странице мы видим, как прописался наш фон. Больше ничего нового. Почему так? Класс мы задали, идентификатор — тоже, но класс и идентификатор нам нужно указать в файле index.html, а точнее, нам нужно присвоить их какому-нибудь тегу. Например, класс purple (в переводе с английского — «фиолетовый») задает цвет текста. Наверняка нам нужно присвоить его какому-нибудь абзацу. Как присвоить класс? Очень просто: прописываем class и в кавычках указываем этот класс, но без точки.
<p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом
Это все. Давайте сохраним наш документ и перейдем в браузер. Обновим страницу и ищем абзац. Как мы видим, искомый абзац стал фиолетовым. Давайте зададим еще одному абзацу такой же цвет. Задаем класс purple, например, списку. Класс необязательно должен быть задан абзацу.
<ol class="purple" type="I"> <li>Вы со мной согласны. <li>Вы со мной не согласны. <li>Вы в замешательстве. </ol>
Сохраняем. Обновляем. Видим, что цвет списка стал фиолетовым.
Перейдем в style.css и разберемся с идентификатором. Обычно идентификаторы используются реже, чем классы, но без идентификаторов иногда не обойтись. Давайте пропишем идентификатор, например, к тегу <small>. Как прописывается идентификатор? Пишется id="значение". Нам также не нужно ставить здесь решетку. Ее мы ставим только в файле стилей.
<br><small id="bg_yellow">Дааааа... Шли недели...</small></div>
Как вы уже поняли, этот идентификатор задает цвет фона. Давайте сохраним и посмотрим, что у нас получилось. Обновляем. Цвет фона для выбранного текста стал желтым.
Хочу заметить, что каждая буква, каждая точка и даже пробел являются элементами. И каждый из этих элементов имеет фон. Давайте разберем на примере. Пропишем пробел после многоточия.
<br><small id="bg_yellow">Дааааа... Шли недели... </small></div>
Сохраним. Обновим документ. У нас ничего не изменилось. Не изменилось, потому что я неправильно прописал пробел. Пропишем пробел спецсимволами. Я про них рассказывал в курсе по HTML. Все они есть у нас на сайте.
<br><small id="bg_yellow">Дааааа... Шли недели... </small></div>
Обновим и видим, как у нас пробел присвоил себе фон. Если поставить несколько таких пробелов, то все они присвоят этот фон, так как находятся в идентификаторе bg_yellow.
<br><small id="bg_yellow">Дааааа... Шли недели... </small></div>
Применять это вы можете где угодно.
Идентификатор мы задали. Теперь перейдем в нашу таблицу стилей. Давайте попробуем нашему идентификатору добавить свойство color.
#bg_yellow { background: #ffff66; color: #ffff00;}
Сохраним и пропишем в тег <small> наш класс purple.
<br><small id="bg_yellow">Дааааа... Шли недели... </small></div>
Сохраним и проверим. Видим, что текст стал отображаться желтым. Я не совсем правильно подобрал цвет. Давайте поменяем его.
#bg_yellow { background: #ffff66; color: #00ff00;}
Сохраняем. Проверим. Зеленый цвет на желтом фоне. Вопрос: почему не отображается фиолетовый цвет? Мы ведь задали класс тегу <small>. Все очень просто. Дело в том, что идентификаторы имеют более высокий приоритет, чем классы. Поэтому если свойство идентификатора совпадает со свойством класса, и они оба применяются к одному и тому же тегу, то за главного принимается свойство идентификатора.
Давайте проверим, что будет, если мы применим два класса к одному и тому же тегу с одинаковыми свойствами. Прописываем новый класс red. Задаем ему свойство color и указываем цвет. Некоторым известным цветам можно указывать цвет их названием, например, для красного это red.
.red { color: red; }
Сохраняем. Переходим на вторую вкладку — index.html. Нам нужно добавить класс. Один класс мы уже добавили. Как добавить второй? Очень просто: жмем пробел после слова purple и вводим имя второго класса — red.
<p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом
Жмем «Сохранить» и обновляем нашу страницу. Смотрим, что получилось в нашем абзаце. Он приобрел красный цвет. Почему? Ведь у нас заданы как класс red, так и класс purple. Переходим в код style.css. Как мы видим, класс red задан ниже класса purple. В этом и есть вся причина. Попробуем их поменять.
.red { color: red; }
.purple { color: #660066;}
Сохраним. Обновим страницу. Как мы видим, цвет стал фиолетовым.
Перейдем к комментариям. Для чего они нужны? Нужны они только вам и только для удобства. Во всех своих исходниках, которые я буду прилагать к урокам, я буду приводить описание содержания селектора. Комментарии открываются символом «/*», а закрываются — «*/».
/* Вы просматриваете бесплатный видеокурс по CSS от Олега Зубцова (http://info-line.net). */
Так же в плане удобства советую вам прописывать свойства так:
#bg_yellow {
background: #ffff66;
color: #00ff00;
}
Когда очень много классов, идентификаторов и в них очень много свойств, то такая запись значительно облегчает их поиск. Даже не то, что поиск, скорее облегчает их видимость. Все кажется проще и понятнее.
Как вы заметили, я ставил после разных селекторов пробелы. Это было сделано тоже для удобства. То есть идет селектор, потом пробел, потом следующий селектор, потом селектор того же вида, пробел, следующий селектор и т. д.
Я сохраняю наш файл и на этом заканчиваю третий видеоурок по курсу CSS. В следующем видеоуроке мы разберем два свойства: background и color, после чего вы получите свое первое домашнее задание. Приглашаю вас узнать, как задать цвет и фон страницы с помощью CSS.
Info-line.net
Олег, не могли бы Вы пояснить нюанс:
1) в чем разница между классами и идентификаторами?
2) для каких тегов используются классы, для каких идентификаторы (если есть разница?)
1. Классы могут использоваться сколько угодно раз, а идентификатор — только один раз.
2. Для любых. На данный момент, вам следует запомнить только отличие, которое я написал в первом пункте.
Есть еще момент с кодом PHP, иногда требуется задать элементу идентификатор, чтобы потом к нему обратиться. Но пока не забивайте этим голову.
Следуйте данному принципу:
1. Если вы уверены, что селектор будет использоваться в html-коде только один раз, задавайте #идентификатор
2. Если не уверены или знаете, что селектор будет использоваться в html-коде несколько раз, задавайте .класс
В 10 и 11 видеоуроках мы будем писать страницы с использованием идентификаторов.
Спасибо, всё понятно объяснили.
Всегда пожалуйста 8)
а вот что надо учить чтобб стать веб дизайном я уже выучил html css и ещё что надо учить скажи пожалуйста?
Photoshop — это основа для веб-дизайнера. Ну а потом учиться верстать дизайн из фотошопа.
Веб-дизайнер — это тот, кто рисует дизайн и продумывает структура сайта. То есть нужно знать только Photoshop (или другой серьезный графический редактор) и иметь фантазию, полет мыслей. Но многие дизайнеры, чтобы улучшить свое положение на рынке труда, изучают верстку. Если же ты научился работать с графическими редакторами и можешь нарисовать дизайн сайта, ты изучил уже как сверстать этот сайт, то можешь начинать изучать программирование, копирайтинг, SEO... Нет предела совершенству 😉
спасибо значит мне надо изучить фотошоп и ксс хтмл и php и всё я буду веб дизайнером мне теперь надо учить php и photoshop я правильно понял вас?
Изучите Photoshop. Создайте 1-2 дизайна в photoshop'e. Потом сверстайте их. И после этого уже, приступайте к изучению PHP (пи-эйч-пи) или JavaScript (джява-скрипт).
Почему говорю нарисовать и сверстать? — потому что это будет реальный очень ценный опыт. Мне знакомы люди, которые изучили десятки языков, но не в одном так сказать — не шарят, да и половину языков забыли уже 🙂 Чтобы такого не происходило — подкрепляйте свои знания практикой.
вот я тоже забываю мне тож теперь надо закреплять я щас выучу ксс мне немного осталось потом фотошоп потом попробую 2 3 дизайна зделать красивых и потом только php учить
Олег, я не могу разобраться со спецсимволами, как ставить пробел? в таблице не нашел((
В разделе «практика CSS» данного видеоурока, я его уже использовал.
Вот как он прописывается спецсимволами:
Олег я написал так: class="purple red" а текст все равно фиолетовый, поменял местами red и purple, все равно фиолетовый @= вооюще убрал все, оставил только class="" и опять текст фиолетовый 😀
А в файле .css написали их в каком порядке?
.red {} .purple {}Или наоборот:
.purple {} .red {}Здравствуйте Олег, скажите, из-за чего может не работать CSS. У меня что с ним, что без него — одинаково. Ничего не могу понять. Проверил сто раз, прописано все правильно.
Файл со стилями (css файл) привязали к html-странице?
Извините, Олег. Это я невнимательный. Никак не мог заметить недостающую букву «n» в свойстве «backgroud».
Бывает 🙂 В notepad есть специальная подсветка, поэтому очень удобно находить ошибки, достаточно обратить внимание на цвета 🙂
Спасибо большое за совет, Олег, я это понимаю, только я пользуюсь блокнотом пока. Недавно только купил свой первый компьютер, т. е. ноутбук, еще не сильно разбираюсь. Когда скачал notepad не смог его разархивировать — нет архиватора, пробовал скачать — ничего не получилось, устал и решил остановиться пока на блокноте. У меня просто windows7 starter (зато лицензионная :)).