CSS с нуля. Лекция 1


Приветствую всех, кому еще интересны эти статьи, и вообще этот блог в целом:) Так получилось, что я очень долго не писал. Оправдываться сейчас не буду, для этого я чуть позже выделю отдельную статью. А сейчас по многочисленным просьбам «CSS с нуля: первая лекция».Давайте для начала расскажу, что предстоит Вам узнать из этой лекции: «что такое CSS?», «для чего он нужен?», «как его использовать?».

Что такое CSS?

CSS — это язык стилей, отвечающий за отображение элементов, причем не только в html-документе (например, CSS используется при определении свойств элементов в Qt). Помните лекции «HTML с нуля»? Так вот, если Вы выучите CSS на должном уровне, у Вас полностью пропадет надобность в использовании дополнительных атрибутов для элементов. Кстати, раз уж Вы решили учить CSS, неплохо бы знать, что это аббревиатура, и расшифровывается она как Cascading Style Sheets. CSS является неотъемлемой частью блочной верстки, о которой я упоминал в последней лекции HTML с нуля.

Для чего служит CSS?

Служит CSS для придания индивидуальности странице, ну, или если говорить глобально, то сайту. CSS помогает оптимизировать структуру сайта, уменьшить вес страниц, а также облегчит изменение внешнего вида сайта (все доводы и факты этого приведу в следующей лекции).

Как использовать CSS?

В топе странные запросы: «Как установить CSS?», «Как создать CSS?», расслабьтесь, CSS создали и без нас, а устанавливать ничего не придется :) Все проще чем может показаться. Берем простую HTML страницу:

<!DOCTYPE html>
<html>
<head>
<title>Страница с CSS</title>
<style>
* {
background:#333;
color:#fff;
}
</style>
</head>
<body>
Simple Text
</body>
</html>

Все проще, чем могло показаться, правда? А все потому, что CSS интегрирован во все современные браузеры.  CSS очень простой и наглядный, что позволяет быстро привыкнуть к нему и влюбиться :)

Я думаю это неплохое легкое начало, которое не в коем случае не отпугнет Вас от изучения CSS. На этом все, подписываемся на RSS ленту, чтобы не пропустить следующую лекцию, надоедаем в комментариях, чтобы ускорить процесс :)

Stas Kuryan

Web developer. Перфекционист в написании кода.

Комментарии (24)

  1. Александр   •  

    Только нашел действительно хороший ресурс для таких как я, как оказалось что это только создается =(
    С нетерпением жду продолжения!

    • Stafox   •     Автор

      Всё будет :) Если у Вас возникают какие-то вопросы или сложности, Вы всегда можете обратиться ко мне, в комментариях, на почту или в скайп.

  2. Владимир   •  

    я так понял, для того, чтобы изучать CSS вначале надо изучить HTML, я правильно понял?

    • Stafox   •     Автор

      Да. Желательно начать с HTML.

      • Владимир   •  

        ок, бум потихоньку учить, я пытаясь разобраться в некоторых файлах темы некоторые детали уже и сам понял, но понял, что быстрее и легче будет выучить и понять HTML если начать учить его, а не наугад менять что-то в файлах темы и потом смотреть, что поменялось )))

        • Stafox   •     Автор

          Если будут вопросы — обращайся.

  3. Ольга   •  

    А я всё только думала как это к этой CSS подкатиться, чтобы хоть понять что это за зверь такой. Спасибо просмотрю все лекции и по HTML и по CSS обязательно и постараюсь в этом хоть разобраться.Спасибо.

    • Stafox   •     Автор

      Этот элемент позволяет установить, какой HTML-стандарт будет использоваться в текущем документе.

  4. Роман   •  

    Спасибо за цикл статей, действительно очень познавательно. А насчет популярного запроса «Как установить CSS» — скажу. CSS еще расшифровывается как Counter Strike Source — игра такая. Вот по этому такой странный вопрос =)

  5. caxa   •  

    а как установить обои на задний фон?

    • Stafox   •     Автор

      Для этого следует использовать свойство background-image.

      Используется так: background-image: url(‘image.jpg’);

  6. Саймон   •  

    А вы не могли бы написать свой скайп?По некоторым вопросам нужно обратиться.

    • Stafox   •     Автор

      На странице контактов есть.

  7. alban   •  

    Вы сами как изучали html? Заучивали теги или разбирали исходники?

    • Stafox   •     Автор

      Эх, давно это было. Тогда хотелось все и сразу. Разбирал сорсы других сайтов, изменял, делал что-то свое. В общем, методом проб и ошибок :)

  8. alban   •  

    Что можете посоветовать по данному случаю: таблица из 7 колонок, фон определён, и надо сделать так, чтобы цвет колонки изменялся в зависимости от дня недели, т.е. если сегодня пятница, то цвет колонки 5 меняет цвет, если суббота, то меняется колонка 6, а 5-я возвращает стандартный цвет и т.д. Тут походу без css и js не обойтись?

    • Stafox   •     Автор

      Ну, все очень просто. Определяете стили для ячейки таблицы по дефолту. Затем описываете класс .current в котором задаете свойства активной ячейки (дня недели).
      В любом случае Вам понадобится какой-нибудь язык js или php. Это уже зависит от условий дальнейшей реализации задачи.

  9. дима   •  

    Зачем это писать: * {
    background:#333;
    color:#fff;
    } эти параметры можно и в теге body указать. Это проще будет.

    • Stafox   •     Автор

      Дима, если Вы имеете ввиду такие атрибуты к тегу body bgcolor и text, то эти атрибуты устаревшие и осуждаются спецификациями отличными от HTML 3.2

  10. tix   •  

    Вот бы мне кто нибудь помог сделать игровой сайт. Давно учу html и css, но не могу запомнить(

    • Stafox   •     Автор

      В html и css нет ничего сложного, нужно просто запомнить определенный набор свойств и тегов. Верстая странички, каждую пишите с нуля. Стараясь не подсматривать и не копипастить то, что сделали ранее. Так быстрее запомните.

      Ну а для полноценного сайта, одним html и css не обойтись, как минимум придется использовать какой-нибудь язык программирования.

Добавить комментарий для alban Отменить ответ

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