По сути каскадная таблица стилей (CSS) находится в отдельной директории на сервере, где лежит скрипт самого сайта.
Для того чтобы увидеть путь к файлу CSS нужно правой кнопкой мыши нажать на странице сайта и выбрать из выпадающего меню пункт «Просмотр кода страницы» или «Посмотреть исходный код страницы» (в зависимости от браузера), после чего откроется новая вкладка с исходным кодом.
В коде страницы ищем путь между тегами <head> и </head>, который оканчивается на .css (например http://сайт.ru/style/style.css), это и есть путь к файлу каскадной таблицы стилей.
Вам придется идти на хостинг в админ панель и искать нужную директорию.
Если Вы храните сайт на ПК, то нужную папку ищем на локальном сервере, где правим стиль и заливаем на сервер по FTP.
Если все же для Вас эта задача сложна, то скиньте адрес своего сайта мне в личные сообщения и я подскажу адрес CSS стиля.
I would like to see the specific style elements that are used in the default stylesheet for the various browsers. Do the browsers have an actual file based stylesheetss that I locate on my system and read? If so, what are the default locations of those files? If not, where I can find this information?
asked Oct 18, 2008 at 1:47
1
Zsolt Botykai
50.1k14 gold badges85 silver badges110 bronze badges
answered Oct 18, 2008 at 15:40
soypunksoypunk
2911 silver badge2 bronze badges
2
On Firefox, look for res/html.css, and the other CSS files in the same directory.
Or just open resource://gre-resources/forms.css in Firefox.
answered Oct 18, 2008 at 3:32
CesarBCesarB
43.7k7 gold badges62 silver badges86 bronze badges
1
Inspect html elements in the browser and find the css rules at the bottom right.
You will find user agent styles or browser’s styles (in Firefox named as html.css).
copy the file location and open it in the tab — there you go.
Location default stylesheets
Firefox — resource://gre-resources/html.css
Chrome — https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
you can find for others.
Bottom right of the screen: 
answered Jul 10, 2018 at 12:12
3
soypunk already mentioned the UA style sheet for WebKit.
The UA style sheet for Gecko in «standards mode» (see Activating Browser Modes with Doctype) consists of ua.css, forms.css and html.css.
(See also quirk.css for «quirks mode».)
Opera does not have a UA style sheet as a .css file. (user.css mentioned previously is not the UA style sheet. It is the user style sheet.)
answered Jan 1, 2009 at 21:06
hsivonenhsivonen
7,8681 gold badge30 silver badges35 bronze badges
3
In Mozilla Firefox enter this link to the address field: jar:file:///Applications/Firefox.app/Contents/Resources/omni.ja!/chrome/toolkit/res/
Here you will find all the default styles for Firefox. There are separate stylesheets for counters, forms, full-screen, general html, math, numbers, plain-text, quirks, ua, and viewsource.
For a more complete list of user agent stylesheets, see here.
answered Feb 26, 2015 at 21:15
davidcondreydavidcondrey
34k17 gold badges114 silver badges135 bronze badges
2
In Safari, the Web Inspector will show you the CSS cascade for any element, including properties that were overridden, all the way back to the default CSS. Unfortunately, it won’t show you the filename for that default CSS, but it will show you what properties were reset. Hopefully that helps a bit.
answered Oct 18, 2008 at 2:32
Justin VossJustin Voss
6,2646 gold badges35 silver badges39 bronze badges
This may be tangential to the heart of your question, but if I’m right in guessing why you want this information, you may want to check out browsershots.org.
Browsershots makes screenshots of your Web design in different browsers.
In other words, you can see what your website looks like in many different browsers, browser versions, and platforms.
answered Oct 18, 2008 at 3:58
PistosPistos
22.9k14 gold badges64 silver badges77 bronze badges
answered May 11 at 9:23
BladitoBladito
1,04911 silver badges10 bronze badges
The default stylesheet is generally not available. I recommend starting your own stylesheet with a «reset styles» part, or including reset styles in a style sheet you load first. Eg.
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/reset.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/general.css"></link>
Eric Meyer («the» Eric, just google Eric) offers a battle tested and widely used reset style sheet here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
answered Oct 18, 2008 at 9:23
In Opera, on OSX the file is located at /Applications/Opera.app/Contents/Resources/Styles/user.css
answered Oct 18, 2008 at 18:50
Darryl HeinDarryl Hein
142k92 gold badges218 silver badges261 bronze badges
На чтение 2 мин Опубликовано 20.07.2016
Сегодня вы узнаете как очень просто и быстро можно узнать расположение CSS стилей любого элемента вашего сайта. Наверняка с вами случалось такое, что вы хотели изменить какой-либо элемент на сайте (к примеру цвет кнопки) но не могли найти расположение CSS стилей данного элемента. Особенно это часто случается на CMS системах, типа WordPress, где множество файлов и не понятно где там CSS. Но вам и необязательно рыться в файлах (в дебрях) в поисках CSS стилей. Вам достаточно одно нажатие на кнопку и вы узнаете точное расположение CSS стиля любого элемента вашего сайта.
Всё очень просто, зайдите на свой сайт, нажмите правой кнопкой мыши по элементу, CSS стили которого вы хотите узнать. В появившемся окне нажмите на вкладку — Просмотреть код.
Далее, с правой стороны сайта у вас откроется окно с исходным кодом выбранного вами элемента. В окне Styles будут указаны CSS стили данного элемента. Рядом с CSS стилями, с правой стороны будет отображаться ссылка, URL адрес, по которому находятся данные CSS стили. Наведите курсор мыши на данную ссылку и у вас появится подсказка с полным URL адресом CSS стилей.
Вот в принципе и всё, теперь вы можете зайти в свою корневую директорию сайта на хостинге и быстро найти нужный вам CSS стиль, но и конечно же быстро изменить его.
А есть вариант ещё проще, вам даже не надо заходить в корень сайта и менять там стили. Если ваш сайт на WordPress, то установите себе один очень классный плагин — Simple Custom CSS.
Скопируйте CSS стили из окна просмотра кода и вставьте их на страницу плагина, измените стили так как вам надо и сохраните настройки.
Зайдите на сайт, элемент стили которого вы меняли, автоматически изменится.
Вот и всё, всё очень просто, удачи вам !
Чтобы понять, откуда берутся стили, надо кликнуть правой кнопкой на элементе и выбрать в меню «Просмотреть код». Откроется инспектор браузера (Development Tools).
Эти и дальнейшие инструкции предназначены для Chrome, поскольку он доминирует на рынке браузеров сегодня. В остальных браузерах ход инспекции примерно одинаков.
Допустим, мы решили проинспектировать заголовок главной страницы моего тестового сайта http://test.kagg.eu/
Видим, что при открылась вкладка Elements инспектора с html кодом
<h2 class="entry-title">Home</h2>
Справа — стили этого элемента. При наведении на style.css:1903 всплыла подсказка с полным url файла стилей: http://test.kagg.eu/wp-content/themes/twentyseventeen/style.css. Более того, указан номер строки в css, откуда взяты конкретные стили — 1903. Видим, что в строке 1903 находятся объявления правила для
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title
Обратите внимание на то, что сработали для данного элемента только те стили, что выделены чёрным .page .panel-content .entry-title. Те, что выделены серым, не применимы к данному элементу.
Прокручивая вниз правое окно стилей, можно увидеть, какие css-свойства работали на данном элементе. Перечёркнутые свойства не работают, они перекрыты в других правилах.
Для того, чтобы понять, откуда у данного элемента Home взялось то или иное свойство (например, font-family), кликните справа на вкладку Computed
Видим, что Libre Franklin объявлен в строке 418 style.css. Надо навести курсор на style.css, чтобы узнать его полный url, поскольку файлов с таким именем может быть несколько.
Таким способом вы можете узнать, где объявлено любое свойство css: ширина body или ширина логотипа или что угодно ещё.
Касательно вашего вопроса о параметре ?ver= в url файла стилей. Это всего лишь версия файла. Она задаётся либо явно в теме при вызове wp_enqueue_style(), либо принимает значение версии WordPress. Из вашего текста ясно, что у вас установлена последняя на настоящий момент версия WordPress 4.9.4.
Зачем вообще добавляют версию? Это имеет значение для кеширования. При смене ?ver= браузер сбросит кеш этого файла, даже если в нём не изменили ни одного байта.
Но в целом это несколько другая тема, которую надо обсуждать отдельно. В рамках данного вопроса вы можете смело игнорировать ?ver=. Да и в инспекторе этого параметра нет. Инспектор отображает текущую версию файла стилей.
Update
Что касается конкретной темы tdPersona, то ничего запутанного в ней нет.
Код функции tdpersona_the_custom_logo() находится в wp-content/themes/tdpersona/inc/template-tags.php -он очень простой, там 3 строчки, она вызывает стандартную функцию WordPress the_custom_logo(), а та вытаскивает размеры логотипа из базы, согласно настройкам в «Внешний вид->Настроить->Свойства сайта->Логотип». Пользуясь инструкцией выше, легко увидеть, что изображение логотипа обернуто в div с классом .brand. Чтобы изменить размер логотипа, достаточно добавить одно правило в style.css
.brand img {
width: 200px;
}
Чтобы увидеть ширину «тела сайта, как вы это называете» (ширину контента, я полагаю), надо в инспекторе навести на <header id="masthead" class="site-header container" role="banner"> и увидеть подсветку блока
Справа внизу в окне стилей видим, что ширина контейнера задана в 31 строке файла style.css
.container {
max-width: 940px;
}
В этой статье я расскажу о том, как быстро изменить стиль CSS для определенного элемента на Вашем сайте.
Очень часто такая необходимость возникает у тех владельцев сайтов, которые используют готовые шаблоны на своем сайте. Иногда надо изменить шрифт заголовка, его размер, шрифт абзаца, или заголовок виджета и т.д. В принципе, изменить можно все что угодно.
Что делать?
Для примера буду использовать элементы на своем сайте InwebPress.ru.
1 шаг – Определение стиля конкретного элемента
На моем сайте мне не нравится размер шрифта названий записей. Он большой и занимает много места. Размер нужно уменьшить.
Определяем его стиль. Для этого правой кнопкой мыши я кликаю по названию записи и в контекстном меню выбираю пункт “Просмотреть код”. Это в браузере Google Chrome. А в браузере Mozilla Firefox это “Исследовать элемент”.
В браузере внизу, в специальном фрейме откроются Инструменты разработчика – DevTools. Само окно будет разделено на две части: слева – код HTML, справа – код CSS.
Наш заголовок в коде HTML слева выделен цветом, а справа представлены все стили, которые определяют характеристики внешнего вида элемента. Здесь задан цвет заголовка, его шрифт, размер, оформление ссылки по умолчанию, при наведении, отступы, насыщенность шрифта, вид курсора и т.д.
Откуда браузер знает, как должен выглядеть наш элемент? Все стили прописаны в специальных файлах с расширением .css, которые находятся в папке шаблона.
DevTools браузера не только видит все стили, но и показывает в каком конкретном файле этот стиль прописан.
Итак, наша задача найти размер шрифта.
Вот он:
Как видим, Название записи имеет размер 22 px.
Если вы сомневаетесь в том, тот ли это стиль, то вы можете прямо в правой части окна изменить параметр стиль. После изменения нажмите ENTER (или кликните в др. месте) и посмотрите на сайт.
Нашли свой стиль? Ок! Теперь нам нужно его применить для элемента, в моем случае это Название записи.
2 шаг – Применение нашего стиля
Чтобы это сделать существует несколько вариантов.
1) Правка файла стилей – style.css
Например, можно открыть файл со стилями, найти наш стиль и внести изменения, потом сохранить и залить новую версию файла на сайт. Но, после обновления шаблона все эти изменения придется вносить снова.
2) Правка файла стилей в дочерней теме
Чтобы не изменять основной файл стилей, разработчики часто в архив с шаблоном добавляют папку с дочерней темой. В этой папке есть также файл со стилями, в который можно вносить свои изменения без их потери после обновления. Это хороший вариант.
3) Вставить код стиля CSS в админке
Это вариант мне очень нравится. Вам не надо открывать редактор файлов в админке, или пользоваться FTP, а потом еще искать нужный стиль среди сотни, а то и тысячи строк кода.
Итак, нужный нам код выглядит так:
.content-box h2 a {
font-size: 22px;
}
А нужно вставить так:
.content-box h2 a {
font-size: 18px;
}
Где в админке нужно вставить этот код?
а) Настройки темы
Большинство современных шаблонов имеют в настройках раздел – Custom CSS
В этом разделе мы и вставляем код стиля. если такого раздела нет, то читаем статью дальше.
б) Через плагин
Я рекомендую использовать плагин WP Add Custom CSS. Он без настроек и всего с одним полем для вставки стилей CSS.
В это поле можно вставлять все наши стили для шаблона и для плагинов. Очень удобно и всегда под рукой.
После того, как вы сохранили свои настройки – перейдите на сайт и посмотрите как выглядят ваши элементы.
Мой результат:
Надеюсь вы осилили написанное и сможете теперь с легкостью применять на сайте свои стили CSS.