7 полезных советов по написанию хорошего кода CSS

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

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

Написание кода CSS может стать нетривиальной задачей, когда вам приходится писать определённый код снова и снова, просто чтобы заставить различные браузеры отображать разметку одинаково. Вот где потребуется CSS Reset. При том, что этим приёмом пользуются такие гении CSS, как E. Meyer, нет причин не сбросить все ваши браузеры «в ноль» и начать строить стили заново.

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

В плане поддержания ваших таблиц стилей чистыми и легко читаемыми, комментарии – великолепный способ поддерживать их структурированными и ясными.

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

/********** Код верхнего заголовка **********/

Такой способ комментирования не только сохранит ваше время при прокручивании кода, но также поможет вашим клиентам, когда вы передадите им код: они смогут легко найти нужные элементы и внести изменения сами, а не будут беспокоить вас по 5-6 раз в неделю ради простых 1-3 минутных изменений. Преимущества чистого кода CSS выходят далеко за пределы создания красиво выглядящего файла.

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

.your_classname {
background: #F00;
border: 0;
color: #343434;
float: left;
margin: 0;
padding: 0;
}

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

.your_classname {
	background: #F00;
	border: 0;
	color: #343434;
	float: left;
	margin: 0;
	padding: 0;
}

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

.classname { border: 0; }

.classname {
	background: #0F0;
	border: 0;
	color: #454545;
	float: left;
	margin: 0;
	padding: 0;
}

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

.classname {
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-top: 1px;
}

Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

Этот совет пришёл мне в голову совсем недавно, и я только начинаю использовать его постоянно, когда пишу код CSS. Расположение правил в алфавитном порядке позволит вам легко найти нужную строку кода, отредактировать её и двигаться дальше.

Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.

.classname {
	border: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin: 48px;
	padding: 0;
	position: relative;
	z-index: 101;
}

Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Выбор правильных названий для ваших классов и ID поможет вам лучше понять, где искать тот или иной элемент в ваших файлах таблиц стилей, а также в ваших html файлах. Я бы порекомендовал использовать примерно следующие осмысленные имена, которые помогут поддерживать ясный и понятный код:

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

Данная публикация представляет собой перевод статьи «7 Good Tips for Writing Better CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Основы работы с языком CSS для новичков

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Блок . Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

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

этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте покрасим все абзацы в красный цвет:

Это HTML код:

<p>
	Абзац с текстом.
</p>

Это CSS код:

p {
	color: red;
}

Так код будет выглядеть в браузере:

Абзац с текстом.

А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:

<p>
	Абзац с текстом.
</p>

p {
	color: red;
	font-size: 25px;
}

Так код будет выглядеть в браузере:

Абзац с текстом.

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

Блок . Способы подключения CSS к HTML коду

Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему

HTML коду. Это можно сделать тремя способами.

Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.

Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.

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

Давайте разберемся с этими способами более подробно.

Способ 1. Отдельный CSS файл

Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.

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

Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel=»stylesheet» href=»путь к CSS файлу»>.

Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
		<link rel="stylesheet" href="style1.css">
		<link rel="stylesheet" href="style2.css">
		<link rel="stylesheet" href="style3.css">
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html> 

Способ 2. CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл </title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

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

Правило такое: если что-то можно сделать первым способом, то использовать второй способ — дурной тон.

Способ 3. CSS внутри атрибута style

Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

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

Впрочем, иногда без второго и третьего способа не обойтись.

Блок . Комментарии CSS

Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:

p {
	/*
		Тут находится
		комментарий CSS.
	*/

	color: red;
	font-size: 27px;
}

Видео про CSS

Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

CSS для начинающих

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

---

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки — HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем  веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

Образно говоря, создание сайтов можно сравнить с рисованием. Перед тем как мы начнем ловко управляться кисточкой и холстом, нам стоит определиться с тем, что именно будет изображено на нашей картине. Представим, что мы решили нарисовать пейзаж, на котором будет изображена птица на фоне деревьев и гор. Можно сказать, что на этом этапе мы определили само содержимое картины.

Содержание будущей картины

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

Итоговая картина

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS

 

 

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке «Установить».

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

Все правила оформления сайта хранятся в файле с расширением css, который в свою очередь загружается на веб-страницу через тег <link>.

Во время загрузки html страницы, через тег <link> загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.

Например, через селектор ‘p’ мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор ‘h2’.

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

Зачем изучать CSS?

Не думаю что в наше время можно найти хоть один более или менее «приличный» сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.

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

Плюсы CSS

• С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
• При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
• CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
• Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
• Используя CSS вы идете в ногу с временем.

Как быстро научиться основам CSS

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

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

Суть работы с каскадными таблицами стилей довольна проста, поэтому не теряйте время и приступайте к ее освоению. Список уроков:

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Встраивание CSS в HTML документ

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

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила : значение правила). Никаких кавычек в значениях правил не ставим! Пример:

color:red;
background:#cccccc;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

• Вложение(inline).
• Встраивание(embeding).
• Связывание(linking).

Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила : значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст
<p>К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

<style type="text/css">
p {
color:red;
background:#cccccc
}
</style>
Здесь применен стиль методом вложения.
Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

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

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

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

<link rel="stylesheet" type="text/css" href="style.css">

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

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel ( rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.

Как работать и подключить CSS к HTML документу на практике

Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.

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

Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.

Как работает CSS?

В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.

Базовый синтаксис CSS

Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:

В стилях подобное мы бы достигли написанием следующего кода:

body {background-color: #FF0000;}

body {background-color: #FF0000;}

Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:

Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.

Как подключить CSS к HTML документу?

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

Метод 1 – Внутристроковое размещение стилей (через атрибут style)

Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:

<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html>

<html>   <head> <title>Example</title>   </head>   <body> <p>Здесь красная страница</p>   </body> </html>

Метод 2 – Через использование тегов style

Другой способ подразумевает включение парных тегов стилей <style></style>  внутрь той страницы, где мы хотим применить их. Например, как здесь:

<html> <head> <title>Простой пример</title> <style type=»text/css»> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html>

<html>   <head> <title>Простой пример</title> <style type=»text/css»>   body {background-color: #FF0000;} </style>   </head>   <body> <p>Здесь снова красная страница</p>   </body> </html>

Метод 3 – Внешнее подключение файлов стилей.

Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:

<link rel=»stylesheet» type=»text/css» href=»style/style.css» />

<link rel=»stylesheet» type=»text/css» href=»style/style.css» />

Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:

Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:

<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style/style.css» /> </head> <body> </body> </html>

<html>      <head>        <title>My document</title>        <link rel=»stylesheet» type=»text/css» href=»style/style.css» />      </head>   <body>           </body> </html>

Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)

Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.

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

Давайте еще раз закрепим все на практике.

Попробуйте самостоятельно

Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:

Default.htm

<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>My first stylesheet</h2> </body> </html>

<html>   <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» />   </head>   <body> <h2>My first stylesheet</h2>   </body> </html>

Style.css

body { background-color: #FF0000; }

body {       background-color: #FF0000; }

Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)

Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.

В следующем уроке мы взглянем на некоторые свойства CSS

Как пользоваться справочником | htmlbook.ru

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

Браузеры

Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Chrome, Opera, Safari и Firefox, а также используются следующие обозначения:

 — свойство полностью поддерживается браузером со всеми допустимыми значениями;

 — свойство браузером не воспринимается и игнорируется;

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

Значение по умолчанию

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

Наследование

Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для тега <p> задан красный цвет текста, а для курсива <i>, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.

Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Так, достаточно задать параметры форматирования тега <table> и к ячейкам таблицы <td> они будут применены автоматически. Точно так же можно определить свойства тега <body>, который порождает стиль всех остальных элементов веб-страницы.

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

Применение

Свойства CSS можно применять далеко не ко всем элементам веб-страницы, а только к тем, с которыми они «дружат». Большинство свойств работают со всеми элементами, а некоторые только с блочными или позиционированными. Например, для изображений совершенно бессмысленно устанавливать свойства, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять свойство, а когда нет.

Ссылка на спецификацию

Для объективности информации приводится ссылка на спецификацию CSS 2.1 или CSS 3 по указанному свойству. Саму спецификацию можно почитать по адресу http://www.w3.org/TR/CSS21/

Свойства CSS 3 еще не носят окончательный характер, поэтому ссылка приводится, как правило, на рабочие версии спецификации.

Версии CSS

Указано, в каких версиях CSS поддерживается стилевое свойство, а в каких нет. Используются следующие обозначения:

— свойство описано в указанной версии CSS.

— свойство в эту версию спецификации CSS не включено.

Синтаксис

При описании синтаксиса применяются следующие обозначения:

• вертикальная черта между значениями (например, fixed | scroll) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только одно значение из предложенных;
• двойная вертикальная черта (border-style || color) обозначает объединяющее ИЛИ (ИЛИ/И), каждое значение может использоваться самостоятельно или совместно с другими через пробел;
• квадратные скобки ([left | center | right]) помечают группу, из которой, как правило, выбирается одно значение, причем оно не является обязательным к использованию;
• два числа в фигурных скобках ({a,b}) говорят, что предшествующее им значение следует повторять не менее a, но не более b раз.

Примеры

Все примеры проверены на соответствие спецификации HTML с помощью валидатора по адресу http://validator.w3.org, а также на соответствие спецификации CSS 2.1 и CSS 3 с помощью валидатора (http://jigsaw.w3.org/css-validator). Возле каждого примера располагается таблица, где цветом выделяется, валиден пример или нет. Также приводятся некоторые популярные браузеры, в которых выполнялся пример и указано, работает в них пример или нет. Работоспособность обозначается той же цветовой схемой, что и для таблицы с браузерами.

Объектная модель

Для динамического изменения свойств элемента через JavaScript, необходимо знать, как к нему обращаться. Зная имя объекта и желаемое свойство, можно указать его новое значение без перезагрузки веб-страницы. Так, для сокрытия и отображения элемента применяется visibility, а объектная модель для управления его значением — document.getElementById(«elementID»).style.visibility. Указывая вместо elementID свой идентификатор элемента, заданный параметром id, получаем механизм для динамического скрывания некоторого содержимого.

Добавление CSS | htmlbook.ru

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link> в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
 </head>
 <body>
   <h2>Hello, world!</h2>
 </body>
</html>

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).

Пример 2. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
   h2 { 
    font-size: 120%; /* Размер шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
    color: #336; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
 </body>
</html>

В данном примере показано изменение стиля заголовка <h2>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style, а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
 </head>
 <body>
  <h2>
  Hello, world!</h2>
 </body>
</html>

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

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

Пример 4. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
    h2 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
  <h2>Hello, world!</h2>
 </body>
</html>

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.