Help — Скачал готовый стиль css. Но не могу разобраться.


Содержание

Файл style.css

Файл style.css, подробное описание файла стилей style.css, примеры использования стилей в HTML, описание стилей CSS

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

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

И так, для начала сделаем два файла: (пример создания файлов в статье пример создания простого html сайта)
index.html — это главная страница нашего сайта. Без страницы с таким названием — браузер не сможет увидеть сайт, и покажет только папки.
— к страницам сайта применим стили CSS, что максимально упростит их обслуживание:
style.css — это будет второй файл, (он будет один для всех страниц) в который мы запишем все стили css, которые применим к нашему каркасу и наполнению страниц. Именно на разъяснении применения некоторых стилей остановимся подробно.

При переходе с простого html сайта к более сложному, в котором все параметры тегов вынесены в отдельный файл, сразу появляется вопрос — а куда же их применять и как? Все очень просто. К любому элементу дизайна стили применяются при помощи тегов id и class , которым можно присвоить значение, уникальное для данного участка кода. Например используем тег

А вот полный код двух блоков

Но нужно быть внимательным. В первом примере с id — в файле стилей пишеться вот так — #primer, с решеткой # ,
а для применения класа class , с точкой — .primer_2.

Подробное описание файла style.css.

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

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

Как можно заметить, ничего сложного здесь нет. Теперь можно скачать шаблон сайта, HTML — ная часть которого описана в прошлом уроке. Открыть и редактировать шаблон можно при помощи программы Adobe Dreamweaver, а просматривать в браузере Mozilla Firefox. При желании, руководствуясь описанными подсказками, можно сделать свой шаблон, вставить в него свои тексты и картинки и выгружать на хостинг. А если нужно создать более серьезный сайт, в котором Вы сможете легко разобраться, тогда нужно изучить следующую статью о создании динамического веб-сайта, а если нужно быстро создать свою страничку в сети, тогда можно воспользоваться формой обратной связи.

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это небольшая заметка из серии «самому себе на память». Возникла идея убрать лишние строки из файла стилей. За семь лет существования блога много чего поменялось, но строки в файлике STYLE.CSS оставались (на всякий случай или просто забывал их убирать). Сейчас мне показалось, что он стал слишком много весить, а посему возникла идея его почистить.

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

Варианты поиска ненужных для работы сайта CSS стилей

Как-то я уже писал, как объединить все файлы стилей в WordPress в один. По сути, нужно просто отключить файлы стилей некоторых плагинов, которые автоматом их добавляют между тегами Head в код каждой страницы сайта. Ну, а строки со стилями из этих файлов нужно перенести в основной — у меня он называется STYLE.CSS и живет в папке с используемой темой оформления.

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

В сети я нашел несколько рекомендуемых для этого дела плагинов. Остановился на плагине для Фаерфокса под названием Dust-Me. Он в реальном времени делает разбор открытой в браузере страницы мгновенно выявляя те селекторы CSS, которые оказались не используемыми для ее отрисовки.

Но этого, как вы понимаете, мало для того, чтобы выносить вердикт этим селекторам. Ведь они могут использоваться на других типах страниц вашего сайта. Что делать? Проверять их все вручную? Вовсе нет. Dust-Me умеет работать с картой вашего сайта вида сайтмар xml — достаточно будет только указать путь до нее:

Как видите, у меня в sitemap.xml около 1000 страниц и плагин успешно начал их сканирование. Примерно через сотню другую страниц он у меня затыкался и приходилось нажимать на паузу, а потом его повторно запускать.

Данный метод всем хорош, ибо позволяет проверить абсолютно все страницы своего сайта, чтобы точно знать, что лишние CSS селекторы нигде не используются и не понадобятся. Проблема в том, что Dust-Me для моего STYLE.CSS в итоге выдал ошибку при показе неиспользуемых строк (селекторов). Может быть ему не понравилась его компрессия или еще что помешало, но факт остается фактом.

Далее я зашел на платный онлайн-сервис Unused-Css.com, где зарегистрировался и указал Урл своего сайта. Они обещали в течении нескольких часов его просканировать и прислать отчет по почте. Полный вариант нового (очищенного) CSS файла стоит 25$, что, по-моему, очень дорого.

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

Суть метода удаления неиспользуемых стилей заключается в следующем:

  1. Открываете содержимое вашего файла стилей, например, загрузив файлик STYLE.CSS (или как он там у вас обзывается) по ФТП к себе на компьютер. Копируете все его нутро в буфер обмена и вставляете в окно верхнего текстового поля на приведенной странице сервиса.
  2. Проделываете ряд итераций с помощью браузера Хром и инструментов разработчика в нем спрятанных (открывается панель инстументов, например, по нажатию на F12 на клаве).
  3. Получаете на выходе «чистый» CSS код, которым можно заменить старое содержимое файлика стилей.

Методика очистки CSS файла от совсем ненужных селекторов

Вся соль как раз в манипуляциях проводимых в браузере. Открываете сначала в нем любую страницу сайта, запускаете «инструменты разработчика» (F12) и проделываете следующее: «Audits» → «Reload Page and Audit on Load» → «Run» → разверните «Web Page Performance» → разверните «Remove unused CSS rules» → разверните ваш CSS файл → скопируйте все что появилось в буфер обмена.

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

Т.е. просто переставляете галочку в указанное место и жмете на запуск. По окончании процесса находите под спойлером «Remove unused CSS rules» название вашего файла стилей (у меня это STYLE.CSS) и кликаете по нему. Все CSS селекторы, которые не используются для отрисовки данной страницы, будут там приведены в столбик:

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

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

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

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

Никаких нареканий у меня удаленные селекторы не вызвали (они остались в STYLE.CSS от старых экспериментов или уже неиспользуемых плагинов). В итоге число строк (селекторов) у меня в файле стилей уменьшилось с почти 600 до чуть более 300. А итоговый вес файла снизился до 25 килобайт (менее 10 с учетом его gzip сжатия при передаче с сервера до браузера).

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

CSS: reset или normalize?

Дата публикации: 2013-07-15

От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.

Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul , то в браузерах это приводило к очень разным результатам.

Цукерберг рекомендует:  Сериализация - Сериализация объектов и коллекций в Java (три вопроса)

СБРОС ИСХОДНЫХ НАСТРОЕК CSS

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Тантек Челик (Tantek Celik) и Эрик Майер (Eric Meyer) начали обсуждение более точного способа адресации к различиям стилей по умолчанию в 2004г., при этом в 2006г. появился YUI CSS Reset, и Meyer Reset в 2007г.

Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей — Эрик Майер (Eric Meyer)

Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы * . Затем мы можем определять стили для этих сброшенных «обесстиленных» свойств, будучи уверенными в том, что строим на стабильной кроссбраузерной основе. Такое назначение стилей, кроме того, действует как сигнализатор потребности в осознанной установке подходящих стилей для этих элементов.

ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS

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

К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.

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

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

Правила сброса CSS, повторяемые по причине наследования

NORMALIZE.CSS

Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css, «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку — в первую очередь основную причину применения сброса — но два этих подхода разнятся с философской точки зрения.

Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.

Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:

«Обесстиленный» элемент неупорядоченного списка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Применяем Meyer Reset

Применяем Normalize.css v1

Applying Normalize.css v2

Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.

Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15:

Стили агента пользователя Mozilla

Стили агента пользователя Opera

Это тот CSS, который мы сбрасываем или нормализуем.

Инструменты организации и приведения в порядок кода CSS

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

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

ProCSSor — настраиваемый процессор CSS

«Прекрасный CSS отладчик для прекрасных web-сайтов» (мой вольный перевод слогана procssor). Действительно очень достойный инструмент.

ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте. но увы. Так что онлайн-версии вполне достаточно.

CSS Compressor & Minifier

На мой взгляд, инструмент несколько уступает в настройках предыдущему процессору и не знает о CSS3. Есть предустановленные настройки степни сжатия итогового CSS. В остальном функционал повторяет возможности ProCSSor.

CSS Lint — помогает обнаружить ошибки CSS кода

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

Helium CSS – сканирование сайта на наличие неиспользуемого CSS

Helium – интересный инструмент, написанный на javascript, позволяющий находить неиспользуемые CSS-стили на сайте. В первую очередь интересен при оптимизации сайтов, использующих различные универсальные фреймворки, к примеру широко известный Bootstrap.

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

grunt-uncss — продвинутый плагин для удаления лишних CSS стилей на сайте

О плагине для Grunt — uncss, который анализирует верстку и стили и позволяет не только избавиться от лишних селекторов в CSS, но и объединять и сжимать javascript на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Как редактировать CSS сайта WordPress

Вступление

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

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

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

Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/ .

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

Где лежит файл style.css WordPress

Несколько прописных истин:

  • Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
  • Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
  • Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

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

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

Редактирование файла style.css по FTP

Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.

  • Входите в каталог сайта по FTP;
  • Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
  • Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

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

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

редактировать CSS сайта WordPress

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

Цукерберг рекомендует:  Эффект тасующихся символов на jQuery

Как понять, что нужно редактировать

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

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

  • Наводим на него мышь, через правую кнопку открываем «Код элемента»;

редактировать CSS сайта WordPress начало

  • Видим код HTML в правом поле и код CSS в левом поле;
  • Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
  • Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).

редактировать CSS сайта WordPress

Для примера, я поменял онлайн размер шрифта названия.

Почему не работают CSS-стили?

Приветствую вас на сайте Impuls-Web!

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

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

Кэширование браузера

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

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

  1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
  2. 2. Находим пункт «История» =>«История»

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

Кэширование на хостинге или на сайте

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

Ошибки в коде

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

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

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Как же всё таки определить правильно ли вы указали селектор или нет?

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

К примеру, я хочу изменить стили для блока на сайте.

    1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

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

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

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

    О приоритете стилей я расскажу чуть ниже.

    Если этот фон для указанного элемента применился, значит селектор определен правильно.

    Приоритеты стилей

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

    В чем здесь может быть причина?

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

      1. Самый высокий приоритет будет иметь тот селектор, в котором указано название тега.
      К примеру, div или span, или h1, или любой другой тег.

    2. На втором месте по приоритету будут идти идентификаторы. Когда у вас на сайте есть блок, для которого написано >

    В CSS это будет выглядеть следующим образом:

    3. На третьем месте по приоритету стоят классы, когда для определенного блока написано >

    В CSS это выглядит так:

    Как поднять приоритет стилей?

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

    Сделать это можно двумя способами:

      1. Можно воспользоваться правилом !important. Выглядит это следующим образом:

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

  • 2. Второй способ заключается в увеличении селектора. Если у вас, к примеру, есть блок с классом site-branding и этот блок находится внутри еще какого-то блока, который имеет, к примеру, идентификатор. То для того, что бы повысить приоритет стиля вы можете указать цепочку вложенности классов и идентификаторов для этого блока блока.
  • Давайте рассмотрим это на примере. Возьмем тот же блок site-branding и при помощи инспектора кода видим, что он находится в теге , который имеет идентификатор masthead.

    Копируем этот идентификатор, и перед названием класса ставим решетку, вставляем название идентификатора и ставим пробел:

    Данное css-свойство будет работать для блока с классом site-branding, находящегося внутри блока с идентификатором masthead.

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

    Указанные здесь CSS стили должны будут работать для всех блоков с классом site-branding, которые находятся внутри блока с идентификатором masthead, которые, в свою очередь, находятся внутри тега .

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

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

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

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

    Видеоинструкция

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

    Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.

    Инструменты организации и приведения в порядок кода CSS

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

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

    ProCSSor — настраиваемый процессор CSS

    «Прекрасный CSS отладчик для прекрасных web-сайтов» (мой вольный перевод слогана procssor). Действительно очень достойный инструмент.

    ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте. но увы. Так что онлайн-версии вполне достаточно.

    CSS Compressor & Minifier

    На мой взгляд, инструмент несколько уступает в настройках предыдущему процессору и не знает о CSS3. Есть предустановленные настройки степни сжатия итогового CSS. В остальном функционал повторяет возможности ProCSSor.

    CSS Lint — помогает обнаружить ошибки CSS кода

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

    Helium CSS – сканирование сайта на наличие неиспользуемого CSS

    Helium – интересный инструмент, написанный на javascript, позволяющий находить неиспользуемые CSS-стили на сайте. В первую очередь интересен при оптимизации сайтов, использующих различные универсальные фреймворки, к примеру широко известный Bootstrap.

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

    grunt-uncss — продвинутый плагин для удаления лишних CSS стилей на сайте

    О плагине для Grunt — uncss, который анализирует верстку и стили и позволяет не только избавиться от лишних селекторов в CSS, но и объединять и сжимать javascript на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.

    Если считаете статью полезной,
    не ленитесь ставить лайки и делиться с друзьями.

    Лучшие CSS Reset или CSS стили для сброса

    Привет, друзья! Представляю сегодня Вам несколько таблиц стилей для сброса CSS стиле по умолчанию. Вы спросите, для чего это нужно? Все наши браузеры имеют стили по умолчанию, которые применяются для общих элементов на сайте. С помощью CSS reset мы можем изменить эти стандартные значения. CSS reset важен для того, чтобы сделать качественный сайт. Так, что не рекомендую пропускать этот момент, тем более ничего не нужно придумывать, так как ниже Вы найдёте уже готовые CSS стили для сброса.

    Обнуление CSS стилей — зачем это делать, типы CSS Reset файлов

    У каждого браузера есть свои предустановленные правила оформления веб-страниц и элементов на них (user agent stylesheet), подключаемые автоматически по умолчанию. Тем не менее, большинство верстальщиков при создании нового проекта добавляет в него специальный файл Reset CSS, который осуществляет полное обнуление CSS стилей и позволяет разработчикам творить с «чистого листа». Почему и как это все делается — разберу в текущей статье.

    Если вы посмотрите на картинку-превью к посту, то увидите, что обычная строка поиска по сайту в Safari, Chrome и Firefox отображается абсолютно разным образом. Да, иногда правила в них совпадают, например, все скрывают тег head через опцию display: none!, однако во многих случаях есть серьезные различия при рендеринге объектов на странице. Подозреваю, что некоторым вашим клиентам может не понравится, когда итоговый вариант верстки выглядит не так, как на макете.

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

    Зачем нужен сброс CSS настроек

    Как вы уже поняли из вступления, они позволяют устранить разбежности между базовыми стилями веб-браузеров и привести их к одному плюс-минус стандартизированному виду. Применяются всегда в самом начале перед остальными пользовательскими наработками. В статье Эрика Мейера о Reset CSS десятилетней давности упоминается основная причина этого подхода, которая спустя годы до сих пор актуальна:

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

    Но ведь сейчас ситуация в верстке менее противоречивая?

    Да, действительно, в наше время многие параметры в user agent стали более похожими. Практически везде заголовку H1 задается размер шрифта 2em и горизонтальный отступ 0.67em. Однако это все относительно новые изменения, и как минимум, нужно учитывать поддержку старых версий программ, где подобной согласованности нет.

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

    Но мы ведь применяем свои стили, переопределяя базовые?

    Эта один из основных тезисов противников данного подхода — в конечном итоге все равно те или иные параметры заменяются собственным style.css, так зачем добавлять еще один лишний файл и уменьшать скорость загрузки сайта? Не смотря на то, что в этой фразе есть смысл, использование ресета оправдано двумя моментами:

    • Во-первых, это помогает писать более чистый код. Мы сможем разделить его на несколько частей: отдельно для самого дизайна веб-проекта и набор правил, ориентированных под специфику конкретных браузеров. Это позволить не захламлять основный CSS-файл всякими IE-хаками и т.п.
    • Во-вторых, все reset’ы весят очень мало, и их загрузка не требует большого количества времени.

    Типы CSS Reset (скачать можно по ссылкам в статье)

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

    1. Исправление ошибок в user agent stylesheet.
    2. Отмена нестандартного оригинального оформления в интернет-браузерах.
    3. Создание универсальной совместимой базы стилей.

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

    Коррекция/исправление ошибок

    Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления HTML5 тот же Internet Explorer 9 не применил корректный тип display к новым объектам.

    Поэтому в решениях по типу Normalize.css все ошибки учтены и обработаны:

    /** * Add the correct display in IE. */ main

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

    Другой пример кода от Pure CSS, который подходит в том числе и к современным веб-программам — исправление display элементов и атрибутом hidden.

    Убираем своеобразные стили браузеров

    Это вторая причина сброса настроек CSS. В принципе, у каждого свое мнение относительно того какое оформление в user-agent stylesheet считать «своеобразным». Определение автора оригинальной заметки достаточно логичное: это такой стиль, который не является «голой» версией отображения элемента. Например, добавление отступов для заголовков в 2em (как это делают многие), идея не плохая, но почему именно 2em, а не 3em или не 4em. В таком случае базовым вариантом было бы отсутствие какого-либо отступа, то есть нулевой margin.

    Самый простой универсальный подход, удаляющий отступы/поля тегов:

    Данный метод слишком радикальный, т.к. применяется ко всем объектам, даже тем, где вы не ожидаете (в том же input). В качестве альтернативы чаще используется Eric Meyer Reset CSS, который убирает параметры margin/padding, границы и размер шрифта (в 0 или none) там, где это логически оправдано:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

    Переопределение стилей

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

    Например, вместо установки всем шрифтам размера 1em и margins = 0 в Sanitize.css задаются другие величины:

    /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1

    В Bootstrap’s Reboot найдете еще одну иллюстрацию текущей задачи. Разработчики пошли чуть дальше и прописали шрифты и цвет фона для body.

    // Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. // 3. Set an explicit initial text-align value so that we can later use the // the `inherit` value on things like `

    ` elements. body < margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2 >

    Итого. Что же выбрать

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

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

    Что касается мнения автора статьи (Ire Aderinokun, фронтенд и UX девелопер), то она предпочитает скачать Reset CSS Эрика Мейера и немного модифицировать его под себя. Причины тут две:

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

    Как редактировать CSS сайта WordPress

    Вступление

    Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

    CSS это

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

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

    Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/ .

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

    Где лежит файл style.css WordPress

    Несколько прописных истин:

    • Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
    • Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
    • Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.

    А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

    Три способа редактировать CSS сайта WordPress

    Предложу три варианта редактирования файла style.css.

    Редактирование из панели администратора

    Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

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

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

    Редактирование файла style.css по FTP

    Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.

    • Входите в каталог сайта по FTP;
    • Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
    • Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

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

    Дочерняя тема WordPress

    Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

    На этом принципе основан и третий способ редактирования стилей.

    Редактирование файла style.css с помощью плагинов

    Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

    После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

    редактировать CSS сайта WordPress

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

    Как понять, что нужно редактировать

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

    Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

    Показываю, как им пользоваться:

    Например, хотим поменять заголовок сайта.

    • Наводим на него мышь, через правую кнопку открываем «Код элемента»;

    редактировать CSS сайта WordPress начало

    • Видим код HTML в правом поле и код CSS в левом поле;
    • Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
    • Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).

    редактировать CSS сайта WordPress

    Для примера, я поменял онлайн размер шрифта названия.

    Цукерберг рекомендует:  Javascript - куда возвращается значение
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих