Что такое CSS, подключение CSS файла
CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.
При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение
Подключение CSS файла
Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:
1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда <link>, которую необходимо разместить в теле тега <head>.
<LINK REL=STYLESHEET TYPE="text/css" HREF="/css/style.css">
Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.
2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:
<div></div>
Или:
<span style="color: blue; background-color: yellow; font-variant:small-caps"></span>
Здесь мы прописали стили соответственно для контейнеров <div> и <span>. Данные стили будут применяться исключительно для них.
Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:
body {
font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */
font-size: 12pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #000000; /* Цвет основного текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}Здесь мы задали стили для тела страницы <body> и для заголовка <h2>. Также можно задать конкретные стили для любых других элементов страницы веб-сайта.
Теперь подключим нашу таблицу стилей к сайту:
<html> <head> <title>Подключение CSS к сайту</title> <link rel=STYLESHEET TYPE="text/css" HREF="/style.css"> </head> <body> <h2>Привет, Мир!</h2> <p>Это моя первая страница со стилями CSS</p> </body> </html>
Таким образом, мы разобрались, что такое CSS, зачем данная технология используется, научились подключать стили к сайту. Данный урок является, своего рода, введением в каскадные таблицы стилей. В других уроках мы будем говорить о технологии CSS более детально.
Понравилось? Поделитесь с друзьями!
Файлы CSS: определение и назначение.
Все конвертеры
Формат файлов CSS Website
Аббревиатура CSS — это сокращение слов Cascading Style Sheets. CSS — язык, используемый для указания порядка представления документов на веб-странице. Данные CSS можно сохранить в файле, который в результате получит расширение CSS. Код внутри документа (HTML, другие языки разметки) располагается и форматируется с помощью CSS. Большинство веб-браузеров используют CSS для представления информации и данных. Элементы текста и документов, которыми управляет CSS, могут включать в себя общее форматирование документа, цвета, шрифты, изображения и т.д. Файл CSS позволяет повысить эффективность управления контентом, обеспечить гибкость форматирования, а также доступность информации на веб-странице. С помощью CSS различные страницы могут иметь одинаковое форматирование и общий вид. Кроме того, в этом случае возможно использование различных методов визуализации.
Технические сведения о файлах CSS
Язык CSS использует простой синтаксис, причем для указания названий различных свойств стилей используются ключевые слова на английском языке. Селекторы CSS включают следующее: элементы отдельных типов, элементы, указанные свойствами (id или class), а также элементы, которые зависят от своего положения (около или среди других элементов дерева документа). Классы могут содержать различные элементы, тогда как ID очень часто относятся к определенным элементам. Псевдоклассы селекторов CSS позволяют осуществлять форматирование на основе внешней информации дерева документов. Кроме того, CSS также предусматривает использование образцов, которые определяют форматирование элементов, блоки описания, источники, специфичность (относительные веса и правила), наследование и пустые области.
Дополнительная информация о формате CSS
Введение в CSS | htmlbook.ru
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Флексагон</h2>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html> Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h2 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }
В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- text
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
1. color
2. Набор правил форматирования элементов веб-страницы.
3. Cascading Style Sheets
что это такое, для чего он нужен и как с его помощью обозначить внешний вид сайта
Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.
Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.
Принцип работы CSS
Принцип работы основывается на том, что CSS находит определенный элемент HTML (заголовок) и определяет для него конкретное свойство (цвет), чтобы присвоить ему значение (красный). Прописывается это так:
CSS применяется для выполнения стилистических решений, а также для компоновки документов типа HTML: задачи высоты, колонок, размещения элементов и так далее.
Как и где можно написать CSS
- CSS может быть прописан как атрибут непосредственно в HTML.
- Можно применять тег<style>в теге<head>документа HTML.
- CSS также можно прописать отдельным файлом и присвоить ему расширение .css. После этого необходимо связать файл через тег<link> . И HTML
Для чего нужен CSS
CSS применяют, чтобы задать стиль документу. Сюда входит разработка дизайна, верстка макета в зависимости от типа устройств, на котором будет отображаться. CSS можно прописать как в качестве составного элемента документа, так и в качестве самостоятельного файла.
Что лучше: простой HTML или HTML с CSS
Многие разработчики сайтов задаются вопросом, зачем нужен CSS, если можно использовать простой HTML. Скорее всего, они только познают разработку сайта и имеют ряд пробелов в знаниях. Суть в том, что HTML применяется для составления структуры содержимого страницы. А CSS позволяет отформатировать это содержимое, сделать его более привлекательным для пользователей.
Когда был создан World Wide Web, разработчики применяли только один язык — HTML. Его использовали как средство вывода структурированного текста. У автора в распоряжении был скудный функционал. Максимум, что можно было сделать – обозначить заголовок, выделить параграф. Тегов тоже было мало.
В связи с развитием интернета базу тегов языка HTML расширили, чтобы позволить корректировать внешний вид документов. При этом структура оставалась неизменной.
Стали распространяться теги структурирования, например<table>. Именно их чаще выбирали для оформления страниц вместо самой структуры. Некоторые браузеры предлагали собственные теги, воспроизвести которые могли только они.
Таким образом, пользователи часто натыкались на сообщение: «Чтобы просмотреть страницу, вам необходимо воспользоваться браузером ХХХ».
Чтобы исправить сложившуюся ситуацию и создать единую базу тегов для форматирования был создан CSS. Он позволил отказаться от привязки тегов к браузерам.
Использовать HTML с CSS удобнее, чем простой HTML. CSS предоставляет следующие преимущества:
- Проработанный до мелочей дизайн.
- С помощью единой таблицы можно управлять различными документами.
- Можно настроить варианты отображения страницы для разных устройств: экран компьютера, экран смартфона и т.д.
Продвижение сайта с помощью CSS
Появление и развитие CSS позволило сделать разработку веб-ресурсов более эффективной и результативной. Теперь управлять дизайном, корректировать его намного легче и удобнее. Также с помощью CSS удалось сократить код страниц, их размер. Это положительно сказалось на скорости загрузки, индексирование тоже стало проходить быстрее. Применение адаптивного подхода позволило сделать рывок в сфере мобильных версий интернет-ресурсов.
Для улучшения продвижения сайта специалисты рекомендуют выносить таблицы стилей CSS в отдельный документ, чтобы не увеличивать объем кода. Можно составить один или несколько таких файлов.
Ранее поисковики не умели читать таблицы стилей, что открывало возможность использовать их в черном SEO, например, для создания невидимых текстов. Сейчас лучше отказаться от использования CSS не по назначению.
CSS обладает рядом преимуществ и позволяет улучшить сайт, сделать его более привлекательным для посетителей. Однако важно правильно прописать все элементы.
Как создать файл стилей CSS?
Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.
Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.
Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.
Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.
Для тех, кто любит видео:
Все мои уроки по CSS (каскадным таблицам стилей) здесь.Способ 1. Создание файла CSS меняя расширение текстового файла.
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.css.
Если у Вас не отображается расширение файлов, вот заметка:
Как включить отображение расширений файлов в Windows.
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.
После данной операции вы получите файл стилей css.
Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).
Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.
Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.
После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.
После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».
Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.Файл стилей style.css — что это такое, зачем нужен и как его изменять Экопарк Z
Файл стилей style.css — это файл, в котором заданы значения параметров отображения информации, присущие выбранному шаблону. В число этих параметров входят длина и ширина множества полей шаблона, размеры, цвет и толщина различных рамок, используемые шрифты и многие другие параметры.
В используемом шаблоне есть несколько CSS-файлов, которые тоже оказывают влияние на отображение страниц сайта. Чтобы успешно переделывать CSS-файлы, надо изучать Приоритеты стилей в CSS, что достаточно сложно и утомительно. К тому же нужно докопаться до тех функций шаблона, которые вызывают вспомогательные CSS-файлы.
К счастью, существует замечательное правило !important, которое используется тогда, когда нужно, чтобы свойство непременно было применено к элементу независимо от того, в каком селекторе и в каком месте CSS-кода свойство задано. Синтаксис этого правила таков: селектор { свойство: значение !important; }
Первостепенная важность файла style.css подчёркивается тем, что при отображении любой страницы сайта этот файл прочитывается всегда сразу после файла с текстом страницы. В этом можно наглядно убедиться в сервисе PingDom, протестировав им любую страницу сайта. Вспомогательные CSS-файлы постараюсь не затрагивать без острой необходимости.
Через некоторое время после создания сайта, когда поймёте, что сайт нерационально использует ширину экрана современных компьютеров, плохо формирует таблицы и обладает рядом других недостатков, неизбежно возникнет проблема существенной переделки шаблона.
Многое можно изменить, внеся изменения именно в файл стилей style.css Нужно только умудриться разобраться в содержании этого файла, что является весьма нелёгкой задачей.
Приходится держать на сервере хостинга несколько вариантов файла стилей:
— исходный файл style_0.css длиной 23-ри килобайта, который пришёл вместе с шаблоном;
— комментируемый на русском языке файл style_comm.css, в который желательно вносить комментарии ко всем вносимым изменениям, чтобы всегда можно было вспомнить то, в чём смогли разобраться и переделать, а потом благополучно забыли;
— рабочий файл стилей style.css, из которого удалены все комментарии и все лишние пробелы, что существенно сокращает его длину и способствует улучшению скоростных показателей сайта.
Например, рабочий файл стилей этого сайта имеет длину 17-ть килобайт на сервере хостинга и 4,5 килобайта согласно данным сервиса PingDom (при формировании страницы сайта на сервере хостинга происходит автоматическое уплотнение файла стилей). До создания рабочего файла стилей style.css было не 4,5 килобайт, а более 5-ти килобайт.
Считать ли существенным выигрыш примерно 10-ти процентов? Загляните в рекомендации сервиса PageSpeed — он выдаёт множество рекомендаций, которые дают выигрыш в пределах от 5-ти до 10-ти процентов. Решайте сами в каждом конкретном случае, ибо даже 5-ть % дадут разный эффект при оптимизации файла длиной 10-ть килобайт и файла длиной 1210-ть килобайт (такую и даже бОльшую длину могут иметь файлы изображений).
А оптимизировать файл стилей style.css этот сервис призывает первым делом и буквально при анализе каждой страницы сайта!
Множество конкретных рекомендаций по внесению изменений в файл стилей style.css уже разбросаны по страницам раздела Сайт — не вижу смысла выискивать их и переносить на эту страницу: там они полезнее.
Замечу лишь, что считаю рациональным сделать так, чтобы файл стилей style.css имел основную неизменную часть и концовку, в которой сосредоточены все внесенные изменения: это облегчит контроль изменений и повысит вероятность того, что последующие инструкции не перешибут записанных Вами инструкций.
Хорошо бы файл стилей style.css проанализировать на непротиворечивость инструкций, но это нудная и кропотливая работа, за которую даже страшно браться. А искать сервис анализа файл стилей style.css на непротиворечивость как-то пока недосуг! Со временем займусь на досуге, если он появится!
Запустил Валидатор CSS. Он не обнаружил ошибок CSS-кода, но выдал 283-ри предупреждения. Начал постепенно избавляться от этих предупреждений, надеюсь с их помощью кое-что улучшить на страницах сайта.
Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!
И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…
Организация и оптимизация стилей / Habr
В этом посте я приведу пример организации стилей на типичном проекте.Небольшое вступление, попробую объяснить актуальность проблемы и зачем это нужно.
Рассмотрим такую ситуацию. Разработчику ставят задачу, реализовать очередной функционал на сайте. Это допустим включает добавление новых разделов, блоков, элементов. Разработчики зачастую не доверяют чужому коду, и когда доходят до верстки, находят css-файл с названием типа main.css и дописывают в конец свои новые стили.
Проходит некоторое время, приходит новый разработчик, ему ставят подобную задачу, он если и пытается разобраться в стилях, то видит, что там нет никакой закономерности, и повторяет то же, что делали предыдущие.
Руководство ставит сроки, разрабатывается все новый и новый функционал, проект растет. В итоге css файлы превращаются в мусорку, сайт грузится дольше, появляется больше дефектов и т.д..
Я думаю, многим это знакомо.
Теперь поговорим непосредственно о самой структуризации стилей.
Держать все стили в одном файле неразумно, со временем в нем довольно сложно становится ориентироваться. Плюс на каждой странице используются около 10% правил из этого файла, а весит он не мало.
Гораздо оптимальнее разделять стили по логическим блокам сайта.
Так же к проекту необходимо подключить библиотеку для работы с css (LESS, SASS, SCSS). Нам понадобится работа с переменными, функциями.
Для уменьшения запросов на сервер необходима сборка файлов. Файлы должны склеиваться по специальной конструкции, можно, например, использовать стандартную констукцию css — import. Здесь возможно потребуется помощь разработчика для редактирования исходников выбранной вами библиотеки css.
Плюс, для уменьшения объема, файлы должны приходить клиенту сжатые. dotLess, например, сжимает файлы при значении <dotless minifyCss="true" cache="false"/> в web.config.
Каждому логическому блоку будет соответствовать отдельный css файл. Так упрощается поддержка, поиск нужных стилей, да и вообще ориентация в файлах. Все данные файлы являются исходниками, будем содержать их в папке /css/sources/. Остальные css-файлы — сборщики, они линкуются на страницы и собирают импортом исходники.
Допустим рассматриваемый проект это некая соцсеть, исходя из этого можно выделить следующую структуру:
/css
/sources — папка для ресурсов, не выкладывается на сервер
/global-vars — файлы данной папки подключаются в каждый css-файл сборщик по мере необходимости
locals.css — глобальные переменные
functions.css — глобальные функции
/common
reset.css — думаю, объяснять не нужно, понятно, что за стили
utils.css — стили типа .clearfix
/content
base.css — основные стили для контента, а именно — h2-h6, p, буллиты для списков (ul.text, ul.dashed и т.д.), dl, dd, dt, изображения и панели в тексте (обтекание текстом), текстовые колонки и т.д.
panels.css — различные панели
tables.css — стили для таблиц в контенте (th, черезполосица)
/controls
buttons.css — виды кнопок
forms.css — общие стили для input-полей (к примеру, внутренняя тень, фокус (рамка), оформление валидационных сообщений и их скрытие по умолчанию)
tabs.css — табы, вкладки
system-notifications.css — системные сообщения, как правило бывают 3-х типов: success (зеленые), failure (красные) и info (серые, синие)
pager.css — пейджер
banners.css — баннеры на сайте
balloons.css — всякие баллуны, всплывающие подсказки, кастомные тултипы и т.д.
/member
thumb.css — аватарка пользователей
card.css — карточка пользователя (аватарка, имя, краткие данные)
cards-list.css — например, грид с карточками
profile.css — профиль пользователя
/modules — различные модули к сайту
search.css
news-list.css
gifts.css
games.css
/not-auth — для неавторизованных пользователей
login.css — форма авторизации
registration.css — форма регистрации
/auth — для авторизованных пользователей
my-account.css
mail-system.css — inbox сообщения, outbox и т.д.
auth-menu.css — меню навигации в авторизованной зоне
my-profile.css — просмотр своего профайла, редактирование
/layouts
common.css
header.css
top-menu.css
footer.css
overlay.css — например, все всплывающие поверх слои будут с затемнением 0.5
main.css — основной сборщик, линкуется на всех мастер-страницах
/layouts
default.css — основной layout сайта, собирает файлы из папки /layouts, подключается на мастере с основным layout’ом
popup-windows.css — стили для popup’ов, подключается на мастер-страницах для popup окон
not-auth.css — собирает стили из папки /sources/not-auth/
auth.css — собирает стили из папки /sources/auth/
/themes — различные тематики сайта
new-year.css
st-valentine.css
/%section-name% — какой-нибудь новый раздел сайта, «сайт в сайте», характерный наличием своего подменю и т.д.
/css
%section-name%.css
layout.css
/sources
menu.css
Конечно же для каждого проекта своя уникальная структура. Важен принцип разделения файлов.
Дополнительное описание к некоторым файлам:
main.css — собирает файлы из папок:
/sources/global-vars
/sources/common
/sources/content
/sources/controls
/sources/member
/sources/modules
functions.css — содержит глобальные функции, типа:
.rounded-corners(@radius)
{
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
*behavior: url(/libs/progressive-IE.htc);
}
sources/layouts/common.css — глобальные стили по layout’у:
.columns-wrapper
{
display: table;
*zoom: 1;
}
.columns-wrapper .column
{
display: table-cell;
*float: left;
}
Подключение файлов not-auth.css и auth.css зависит от состояния авторизации пользователя. Например, в asp.net это будет выглядеть так:
<asp:LoginView runat="server">
<AnonymousTemplate>
<link href="/css/not-auth.css" rel="stylesheet" type="text/css" />
</AnonymousTemplate>
<LoggedInTemplate>
<link href="/css/auth.css" rel="stylesheet" type="text/css" />
</LoggedInTemplate>
</asp:LoginView>* This source code was highlighted with Source Code Highlighter.
Хочу привести концепцию, которой, я считаю, следует держаться.
Новые страницы должны строиться из компонентов, «кирпичиков» — css классов. Некоторые неверно понимают данную концепцию и строят страницу из классов типа mar-bottom-15, float-left или pad-20, что тоже является большой ошибкой.
На всем сайте должен сохраняться единый стиль элементов, т.е. заголовок h2 на одной странице должен выглядеть так же, как и h2 на другой. Заголовки, абзацы, списки, панели, табы, пейджеры, контентные таблицы и т.д. по дизайну должны соблюдать единый стиль.
Перед тем как писать стили для новой страницы сайта следует проанализировать уже существующие css-файлы проекта, возможно там уже есть необходимые стили. Css файл не должен увеличиваться без необходимости.
В заключении скажу, что все описанное выше так же актуально и для JS.