Что такое css простыми словами

Что такое CSS?

Что такое CSS?

Каждый человек, хоть немного связанный с сайтостроением, сталкивается с понятием CSS, а каждый вебмастер просто обязан знать CSS в совершенстве.

Что же такое CSS? Расшифровывается эта аббревиатура как Cascading Style Sheets (Каскадные таблицы стилей).

Отличие HTML от CSS.

Для создания любой современной Web-страницы необходимо воспользоваться двумя языками: HTML и CSS. HTML (язык разметки гипертекста) используется для логической разметки Web-страницы, то есть указывает браузеру, что находится на ней и в каком порядке. Благодаря языку HTML браузер выводит на экран тексты, рисунки, видео и формирует Web-страницу.

CSS «объясняет» браузеру, как должны выглядеть все эти объекты. В таблице стилей описывается цвет, начертание, размер шрифта, отступы, выравнивание, цвета фонов или фоновые рисунки, свойства таблиц, изображений, форм, позиционирование элементов и т. п.

Использование двух методов описания Web-страницы позволяет работать отдельно с содержанием (HTML) и дизайном страницы (CSS).

Преимущества CSS.

Кроссбраузерность

Принцип использования CSS заключается в следующем: Web-страница описывается двумя файлами. HTML-файл содержит описание структуры и содержания этой страницы, а CSS-файл (таблица стилей) – описание ее внешнего вида. На заре сайтостроения использовался только язык HTML, и приходилось придумывать новые теги и атрибуты для форматирования документа. Так как занимались этим разработчики браузеров, то получалась такая ситуация, что один и тот же HTML-документ в разных браузерах отображался по-разному. На сайтах можно было встретить такое обращение: «Сайт рекомендован к просмотру с помощью такого-то браузера и при таком-то разрешении». Конечно, долго такое положение продолжаться не могло. Интернет развивается, изменяются технические средства для работы с ним. Для просмотра сайтов мы используем не только стационарные компьютеры, но и ноутбуки, планшеты, мобильные устройства с самым разным программным обеспечением. И везде сайт должен отображаться так, как было задумано разработчиком.

Использование CSS позволило сделать большой шаг вперед в сайтостроении. Несмотря на то, что язык HTML содержит достаточно возможностей для форматирования, применение CSS имеет множество серьезных преимуществ.

  • Разделение оформления и содержания позволяет работать над дизайном и контентом сайта параллельно.
  • Единство дизайна. Сайт состоит из множества страниц, и законы web-дизайна требуют, чтобы все они были оформлены в едином стиле. Это улучшает восприятие сайта и облегчает работу с ним. При использовании CSS описание всех стилей находится в одной таблице, которая управляет отображением множества HTML-документов. Например, чтобы на всем сайте изменить цвет заголовков, достаточно изменить одну строчку в таблице стилей. Если же цвет описывается с помощью тэгов HTML, то для его изменения придется переделывать все страницы, которых может быть очень много. Таким образом, CSS дает возможность более точного контроля над внешним видом сайта.
  • Централизованное размещение. Благодаря применению CSS можно создать четкую файловую структуру сайта. Обычно все файлы с таблицами стилей располагают в одной папке, что позволяет легко находить их при работе над дизайном.
  • Использование разных стилей. Как уже говорилось, сайт можно просматривать на различных устройствах, например, на большом мониторе настольного компьютера и маленьком экране мобильного устройства. Чтобы это было удобно, можно использовать разные таблицы стилей, изменив всего одну ссылку.
  • Более широкие возможности для дизайнера. Так как язык CSS создан специально для оформления сайта, то он имеет гораздо больше возможностей для решения дизайнерских задач. Благодаря технологии CSS более гибкая блочная верстка сайтов почти совсем вытеснила устаревшую табличную верстку.
  • Ускорение работы. Так как таблица стилей хранится в отдельном файле, при просмотре сайта этот файл сохраняется в кэше компьютера, и при повторном посещении этого сайта загрузка происходит быстрее.

Изучение CSS.

Что такое CSS?

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

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

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

Еще раз повторяю ссылку на скачивание курса. Видеокурс по CSS

А в заключение предлагаю посмотреть зимние пейзажи. В этом году настоящая зима, с метелями, морозами, инеем, и мне удалось сделать несколько красивых фотографий.

DSC_1043DSC_1033DSC_1020

DSC_1019DSC_1012DSC_1001

DSC_1045DSC_1030DSC_1066

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Что такое CSS, основы css и html

Как вы помните HTML — это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него элементы и параметры, отвечающие за внешний вид страницы: теги <font>, <b>, <i>, <bgcolor> и так далее.

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

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей.

Стиль — набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги <h1>) на одной странице имели красный цвет, размер — 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера — 12. Наш заголовок — это объект, а цвет, размер и начертание — это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст. ). Набор стилей всех элементов называют таблицей стилей.

Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

Преимущества CSS

  • CSS позволяет значительно сократить размер кода и сделать его читабельным.

Пора переходить от слов к делу, в следующем уроке и начнем.

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

Popovses blog

Я занимаюсь разработкой сайтов на WordPress. Решаю различные технические вопросы.

Ускорить блог, помочь с версткой, починить плагин?

Свежие новости

Следить за новыми статьями блога можно через:

Или получать их по почте:

Поиск по блогу
Категории
HTML/CSS
WordPress
Linux
Блоггинг
Инструменты
Разное

Что такое HTML/CSS и как это выучить?

Привет. Пора бы что-то по теме написать. Из заголовка понятно, о чем этот пост, но я бы хотел внести немного ясности.

Я не буду из своего блога делать учебник по основам языков, не буду рассказывать о том, что такое класс, селектор, кавычки и точечки. В Сети уже столько материала пережевано, что мне просто нет смысла это повторять. Вести свой блог по пути переписывания статей других сайтов своими словами (как это делает бОльшая часть «блоггеров») я не хочу.

Что такое HTML и CSS

А вот делиться интересными фишками, хитростями да и вообще полезными приемами, которые использую в работе, с удовольствием буду!

Ближе к делу

Возьму определения с Википедии:

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Вроде бы и так понятно, что такое HTML и CSS, но все равно скажу своими словами.

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

CSS — облицовочный материал, который делает всю красоту.

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

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

То, что я сейчас напишу уже есть на странице Об авторе, но я все равно еще раз напишу и дополню:)

Первый свой сайт я создал в 2008 году. Работает он на системе Ucoz. Не помню точно как, но один мой одноклассник рассказал мне о Ucoz и о том, как легко там можно сделать свой сайт. Мне стало интересно. Не знаю почему, но было типа «прикольно» сделать свой сайт. Вот тогда я и узнал про HTML. Но именно узнал, а не научился:) Кажется, это был 9-й класс школы. Применяя базовые знания по фотошопу и Ucoz, я все же смог сделать сайт.

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

22.10.2013.02

Второе в жизни упоминание о тэгах было на первом курсе по информатике. Да, по этому предмету было много абсурдных заданий и лучше бы мы изучали Автокад вместо MS Access (градостроители все же), но за задание сделать сайт из пары страниц HTML я все же благодарен. Поначалу очень плевался на такое, но мне понравилось, когда сел делать.

Взял конспект лекций и начал писать структуру страницы по тегам, что переписал с доски, но&#8230;Понял, что ничего того, что я придумал у меня не получается и начал читать в интернете подробнее о html (я тогда еще и не подозревал о css). В итоге моя работа была лучшей в группе, но увы этого почти никто не оценил, так как ставили оценки за наличие работы, а вот если бы был рейтинг по работам&#8230;

Ну да ладно, я все равно был доволен собой. Передо мной стала задача разместить элементы на странице так, как я хочу, а не так, как получалось по конспекту лекций. Вся проблема в том, что в HTML нету такой функциональности, благодаря которой можно разместить элемент с отступом в 20 пикселей от правого края окна браузера. И тогда я подумал&#8230;.а что если я необходимый элемент помещу в таблицу, которую помещу в ячейку главной таблицы, грани которой не видно, но которая занимает всю страницу и задавая размеры ячейкам, я смогу поместить тот элемент с отступом в 20px от правого края??&#8230;Попробовал — получилось!

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

Что для этого нужно?

В октябре 2011 года я стал серьезно изучать все это дело, что плавно перетекло в основную деятельность моей жизни. Я хотел делать сайты. Я знал, что для этого нужен HTML. Потом наткнулся на упоминания о CSS. Решил чуток подробнее понять, что это и&#8230;это было очень туго! Те сайты, на которые я попадал, давали вроде бы и базовые знания, но не было того момента, который бы подвел полного чайника от незнания к базовым моментам. А потом я случайно наткнулся на бесплатные видео уроки от Евгения Попова. Первым делом меня смутила необходимость вводить свою почту и имя, чтобы получить бесплатный видеокурс. Ну блин, еще заспамят меня, а то и почту взломают, не хочу! Но все же решился)

Но&#8230;на мой почтовый ящик так ничего и не пришло (должна была прийти ссылка на скачивание бесплатных курсов по HTML и CSS). Поэтому я пошел на ex.ua и скачал их там:) Рассуждая геройски, подумал, что курс по HTML мне не нужен, я вроде немного знаю его, а вот CSS посмотрю. Посмотрел первый урок — понял, что нужно смотреть и учить HTML сначала.

Что вам сказать, ребята&#8230;это лучше, чем все сайты с уроками вместе взятые. Везде автор пишет максимально просто, так как он это видит, но все равно этого не достаточно для чайника. Просто автору даже в голову не может прийти, что «этого» можно не знать. А Е.Попов не только объясняет как для маленьких и тупых, но еще и показывает каждый свой шаг и это именно то, что нужно вам, если хотите научится HTML/CSS!

22.10.2013.03

22.10.2013.04

Так что вот вам ссылки ( раз и два ) на бесплатные видеокурсы, берите, качайте, не пожалеете.

Выгоды мне никакой от того, что я вам предлагаю этот курс, но вот Евгению скорее всего будет. А мне и не жалко. Благодаря ему мне легче было окунутся в веб-разработку.

Но есть одно маленькое «Но». В своем курсе CSS он ни слова не сказал о CSS3 — основе всех современных эффектов. Но поверьте, зная и понимая, что такое CSS, будет очень легко найти в интернете информацию про CSS3. Ну, а различные техники (как уже выше сказал) я буду описывать в своем блоге.

После изучения тех курсов я создал свой первый настоящий сайт (в плане, что на личном хостинге и т.д.). Да, я еще не подозревал о том, что такое PHP и MySQL, и WordPress, и т.д&#8230;

НО это уже совсем другая история&#8230;

22.10.2013.05

Есть много в интернете полезных сайтов с уроками, но когда нужно действительно хорошее решение вашего вопроса, то лучше всего искать на habrahabr.ru .

Вначале я часто пользовался шпаргалками: раз и два .

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

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

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