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

[SeredinPlus]

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

 

 

[robot]

Советую обратить внимание на следующее:

1. Чтоб не наследовались стили css
2. Как подключить таблицу стилей в HTML 5
3. Что такое стили CSS и с чем их едят
4. Html верстка на конкретном примере
5. Ваше мнение относительно оформления CSS

[Evgeniy3200]

@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> 

данный код напрямую к тегу подключает стиль класса.

 

Если остались вопросы, пишите, будем разбираться, а то я технологию знаю, но могу не совсем правильными понятиями объяснить

[SeredinPlus]

@Evgeniy3200,

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

[Info-Mans]

Найдите в файле 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

[SeredinPlus]

@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;
} 

а мне нужно для этого виджета особые правила прописать

[yury]

Имеется сайт. На главной есть заголовки 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

[SeredinPlus]

@yury, 

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

[yury]

@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

[SeredinPlus]

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

[robot]