Блог

Главная - Вопросы по программированию - Удалить высоту строки начальной загрузки из всех тегов H1

Удалить высоту строки начальной загрузки из всех тегов H1

#javascript #html #css

#javascript #HTML #css

Вопрос:

Когда я запускаю этот HTML / CSS, нижняя часть букв, таких как y и g, обрезается из-за CSS высоты строки, унаследованного от Bootstrap CSS.

 .font2 { 
    font-family: 'Abril Fatface', cursive;
    font-size: 12rem;
}

.gradient-text { 
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #E9D66B, #4997D0);
} 
 <link href="https://fonts.googleapis.com/css?family=Abril Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div>
    <h1 class="font2 gradient-text">green yellow</h1>
</div>

<div>
    <h1 class="font2 gradient-text">you get this</h1>
</div>

Я подумал, что, возможно, смогу использовать JS — например

 var cells1 = document.querySelectorAll('h1');

for (var i = 0; i < cells1.length; i  ) {
  
    cell = cells1[i];
    
    // remove the line height CSS attribute?

}

Но, возможно, использование JS — не лучший вариант?

Я вообще не хочу указывать высоту строки в теге H1.

Как я могу удалить CSS-атрибут высоты строки из всех тегов H1?

Комментарии:

1. Если у вас есть требование к высоте строки, но » не хотите указывать высоту строки «, как вы решаете несопоставимые требования с помощью JavaScript?

2. Однако у меня нет требования к высоте строки, извините, если это не было ясно в моем вопросе. В Bootstrap CSS есть высота строки для тегов H1, поэтому я хотел посмотреть, можно ли ее удалить. Я не хотел, например, помещать встроенный стиль в тег H1, чтобы сказать, сделайте его таким-то размером, я просто не хотел, чтобы CSS-атрибут line-height в теге H1 вообще, и я подумал, может быть, я могу удалить его с помощью JS, поскольку я не вижукак это сделать с помощью CSS (например, как вы можете видеть цвет фона прозрачным, я не знал, можете ли вы переопределить высоту строки на что-то, чтобы переопределить существующее значение).

3. Я опубликую свой ответ. Дайте мне знать, если это ответит на ваш вопрос.

4. Кстати, требование «Я хочу его удалить» ЯВЛЯЕТСЯ обязательным. 🙂

Ответ №1:

Добавьте переопределение CSS для line-height of H1 .

 h1 {
  line-height: normal !important;
}

Также обновлен фрагмент кода.

 .font2 { 
    font-family: 'Abril Fatface', cursive;
    font-size: 12rem;
}

.gradient-text { 
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #E9D66B, #4997D0);
}

h1 {
  line-height: normal !important;
} 
 <link href="https://fonts.googleapis.com/css?family=Abril Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div>
    <h1 class="font2 gradient-text">green yellow</h1>
</div>

<div>
    <h1 class="font2 gradient-text">you get this</h1>
</div>

Ответ №2:

Если я вас правильно понял, то добавьте эти два правила (отмечены) в font2 класс. Высота h1 тегов значительно уменьшится.

Или вы можете создать правила CSS специально для h1 тега и поместить туда эти два правила.

 .font2 { 
    font-family: 'Abril Fatface', cursive;
    font-size: 12rem;

    display: inline; /*add this it*/
    line-height: 100%; /*add this it*/
}
 
 .font2 { 
    font-family: 'Abril Fatface', cursive;
    font-size: 12rem;

    display: inline; /*add this it*/
    line-height: 100%; /*add this it*/
}

.gradient-text { 
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #E9D66B, #4997D0);
} 
 <link href="https://fonts.googleapis.com/css?family=Abril Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div>
    <h1 class="font2 gradient-text">green yellow</h1>
</div>

<div>
    <h1 class="font2 gradient-text">you get this</h1>
</div>

Ответ №3:

Чтобы изменить line-height , но не просто line-height , изменить что-либо на то, что вы хотите, вам просто нужно переопределить это правильным способом, ввода !important недостаточно, способ чтения браузером классов и стилей — это переход с левой стороны на правую сторону, так что в основном для переопределения существующего класса все, что вам нужно сделатьпоместите класс переопределения в крайнюю правую часть при определении классов или используйте тег style для небольших изменений

пример:

 <div class="existing-class override-class" style="color:red;"/>

этот код начнется со стилей existing-class , а затем он будет продвигаться вперед и использовать override-class , поэтому все, что перекрывается между этими 2 классами, браузер выберет более поздний, то override-class есть перезапишет стили из existing-class .

Теперь тег style перезапишет оба existing-class override-class стиля and, и вы получите красный цвет, даже если вы определили синий или черный для существующего или переопределяемого класса, и вот как вы можете перезаписать что угодно.

Метки: