Главная » Интернет новичку » Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка, создание, продвижение и заработок на сайте

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

>

Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка

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

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

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

Важность знания CSS при работе с сайтом

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

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

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



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

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

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

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

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

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

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



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

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

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

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

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

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

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

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



Если вы используете CMS, то головная часть Html кода будет формироваться в одном из файлов PHP из папки с используемой вами темой оформления. Для движков Joomla, WordPress и SMF можете узнать расположение этого файла, формирующего открывающие и закрывающие теги HEAD, из этой публикации.

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

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

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

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

Код может выглядеть, например, так:

В тег абзаца P мы добавили свойства по правилам внутренних стилей, таким образом текст в данном абзаце будет выводиться шрифтом Verdana размером 14 пунктов и цветом, закодированным в #aa87cc.



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

Синтаксис CSS — правила, свойства, селекторы

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

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

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

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

Итак, давайте рассмотрим CSS правило и узнаем из каких частей оно состоит и как эти части отделяются друг от друга:



В фигурных скобках можно написать сколько угодно пар «Свойство — Значение» для данного правила, разделяя их точкой с запятой. Все, что заключено в фигурных скобках называют одним общим термином — блок объявлений, а пару «Свойство — Значение» называют объявлением.

Пробелы в правиле не критичны, т.е. они могут быть или не быть — на работоспособность кода это не влияет.

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

Например, можно CSS правило записать в одну строку:

А можно записать и так:

В принципе, CSS допускает и такую трактовку приведенного выше кода:

Но предпочтительным для восприятия и в плане оптимизации размера этот способ записи нельзя назвать. Лучше все относящиеся к одному селектору прописать в одном правиле.

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

Браузер отобразит текст в абзацах именно черным цветом, т.к. это правило расположено ниже в коде.

CSS селектор призван указывать браузеру, к какому именно элементу Html документа нужно будет применить данное плавило. В качестве селектора может быть использован какой-либо тег (P, H1-6, BODY, TABLE и т.д.), но также могут использоваться и так называемые классы или ID.



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

Комментарии и размеры в языке стилевой разметки

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

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

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

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

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

Следует отметить, что в случае использования в значениях свойств десятичных дробей, их нужно разделять точкой, причем ноль в качестве целой части можно не писать (0.5 или .5 будет интерпретировано браузером одинаково).



Примечательно, что при задании размера шрифта нужно указывать в значениях как относительные единицы размера шрифта (em, px, px или просто %), так и абсолютные единицы (pt, cm, mm). Чаще используют относительные единицы, но бывает, что размер шрифта указывают в pt (пунктах — 1/72 дюйма). Читате подробнее про единицы размеров (пикселы, Em и Ex), цвет и наследование в CSS.

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

Поэтому 1em можно принять за 100% и тогда, для увеличения размера текста относительно принятого в браузере по умолчанию, нужно будет прописать в CSS свойстве значение, например, 1.1 em. А для уменьшения — 0.9 em.

Размер шрифта задаваемый в ex по логике работы схож с em, с той лишь разницей, что за 100 процентов берется высота строчной буквы «x». Но самой популярной относительной единицей задания размера шрифта является, конечно же, px — пиксель.

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

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



Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

P.S. В комментах, разумеется, отображается нормально. Смотреть нужно html код второй надписи

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

А что с Дизайном сайта, все как то поплыло как будто все стили и картинки отключены, это какой то эксперимент?

Артем: подскажите, пожалуйста, в каком браузере (Windows или линукс)?

Windows XP. а на 7 все ровно.

Вот буквально минуту назад опять все четко стало, а до этого все было криво, я писал уже Вам недели 2 назад �� Просто в какое то время, ну когда ВЫ начали ускорять сайт все и полетело у меня.

Артем: спасибо большое за ответ, минуту назад я просто отключил статическое Gzip сжатие CSS и JS — похоже, что оно все таки не во всех браузерах корректно работает.

Дмитрий, подскажите пожалуйста, как в joomla задать страницам сайта вид page/2, page/3 и так далее

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

Галин Бойк (мл): вот-вот приступлю к продолжению, просто решил сначала осветить все оставшиеся вопросы связанные с Html. Завтра будет последняя статья по теме Html про фреймы, ну, а в ближайшее время, думаю, уже писать буду исключительно про CSS и верстку. Извините за задержку.



* Нажимая на кнопку “Добавить комментарий” или “Подписаться” Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Проверка сайта

> Проверка сайта — 85 онлайн сервисов и программ Здравствуйте, уважаемые читатели блога Сегодня я ...

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

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

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

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

Проблема с All in One SEO Pack и ее решение

> Проблема с All in One SEO Pack и ее решение — убираем rel=prev и ...

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

> Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела ...

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

> Принципы транслитерации, где она используется и онлайн переводчики траслита Здравствуйте, уважаемые читатели блога Сегодняшний ...

Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP), создание, продвижение и заработок на сайте

> Примеры взлома WebMoney кошельков и настройки безопасности, способные снизить его вероятность (блокировка по IP) ...

Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe), создание, продвижение и заработок на сайте

> Привлечение трафика посетителей на свой сайт методами SMO (форумы, социальные сети, группы Subscribe) Здравствуйте, ...

Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более, создание, продвижение и заработок на сайте

> Привлекай рефералов и выиграй конкурс от BetAdvert! Призовой фонд более 150.000Р Здравствуйте, уважаемые читатели ...

Презентация обновленной партнерской программы МегаКонкурс, создание, продвижение и заработок на сайте

> Презентация обновленной партнерской программы Binpartner.com + МегаКонкурс Здравствуйте, уважаемые читатели блога Хочу предложить вашему ...

Предновогодняя акция от Профит Партнера, создание, продвижение и заработок на сайте

> Предновогодняя акция от Профит Партнера Здравствуйте, уважаемые читатели блога Ну, вот и дождались — ...

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

> Пошаговый план продвижения коммерческих сайтов Здравствуйте, уважаемые читатели блога Сегодня я не буду говорить ...

Почта (новый Hotmail), создание, продвижение и заработок на сайте

> Почта Outlook.com (новый Hotmail) Здравствуйте, уважаемые читатели блога У компании Майкрософт имеет место быть ...

Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через, создание, продвижение и заработок на сайте

> Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить ...

Почему не загружается и не работает социальная сеть – Одноклассники, а так же как ее открыть, если она заблокирована

> Почему не загружается и не работает социальная сеть «Одноклассники», а так же как ее ...

Почему не загружается ВК и браузер не заходит во Вконтакте, создание, продвижение и заработок на сайте

> Почему не загружается ВК и браузер не заходит во Вконтакте Здравствуйте, уважаемые читатели блога ...

Почему выгодно работать с партнерской программой Studybay, создание, продвижение и заработок на сайте

> Почему выгодно работать с партнерской программой Studybay Здравствуйте, уважаемые читатели блога StudyBay — это ...

Послушай Платона и сделай правильно, создание, продвижение и заработок на сайте

> Послушай Платона и сделай правильно §1 Платон всегда прав §2 Если Платон не прав, ...

Пользовательское соглашение, создание, продвижение и заработок на сайте

> Пользовательское соглашение KtoNaNovenkogo.ru Пользовательское соглашение сайта KtoNaNovenkogo.ru Итак, Уважаемые посетители, давайте с вами договоримся ...

Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа, создание, продвижение и заработок на сайте

> Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа ...

Политика конфиденциальности, создание, продвижение и заработок на сайте

> Политика конфиденциальности Политика конфиденциальности сайта KtoNaNovenkogo.ru Для показа объявлений на блоге KtoNaNovenkogo.ru используются услуги ...

Покупка домена (доменного имени) на примере регистратора Reghouse, создание, продвижение и заработок на сайте

> Покупка домена (доменного имени) на примере регистратора Reghouse Здравствуйте, уважаемые читатели блога Это уже ...

Пока другие требуют у вас денег

> Пока другие требуют у вас денег, Wizard.Sape — дарят их вам! Здравствуйте, уважаемые читатели ...

Поисковые системы России и лидирующие поисковики интернета, создание, продвижение и заработок на сайте

> Поисковые системы России и лидирующие поисковики интернета Здравствуйте, уважаемые читатели блога Когда интернет был ...