Что делать если в css. Почему не работает css

• Tutorial

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

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

• не закрыт тег;
• не рекомендованные символы в ссылках;
• используется не рекомендованный тег;
• не указан обязательный атрибут;
• и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM) . Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

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

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

5. Много селекторов

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

/* не рекомендуется, большая вложенность */ .page .item .title a {} /* можно сократить */ .page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента.item.

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

Ошибка в коде

Ошибка в коде

7. Неправильное названия классов

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс.green.

Текст сообщения

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс.green и заменять его на.blue.

Текст сообщения

Текст сообщения

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

P { /* не правильно */ letter-spacing: 1.5px; /* правильно */ letter-spacing: .005em; }

9. Использование классов вместо id

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a { color: blue; } /* цвет ниже не получится переопределить, т.к. #modal имеет больший вес, чем у классов */ .modal-header a { color: #333; } /* в этом случае придётся добавить #modal */ #modal .modal-header a { color: #333; }
Также не рекомендуется использовать!important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

Главная Новости О компании

• Главная
• Новости
• О компании

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

12. Теги

На странице должен быть только один заголовок в теге

. В основном, в этом теге находится название страницы.

13. Транскрипция

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

/* неправильно */ .tovar {} .stranica {} .zapros {} /* правильно */ .product {} .page {} .query {}

14. Clearfix

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

Класс.clearfix надо указывать в родительском теге, а не ставить рядом.

15. HTML - язык программирования

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

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

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

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

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

Hello, world!

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

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

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

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

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

Hello, world!

В данном примере показано изменение стиля заголовка

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

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

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

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

Hello, world!

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

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

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

Hello, world!

Hello, world!

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

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

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

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

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

1

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

1

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

1

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

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

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

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

Избегайте встроенных 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: 8px 7px 0px 5px; // top, right, bottom and left values respectively. 3 }

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

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

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

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

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

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

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

1 h1 { 2 margin: 1em 0 2em 0; 3 font-size: 1em; 4 color: #222; 5 } 6 7 h2 { 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 вы добьетесь единообразия страниц при использовании различных браузеров.

html,body,iv,span,iframe,h1,h2,h3,h4,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 может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

Синтаксис CSS

Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран class=”container”, то в CSS на месте селектора прописывается «.container». Обратите внимание на точку перед названием. Точка ставится только перед классами. Если же вы прописываете стиль для заголовков h1, то никакой точки не нужно.

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

Браузер

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

Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

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

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

Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

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

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

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

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

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

Первое, что надо сделать - установить нормальный антивирус и проверить компьютер. Не стоит забывать о папке автозагрузки. Вылеты могут спровоцированы вирусами, которые вполне способны снизить производтельность ПК настолько, что простой запуск игры будет вызывать огромные проблемы с быстродействием, что и приводит к вылету.

Решение проблемы вылетов

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

• Скачивать игру нужно только из проверенных источников. Также желательно изучить последние комментарии, если они есть. Иногда люди отписываются там о возникших проблемах. Такого не наблюдается? Сборка может подойти, но выбирать лучше всегда как можно тщательней. Вы можете на нашем сайте.
• Стоит следить за версией патча. Чем он новее, тем меньше потенциальных проблем можно в итоге получить. Старые патчи содержат большое количество уязвимостей, которыми могут воспользоваться злоумышленники, чтобы закинуть на компьютер какой-нибудь вирус. Также в последних патчах существенно меньше багов, а значит и вылетов.
• Не стоит устанавливать слишком много модов, особенно графических. В большинстве случаев они просто отвратительно оптимизированы из-за чего игра полностью забивает ОЗУ, что приводит к зависанию и закономерному вылету. К выбору модов надо подходить очень, очень осторожно, чтобы не спровоцировать проблемы. Лучше всего полагаться на моды, которые уже набрали большую аудиторию, тем самым получив кредит доверия от сообщества. Кроме того, о них всегда много отзывов, из которых можно слепить собственные выводы о целесообразности загрузки.
• Перед тем как запустить игру, лучше всего будет отключить антивирус, а также все связанные с ним программы. Дело в том, что они могут занимать довольно много оперативной памяти, которая в любой момент может потребоваться игре. Конечно, у мощных компьютеров эта проблема выражена меньше, но тоже может служить причиной, хоть и очень редкой.
• Все программы, способные потреблять интернет-трафик тоже должны быть отключены. К ним относится не только пресловутый антивирус, но и бразуер, торрент-клиенты и прочий софт. Также желательно отключить утилиты, которые в настоящий момент производят чистку диска от мусора или дефрагментируют его. Если этого не сделать - вылет гарантирован, когда программа доберется до директории КСС. Проверить лишние процессы стоит через диспетчер задач.
• Вылет может спровоцировать неправильная настройка звука. Нужно открыть микшер громкости, перейти в настройки динамиков и во вкладке «Дополнительно», вернуть настройки по умолчанию.
• Напоследок. Необходимо сверить возможности своего компьютера с требованиями игры и использовать соответствующий пресет графических настроек. Стоит понизить разрешение экрана, это тоже может помочь даже при вылетах на мощных ПК.

Заключение

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