Не пропусти
Главная » Интернет новичку » Для чего нужен 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

Обзор премиум-хостинга Offerhost, создание, продвижение и заработок на сайте

> Обзор премиум-хостинга Offerhost Здравствуйте, уважаемые читатели блога Сегодня я бы хотел поговорить про такой важный момент как расположение ваших сайтов на серверах. Выбрать хороший хостинг – это половина успеха, ...

Обзор обновленного модуля естественных ссылок в SeoPult, создание, продвижение и заработок на сайте

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

Обзор нового модуля Естественные ссылки от SeoPult, создание, продвижение и заработок на сайте

> Обзор нового модуля Естественные ссылки от SeoPult Здравствуйте, уважаемые читатели блога В декабре минувшего года SeoPult запустил новый модуль под названием «Естественные ссылки». Сегодня я расскажу, как с помощью ...

Обзор движка интернет-магазинов OKAYCMS: плюсы и минусы системы, создание, продвижение и заработок на сайте

> Обзор движка интернет-магазинов OKAYCMS: плюсы и минусы системы Здравствуйте, уважаемые читатели блога Выбор движка CMS для интернет-магазина сложен, но именно от него зависит, насколько комфортно будет им управлять и ...

Обзор движка для интернет-магазинов Shop-Script 7 отзывы, создание, продвижение и заработок на сайте

> Обзор движка для интернет-магазинов Shop-Script 7 Здравствуйте, уважаемые читатели блога Shop-Script – это специализированный движок для создания полноценного интернет-магазина и управления его дальнейшей работой. По сути это обычная CMS ...

Обзор веб-сервисов uKit Group, создание, продвижение и заработок на сайте

> Обзор веб-сервисов uKit Group Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru! Сейчас многие занимаются созданием и раскруткой сайтов. С таким ремеслом всегда полезно быть в курсе тенденций ниши. Мало ли что ...

Обзор Hashing24

> Обзор Hashing24 — облачной платформы для майнинга биткоинов Приветствую вас, дорогие читатели блога KtoNaNovenkogo.ru! Делать деньги из воздуха пока не научились, но вот из электричества – уже да. Для ...

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

> Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru! Давайте знакомиться: меня зовут Дмитрий, мне уже довольно много лет (43 — ужас какой, если задуматься), а заниматься вебмастерингом я начал относительно недавно. Старый, ...

Нужны ли сейчас внешние ссылки для SEO-продвижения сайта, создание, продвижение и заработок на сайте

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

Новый весенний конкурс от AzartCash с невероятным призовым фондом в $35000, создание, продвижение и заработок на сайте

> Новый весенний конкурс от AzartCash с невероятным призовым фондом в $35000! Здравствуйте, уважаемые читатели блога Партнерская программа AzartCash не перестает радовать и удивлять вебмастеров своими обновлениями. Был запущен новый ...

Новый SEMBOOK от Ingate стал бесплатным, создание, продвижение и заработок на сайте

> Новый SEMBOOK от Ingate стал бесплатным Здравствуйте, уважаемые читатели блога Ingate выпустил обновленное издание «Энциклопедии поискового продвижения». Книга дополнена материалами о рекламных системах и веб-аналитике, на сайте проекта её ...

Новая бесплатная книга: digital-стратегия своими руками, создание, продвижение и заработок на сайте

> Новая бесплатная книга: digital-стратегия своими руками Здравствуйте, уважаемые читатели блога Хотите освоить стратегический маркетинг, научиться создавать рекламные кампании в сети или проверить работу подрядчиков? Пошаговый алгоритм разработки и внедрения ...

Новая бесплатная книга: «SERM: управление репутацией в поисковых системах», создание, продвижение и заработок на сайте

> Новая бесплатная книга: «SERM: управление репутацией в поисковых системах» Здравствуйте, уважаемые читатели блога Новое издание электронной библиотеки посвящено технологии управления репутацией в поисковых системах. На страницах книги: как отслеживать ...

Новая бесплатная книга от Ingate и Дмитрия Сатина «Психология потребителя: кто, что и как покупает в сети», создание, продвижение и заработок на сайте

> Новая бесплатная книга от Ingate и Дмитрия Сатина «Психология потребителя: кто, что и как покупает в сети» Здравствуйте, уважаемые читатели блога Чего на самом деле хотят посетители вашего сайта? ...

Новая бесплатная книга Ingate «Практикум по видеорекламе: настройки, кейсы, продакшн», создание, продвижение и заработок на сайте

> Новая бесплатная книга Ingate «Практикум по видеорекламе: настройки, кейсы, продакшн» Здравствуйте, уважаемые читатели блога Как работает видеореклама в сети? Почему ваши фирменные ролики обязательно должны быть на YouTube? Как ...

Новая бесплатная книга «Как вернуть клиента на сайт», создание, продвижение и заработок на сайте

> Новая бесплатная книга «Как вернуть клиента на сайт» Здравствуйте, уважаемые читатели блога Что поможет превратить посетителя сайта в постоянного клиента? Какие методы возвращения пользователей наиболее эффективны? Об этом и ...

Не отправляется почта из WordPress и не работает визуальный редактор

> Не отправляется почта из WordPress и не работает визуальный редактор — решение с помощью плагинов Configure SMTP и Post Editor Buttons Здравствуйте, уважаемые читатели блога Сегодня будет статья по ...

Настройки блога на WordPress, которые вы должны сделать сразу после его установки, создание, продвижение и заработок на сайте

> Настройки блога на WordPress, которые вы должны сделать сразу после его установки Я уже рассказывал об установке WordPress и о том, что такое блог и зачем он нужен. В ...

Настройка ЧПУ в WordPress и плагин RusToLat, создание, продвижение и заработок на сайте

> Настройка ЧПУ в WordPress и плагин RusToLat Здравствуйте, уважаемые читатели блога Сегодня в рамках рубрики Вордпресс для чайников мы поговорим о той настройке для этого блогового движка(cms), которую нужно ...

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

> Настройка регистрации пользователей в VirtueMart и внесение информации об интернет магазине Сегодня мы продолжим рассматривать необходимые настройки VM, которые позволят изменить внешний вид и функционал ИМ под ваши конкретные ...

Настройка контекстных объявлений рекламной сети Яндекса для повышения числа кликов (CTR) и дохода, создание, продвижение и заработок на сайте

> Настройка контекстных объявлений рекламной сети Яндекса для повышения числа кликов (CTR) и дохода В этой статье мы продолжим тему того, как заработать денег в интернете, начатую тут (ну, и ...

Рейтинг@Mail.ru