Имеется сайт. На главной есть заголовки H1 и H2, но отображаются они также, как заголовки в виджете. Вопрос, какой код добавить в css чтобы заголовки были побольше и как потом его применить, чтобы он распространялся именно на заголовки этой страницы? Примитивные знания html у меня имеются, а вот css нет, прошу вашей помощи
-
Тема закрыта
Добавление стиля CSS
#1
SeredinPlus
-
- Пользователь
- 237 сообщений


Отправлено 19 Апрель 2015 - 21:32
- 0
robot
-
- Пользователь PRO
- 2 652 сообщений
- Не работают стили CSS в wordpress
- Чтоб не наследовались стили css
- Как подключить таблицу стилей в HTML 5
- Что такое стили CSS и с чем их едят
- Правильно ли составлены стили CSS
#2
Evgeniy3200
-
- Пользователь PRO
- 1 438 сообщений
Отправлено 19 Апрель 2015 - 22:12
@SeredinPlus, вам необходимо добавить класс в базовом файле CSS. Обычно в корне сайта есть отдельная папка, где содержаться все классы, часто называется style.css. Открывается этот файл и туда необходимо внести еще один класс.
Есть несколько вариантов, самые распространенные или создание совершенно нового класса (что рекомендуется) или создать класс, который будет действовать в тегах h1. Но второй способ лучше не использовать, т.к. возможно классы некоторые уже прописаны для данных тегов. Лучше всего создать новый и потом его в нужном месте подключать.
прописываем в файле стиля новый класс, к примеру:
noviy_class { font-size: 16pt; /* Размер шрифта в пунктах */ color: white; /* Цвет шрифта если надо, к примеру */ }
Далее, уже в самом теге нужно подключить прописанный выше стиль, делается это добавлением атрибута "class" в тег h1-h2 (можно описанным выше путем создать класс для каждого тега отдельный со своим форматированием). Прописываем в html следующее:
<h1 class="noviy_class">Тут текст заголовка</h1>
как видно выше, мы тегу h1 задали параметры класса, которые беруться из файла, где прописали параметры применяемого класса.
Еще вариант задать стиль CSS напрямую тегу, но это придеться везде прописывать и может незначительно подгрпужать страницу. Но если на всем сайте только к примеру в двух местах нужно сделать, то этот вариант тоже сойдет:
<h1 style="font-size: 16pt; color: green">Тут текст заголовка</h1>
данный код напрямую к тегу подключает стиль класса.
Если остались вопросы, пишите, будем разбираться, а то я технологию знаю, но могу не совсем правильными понятиями объяснить
- 2
Если вы можете наугад в полной темноте пробраться к собственной кровати, ни разу не ушибившись, значит, пора путешествовать!
#3
SeredinPlus
-
- Пользователь
- 237 сообщений
Отправлено 20 Апрель 2015 - 01:16
@Evgeniy3200,
применил первый вариант на сайте, почему-то не работает, можете сами проверить
- 0
#4
Info-Mans
-
- Пользователь
- 1 237 сообщений
Отправлено 20 Апрель 2015 - 01:52
Найдите в файле css код
.site-header h1 { font-size: 1.71429rem; line-height: 2; }
И поменяйте его на
.site-header h1 { font-size: 25px; line-height: 2; }
Для регулирования размеров текста просто меняйте величину font-size
P.S. Если я вас правильно понял, конечно Если что спрашивайте подскажу)
Сообщение отредактировал Info-Mans: 20 Апрель 2015 - 01:54
- 1
»»» Начни изменять свою жизнь с внешнего вида «««
Буду рад вашим комментариям на блоге!
#5
SeredinPlus
-
- Пользователь
- 237 сообщений
Отправлено 20 Апрель 2015 - 07:31
@Evgeniy3200, @Info-Mans,
там смысл в том, что этот основной текст выводится виджетом и для него действуют общие правила виджета вроде
.widget-area .widget .widget-content { font-size: 13px; } .widget-area .widget h2 { margin-bottom: 5px; } .widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget { font-size: 13px; line-height: 1.846153846; padding:3px 0px; }
а мне нужно для этого виджета особые правила прописать
- 0
#6
yury
-
- Пользователь
- 642 сообщений
Отправлено 20 Апрель 2015 - 08:08
Размер шрифтов заголовков на вашем сайте определяется в инлайновой таблице стилей. Т.е. эти стили указаны прямо в внутри html файла. Конкретно, стиль для заголовка h1 страницы (это который "Гражданское право: понятно и актуально") указан вот в этих строках:Имеется сайт. На главной есть заголовки H1 и H2, но отображаются они также, как заголовки в виджете. Вопрос, какой код добавить в css чтобы заголовки были побольше и как потом его применить, чтобы он распространялся именно на заголовки этой страницы? Примитивные знания html у меня имеются, а вот css нет, прошу вашей помощи
.site-header h1 { font-size: 24px; font-size: 1.714285714rem; line-height: 2; }Размер шрифта указан дважды (для обратной совместимости для относительных единиц измерения "rem", которые появились только в css3 и не работают в старых браузерах, в том числе IE < 9), для современных браузеров действует, естественно, последнее правило: font-size: 1.714285714rem;
Стиль для заголовка h2 страницы (это который "для подготовки студентов образовательных учреждений") указан вот в этих строках:
.site-header h2 { font-weight: normal; font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; color: #777; }Здесь тоже действует только второе правило про размер шрифта: font-size: 0.928571429rem;
И да. Эти стили не влияют на размеры других заголовков.
Сообщение отредактировал yury: 20 Апрель 2015 - 08:21
- 0
#7
SeredinPlus
-
- Пользователь
- 237 сообщений
Отправлено 20 Апрель 2015 - 16:42
@yury,
я не про заголовок блога, а про заголовки в статье ниже
- 0
#8
yury
-
- Пользователь
- 642 сообщений
Отправлено 20 Апрель 2015 - 17:43
@SeredinPlus,
Для заголовков в статье ниже у вас прописаны классы (в той же в инлайновой таблице стилей), но прописаны с ошибкой, вот тут:
h1_class { font-size: 17pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ } h2_class { font-size: 15pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ } h3_class { font-size: 14pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ }
.h1_class { font-size: 17pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ } .h2_class { font-size: 15pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ } .h3_class { font-size: 14pt; /* Размер шрифта в пунктах */ color: grey; /* Цвет шрифта если надо, к примеру */ }
Сообщение отредактировал yury: 20 Апрель 2015 - 17:45
- 2
#9
SeredinPlus
-
- Пользователь
- 237 сообщений
Отправлено 20 Апрель 2015 - 17:48
Парни, всё получилось, всем огромный респектос за помощь. Тему можно закрывать
- 0