Что такое CSS?

Давайте с вами вместе рассмотрим такую очень полезную штуку как каскадные таблицы стилей или просто CSS. Каскадные таблицы стилей (CSS — Cascading Style Sheets) — это очень мощный и интересный механизм управления, который создает богатое представление отдельных документов или их различных наборов. 

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

Виды CSS

Каскадные таблицы стилей бывают нескольких видов:

1) встроенные в элемент HTML (встраивается только в определенный элемент, а не во всем коде. Например, к какому-нибудь абзацу);

2) внедренные в HTML-документ  (между тегами <style> и </style> прописываются необходимые стили, которые используются на данной веб-странице);

3) внешние таблицы стилей (создается отдельный файл style.css и затем при помощи специальных команд, этот файл подключается к необходимым для нас документам). Такой подход более предпочтителен, поскольку он позволяет разрабатывать стили сайта отдельно от HTML-документов, а затем использовать их в одном файле style.css на множестве HTML-страниц. Во внешней таблице стилей можно очень быстро и гибко изменять вид целого сайта или блога. Это очень удобно, так как все необходимые стили находятся в одном файле.

Принцип работы CSS

Теперь давайте разберемся с технологией CSS и посмотрим, как вообще она работает. Допустим, мы создали простую HTML-страницу (А) с различными тегами (здесь конечно не все, но предположим что это полная HTML-страница (А)). Страница (A) — это наш фундамент. Теперь наша задача — подключить к данной странице (А) свою таблицу стилей (Б). Делается это очень просто. В области head (между тегом <head> и </head>) мы пропишем специальный тег и укажем, что мы хотим подключить файл style.css (строчка 1), то есть это и будет таблица стилей (Б). Любая таблица стилей имеет расширение css, имя у нее может быть любое.

что такое CSS

Так вот, мы в области head прописываем данный параметр (1). Браузер, когда он доходит до данной строки (1), то начинает искать файл с указанным именем (style.css)  по тому пути, который мы здесь ему укажем. Когда он находит этот файл (Б), то подключает его к нашему документу (А) невидимой связью. Данный файл (Б) содержит определенное количество стилей (2). Стили — это указания браузеру, как отображать тот или иной элемент в документе. Поэтому условимся на том, что данный файл содержит N-ое количество стилей.

Для браузера это означает, что когда он доходит до тега <body> (3), то все то, что находится внутри этого тега (строки 4, 5 и нижний текст), браузер будет отображать уже ориентируясь на стили (2). Например, в стилях может прописываться так, что все заголовки (строка 4) будут красного цвета и браузер соответственно сразу отобразит его красным цветом. В стилях может быть прописано, что все картинки (строка 5)должны быть выровнены по правому краю. То есть дойдя до картинки (5), браузер автоматически выровняет ее по правому краю. Это дополнительная инструкция для браузера — как именно нужно отображать элементы.

Если говорить просто, то в документе (А) мы создаем как должно быть, а в документе (Б),как это должно отображаться. Еще один пример можно привести:

— представьте себя художником. К вам приходит заказчик и говорит, что он хочет, чтобы вы нарисовали для него картину. На картине должно быть отражено следующее: поле, посреди которого стоит дом, рядом с домом озеро и рядом с озером стая уток. Это он вам сказал, что он хочет видеть на этой картине. А дальше он говорит, что дом должен быть с красной крышей и с желтыми стенами, озеро должно быть размером 50 на 20, а утки должны быть крупные. То есть, здесь он уже вам говорит, как это должно выглядеть.

Вот тоже самое и здесь. HTML-страницы мы создаем как каркас (что мы хотим видеть на странице), а уже в css-фале мы указываем браузеру, как должно выглядеть. Сейчас я хочу предоставить вам очень интересный сайт, который покажет вам всю мощь этой технологии CSS. Сайт называется csszengarden . com (вводить без пробелов). В чем здесь изюминка? Автор взял каркас HTML  и предложил любому желающему присылать таблицы стилей к этому каркасу. Что из этого вышло, мы можем посмотреть на страничке View All Designs. Тут ему прислали огромное количество каскадных стилей (CSS) для его HTML-каркаса и лучшие он начал выкладывать в данном списке. Просмотрев такие примеры этих стилей, вы убедитесь, что при одном базовом каркасе HTML можно получить совершенно разные сайты. Сам веб-дизайн значительно изменяется.

Немного истории

технология CSSВ начале 90-х годов, HTML был довольно слабым языком. Он только состоял из обычных элементов для описания различных списков, заголовков, различных абзацев или гиперссылок. HTML изначально предназначался как обычный структурные язык разметки для описания некоторых частей документа. Сам язык был лишь небольшой схемой разметки и не затрагивал описание внешнего вида файла.

Чуть позже, файлы уже содержали не только тексты, но и рисунки. Также появились специальные цветные фрагменты текста и изображения, с помощью которых (при щелчке мыши) можно было перемещаться между самими файлами. Все это дало толчок к появлению многих сайтов. С появлением большого количества сайтов, возникала потребность в усовершенствовании языка. Особенно многим авторам сайтов нужны были средства для выделения самого текста полужирным шрифтом или курсивом. На тот момент язык HTML не смог осуществить такое. После этого, в языке начали появляться элементы разметки (теги <FONT> и <BIG>).

Прошло некоторое время и начали появляться более новые языки (HTML 3.2 или HTML4) с новыми элементами, а сами страницы стали более структурированными, что значительно повысило индексацию поисковыми системами. Сама структурированная разметка упростила обслуживание сайта и позволила очистить код, и упростить поиск. Однако, не смотря на многие плюсы такой разметки, у нее был самый главный недостаток — это внешний вид. Структурированная страница выглядела тогда не очень красиво. Так как авторы сайтов в дальнейшем ни за что бы не отказались от языка HTML, то стала потребность в методе, который смог бы позволить использовать сочетание структурированной разметки с красивым внешним видом страниц без отказа от языка HTML.

В качестве такого метода послужил стандарт CSS1, который в 1996-ом году был введен консорциумом W3C (World Wide Web Consortium). Механизм CSS обеспечил очень богатое представление документов. Можно было создавать любые красивые цветовые элементы, красивый и привлекательный текст, дополнительные элементы оформления и многие другие интересные эффекты. 12 мая 1998-ого года на основе CSS1 была принята CSS2, но уже с добавленной функциональностью. 7 июня 2011 года была принята CSS2.1 со многими исправлениями. Позже вышла разрабатываемая версия CSS3, а с 29 сентября 2011 года начала разрабатываться CSS4.

Итак, мы с вами познакомились с технологией CSS, узнали ее предназначение и принцип работы, а также ее историю. Скажу вам, что без таких каскадных таблиц стилей, не было бы и самого веб-дизайна. Поэтому, чтобы вносить изменения в какие-нибудь элементы страниц, вам все же предстоит столкнуться с этими стилями. Чтобы работать с CSS, вам сначала предстоит немного разбираться в языке HTML , так как эти два механизма очень тесно связаны между собой.

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 Нажимая на кнопку, вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.

Комментарии 25

  • Значит мне нужно разобраться с CSS. Очень хочется шаблончик кое-где подправить. Спасибо за информацию, это конечно сложно, но при желании можно разобраться и с этим.

    • Еще также нужно знать язык HTML, но если есть большое желание, то это не проблема, а наоборот даже будет интересно.

  • Сергей, я абсолютно с тобой согласен, что знание HTML, CSS, PHP это не проблемма, а большой интерес!
    Когда сам создаёшь то, что задумал, и это получается, получаешь большое удовольствие от работы.
    Я начинал изучение HTML просто по книге, не электронной, а обычной, переведённой на русский язык с английского. Это было лет 10 назад. В этой книге была масса неточностей, но были картинки-скриншоты того,что должно получиться от того или иного кода HTML. Я переписывал код из учебника,вставлял в веб-страницу, но иногда не получал тот результат,который был на скриншоте,поэтому приходилось самому искать в чём дело. Это сейчас всё просто,скопировал код,вставил и всё готово.
    Вобщем мне так понравилось работать с кодами, что я до сих пор этим занимаюсь с удовольствием, чего и другим желаю.
    Если Вам это интересно заходите ко мне

    • Спасибо Юрий, обязательно зайдем!
      Раньше, конечно сложнее было изучать все это дело. Однако, сейчас столько много полезной и толковой информации, что данное изучение становится намного легче и интереснее, чем в прошлые годы. Сейчас только нужно большое желание и дополнительное свободное время для изучения.

  • Эх, я расстроилась. Думала, что CSS3 -это надолго. Я просто не люблю. когда что-то меняется. тогда появляются незнакомые мне слова. А я всегда помню только самую первую информацию. А на новой годами туплю. Это особенность мозга всегда лучше помнить первое.

  • Я заметила, что меняюсь в худшую сторону. Просто в жизни разочаровываюсь все сильнее. Я живу не так, как хочу. И поэтому смысл себя беречь? Я себе позволяю лишнее. Раньше этого не было.

    • К сожалению, не всегда получается жить, как самому хочется.
      Оля, если ты позволяешь себе лишнее, то может от этого лишнего избавиться. Слишком баловать себя тоже не всегда хорошо!

  • Помогу Маргарите «подправить шаблончик»,напишите мне с моего сайта samisite.ru.

  • Тогда у меня апатия, когда я ничего не позволяю.

    • А ты поручи это дело близким людям, чтобы он могли контролировать твои желания! :)

  • А они или знают и не трогают, или не знают, но если узнают, мне хана.
    Да ниче страшного, я не сильно плохо себя веду. Изредка.

  • Ну да, есть такое.
    У меня вот беда — я сегодня спала 12 часов и теперь не хочется. А завтра на работу.

  • Ага. Там нет кровати.
    И не с кем))))))))))))))))))))

  • Если бы там еще и никого не было, прилегла бы.))))))))

  • Нету конечно. Там везде люди ходят.
    Эх, сейчас бы не мешало бы поспать. А неохота что-то.
    Вот не знаю, какой классный фильм завтра глянуть. У меня такое чувство, что я уже все ужастики пересмотрела.

  • Чувствую, пора идти фильм смотреть, нервы успокаивать. Все равно фиг поспишь, пока старуха со скайпа не вылезет. Скорей бы у нее комп сломался. Пусть телек смотрит, хоть тише будет.

    • А ты ей провода на площадке поатрывай. На некоторое время затихнет и будет спокойно!

  • Хочу разобраться в HTML, скачал самоучитель, но там так все сложно и не понятно, не знаю на кого он рассчитан. Просто нет именно начальных понятий. А знать конечно нужно. Порой просто нужно передвинуть (не много) какую то форму, а как это сделать не знаю.
    Не откажусь от подсказки с чего начать знакомство с этими языками.

    • Да, языки неплохо бы знать. Но их изучение непростое и длительное. Конечно же простым вариантом будет искать информацию в интернете. Я имею ввиду не по языкам, а по решению какой-то проблемы на своем сайте. Например, как передвинуть форму на сайте. В сети специалисты уже дают определенные примеры. Остается только все делать по инструкции.
      Думаю, что вплотную изучением языков стоит заниматься только, когда нужно делать сайты на заказ или создавать уникальный веб-дизайн. Для простого блоггера, который только пишет статьи и немного подстраивает сам движок или плагины, серьезным изучением не стоит увлекаться. Да, какие-то знания пригодятся, но они должны быть поверхностными. Изучение языков отнимает немало времени. А для простого блоггера важно уделять контенту. Если возникают какие-то технические трудности, то лучше найти на это ответ в сети или попросить знакомого или какого-то специалиста решить проблему. Так вы не потеряете много времени и сможете написать больше интересных постов на своем блоге.
      Если серьезно заниматься изучением, то начинать обычно стоит с языка html, а потом только переходить на язык CSS.

А что вы думаете по этому поводу?

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

Нажимая на кнопку «Отправить», вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.