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

Скачать материалы:

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

Как запустить видеоурок:

Разархивировать скачанный файл.
Открыть папку index.
Запустить файл 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:

← Обзор HTML 5. Что нового?

Теория CSS. Верстка HTML+CSS. Профессия верстальщик →

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

Иннокентий 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, обсудим. 😉
    
    Ответить
Иннокентий 13 мая 2011 в 17:22 #

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

Ответить
- Олег Зубцов 13 мая 2011 в 18:23 #
  
  Было бы неплохо если бы ваши уроки по css были бы редактирования сайта именно того на чём мы учились в html. Думаю так будет понятней!
  
  Почти все уроки по CSS будут записаны на файле index.html, который взят из курса по html и отредактирован(убрано все лишнее).
  Очень жаль что пока мало уроков по css ибо ваш курс по html увлекательный и вот за пару дней я сделал простенький сайт о самолётах
  
  Скоро наверстаем упущенное 😉
  
  Ответить
Иннокентий 13 мая 2011 в 20:09 #

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

Ответить
Олег Зубцов 13 мая 2011 в 20:24 #

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

Ответить
Иннокентий 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-урок ещё не вышел, буду ждать.
  
  Всегда рад помочь. Видеоурок появится на сайте в ближайшие два дня. 😉
  
  Ответить

Иннокентий 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>