Введение. Что такое CSS или каскадные таблицы стилей?

Из этого видеоурока Вы узнаете:

  • Что такое CSS
  • За что отвечает CSS
  • Чем отличается HTML от CSS
  • В какой программе мы будем писать код CSS

Скачать материалы:
Скачать 1-ый видеоурок по CSS Размер: 2.75 MB, скачали: 907 раз.
Скачать Notepad++ Размер: 5.16 MB, скачали: 2425 раз.
Скачать браузер Mozilla Firefox 4 Размер: 12.26 MB, скачали: 552 раз.
Скачать браузер Internet Explorer 9 Размер: 23.51 MB, скачали: 455 раз.
Скачать браузер Opera 11.10 Размер: 6.69 MB, скачали: 570 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Знакомство с HTML и CSS

Здравствуйте, уважаемый слушатель. Мое имя — Олег Зубцов. Я вас приветствую в видеокурсе по CSS (Cascading Style Sheet – каскадные таблицы стилей). Каскадные таблицы стилей — это просто напросто прорыв науки в оформлении веб-страниц. Но, прежде чем приступать к изучению CSS, Вам нужно владеть знаниями языка HTML. Если Вы не знакомы с HTML или недостаточно уверены в своих знаниях, то я рекомендую Вам для начала изучить видеокурс по HTML, а уже потом переходить к CSS.

Приступить к изучению видеокурса по HTML немедленно!

В этом видеокурсе я буду давать материал с учетом того, что вы уже знакомы с языком разметки HTML. Если же вы его не изучали ранее, то вы можете изучить его, скачав диск с нашего сайта. Чтобы скачать видеокурс, вам нужно перейти на страничку HTML, после чего нажать на ссылку «скачать полностью ехе-файл». После нажатия на ссылку в новом окне откроется веб-страница, на которой будет указан размер файла. Для скачивания остается только нажать одну кнопку. После нажатия этой кнопки у вас выскакивает запрос о сохранении этого файла на ваш компьютер. Вы нажимаете «Сохранить» и он у вас сохраняется.

Что такое CSS?

Вернемся к CSS. Так за что же он отвечает? А CSS отвечает у нас за оформление сайта. Если HTML отвечает за расположение на нем блоков, текста, изображений, то CSS может придавать стили этим элементам, а также влиять на их отображение. Например, у меня на сайте левый и правый блоки оформлены с помощью CSS, кнопочка тоже оформлена с помощью CSS и т. д. Даже когда я ставлю курсор в поле поиска, то оно подсвечивается — и это тоже CSS. Красиво, не правда ли? Более того, чтобы поменять цвет ссылок справа мне нужно будет заменить только одну строчку в файле CSS. Цвет этих ссылок поменяется на всех страницах. Удобно, красиво и профессионально.

Какое же программное обеспечение мы будем использовать при изучении? Если вы проходили мой видеокурс по HTML, то наверняка знакомы с программой Notepad++. Это замена блокноту. Работать в нем комфортнее. Программа бесплатная, и я прикладываю ссылку на скачивание к этому видеоуроку.

На этом я заканчиваю вступительный видеоурок. Надеюсь, я вас заинтересовал и заинтриговал. Приглашаю пройти вас к следующему видеоуроку, в котором мы познакомимся с теоретической частью CSS.

Подпишись на info-line:

Получать новые уроки на e-mail:

55 комментариев на “Введение. Что такое CSS или каскадные таблицы стилей?”

  1. Иннокентий 13 мая 2011 в 0:28 #

    Здравствуй, Олег. Посмотрел курс по HTML мне понравилось и многое узнал, где то запутался, что-то не понял, но думаю практика всё исправит. Что изучать дальше? CSS или php? создаю потихоньку сайт, хочется конечно посимпатичней, то есть мой сайт www.video-art-studio.ru сделан по шаблону и с помощью вордпресс. А я хочу сам без шаблонов создать красивый сайт о городе. Спасибо.

    • Олег Зубцов 13 мая 2011 в 15:10 #

      Спасибо за комментарий. Курс по CSS постараюсь сделать еще лучше.

      Что изучать дальше? CSS или php?

      Желательно изучать CSS. PHP пока рановато. В наших планах выпускать видеокурсы в последовательности их важности и необходимости =)

      Скоро выйдет «стартовый» видеокурс для новичков, в котором будет описана последовательность изучения языков, их особенности, программы при работе и многое другое.

      Сейчас же, я буду выпускать видеоуроки по CSS. Кстати, сегодня появится 3-ий 😉

      А я хочу сам без шаблонов создать красивый сайт о городе.

      В этом вам понадобится CSS, знание правильной верстки HTML+CSS (этот видеокурс выйдет чуть позже) и умение работать в программе Photoshop (курс по Photoshop'у мы также собираемся выпустить позже).

    • zeceDyenrenna 4 августа 2011 в 5:22 #

      Доброй ночи. Хотелось бы узнать, сколько стоит реклама на вашем форуме?

      • Олег Зубцов 4 августа 2011 в 13:29 #

        Доброй ночи. Хотелось бы узнать, сколько стоит реклама на вашем форуме?

        Я вам напишу на e-mail, обсудим. 😉

  2. Иннокентий 13 мая 2011 в 17:22 #

    Спасибо Вам огромное! Ну фотошоп я знаю, не на 100 процентов конечно, то что то умею. Очень жаль что пока мало уроков по css ибо ваш курс по html увлекательный и вот за пару дней я сделал простенький сайт о самолётах). Ну добавил картинок, хочется теперь вот немного его сделать покрасивее, а для этого и нужен css как я понимаю. было бы неплохо если бы ваши уроки по css были бы редактирования сайта именно того на чём мы учились в html. Думаю так будет понятней!.

    • Олег Зубцов 13 мая 2011 в 18:23 #

      Было бы неплохо если бы ваши уроки по css были бы редактирования сайта именно того на чём мы учились в html. Думаю так будет понятней!

      Почти все уроки по CSS будут записаны на файле index.html, который взят из курса по html и отредактирован(убрано все лишнее).

      Очень жаль что пока мало уроков по css ибо ваш курс по html увлекательный и вот за пару дней я сделал простенький сайт о самолётах

      Скоро наверстаем упущенное 😉

  3. Иннокентий 13 мая 2011 в 20:09 #

    Ваще супер, ты молодец! И ещё)) сюда можно вопросы задать по курсу html? ну я просто кое что не понял

  4. Олег Зубцов 13 мая 2011 в 20:24 #

    Без проблем. Но лучше задать к тому уроку, в котором что-то не понятно, чтобы тот, кто столкнется с такой проблемой, увидел сразу на нее ответ 🙂

  5. Иннокентий 21 мая 2011 в 21:11 #

    Здравствуйте ещё раз, даже не знаю с чего начать. Вопросов море, уж не знаю наверное не к конкретному уроку, в общем щас напишу несколько вопросов. 1) Я что то запутался в рамках (border), загрузил кучу фоток на страницы сайта, рамка чёрная, хочу поменять цвет. Ни как не пойму где прописать это 2) Сделал в after effects небольшую анимацию, сохранил в gif и вау!!! повесив под меню, анимация идёт, решил так же сделать шапку, но при изменение пути к шапке то есть к примеру первая была <img src="header.png", а вторая <img src="header2.gif" после изменения картинка просто пропадает. 3) У меня есть картинка в footer я хочу добавить на неё картинок. к примеру наша почта, наша аська и т.д, как это сделать? Это можно сделать лишь путём как в уроке "11" ? или же есть ещё варианты. у вас на сайте я вижу ссылки, правда текстом, но думаю суть одна. Заранее спасибо за ответы и огромное спасибо за новые уроки по CSS жаль что 4-урок ещё не вышел, буду ждать. Ещё раз респект Вам!

    • Олег Зубцов 21 мая 2011 в 23:15 #

      1) Я что то запутался в рамках (border), загрузил кучу фоток на страницы сайта, рамка чёрная, хочу поменять цвет. Ни как не пойму где прописать это

      В одном из уроков по CSS мы будем это проходить. Если «горит» сейчас, то попробуйте прописать атрибут border-color к изображению.

      <img src="путь к изображению" border="толщина рамки" border-color="цвет рамки"> 

      2) Сделал в after effects небольшую анимацию, сохранил в gif и вау!!! повесив под меню, анимация идёт, решил так же сделать шапку, но при изменение пути к шапке то есть к примеру первая была

      <img src="header.png">
      , а вторая
      <img src="header2.gif">
      после изменения картинка просто пропадает.

      Проверьте путь к изображению, проверьте формат изображения(gif, jpg), проверьте регистр. Если все верно, но все равно не работает, скопируйте пожалуйста код в комментарий. Чтобы код отобразился, его нужно будет добавить с помощью кнопки код, указав атрибуту lang значение html.

      3) У меня есть картинка в footer я хочу добавить на неё картинок. к примеру наша почта, наша аська и т.д, как это сделать? Это можно сделать лишь путём как в уроке «11» ? или же есть ещё варианты. у вас на сайте я вижу ссылки, правда текстом, но думаю суть одна.

      Это делается с помощью CSS.

      Заранее спасибо за ответы и огромное спасибо за новые уроки по CSS жаль что 4-урок ещё не вышел, буду ждать.

      Всегда рад помочь. Видеоурок появится на сайте в ближайшие два дня. 😉

  6. Иннокентий 22 мая 2011 в 2:09 #

    я прописал border-color... явно я где то запутался((((

    • Иннокентий 22 мая 2011 в 2:12 #

      <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>мир авиации</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="keywords" content="music,video">
      <meta name="description" content="sait moi">
      </head>
      <body link="#002ff9" alink="#f1001c" vlink="#f1001c" text="#000000" bgcolor="#bdbdbd" >
      <table align="center" width="1000" border="1"  cellspacing="3" cellpadding="5">
      <tr height="200">
      <td colspan="2"><img src="header.png" width="1000" height="200"></td>
      </tr>
      <tr>
      <td  valign="top" align="center" width="200" background="img/bg5.png">
      <p><a href="index.html">ГЛАВНАЯ</a></p>
      <p><a href="flot.html">ВОЗДУШНЫЙ ФЛОТ</a></p>
      <p><a href="aeroport.html">АЭРОПОРТЫ</a></p>
      <p><a href="saiti.html">САЙТЫ</a></p>
      <p><a href="avtor.html">АВТОР</a></p>
      <p><a href="history.html">ИСТОРИЯ</a></p>
      <a href="http://video-art-studio.ru/"><img src="img/st2.gif"  hspace="20" vspace="20"></a>
      </td>
      <td align="center" valign="top" width="800" background="img/bg5.png">
      <p> <b><tt><font color="#000000">Добро пожаловать в мир Авиации.
      <br>На нашем сайте много интересного обо всём что касается того что происходит на небе!</font></tt></b></p>
      <hr color="#3c81e7">
      <p><h2><tt>Официальным днем рождения гражданского воздушного флота России
      <br> считается 9 февраля 1923 года.</h2></p>
      <img align="center" src="img/1s.png" border="2" border-color="#0250e1" hspace="20" vspace="20">
      <p align="left"><b>В 1923 году главный аэропорт СССР располагался в центре Москвы на Ходынском поле<a href="history.html"> лететь в прошлое...</tt></b></a </p>
      <hr>
      <img align="center" src="img/11s.png" border="2" hspace="20" vspace="20">
      </td>
      </tr>
      <tr height="40">
      <td colspan="2"><img src="footer.png" width="1000" height="40"></td>
      </table>
      
      </body>
      </html>
      
      

      • Олег Зубцов 22 мая 2011 в 15:53 #

        Вы делаете все верно. Проблема в самом атрибуте. Он раньше когда-то принимался браузерами, но теперь большинство браузеров отказались его поддерживать.

        Какой выход из ситуации? — задать цвет рамки посредством CSS. В курсе по CSS я специально запишу видеоурок по рамкам.

        Стоит отметить, что благодаря CSS, не придется задавать цвет рамки для каждого изображения, что будет значительно удобнее(если вдруг возникнет нужда поменять цвет рамки, то нужно будет заменить лишь 1-строчку в CSS).

  7. Иннокентий 22 мая 2011 в 2:29 #

    с шапкой всё понял, Вы были правы, просто тупо запихнул её не в ту папку(((((( не внимателен был, извините

    • Олег Зубцов 22 мая 2011 в 15:25 #

      ничего страшного. Со всеми бывает.

      Я сам иногда такие глупые ляпы совершаю 🙂

  8. Иннокентий 23 мая 2011 в 0:53 #

    Спасибо огромное, вижу урок 4 появился, завтра буду смотреть!!! То есть в моём коде нет ни чего лишнего? Я дико извиняюсь не правильно видимо код вам выслал. И пока ещё вопросик как прописать что бы была иконка сайта в строке где сайт...ну например как у Вас.

    • Олег Зубцов 23 мая 2011 в 1:14 #

      Да, урок появился.

      Нет, лишнего ничего нету. Только вы по-моему забыли закрыть тег tr здесь:

      <tr height="40">
      <td colspan="2"><img src="footer.png" width="1000" height="40"></td>
      </table>
       
      </body>
      </html> 

      Я дико извиняюсь не правильно видимо код вам выслал.

      Ничего страшного. Я поправил. Вы просто забыли указать в первой строке это: lang="html"

      И пока ещё вопросик как прописать что бы была иконка сайта в строке где сайт...ну например как у Вас.

      Нужно загрузить изображение 16×16 пикселей в формате ico с именем favicon.ico в корневую папку сайта, размещенного на хостинге. Оно автоматически у вас изменится.

  9. Юрий 18 августа 2011 в 12:51 #

    Здраствуй Олег я посмотрел весь видеокурс по HTML мне понравилось на я не знаю как мне например с етой сылки file:///E:/Сузіря/index.html сделать нормальный адрес сылки например www.suzirua.ua подкажи пожалуста наперед спасибо

    • Олег Зубцов 18 августа 2011 в 22:46 #

      Нужно купить место на хостинге. То есть сначала нужно купить кусочек места в интернете, чтобы туда поместить свой сайт. После того как вы купите это место, вам нужно будет зарегистрировать доменное имя для своего сайта. Это как раз «sizuria.ua» или «info-line.net». Этот этап я буду показывать в видеоуроках чуть позже, после того как обучу рисовать дизайн и верстать его.

      Дам два совета, если собираетесь размещаться на хостинге в ближайшее время:

      1. Настоятельно не рекомендую покупать место на дешевых хостингах, дороже выйдет. Не экономьте на этом.

      2. Не спешите покупать доменное имя, не определившись с хостингом, так как на многих известных хостингах при оплате за год дается домен в подарок.

      Я пользуюсь этим хостингом goo.gl/qGd8K (ссылка на их тарифы). Сам я на тарифе «Третий». Пока проблем не было. Нравится, что есть онлайн-консультант. При оплате за год, получил 2 домена в подарок 🙂

      Есть еще один хороший хостинг, который мне понравился — agava.ru

      Но я выбрал первый и доволен своим решением.

  10. Юрий 22 августа 2011 в 10:14 #

    Спасибо! =)

  11. Юрий 23 августа 2011 в 11:25 #

    Здраствуйте а как а как на своем сайте зделать анимацию?

    • Олег Зубцов 27 августа 2011 в 12:16 #

      Что такое анимация?

      Анимация — это несколько изображений, которые меняются с определенной частотой. Анимация обычно является изображением GIF формата.

      С помощью чего можно сделать анимацию?

      Анимацию можно сделать в программе Adobe Photoshop или в специально предназначенных для этого программах, например, GIF Animator.

  12. Саян 2 октября 2011 в 18:37 #

    Здорова Олег Зубцов мне понравилось как ты учишь html программированию мне б хотелось с тобой пообщаться как друг с другом мой логин sayan91_kz.ru

  13. Саян 16 октября 2011 в 19:44 #

    ой извиняюсь неправильно дал логин ошибся sayan91_kz@mail.ru

  14. Саян 16 октября 2011 в 19:46 #

    или в скайпе sayanrk

  15. rahim 5 февраля 2012 в 10:39 #

    Привет Олег Зубцов , не могли ты мне создать сойт пожалуйста буду блогодарен заранее спасибо.

    моя почта rahim_gonzales@mail.ru

    • Олег Зубцов 5 февраля 2012 в 13:29 #

      Привет. Я не создаю сайты на заказ пока что. А если и создаю, то у меня заказывать очень дорого. Воспользуйся сайтом free-lance.ru

  16. rahim 5 февраля 2012 в 10:41 #

    сайт зделать пожалуйста

  17. rahim 5 февраля 2012 в 10:43 #

    а как зделать чтоб твой сайт выходил в поисковик?

    • Олег Зубцов 5 февраля 2012 в 13:32 #

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

  18. Рахим 6 февраля 2012 в 7:07 #

    а когда выйдет курс раскрутка сайта ?

    • Олег Зубцов 6 февраля 2012 в 9:48 #

      Все курсы будут выходить постепенно. Курс по раскрутке сайта выйдет не скоро, но прежде, чем задумываться о раскрутке, я вам советую изучить HTML и CSS, так как это основы.

  19. Рахим 6 февраля 2012 в 7:11 #

    а css и php одно и тоже??

  20. Рахим 6 февраля 2012 в 11:00 #

    а почему утебя нету видеоуроки по php

  21. Рахим 7 февраля 2012 в 8:01 #

    ясно а конструктр сайтов можно там создать хороший сайт ! на ucoz.ru скажи пожалуйста или через хостинг самому писать!

    • Олег Зубцов 7 февраля 2012 в 10:37 #

      Php — это язык веб-программирования. На нем можно свой движок написать.

      Ucoz.ru — для новичков, так сказать. Позже мы будем изучать движки для сайтов и использовать их. Но для начала, самое главное изучить HTML и CSS.

  22. Рахим 7 февраля 2012 в 15:41 #

    я изучил html а css ещё не учил буду ещё учить php потом на веб дизайна!

  23. Рахим 7 февраля 2012 в 16:40 #

    а вот так называеться везуальный редактор adobe dreamweaver cs 5?

  24. Рахим 8 февраля 2012 в 5:03 #

    Artisteer 2 а вот такой везуальный редактор тож хороший подскажите пожалуйста какой лучше?

    • Олег Зубцов 8 февраля 2012 в 11:39 #

      Artisteer — это скорее генератор шаблонов. Dreamweaver такие шаблоны не генерирует, но вплане редактора кода — он лучше.

  25. Рахим 8 февраля 2012 в 7:30 #

    а утя есть токай текстовой документ в которой есть все теги атрибуты с объяснением если есть можешь мне дать пожалуйста заранее спасибо! мой логин rahim_gonzales@mail.ru *HELP* =)

  26. Рахим 8 февраля 2012 в 11:47 #

    а ты какой везуальный редактор испольщуешь?

    • Олег Зубцов 8 февраля 2012 в 11:54 #

      Я не использую визуальный редактор, пишу все в Notepad++. Раньше пользовался Dreamweaver.

      • Мах1ди 6 марта 2012 в 20:39 #

        Хотел бы узнать _ откуда вы такие умные ???

  27. Рахим 8 февраля 2012 в 11:48 #

    а вот что надо учить чтобб стать веб дизайном я уже выучил html css и ещё что надо учить скажи пожалуйста?

  28. Анатолий 25 декабря 2012 в 4:02 #

    В одном из твоих видеоуроков услышал о существовании программы Adobe Dreamweaver и узнав о ней немного озадачился таким вопросом, так зачем изучать HTML и CSS если можно создать сайт и запустить, все же, в чем разница?

    • Олег Зубцов 30 декабря 2012 в 4:51 #

      Эта программа для написания сайтов, но чтобы писать, нужно же знать, что писать. Она предоставит Вам удобства при работе, но не заменит знаний языков программирования.

      Есть и еще более функциональные инструменты по созданию сайтов, например такие как Ucoz или CMS-системы. Но опять же, они помогут создать сайт, но вы будете скованы в своих возможностях. Ко мне очень часто обращаются люди, которые даже прошли специализированные курсы по созданию сайтов на CMS-системах, но они не знают ни HTML, ни CSS. Сайты их выглядят мягко говоря не очень и проблем своих решить сами, они не могут, поэтому и обращаются ко мне.

      HTML, CSS — нужны обязательно. PHP — можно пренебречь 🙂

Оставить ответ