ГлавнаяРазноеКак работать с css

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


Как работает CSS. Создание и подключение таблиц

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

Структура таблиц состоит из ПРАВИЛ, которые определяют, какой внешний вид должен иметь определенный элемент в документе.

Рассмотрим структуру правила:

На изображении видно, что сначала пишется селектор, указывающий к какому html тегу (тегам) предназначается данное свойство. Затем идет блок объявления стилей, который содержит в себе свойство и значение, заключенный в фигурные скобки. После свойства пишется двоеточие. Если правило содержит в себе несколько объявлений, как в случае на рисунке, то после каждого пишется точка с запятой, кроме самого последнего. Таким образом, на рисунке выше правило показывает, что все заголовки заключенные в тег h2 в документе будут синего цвета (color: blue) с размером шрифта 14 пикселей (font-size: 14px).

Создание таблицы CSS и подключение к HTML документу

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

Только для этого сначала следует подключить внешнюю таблицу стилей ко всем страницам сайт.

Внешняя таблица стилей - это обычный текстовый файл с расширением .css Например, есть таблица стилей style.css и страницы html. Для подключения стилей в данные html страницы следует добавить строку, которая дает понять браузеру, что он должен использовать стили css папки style.css:

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

Попробуем сделать самостоятельно: Для этого открываем блокнот и создаем один файл - index.html и второй - style.css. Затем располагаем их в одной папке.

Файлы имеют содержание:

index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"><html><head><title>Создать таблицу CSS</title><link rel="stylesheet" type="text/css" href="/style.css" ></head><body><h3>Создаем таблицу CSS и подключаем к html страницам</h3></body></html>

style.css:

h3{color:green;font-size:16px}

В браузере увидим:

Встроенные таблицы стилей

Могут быть включены прямо в html-документ в раздел <head>. Такой метод используется очень редко, так как не очень удобен, но на всякий случай может пригодится:Расположим правила стилей в самой голове документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd"><html><head><title>Создать таблицу CSS</title><style type="text/css">h3{color:green;font-size:16px}</style></head><body><h3>Создаем таблицу CSS и подключаем к html страницам</h3></body></html>

Также, можно задать стили с помощью атрибута style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd"><html><head><title>Создать таблицу CSS</title></head><body><h3>Создаем таблицу CSS и подключаем к html страницам</h3></body></html>

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

Следующая - Цвет фона и текста в CSS

Предыдущая - Что такое CSS. Отличие CSS от HTML. Преимущества CSS

wm-port.com

Урок 2: Как работает CSS?rustutorial

Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.

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

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:

body {background-color: #FF0000;}

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

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

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html> <head> <title>Example</title> </head> <body> <p>This is a red page</p> </body> </html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов  - HTML-тэг <style>. Например:

<html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html>

Метод 3: Внешний (ссылка на таблицу стилей)

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

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

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

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

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

Давайте посмотрим, как это сделать.

Попытайтесь сделать это сами

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

default.htm

<html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2>Моя первая таблица стилей</h2> </body> </html>

style.css

body { background-color: #FF0000; }

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

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

Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS.

<< Урок 1: Что такое CSS?

Урок 3: Цвет и фон >>

ru.html.net

Что такое CSS? - Веб-технологии для разработчиков

Перейти к предыдущему разделу:CSS для начинающих Эта первая статья руководства по CSS для начинающих кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.

Информация: Что такое CSS

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

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

А представление документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.

Примеры

  • Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (HyperText Markup Language — Язык ГиперТекстовой Разметки)
  • Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (XML User Interface Language — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.

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

Подробнее

Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.

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

Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:

HTML о веб-страницах
XML о структуре документов в общем
SVG о графике
XUL о пользовательских интерфейсах в Mozilla

Во второй части данного руководства вы встретите примеры этих языков разметки.

Подробнее

В терминах CSS программа, которая выводит документ пользователю, так называемому user agent (UA). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.

Прочие определения и термины, имеющие отношение к CSS, вы можете найти в Определениях спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.

К действию: Создание документа

  1. Создайте новую папку на вашем компьютере для упражнений.
  2. Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.
  3. Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем doc1.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html>

    Посмотреть демо

  4. Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.

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

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

Что дальше?

Перейти к следующему разделу:Зачем нужен CSS?В документе, который вы создали, CSS пока что не использовался. В следующем разделе вы научитесь использовать CSS для стилизации документа.

developer.mozilla.org

Как работает CSS - Веб-технологии для разработчиков

Перейти к предыдущему разделу:Зачем нужен CSS? Это третья статья руководства по CSS для начинающих, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.

Информация: Как работает CSS

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

  1. Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.
  2. Браузер отображает содержимое DOM.

Язык разметки использует элементы для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '<' и заканчивающиеся '>'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '<' и '>'. Для закрывающего тега, поместите '/'  между '<', и именем элемента.

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

DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится узлом в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).

Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.

Пример

 

В данном примере, тег <p> и его закрывающий тег </p> создают контейнер: <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>

Живой пример

В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги STRONG  и узлы текста. Теги STRONG,  в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:

P ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets"

К действию: Анализ DOM

Использование DOM Inspector

Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение DOM Inspector (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).

  1. Используйте браузер Mozilla, чтобы открыть свой HTML-документ.
  2. Из строки меню браузера выберите Инструменты > DOM инспектор, или Инструменты > Веб-разработка > Инспектор.

    Подробнее

    Если в вашем браузере Mozilla не установлен DOMi, вы можете установить его с сайта дополнений и перезапустить браузер. Затем возвращайтесь к этому руководству.

    Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.

  3. В DOMi разверните узлы вашего документа, нажав на их стрелки.

    Замечание:  Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.

    Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:

    │ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │

    При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.

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

Задача

В DOMi, кликните на узле STRONG.

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

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution Посмотреть решение задачи.

Использование Рентген-очков

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

  1. Перейдите на домашнюю страницу X-Ray Goggles.
  2. Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.
  3. Откройте HTML-документ.
  4. Запустите Рентген-очки, кликнув по появившейся закладке.
  5. Передвигайте курсор мыши по документу для просмотра элементов в документе.

Что дальше?

Перейти к следующему разделу:Каскадность и наследованиеЕсли вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На следующей странице объясняется больше об этих взаимодействиях.

developer.mozilla.org

Что такое CSS и как он работает?

Hello my friends. Этой статьей я начинаю блок статей посвященных основам CSS. В первой статье цикла я поведаю вам что такое CSS и как он работает. Буду рад если данный материал будет для вас полезен. Итак давай те же приступим!

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

Теперь перейдем теме статьи.

Что такое CSS?

CSS расшифровывается как «каскадные таблицы стилей». Синтаксис самого языка не сложный, он состоит из различных селекторов и свойств.

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

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

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

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

Как работает CSS?
  • Селекторы нужны чтобы указывать браузеру какие элементы страницы мы ходим изменить с помощью CSS. (пример: блок с текстом)
  • С помощью свойств мы указываем как именно будут оформлены наши элементы. (пример: свойство определяющее цвет текста).
  • В свою очередь для свойств мы задаем конкретные значения (пример: красный).

О том какие бывают селекторы и какие есть базовые свойства я расскажу в следующих статьях.

Какие преимущества даст мне CSS?

Конкретные преимущества CSS:

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

На этом здесь все. До встречи в будущих статьях!

dmkweb.ru Права на контент защищены.

dmkweb.ru

Что такое CSS? Самый подробный мануал по CSS

Содержание статьи:1. Причем тут CSS2. Что такое CSS3. Пример работы CSS4. Как работает CSS

Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса»! Вас приветствует вебмастер Александр! Как Вы могли заметить, в рамках данного проекта Вы можете найти не только инструкции по запуску бизнеса, но и полезную информацию касаемо сайтостроения

Причем тут СSS?

Дело в том, что последние три года я занимаюсь бизнесом в сети, но при всем при этом не имею никакого представления о программировании на PHP, HTML и тем более CSS.Есть у меня одна цель, о которой я хочу Вам рассказать… Минимальный план на жизнь — это изменить мир! Возможно, громко сказано, но это действительно так.

Как это сделали когда-то Бил Гейтс, Стив Джобс, Возняк, Павел Дуров, Марк Цукерберг и другие гении человечества. Всех их объединяет то, что они создали проекты, которые изменили мир современного человека.

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

Итак, мои исходные данные:— Хорошие знания в области продвижения в социальных сетях— Базовые знания в области HTML— Гуманитарный склад ума (О Боже, куда я лезу! Там же одна математика!)— Упертый характер (Как баран — привык идти до конца!)

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

Что такое CSS?

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

Итак, перейдем непосредственно к делу.Официальное определение CSS (Cascading Style Sheets) — Каскадные Таблицы Стилей.Далее на большинстве сайтов идет определение, что СSS-стили — это правила отображения html-файла посредством CSS-файлов. Согласитесь, звучит немного запутано.Переведу на более понятный человеческий язык. HTML можно рассмотреть как скелет в человеческом организме. Но, согласитесь, скелет в отдельности от кожи и мышц не очень-то и симпатичен. Для того чтобы увидеть на наглядном примере, как CSS влияет на отображение сайта, нам понадобится установить на свой компьютер расширение Web Developer 1.2.3. для браузера Mozilla Firefox. О том, как это делается, я рассказал в статье «Удобные расширения для Mozilla Firefox»

Пример работы CSS

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

Расширение WebDeveloper позволяет отключать отображение CSS-стилей на сайте. Делается это путем перехода и нажатия «CSS» => «Disable Style» => «Disable All Style»

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

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

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

Для чего это нужно? Представьте, что у нас страница, на которой около 6 заголовков, выделенных тегом «h». Как будет проще: к каждому из этих заголовков в ручном режиме прописывать цвет или через CSS дать одно общее правило? Конечно, второй вариант намного проще! А если у Вас сайт, состоящий из сотен страниц? Вы можете к каждой прописывать все ручками, а можете научится работать с CSS. Вот почему я начал изучать и применять CSS!

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

ПОДПИСАТЬСЯ НА НАШ YOUTUBE КАНАЛ 

ПОДПИСАТЬСЯ НА НАШ VIULY КАНАЛ 

Тут дают 10 токенов VIU за подтвержденую регистрацию

Вступить в закрытый  Телеграм Чат

С уважением проект Анатомия Бизнеса

Рубрики:

  • CSS самоучитель
Октябрь 7, 2014 10:18 пп

Если Вам понравился опубликованный материал – поделитесь им с Вашими друзьями:

Рекомендуемые статьи:

biz-anatomy.ru

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

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

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

3 основных типа таблиц стилей CSS

Встроенный (Inline) — код вписывается в тег документа и оказывает влияние только на него.

1 <a href="#">

Внедренный (Embedded) — код «внедрен» в заголовок документа. Он влияет только на страницу, в которую «внедрен».

1 <style type="text/css"> 2 p { color: #00f; } 3 </style>

Внешний (External) — таблицы стилей создаются в отдельном документе. Затем они связываются с другими веб документами и оказывают влияние на любой связанный с ними документ.

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

Существуют 15 лучших приемов работы с CSS.

Соблюдайте порядок

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

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

1 1. Generic Items (body, a, p, h2, etc.) 2 2. #header 3 3. #nav-menu 4 4. #main-content 5 /****** main content *********/ 6 styles goes here... 7 /****** footer *********/ 8 styles go here...

Избегайте встроенных CSS

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

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

Разделяйте контент от дизайна

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

Дата, заголовок и подпись

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

1 /*====== 2 Onextrapixel Team 3 Copyright 2011 OXP 4 Written for - www.onextrapixel.com 5 6 swatch colors 7 ------------- 8 13437a - dark blue 9 1d74be - mid blue 10 e1e1e1 - light gray 11 a3a4a4 - mid gray 12 8a8a8a - gray 13 ======== */

Сохраняйте библиотеку шаблонов

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

Используйте сокращения CSS

Для быстрой загрузки таблицы стилей и сохранения времени используйте сокращения при кодировании CSS. Этот хороший прием кодирования CSS сделает таблицу стилей аккуратной и понятной.

Вместо этого:

1 #crayon { 2 margin-left: 5px; 3 margin-right: 7px; 4 margin-top: 8px; 5 }

Вам следует написать это:

1 #crayon { 2 margin: 8px 7px 0px 5px; // top, right, bottom and left values respectively. 3 }

Используйте полезные приемы именований

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

Используйте дефис вместо подчеркивания

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

Не повторяйтесь

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

1 h2, h3 { 2 margin: 1em 0 2em 0; 3 font-size: 1em; 4 color: #222; 5 }

Более эффективно, чем это:

1 h2 { 2 margin: 1em 0 2em 0; 3 font-size: 1em; 4 color: #222; 5 } 6 7 h3 { 8 margin: 1em 0 2em 0; 9 font-size: 1em; 10 color: #222; 11 }

Избегайте использования действительно больших изображений

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

1 body { 2 background:url(bg.jpg) repeat-x; 3 }

Избавляйтесь от излишеств кода

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

Другой прием для уменьшения таблицы — не определять ноль как единицу измерения. Если поле должно быть установлено на 0, то нет необходимости писать 0px или 0cm. CSS поймет, что 0 есть ноль, независимо от единицы измерения.

Проверка CSS

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

Используйте функцию Reset CSS

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

CSS Reset:

html,body,iv,span,iframe,h2,h3,h4,h5,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } 2 :focus { outline:0; } 3 body { line-height:1; color:#000; background:#fff; } 4 ol,ul { list-style:none; } 5 table { border-collapse:separate; border-spacing:0; } 6 caption,th,td { text-align:left; font-weight:normal; }

Пишите сначала для Gecko, а потом настраивайте для IE и Webkit

Обычно, если CSS правильно работает для Gecko браузеров (Netscape, Firefox Mozilla, Camino, Flock), весьма вероятно, что он будет нормально работать с другими браузерами — IE and Webkit (Safari, Chrome). Для экономии времени и нервов при попытках выяснения ошибок в кодировании, лучше начинать с написания CSS для Gecko браузеров.

Проявляйте аккуратность

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

Заключение

В использовании CSS есть много преимуществ. Он не только позволяет сделать страницы быстро загружаемыми, но и при использовании приведенных выше 15 лучших приемов CSS делает легче не только вашу жизнь, но и проектирование и редактирование тем и шаблонов. Применение CSS дает преимущества при работе с Google. Поисковик придает больший вес контенту, находящемуся в верхней части HTML-документа. Когда «пауки» поисковых систем сканируют HTML веб-сайта, они просматривают контент, идущий первым. Используя CSS, легко создать схему, где первым появляется контент, а затем следует остальной исходный код страниц.

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

Данная статья является переводом 15 Best CSS Practices to Make Your Life Easier подготовленная командой проекта «Сайтостроение от А до Я».

www.internet-technologies.ru