Как структурирован CSS — Изучение веб-разработки
Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
Первое, что мы рассмотрим, это три метода применения CSS к документу.
Внешняя таблица стилей
В статье Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.
Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением ., и ссылка на него из HTML-элемента 
<link>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Привет!</h2>
<p>Это мой первый опыт в CSS</p>
</body>
</html>Файл CSS может выглядеть следующим образом:
h2 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}Атрибут href элемента <link> должен ссылаться на файл в файловой системе.
В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/general/style.
css">
<link rel="stylesheet" href="../styles/style.css">
css">
<link rel="stylesheet" href="../styles/style.css">Внутренняя таблица стилей
Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style>, содержащейся внутри HTML <head>.
Таким образом, HTML будет выглядеть вот так:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Я пробую писать CSS</title> <style> h2 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h2>Привет!</h2> <p>Это мой первый опыт в CSS</p> </body> </html>
Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.
Встроенные стили
Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
</head>
<body>
<h2>Привет!</h2>
<p>Это мой первый опыт в CSS</p>
</body>
</html>Пожалуйста, не делайте этого!
Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело).
Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.
Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:
index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Пишите сюда свой код</p>
</body>
</html>styles.css:
p {
color: red;
}Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.
Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.
Читайте дальше и получайте удовольствие!
Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.
Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:
h2
a:link
.manythings
#onething
*
.box p
.box p:first-child
h2, h3, .intro
Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.
Спецификация
Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента
. special {
color: red;
}
p {
color: blue;
}
special {
color: red;
}
p {
color: blue;
}А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?
<p>Какого же я цвета?</p>В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.
p {
color: red;
}
p {
color: blue;
}А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.
Попрактикуйтесь сами — добавьте два правила для параграфа p { . в вашу таблицу стилей. Затем добавьте класс к одному элементу 
.. }p
Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.
Если говорить в общем, CSS строится на двух его составляющих:
- Свойства
- Определяют, какую характеристику вы желаете изменить (например,
font-size,width,background-color).
- Значения
- Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.
Свойство вкупе со значением называется CSS-объявлением.
CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.
Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h2, другое для селектора p. Правило для h2 выделено.
Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).
Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:
Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.
Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.
Функции
Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:
<div><div>The inner box is 90% - 30px.</div></div>.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}В результате получим это:
Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px.
Не могу же я сказать, чему равны 90% блока?!
В следующем примере будут различные значения для свойства <transform> rotate().
<div></div>.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn)
}Результат этого кода будет:
Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:
До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:
@import 'styles2.css';Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.
Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.
Некоторые свойства вроде font, background, padding, border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.
К примеру, это строка (комментарий не в счёт):
padding: 10px 15px 15px 5px;делает то же самое, что и эти четыре, вместе взятые:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
или эти:
padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;в то время как строка:
background: red url(bg-graphic. png) 10px 10px repeat-x fixed;
png) 10px 10px repeat-x fixed;делает то же, что и эти строки:
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.
Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.
Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.
Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.
Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.
body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
body {
font-size: 130%;
}
}
h2 {font-size: 1. 5em;}
div p, #id:first-line {
background-color: red;
background-style: none
}
div p{
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
5em;}
div p, #id:first-line {
background-color: red;
background-style: none
}
div p{
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.
p {
color: blue;
}Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.
Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.
В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:
body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
body {
font-size: 130%;
}
}
h2 {
font-size: 1. 5em;
}
div p,
#id:first-line {
background-color: red;
background-style: none
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
5em;
}
div p,
#id:first-line {
background-color: red;
background-style: none
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }
h2 {font-size: 1.5em;}
div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}
Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.
Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:
margin: 0 auto;
padding-left: 10px;А такие объявления не действительны:
margin: 0auto;
padding- left: 10px;Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.
Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.
Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.
wp_head() — функция WordPress
Функция, а точнее хук WordPress do_action('wp_head'), используется для заполнения тега <head>, а в него, как вы знаете, можно затолкать вот что:
- CSS,
- JavaScript (в том числе jQuery),
- какой-нибудь HTML-код, например мета-теги;
Возникает следующий вопрос — для чего собственно нужна эта функция, если я допустим могу открыть файл темы и вставить туда всё, что захочу вручную? Да, возможно у вас и получится это сделать, а вот плагины не могут редактировать файлы темы и движка — как раз для них и нужны все эти хуки.
Функцию wp_head() вы скорее всего найдёте в файле темы header.php, и она будет выглядеть следующим образом:
Сама по себе функция не имеет никаких параметров и ничего не возвращает.
Подключение CSS-стилей через wp_head()
Сразу хочу уточнить некоторые моменты относительно CSS — вы ведь знаете, что чем меньше общее количество подключенных на странице файлов стилей, тем меньше количество HTTP-запросов, а от них напрямую зависит скорость загрузки сайта. Так вот, перечисленные ниже способы подходят исключительно для написания плагинов, в остальных же случаях я рекомендую просто добавить ваши стили к основному файлу style.css, который находится в папке с текущей темой.
Способ 1. wp_enqueue_style()
Рассмотрим несложный пример. В нём мы подключим какой-нибудь произвольный файл стилей, находящийся в папке с темой, в поддиректории /css, где wp_head_style — что-то типо названия-идентификатора данного файла, можете назвать его как-нибудь по-своему.
И кстати, если вы не знаете, куда вставлять код из данного поста, то вставляйте в functions.php вашей текущей темы WordPress.
function css_to_wp_head() {
wp_enqueue_style( 'wp_head_style', get_stylesheet_directory_uri() . '/css/style-2.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'css_to_wp_head' );
'/css/style-2.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'css_to_wp_head' );Способ 2. Выводим стили непосредственно через HTML-тег <style>
По возможности советую использовать первый способ. Размещать стили непосредственно в HTML документе — не самая лучшая идея.
<?php
add_action("wp_head", "wp_head_css");
function wp_head_css() {
?>
<style>
#widget_1{display:none;}
</style>
<?php
}Аналогичным образом можно добавить и мета-теги, читайте подробнее чуть ниже.
Отключаем ненужные CSS из wp_head()
Некоторые плагины WordPress требуют для себя дополнительных стилей и поэтому подключают их к сайту указанным выше способом (как правило, это первый способ, т.е. через функцию wp_enqueue_style()).
Так вот, допустим какой-то вредный плагин наподключал вам на сайт всяких CSS, которые вам не нужны. Или допустим они вам всё-таки нужны, но вы хотите объединить их содержимое в один файл style. (ну как вариант). Как следует поступать в таких случаях?
css
На самом деле делается это легко и просто: во-первых, нужно определить название-идентификатор подключаемого файла, как правило, это первый параметр функции wp_enqueue_style(). То есть мы обшариваем файлы плагина в поисках участков кода, где задействована эта функция и смотрим на её первый параметр.
Почему нельзя удалить найденный кусок кода прямо из плагина? Да потому что нам нельзя изменять содержимое файлов плагинов и движка — это не профессионально. К тому же такие тёмные дела обычно чреваты последствиями.
Итак, с идентификатором файла разобрались, что дальше? А дальше в ход идёт функция wp_dequeue_style(). В итоге в файл functions.php у нас идёт примерно следующий код:
function remove_css_from_wp_head() {
wp_dequeue_style( 'тут_идентификатор_отключаемого_файла' );
}
add_action( 'wp_enqueue_scripts', 'remove_css_from_wp_head', 9999 ); // параметр 9999 можно опустить, это чтобы навернякаПодключение JavaScript через wp_head()
Способ 1.
wp_enqueue_script()Всё примерно так же, как и со стилями. С одним единственным «НО», о котором следует помнить — скрипты лучше помещать в самый конец сайта, перед закрывающим тегом </body>. О том, как это сделать, вы можете почитать в документации к функции wp_enqueue_script().
function js_to_wp_head() {
wp_enqueue_script( 'wp_head_js', get_stylesheet_directory_uri() . '/js/script.js', array(), null );
}
add_action( 'wp_enqueue_scripts', 'js_to_wp_head' );Способ 2. Выводим скрипты непосредственно через HTML-тег <script>
<?php
add_action("wp_head", "wp_head_js");
function wp_head_js() {
?>
<script>
var totalWidth = 500;
</script>
<?php
}jQuery в wp_head(). Конфликты.
Прежде чем читать этот пункт, хочу обратить ваше внимание, что очень часто то, из-за чего отказываются работать некоторые jQuery-эффекты — это несовместимость версий.
Если раньше ваш jQuery-скрипт работал, а теперь отказывается это делать, то сначала убедитесь, что у вас не изменилась подключаемая к сайту версия jQuery, а если изменилась, то протестируйте свой код на ранее установленной версии.
Подключение jQuery-версии по умолчанию
В WordPress уже зарегистрирован файл jQuery, он идёт вместе с движком (его версия меняется по ходу появления новых версий самого WordPress). Чтобы подключить стандартную версию файла, используем этот код:
function jquery_to_wp_head() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'jquery_to_wp_head' );Изменение подключаемой версии jQuery
Так вот, предположим, что с появлением новой версии данной библиотеки, ваши скрипты перестали работать. Как же нам восстановить старую версию на сайте? Ну, как вариант, для начала вы можете скачать её и загрузить в папку с темой (можно подключать напрямую через googleapis, это не вопрос).
После этого нам помогут функции wp_deregister_script() и wp_register_script():
function jquery_another_version() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/jquery-1.3.2.js', array(), '1.3.2' );
}
add_action( 'wp_enqueue_scripts', 'jquery_another_version' );Вообще я сторонник того, чтобы все скрипты находились не в шапке сайта, а в футере, где-нибудь перед закрывающим тегом </body>. Конечно, если без JavaScript ваш сайт отображается ужасно или не отображается вообще, тогда целесообразнее задействовать скрипты прямо перед загрузкой страницы, во всех остальных случаях — пусть находятся в футере.
Итак, переносим jQuery и все зависимые от него скрипты в футер:
function jquery_in_footer() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );Приоритет подключения js-файлов
Функции wp_enqueue_style(), wp_enqueue_script(), wp_register_style() и wp_register_script() также позволяют установить порядок подключения стилей и скриптов. В плане стилей это обычно не так важно, но в плане скриптов всё очень серьёзно. Например у нас есть файл jquery.js и какой-то плагин jquery.fancybox.js (к примеру). Ну так вот, jquery.fancybox.js должен обязательно подключаться после jquery.js, иначе ничерта работать не будет.
Как же установить приоритет? Легко — для этого нам понадобится третий параметр указанных выше функций. В данном параметре нам в виде массива нужно передать все названия-идентификаторы файлов, от которых зависит подключаемый файл. Рассмотрим на примере того же самого jquery.fancybox.js. Итак:
function jquery_fancybox() {
wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/jquery.fancybox.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'jquery_fancybox' );Более подробно — в документации вышеуказанных функций (всё это есть на моём блоге — просто перейдите по соответствующим ссылкам).
Мета-теги в wp_head()
Вы можете использовать wp_head() для добавления собственных мета-тегов. В примере я вывел тег description, значение которого я взял из произвольного поля поста (а вы например можете взять в качестве его значения первое предложения поста или содержимое поля «Цитата»).
<?php
add_action("wp_head", "wp_head_meta_description", 1);
function wp_head_meta_description() {
global $post;
if( is_single() ) {
echo "<meta name=\"description\" value=\"" . esc_attr( get_post_meta( $post->ID, 'seo_description', true ) ) ."\" />\n\r";
}
}Удаление некоторых стандартных тегов из wp_head()
RSD
Этот тег выглядит следующим образом <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ваш-сайт.ru/xmlrpc.php?rsd" /> Если вы публикуете\редактируете свои посты только через админку и не используете для этих целей какие-либо сервисы или клиенты (например приложения для iPhone или iPad), то можете удалить этот тег:
remove_action( 'wp_head', 'rsd_link' );
wlwmanifest
Вот такой тег: <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ваш-сайт.ru/wp-includes/wlwmanifest.xml" /> . Используется клиентом Windows Live Writer. Если не юзаете — удаляйте:
remove_action( 'wp_head', 'wlwmanifest_link' );
generator
Содержит текущую используемую версию WordPress: <meta name="generator" content="WordPress 3.5.1" />. Рекомендую к удалению.
remove_action( 'wp_head', 'wp_generator' );
Это не единственное место, где отображается версия движка. Если хотите полностью скрыть её, читайте этот пост.
Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Где находятся скрытые «inline css» в WordPress?
Это код, который я ввел в style.css в WordPress:
h4.list {
color: #FFFFFF;
font: bold 15pt Arial,sans-serif;
letter-spacing: -1px;
margin: 10px 10px 0;
padding-bottom: 8px;
}
И это то, что я не могу найти и удалить:
h2, h3, h4, h5, h5, h6, ul#top-menu a {
font-family: 'Arvo',Arial,sans-serif !important;
}
Пожалуйста, помогите мне найти файл, который вызывает это. Спасибо.
php css wordpress file inlineПоделиться Источник Niccolo 06 июля 2012 в 16:15
4 ответа
6
Откройте свой сайт в Chrome и посмотрите на Dev Tools (гаечный ключ > инструменты > Инструменты разработчика)
Перейдите на вкладку ресурсы и найдите эту строку h2, h3, h4, h5 , и вы найдете все ее экземпляры в файлах, используемых на сайте.
Если вы знаете элемент, к которому он применяется (подойдет любой h2 ), вы можете увидеть все примененные стили на вкладке элементы, и он сообщит вам имя файла и номер строки, в которой этот стиль определен.
Как я и подозревал,он находится в HTML индексной странице.
Поделиться sachleen 06 июля 2012 в 16:19
2
На самом деле просто добавьте !важно, и ваши правила css будут расставлены по приоритетам и применены
font: bold 15pt Arial,sans-serif !important;
Поделиться fedmich 06 июля 2012 в 18:01
1
Элегантные темы обычно имеют панель параметров темы для типографики. Возможно, вы сможете измениться там, а не в CSS. Как указывали другие, Firebug-отличный инструмент для обнаружения источника объявления.
Поделиться weevie833 07 июля 2012 в 02:32
- Визуальный композитор, где можно изменить CSS — WordPress
Я редактирования кастомизации wordpress что имеет визуальный композитор, установленной в нем. Я могу редактировать много css в Редакторе по умолчанию из WordPress. Но есть некоторые теги css, такие как: .vc_custom_1496470898482, которые я не знаю, где редактировать. Спасибо за вашу помощь!
- Отображение файлов WordPress enqueue style css в inline?
Привет всем, у меня есть этот сайт WordPress, который я хочу преобразовать в сайт AMP, одна из задач challnging-переписать css в inline. Итак, в фреймворке wordpress у нас есть этот файл functions.php, а внутри у нас есть функция wp_enqueue_style. /** * Proper way to enqueue scripts and styles */…
0
Я основываю это на демо-версии по адресу: http://elegantthemes.com/preview/eList/
Если вы посмотрите на строку 43, вы заметите следующее:
<style type='text/css'>h2,h3,h4,h5,h5,h6,ul#top-menu a { font-family: 'Arvo', Arial, sans-serif !important; }</style>
Вот что такое применение шрифта. Поскольку он находится непосредственно в разделе <head> , а также имеет применение !important , лучше всего просто удалить или прокомментировать его. Тогда вы можете свободно применять свои собственные шрифты, как вам заблагорассудится.
Поделиться Ryan 06 июля 2012 в 18:15
Похожие вопросы:
Где найти «et-custom-css» в wordpress?
У меня есть страница wordpress http://alterknit.staging.wpengine.com/drop-off , где некоторые из классов css подпадают под <style type=text/css id=et-custom-css> . Он также имеет комментарий…
Где находятся css (ы) в drupal 7?
Я новичок в drupal и пытался выполнить несколько общих задач css, таких как изменение цвета фона, цвета ссылок и т. д. Наверное, я не понял, где находятся drupal css. Я попытался изменить style.css…
Где может быть inline-css в WordPress
Я работаю над этой веб-страницей: http://hypoinvest.sk/ которая работает на WordPress с этой темой , если вы проверите исходный код, вы можете увидеть много встроенных-css, и я хочу знать, в каких…
Где находится файл CSS, вызванный в WordPress?
Я пытаюсь найти, где моя тема WordPress вызывает файл CSS, но должен ли он быть в заголовке? Я проверил там и не вижу никакой ссылки на него.
Как добавить фоновое изображение в inline CSS
Я пытаюсь добавить фоновое изображение в WordPress ( inline css), но не могу понять, как это сделать, так как WordPress поддерживает только inline CSS. Кто-нибудь может мне помочь, как это сделать?
Визуальный композитор, где можно изменить CSS — WordPress
Я редактирования кастомизации wordpress что имеет визуальный композитор, установленной в нем. Я могу редактировать много css в Редакторе по умолчанию из WordPress. Но есть некоторые теги css, такие…
Отображение файлов WordPress enqueue style css в inline?
Привет всем, у меня есть этот сайт WordPress, который я хочу преобразовать в сайт AMP, одна из задач challnging-переписать css в inline. Итак, в фреймворке wordpress у нас есть этот файл…
Импорт CSS файлов в WordPress
Я пытаюсь перенести свой шаблон HTML на WordPress. Пока я это делаю, я хочу сохранить свои файлы CSS там, где они находятся, и импортировать их в код. Я обнаружил, что могу использовать файл…
Где находятся фактические файлы .db, хранящиеся в wordpress
Я пытаюсь узнать больше о wordpress, и меня беспокоит этот вопрос. Я разместил свой сайт на bluehost и решил сделать резервную копию. Я сделал копию public_html и скачал ее, позже мне сказали в…
Скрытые Параметры Typeform
Мне нужна помощь для передачи скрытых параметров embeded typeform со страницы wordpress, где я интегрировал эту форму. url: https://admin.typeform.com я создал форму на этом сайте и использовал эту…
Вопрос пользователя алекс щукин в уроке «Каскад», курс «Основы…
алекс щукин
Подключите CSS-файл style.css, лежащий в директории на два уровня выше. Мой вариант: ../css/style.css. Больше ничего в голову не приходит)
Елена Бандарчик
../../style.css нам же не известны названия папок)
21
R. D.
Вот Елена правильно говорит 🙂 откуда взялось «css»?
3
алекс щукин
по примеру из урока
0
R. D.
В уроке конкретный пример, да — там у нас папка называется css. Но задание — обратиться не к конкретной папке, а просто на два уровня выше текущего места. Ни в какую папку заходить не нужно. .. всегда означает «на уровень выше. Значит ../.. это на два уровня выше, ../../../ — на три, и так далее.
17
user-e72346c0d1e0624e
Подключите CSS-файл style.css, лежащий в директории на два уровня выше. Каков ответ? Глюк теста!!!
0
Альберт Хайрутдинов
../css/style.css.не срабатывает не пойму, что делать
0
Юрий Вертиев
../../slyle.css не працюе
0
Андрей Бабинцев
Юрий, у вас ошибка в слове style, вы написали slyle, а с правильным словом все работает: ../../style.css
5
Степан Киселев
))) весело, названия папок то не нужны, вот и логическое мышление…
1
Николай —
Почему к заданию не подходит такой ответ ./../../style.css
1
Сергей Ровнов
Вот сделал такое же решение «./../../style.css», а мне «неправильно». Точка отсчета указывается более явно.
0
Николай —
В этом и вопрос почему «не правильно»? например, в ubunte это действительный путь
0
Сергей Епишков
Может сначала нужно объяснить людям как осуществляется переход по папкам, и что значат — ./../- такие вот записи. А потом уже вставлять такие вопросы в тест. Нет, а?
1
Юрий Вертиев
Это было в курсе по баш
0
Сергей Епишков
Да! Вы совершенно правы. Только курс по баш идет после основ html и введения веб разработку. Во всяком случае если проходить курсы в соответствии с программой обучения по бэкенд
1
Vladimir Marakhovich
в самом нижнем примере кода пропущен пробел.
1
Eugene Sinitsyn
Мне кажется некорректно давать такое задание, не объяснив в этом уроке про относительные пути, про . и ... Данные вещи обясняются сильно позже в курсе https://ru.hexlet.io/courses/cli-basics/lessons/navigation/theory_unit и здесь этого знать просто нельзя. Если это задание проходится без проблем — значит люди уже были в курсе про то, что .. — это переход на один уровень вверх.
7
Артем Артемьев
2 вопрос непонятный. Дополните как-нибудь
1
Александр Бояр
Я подумал, что один такой баран 🙂
2
user-4f04c8511a95ae43
Приветствую, коллега))))
0
Артем
Вопрос написан в логике человека знающего CSS. Но здесь люди УЧАТСЯ, они еще НЕ ЗНАЮТ, надо бы формулировать вопросы с учетом этого нюанса.
0
основы CSS — Основы CSS — HTML Academy
CSS-правила
CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:
селектор {
свойство: значение;
свойство: значение;
}Для комментариев в CSS используются символы /* и */.
Селекторы
Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.
.feature-kitten {
padding-top: 60px;
}Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.
h2 { color: red; }
.info { color: blue; }На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.
Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую.
Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:
nav a {…}
.menu ul {…}
.post .title {…}Свойства и значения
Список свойств и значений находится внутри фигурных скобок CSS-правила. Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно.
.feature-kitten {
padding-top: 60px;
}Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.
Наследование
Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.
Составные свойства
В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. Например, свойство font. Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.
font: 16px/26px "Arial", sans-serif;Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.
Типы значений: абсолютные и относительные
Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют. Примеры абсолютных единиц измерения:
font-size: 1cm;
font-size: 10mm;
font-size: 38px;Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.
Стили по умолчанию
Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.
Каскадирование
Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. Например, есть такой элемент в разметке:
<p>Зелёный - мой любимый цвет</p>Заданные стили:
.beloved-color { color: green; }Браузерные стили:
margin: 1em 0;Итоговые стили:
color: green;
margin: 1em 0;Конфликт свойств
На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:
ul { list-style: disc; }
.blog-navigation ul { list-style: none; }Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств. Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг. Вот эти шаги:
- Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
- Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
- Побеждает то свойство, которое находится ниже в коде.
Каскад работает и внутри CSS-правил.
Встраивание и подключение внешних стилей
Внешние стили подключаются через тег <link>
<link rel="stylesheet" href="style.css">Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:
<head>
<style>
CSS-код
</style>
</head>Такой способ используется для оптимизации загрузки страницы, ведь в таком случае браузер не будет отправлять дополнительных запросов на сервер.
Встраивание в атрибут style:
<div></div>Свойства и значения, прописанные таким образом, применятся точечно к одному элементу.
Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.
Продолжить
Тег | HTML справочник
Поддержка браузерами
Описание
HTML тег <style> используется для внедрения CSS кода непосредственно в HTML-документ, таким образом формируя внутреннюю таблицу стилей. Так как внутри тега содержится информация предназначенная только для браузеров, а не для пользователей, он должен быть расположен внутри тега <head>.
Тег <style> обычно размещают прямо перед закрывающим тегом </head>. Если на странице используется код JavaScript, его обычно добавляют после таблиц стилей. Часто программы JavaScript полагаются на CSS, поэтому, добавляя таблицы стилей первыми, вы гарантируете, что код JavaScript будет располагать всей необходимой для своего выполнения информацией.
Примечание: любой HTML-документ может содержать неограниченное количество элементов <style>, но если вы хотите подключить внешний файл с таблицей стилей, используйте для этого тег <link>, он создает связь между текущим документом и внешним ресурсом.
Атрибуты
- type:
- Для предоставления информации об используемом внутри элемента языке используется атрибут type. Если этот атрибут присутствует, его значение должно быть допустимым MIME-типом, который определяет стиль языка. Значением по умолчанию, при отсутствие атрибута type, является «text/css». Пример »
- media:
- Определяет, под какое устройство оптимизирован стиль CSS, он используется для указания, что стиль оптимизирован под определенное устройство (пример: iPhone, принтер). Если атрибут не указан, то по умолчанию подразумевается, что таблица стилей оптимизирована под любые устройства.
- scoped:
- Указывает, что стили будут применяться к дереву элементов, корнем которого является элемент, внутри которого находится элемент <style>, а не ко всему документу. При отсутствии данного атрибута элемент должен быть расположен в заголовочном разделе документа — внутри тега <head>. Возможные значения логического атрибута scoped:
<style scoped> <style scoped="scoped"> <style scoped="">
Тег <style> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
style {
display: none;
}
Пример
<html>
<head>
<style type="text/css">
h2 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Абзац.</p>
</body>
</html>
Результат данного примера в окне браузера:
Как редактировать CSS шаблона в Joomla?
Друзья, статья под названием «Как редактировать CSS шаблона в Joomla?» является первой статьей нового раздела моего сайта, посвященного вопросами оптимизации и создания сайтов — CSS. Таким образом, я расширяю круг своих интересов в направлении создания сайтов и готов уже поделиться некоторыми решениями. Да и без элементарных знаний в веб-дизайне очень трудно сделать красивый сайт на заказ…
Сегодня я хочу рассказать о несложном, но очень полезном алгоритме редактирования CSS стилей шаблонов для сайтов на Joomla. Я бы сказал, что сам алгоритм намного универсальнее и подходит для любых типов движков и сайтов вообще, просто примеры я буду приводить именно редактируя дизайн шаблонов сайтов на Joomla, поскольку этим я довольно часто занимаюсь в последнее время.
Зачем редактировать CSS стили шаблонов?
Конечно, если Вы читаете эту статью, значит причина у Вас уже имеется, но многие только догадываются, зачем это нужно. Поэтому, например, можно сказать, что Вы создали сайт себе или кому-то, добавили интересующий Вас шаблон, но в итоге одна или несколько деталей Вас не устраивает по какой-то причине, например:
- очень большой размер шрифта заголовков в стилях шаблона;
- не устраивает цвет фона шаблона или отдельных элементов дизайна;
- хочется изменить размер или расположение определенных элементов или полей, логотипа например и т.д.
Вот все эти казалось бы мелочи очень часто огорчают веб-мастеров и заставляют в итоге принять решение или о найме веб-дизайнера для его правки, или об установке другого шаблона. Данная статья поможет Вам самостоятельно и бесплатно редактировать шаблоны сайтов.
Где находится нужный CSS файл?
В современных шаблонах для Joomla и других CMS как правило содержится много папок, в которых располагаются файлы, обслуживающие работу определенных модулей, вывод стилей и т.д. Практически всегда, отвечающие за дизайн шаблона файлы находятся в папках шаблона под названием CSS. В таких шаблонах может быть несколько папок с таким названием, да и в самих папках можеть находиться много файлов с расширением .css и нужно четко понимать, какой именно файл нужно редактировать.
Для этого, в браузере Firefox есть такой полезный инструмент как исследование элементов. Далее буду приводить примеры. Давайте отредактируем положение, высоту и цвет фона поля, предназначеного для выведения шапки сайта.
Итак, на интересуемом участке, который нужно отредактировать (у нас это будет шапка сайта), кликните правой кнопкой мыши. В предложенном меню выберите пункт Исследовать элемент. После этого исследуемый элемент будет выделен пунктирной рамкой и откроется дополнительная консоль, где будет выведен код страницы и самого элемента (напомню, в примере шапка сайта) — смотрите скриншот ниже.
Должен сразу заметить, что у меня на ноутбуке установлена ОС Lubuntu, поэтому графика программ и приложений у Вас может отличаться, но это не имеет принципиального значения.
Справа видим HTML-код шаблона, но поскольку нам нужно отредактировать CSS-файл, отвечающий за стиль отображения шапки сайта, переходим сразу в него, нажав на его названии (кликните там, где показано в скриншоте выше красным). В итоге нам открывается нужный CSS файл (смотрите скриншот ниже).
Удобная штука! Вам сразу же показан нужный участок кода, что значительно облегчает работу! Но перед тем как начать фокусы с дизайном, давайте в основных понятиях проанализируем тот кусок кода, который будем редактировать. Вот ниже его и приведу:
td.logoheader {
margin: 0;
padding: 0;
background : url(../images/123.png) #4B6B94 no-repeat bottom center;
height : 146px;
width : 100%;
}
td.logoheader — имя шапки сайта в CSS-файле
background — фон шапки сайта, который состоит из картики (url(../images/123.png)) и из html-кода цвета фона (#4B6B94), а также из правила, которое указывает картинке не тиражироваться (no-repeat) и находиться внизу по центру (bottom center)
height — высота шапки сайта в пикселях (в данном случае — 146px)
width — ширина шапки сайта по отношению к шаблону, в примере выражена в % (100%)
Для изменения цвета фона, размера шапки сайта и самой фоновой картинки мы будем вносить изменения в параметры background и height, остальные не будем трогать.
Где следует вносить изменения в CSS-файл?
Самое интересное и приятное заключается в том, что изменения мы будем вносить в код прямо в редакторе таблиц стилей в браузере Firefox (смотрите второй скриншот). И что очень удобно, изменения будут отображаться в реальном времени и только для Вас! Таким образом Вы сможете провести эксперименты, найти оптимальное решение в дизайне и уже только потом внести остаточные изменения в CSS-файл шаблона! Согласитесь — это избавляет от массы проблем 🙂
Для наглядности, давайте сделаем следующие изменения:
- сделаем высоту шапки сайта в 200 пикселей
- поменяем цвет фона, например, на белый (html-код белого цвета #fff)
- переместим положение картинки влево и вверх
- ну и можем поменять саму картинку (второй вариант я заранее забросил по FTP на сервер в ту папку, в которой лежит существующая актуальная картинка. Название новой картинки header.jpg)
Кстати, чтобы точно узнать путь к папке, в которой лежит нужное изображение, нужно просто на самом изображении в браузере кликнуть правой кнопкой мыши, далее выбрать пункт Открыть фоновое изображение и в браузерной строке увидите полный путь от домена до названия самого файла 🙂
И еще раз напомню, все изменения в код я вношу прямо в редакторе браузера, поэтому результат всех вышепредложенных изменений смотрите в скриншоте ниже.
С какими проблемами можете столкнуться при окончательном редактировании CSS-файла шаблона Joomla?
Вроде уже потренировались в редакторе браузера, определились с изменениями в дизайне. Заходите через FTP-клиент на сервер или через менеджер файлов хостинга, скачиваете нужный CSS-файла шаблона, открываете его в Notepad++ (или в текстовом редакторе JuffEd, если у Вас Ubuntu), вносите изменения в сам файл, сохраняете, заливаете измененный файл на сервер но никаких визуальных изменений в итоге не произошло? Что нужно сделать:
- проверьте права доступа к изменяемому CSS-файлу. Если стоит chmod 444 или 644, то измените хотя бы на 755. После внесения изменений верните значение chmod в прежнее состояние.
- обновите кеш браузера — нажмите одновременно клавиши CTRL+F5
Эти простые манипуляции должны помочь 🙂
На этой позитивной ноте заканчиваю статью «Как редактировать CSS шаблона в Joomla?», которая имеет универсальный алгоритм и может быть полезной для всех веб-мастеров, не зависимо от CMS сайта. Если Вам понравилась статья, можете поделиться ею в соцсетях, возможно, она будет для кого-то не менее полезной:) Успехов Вам в веб-дизайне и до встречи в следующих статьях!
А если у Вас возникли вопросы к данной статье, пожалуйста, спрашивайте через форму комментариев ниже 🙂
Как найти файл CSS WordPress
17 января 2014 г.Тема, купленная на торговой площадке, никогда не может на 100% соответствовать тому, как вы задумывали, как должен выглядеть ваш веб-сайт. Всегда есть мелочи, которые нужно изменить.
Трэвис задал мне вопрос о том, где можно редактировать файлы CSS темы WordPress, и я подумал, что просто поделюсь им с вами.
Если вы купили тему WordPress и хотели изменить внешний вид веб-сайта в некоторых областях, этот пост для вас.
От чего зависит внешний вид веб-сайта
Каскадные таблицы стилей (более известные как CSS или таблицы стилей) — это файл, который сообщает нашим браузерам, как должен выглядеть веб-сайт.
Когда вы посещаете веб-сайт, ваш браузер загружает этот файл css вместе с другими важными документами и показывает его вам.
В файлах CSS содержится код, который сообщает вашему браузеру, как отображать (другими словами, показывать) веб-страницу. Пример оператора CSS —
/ * Это говорит нашему браузеру, что он должен оставлять пробел в 18 пикселей после каждого абзаца * / п { нижнее поле: 18 пикселей; }
В CSS есть намного больше, чем небольшой фрагмент кода выше, и это не относится к теме этой публикации.Если вы новичок в CSS, я бы посоветовал хотя бы проверить часть CSS в Code Academy, прежде чем пытаться изменить какие-либо файлы CSS в своей теме wordpress.
Где находится этот файл CSS
Найти этот файл CSS может быть немного сложно, и это зависит от того, решил ли автор темы поместить файлы CSS в другую папку (я лично это делаю).
Вы, вероятно, не уверены, находятся ли файлы CSS по умолчанию, поэтому попробуйте следующие методы.
СЕРЬЕЗНОЕ ПРИМЕЧАНИЕ: Независимо от того, какой метод вы использовали для редактирования файлов CSS, всегда сохраняйте резервную копию, прежде чем вносить какие-либо изменения! Если вы случайно взломаете свой сайт, это будет большой катастрофой! Вы, наверное, не хотели бы, чтобы это произошло 🙂
Метод 1
Перейдите в «Внешний вид»> «Редактор» и щелкните style.css.
Вы можете редактировать файлы прямо из этого окна и нажать «Сохранить», когда закончите. Не забудьте очистить кеши, если вы используете какие-либо CDN или плагины кеширования.(Не уверены? Проверьте свои плагины в WordPress и посмотрите, активировали ли вы плагин с кеш-словом.
Метод 2
Если вы видели очень мало строк кода, как на изображении ниже, вам не повезло. Автор темы решил разместить файл в другом месте.
Для этого метода вам потребуется доступ к службе хостинга вашего домена (например, Dreamhost, Hostgater и Bluehost).
Войдите в свою службу хостинга домена и выберите файловый менеджер через cPanel.Выберите последний вариант и выберите корень документа для вашего веб-сайта.
Перейдите в wp-content> themes> ВАШЕ ИМЯ ТЕМЫ и попробуйте найти папку, в которой находятся файлы css. Обычно их называют таблицами стилей CSS или стилями.
Затем вы можете загрузить его и отредактировать с помощью программы для редактирования текста на вашем компьютере.
После редактирования перейдите в тот же каталог, в котором вы нашли файлы CSS, и нажмите «Загрузить».
Конец
Это два метода поиска и редактирования файлов CSS вашей темы.Они определенно не кодируют передовой опыт, и такое редактирование часто вызывает неодобрение.
Но послушайте, вам не нужно беспокоиться о передовых методах, если вы не собираетесь разрабатывать темы.
Если вы хотите узнать об этих вещах, связанных с кодом, в ближайшие пару недель у меня появится кое-что особенное. Присоединяйтесь к моему списку рассылки ниже и получите информацию об этом из первых рук.
Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере.Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!
Понять источник стиля страницы
В HubSpot есть несколько мест, где стили контента могут быть добавлены, и они применяются в определенном порядке в зависимости от того, где они были добавлены. Ниже вы узнаете, как применяется стиль, как найти стиль на действующей странице и как получить помощь с редактированием дизайна.
Узнайте, как применяется стиль
СтильCSS в HubSpot применяется в порядке, в котором он установлен в HubSpot, как указано ниже.Например, стиль, установленный в глобальной таблице стилей, переопределяется стилем, установленным на определенной странице.
- Пользовательский модуль CSS
- Таблицы стилей, прикрепленные к модулю.
- CSS добавлен в раздел CSS модуля.
- CSS внутри разметки HubL модуля в блоке require_css
- Таблицы стилей, добавленные в шаблон через блок require_css
- Таблицы стилей по умолчанию HubSpot (например, layout.css)
- Таблицы стилей, прикрепленные к шаблону
- Таблицы стилей, прикрепленные на вкладке настроек вашей страницы
- Таблицы стилей прикреплены в ваших настройках для всех доменов
- Таблицы стилей прикреплены в ваших настройках для определенного домена
- CSS добавлен в теги ...
Это сделает все абзацы на странице красными, а все ссылки - синими.
Хотя предпочтительнее испачкать наш HTML встроенным представлением, также обычно предпочтительнее хранить файлы HTML и CSS отдельно, и поэтому мы остаемся с нашим спасителем…
Внешний
Внешние стили используются для всего многостраничного веб-сайта. Существует отдельный файл CSS , который будет выглядеть примерно так:
п { красный цвет; } a { цвет синий; }Если этот файл сохранен как «style.css »в том же каталоге, что и ваша HTML-страница, тогда на нее можно будет ссылаться в HTML следующим образом:
Пример CSS ...Применить!
Чтобы получить максимальную отдачу от этого руководства, было бы неплохо опробовать код по мере продвижения, поэтому запустите новый новый файл в текстовом редакторе и сохраните пустой документ как «style.css» в том же каталог как ваш HTML-файл.
Теперь измените свой HTML-файл так, чтобы он начинался примерно так:
Моя первая веб-страница ...Сохраните файл HTML. Теперь это ссылка на файл CSS, который на данный момент пуст, поэтому ничего не изменит. По мере прохождения учебного курса CSS для начинающих вы сможете добавлять и изменять файл CSS и видеть результаты, просто обновляя окно браузера, в котором находится HTML-файл, как мы это делали раньше.
Как связать файл таблицы стилей (CSS) с файлом HTML
Встраивание правил CSS в HTML может занять много времени и энергии. К счастью для вас, есть другой способ сделать это. Здесь мы узнаем, как связать CSS с файлом HTML. Используя следующий метод, вы сможете наиболее эффективно комбинировать CSS и HTML.
Причины использования внешнего файла таблицы стилей CSS для программирования HTML
Каскадная таблица стилей (CSS) - это язык таблиц стилей, который управляет визуальным представлением веб-сайта.Обычно используемый с такими языками разметки, как HTML, CSS позволяет стилизовать каждый элемент HTML и придать всему сайту более привлекательный вид.
Хотя есть много способов добавить CSS в HTML, самый простой способ сделать это - напрямую добавить все правила CSS в HTML. Несмотря на это, этот метод CSS имеет много недостатков. Помимо раздувания кода повторяющимися правилами CSS, его редактирование отнимает много времени, поскольку изменения, внесенные в один файл, не будут применяться к другим.
Чтобы избежать этих проблем, вы можете поместить стили CSS в файл .css и свяжите его с файлами HTML. Таким образом, один файл CSS можно использовать для стилизации многих страниц HTML.
Вот преимущества связывания файла CSS с HTML:
- Эффективное по времени - вам нужно только создать один файл CSS для стилизации всех файлов HTML.
- Более быстрое время загрузки - сайт будет кэшировать файл CSS для следующего посещения ваших посетителей.
- Улучшение SEO - сохранение стилей CSS в другом файле делает файл HTML более кратким и читаемым для поисковых систем.
Как подключить внешнюю таблицу стилей CSS к файлу HTML
Чтобы связать CSS с файлом HTML, мы используем тег , который вы помещаете в раздел HTML . Ссылка будет выглядеть так:
Вот разбивка атрибутов, содержащихся в ссылке:
- rel - определяет связь между файлом, в котором размещена эта команда, и файлом, определенным в атрибуте href .Стандартное значение этого атрибута - таблица стилей .
- тип - определяет содержимое связанного файла. В этом руководстве мы устанавливаем для этого атрибута значение text / css . Однако вы можете вообще пропустить его, если используете HTML5.
- href - указывает расположение файла CSS, который вы хотите связать с HTML. Если файл CSS находится в том же каталоге, что и файл HTML, вам нужно только ввести имя файла. В противном случае вам необходимо указать имя папки, в которой вы храните файл CSS (пример: CSS / stylesheet.css ).
- media - указывает тип носителя, для которого оптимизированы правила CSS. В этом руководстве мы используем значение screen , чтобы подразумевать его использование для экранов компьютеров. Если вы хотите применить правила CSS к печатным страницам, вы можете установить значение print .
Включив указанную выше ссылку в свой HTML-файл, сохраните изменения и введите URL-адрес своего веб-сайта в браузере. Стили, записанные в файле CSS, должны изменить внешний вид вашего сайта.
Заключение
Хотя есть много способов связать CSS с HTML, лучший способ сделать это - использовать тег HTML . Используя этот метод, вы сэкономите время и код более эффективно, не влияя на визуальное представление вашего веб-сайта
Что вы думаете об этом руководстве? Дайте нам знать в комментариях ниже!
Меркис - администратор серверов и эксперт по Linux в Hostinger. Он поддерживает все в рабочем состоянии, решая сложные проблемы управления сервером.Кроме того, он большой поклонник технологии блокчейн, веб-разработки и бодибилдинга.
Как использовать для добавления правил стиля CSS в документы HTML »
В тегах HTML
Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше- Элемент
- Запугать CSS? Полное руководство, чтобы избавиться от страха
- Что делает
Как использовать для добавления правил стиля CSS в документы HTML? - Элемент
Используйте CSS, чтобы:
- Стиль текста, списков, таблиц и т. д.
- Управление макетом страницы,
- Определите любой аспект представления веб-страницы.
Используйте CSS для:
- Стиль текста, списков, таблиц и т.д.,
- Макет страницы управления,
- Определите любой аспект представления веб-страницы.
Стилизация HTML-документа
Есть три способа добавить CSS в HTML-документ:
Тег
Рекорд домашнего бега за все время
<таблица>Игрок Хоум-раны Команда Барри Бондс 762 Гиганты Хэнк Аарон 755 Храбрые Бэйб Рут 714 Янки Уилли Мэйс 660 Гиганты
- Создайте новый файл и сохраните его как
StyleSheet.cssв том же каталоге. (Вы можете дать файлу любое имя, если у него есть расширение .css). - Переместите все правила CSS из файла HTML в файл
StyleSheet.css. Не копируйте теги стиля.h2 { выравнивание текста: центр; размер шрифта: 1em; цвет: # 009; нижнее поле: .3em; оформление текста: подчеркивание; } Таблица { маржа: .3em; ширина: 290 пикселей; } th { заполнение: .2em; } td { отступ слева: .5em; отступ справа: .5em; граница: 1px solid # 900; цвет фона: #ffc; } #trHeader { оформление текста: подчеркивание; цвет: # 900; } .centerCell { выравнивание текста: центр; } - Удалите блок стиля
из файла HTML. - В HTML-файле добавьте тег
linkпосле закрывающего тегаtitle, который указывает наStyleSheet.css.
Атрибуты включают:hrefуказывает на расположение внешней таблицы стилей relдолжен быть установлен как «таблица стилей» для связывания таблиц стилей typeдолжен быть установлен "text / css" для связи с каскадными таблицами стилей - Откройте HTML-файл в браузере.Должно получиться так:
Автор: Крис Минник
Крис Минник, соучредитель WatzThis ?, курировал разработку сотен веб- и мобильных проектов для клиентов, от малого бизнеса до некоторых крупнейших компаний мира. Плодотворный писатель, Крис является автором и соавтором книг и статей по широкому кругу тем, связанных с Интернетом, включая HTML, CSS, мобильные приложения, электронную коммерцию, электронный бизнес, веб-дизайн, XML и серверы приложений.Его опубликованные книги включают «Приключения в кодировании», «JavaScript для детей для чайников», «Написание компьютерного кода», «Кодирование с помощью JavaScript для чайников», «Начало HTML5» и «CSS3 для чайников», «Webkit для чайников», «Библия для сертификации дизайнеров электронной коммерции CIW» и XHTML.
О Webucator
Webucator проводит обучение под руководством инструктора для студентов из США и Канады.