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

W3C
Создатели CSS

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

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

Форматирование — это изменение внешнего вида.

Созданием и развитием языка CSS занимается W3C (World Wide Web Consortium) — консорциум всемирной паутины.

Для чего создан язык CSS?

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

Преимущества использования CSS:
— быстрота разработки сайта,
— удобство обслуживания сайта,
— множество возможностей изменения внешнего вида HTML-тегов.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

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

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

Доходные сайты - это тема, на которой может зарабатывать каждый!

Если ты хочешь прокачаться в теме пассивного дохода на сайтах и выйти на 100 тыс. рублей в месяц! Абсолютно бесплатно - НОВАЯ МИНИ КНИГА про доходные сайты и 5 шагов к доходным сайтам.

Отличие 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, но я предлагаю воспользоваться для этого видеокурсом, созданным Евгением Поповым. Скачать его бесплатно можно по этой ссылке.

Видеокурс состоит из 45 небольших видеоуроков, охватывающих основные моменты технологии 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, я все же смог сделать сайт.

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

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

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

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

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

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

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

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

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

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

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

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

НО это уже совсем другая история…

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

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

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

CSS - это аббревиатура Cascading Style Sheets/Каскадных таблиц стилей. Файлы имеют соответствующее расширение.css .

CSS-код – это своеобразный список инструкций и указаний для браузера, по тому что, где и как отобразить (элементы web-страницы). Элементами - теги XHTML/HTML и их содержимое.

Что можно делать с помощью CSS?

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

HTML может использоваться для оформления web-сайтов . Но CSS предоставляет куда большие возможности. Поддерживается всеми браузерами (IE, Mozilla, Chrome, Safari и тд).

Преимущества использования CSS

1) Можно указать такие свойства, которых нет в HTML
2) Код теперь будет структурирован и может находиться в отдельном файле
3) Можно значительно сократить размер кода и сделать его читабельным
4) Возможность подлючения CSS к нескольким отдельным файлам. Допустим, у Вас есть 10 старниц, в которых Вы раньше отдельно указывали цвет header"а (шапки сайта). А теперь Вы не будете 10 раз в разных файлах менять его отдельно, а измените параметр только в css-файле.
5) Переход от табличной вёрстки сайта к блочной. Сокращаем и структурируем код!

Пример кода CSS-файла

Код CSS (Файл, например, style.css )

* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
font: 14px/130% Tahoma, Verdana, sans-serif;
}
a {
outline: none;
text-decoration: underline;
}

A:hover {
outline: none;
color: black;
}
Переходите к урокам! Спасибо за внимание!

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

За внешний вид блога на WordPress отвечает файл style.css , находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css , найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

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

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

Теория по CSS

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

Шрифт

font-size - размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

Font-size: 14 px;

font-family – шрифт для элемента (font-family: имя_шрифта)

Font-family: Tahoma;

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

Font-weight: bold;

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

Font-style: normal;

font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

P { font: bold italic 12px verdana; }

Размер

width – ширина элемента (width: значение в пикселях, процентах и т.п.)

Width: 333px;

height – высота элемента (аналогично width)

Height: 333px;

max-width – максимальная ширина элемента (по аналогии)

Max-width: 333px;

min-width – минимальная ширина элемента (так же как и width)

Min-width: 333px;

max-height – максимальная высота элемента;

Max-height: 333px;

min-height – минимальная высота;

Min-height: 333px;

Свойства текста

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д. )

Text-align: center;

vertical-align – вертикальное выравнивание;

Vertical-align: justify;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д. ) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

Line-height: 1.5;

color – цвет текста (color: цвет ). Цвета могут задавать по-разному :

1. используя название (red, green, white и т.д.);
2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #

color: #000000;

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

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

Letter-spacing: 7px;

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

Text-transform: uppercase;

Фон

background – фон страницы (background: , ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

Background: #000 url("images/wpnew.png") repeat-y;

Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.

background-position – стартовая позиция фона страницы (background-position: || ):

Background-position: left top;

background-color – цвет фона (background-color: цвет);

Background-color: #333333;

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

Background-attachment: scroll;

background-image – изображение фона (background-image: url(путь к файлу)):

Background-image: url("images/wpnew.gif");

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y)

Background-repeat: repeat-y;

Позиции

float - определение выравнивания объекта (float: left | right)

Float: left;

Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

Visibility: hidden

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

Border: 1px solid black;

• solid – сплошная рамка
• dotted – точечная
• dashed – пунктирная

Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа ();

Margin: 3px 3px 3px 3px;

margin-top – верхний отступ;

Margin-top: 3px;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

Поля

padding – свойства поля (сверху, справа, снизу и слева соответственно );

Padding: 3px 3px 3px 3px;

padding-top – верхнее поле

Padding-top: 3px;

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover { ... })

A:hover { background: #333333; color: #333333;}

A:visited {color: #333333;}

Практика по CSS

Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

Аналогичным образом Вы можете изменить, что угодно на блоге. Использование делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере . Таким образом, Вы сэкономите кучу времени.

Мелкие изменения , которые я совершил на демонстрируемом блоге (если Вы активный читатель , Вы знаете адрес того блога):

_____________________

Пожалуй, все. Будет еще пару уроков по изменению дизайна, по доработке, потом пойдут очень интересные уроки по дальнейшей жизни блога. Извиняюсь за то, что долго не писал, просто, являясь студентом, не находил времени на блог (сами понимаете – запара 🙂).

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

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