Лого SiteHere.ru

Урок 1. Что такое CSS?

Урок 1. Что такое CSS

Здравствуй, уважаемый читатель.

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


Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:


Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста Урок 9. Формы. Часть 1 Урок 9. Формы. Часть 2 Урок 10. Метатеги Урок 11. Комментарии Урок 12. Теги div и span

Теория и практика

Что же такое CSS? CSS используется для задания цветов, шрифтов, расположения блоков и других аспектов представления внешнего вида веб-страниц. Как и в уроках HTML в CSS мы изучим только основные свойства. Потому что свойств очень много. Но для редактирования шаблонов, а также создания сайтов нет необходимости держать в памяти все свойства и тем более их значения. Мы рассмотрим только основные. Начнем с подключения CSS файла в HTML страницу:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Первый урок изучения CSS</p>
</body>
</html>

Как вы заметили файл со стилями подключается с помощью тега <link>, который находится между тегами <head></head>. Атрибут rel="stylesheet" определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href="style.css" определяет где находится файл с таблицей стилей. Ну и атрибут type="text/css" определяет тип данных.

Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++

1
2
3
body{
    background-color:#C1BAFF;
}

Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

5 комментариев к записи
  • Римма

    Юрий,случайно заскочила к Вам в блог и увидела много полезного для себя.Очень хочется изучить функции CSS. Оказывается при помощи ее можно очень многое делать на своем сайте.Буду учиться по Вашим урокам.Правда я еще пока не такая продвинутая,но стараюсь ухватить многое.Спасибо!

     
    • Юрий

      Римма, всё у Вас получится. Как и в любом навыке — главное практика!

       
  • Алена

    В уроках CSS  у вас почему то нет навигации(( Я имею в виду "Следующий урок" / "Предыдущий урок"

     
    • Валерий

      вероятно не предусмотрели разработчики сайта, в поиске вбиваете "урок css" и там легко находите

       
      • Юрий Немец

        Добрый день! Добавил навигацию по урокам CSS, сейчас можно также быстро переходить к следующему/предыдущему уроку. Навигация, как в уроках по HTML, расположена в конце каждой статьи.

         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *