Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

  • Закрытая тема Тема закрыта

Добавление стиля CSS

#1 SeredinPlus

SeredinPlus
  • Пользователь
  • 235 сообщений
  • Репутация: 8
0

Отправлено 19 Апрель 2015 - 21:32

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


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Не работают стили CSS в wordpress
  2. Чтоб не наследовались стили css
  3. Как подключить таблицу стилей в HTML 5
  4. Что такое стили CSS и с чем их едят
  5. Как подключить новый стиль css к шаблону WP

#2 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 149 сообщений
  • Репутация: 268

Отправлено 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

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 20 Апрель 2015 - 01:16

@Evgeniy3200,

применил первый вариант на сайте, почему-то не работает, можете сами проверить 


  • 0

#4 Info-Mans

Info-Mans
  • Пользователь
  • 1 177 сообщений
  • Репутация: 112

Отправлено 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

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 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

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 20 Апрель 2015 - 08:08

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

Размер шрифтов заголовков на вашем сайте определяется в инлайновой таблице стилей. Т.е. эти стили указаны прямо в внутри html файла. Конкретно, стиль для заголовка h1 страницы (это который "Гражданское право: понятно и актуально") указан вот в этих строках:
.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

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 20 Апрель 2015 - 16:42

@yury

я не про заголовок блога, а про заголовки в статье ниже


  • 0

#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 20 Апрель 2015 - 17:48

Парни, всё получилось, всем огромный респектос за помощь. Тему можно закрывать


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru