Белая коробка за текстом

Итак, я создаю веб-сайт, и у меня есть мой фоновый набор. У меня также есть заголовок на странице индекса, но по какой-то причине есть белый квадрат вокруг текста. Я не знаю, почему он это делает, но он должен иметь цвет фона.Белая коробка за текстом

HTML

<!doctype html> 
<html> 
<head> 

    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

    <title></title> 
</head> 
<body> 
<p class="texts">Under Construction</p> 
    </body> 
</html>

CSS

@font-face { 
    font-family: 'Font'; 
    src: url(BebasNeue_Light.otf); 
} 

.texts{ 
    font-family: 'Font'; 
    text-align: center; 
    font-size: 1000%; 
} 

html { 
background-color: #1abc9c; 
}

Here является jsfiddle демо

источник

2015-06-07 Jacksons

Вы можете сообщить нам код для этого? –

Просьба указать ссылку на выход. Используйте [JSFiddle] (http://jsfiddle.net) –

Здесь, http://jsfiddle.net/4fk7e64h/ – Jacksons

Это две вещи, которые нужно изменить.

Первый - это порядок файлов CSS в <head>. Вам нужно ваше последнее, чтобы ваши стили переопределяли стили Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="style.css">

Второй, чтобы изменить правила html {...} CSS и использовать body вместо этого. Хотя вы можете установить стили для тега <html>, лучше использовать тег <body> (см. here соответствующее обсуждение в SO).

body { background-color: #1abc9c; }

источник

2015-06-07 11:42:30

Ваш тег тела имеет background-color: #fff; на нем. Тег тела накладывается на тег html, который имеет желаемый цвет фона на нем. Похоже, что тег body наследует белый фон из включенных загрузочных файлов, и вы тогда не переопределяете это в своих собственных стилях.

Файлы CSS обрабатываются в порядке, причем любой стиль применяется к селектору, последнему в наборе файлов, добавляемых к этому элементу последним. Поэтому, если вы загружаете файл css, сначала все, что вы определяете здесь, будет переопределено bootstrap, если bootstrap определяет свойство на одном и том же селекторе.

Лучше всего загрузить файлы css на основе специфики. Поскольку bootstrap - это общая библиотека, и ваш файл стиля специфичен для вашего сайта, тогда вы должны загрузить ваш файл css позже, чем загрузочный. Таким образом, вы можете гарантировать, что то, что вы хотите, будет тем, что делает браузер.

Вы можете найти более подробную информацию о selector specificity и load order здесь. Будьте очень осторожны с спецификой селектора, легко попасть в беспорядок, и вы должны использовать его только в том случае, если absolutely necessary (эта ссылка взята из превосходного блога css).

Вам также действительно нужно применить свой новый цвет к тегу тела в вашем css, который вы сейчас не делаете. Применяя его к html, вы получите нужный цвет позади цвета тела, так как html-тег будет дальше по древовидной структуре DOM.

Причина, по которой этот элемент выглядит как элемент с классом .texts, ваше название является неправильным, потому что тег тела автоматически уменьшался, чтобы соответствовать его содержимому (see this fiddle for simplicity). Добавив некоторые дополнительные <br /> теги, чтобы продлить действие, так как я сделал here, вы можете увидеть, что белая область расширяется, чтобы разместить их. Кроме того, как вы можете видеть here, применяя новый цвет к классу .texts, вы можете увидеть, что его цвет можно изменить, поскольку он находится далее по дереву DOM, чем тег body.

источник

2015-06-07 11:58:08

Вот ссылка скрипки - https://jsfiddle.net/pravin7007/3szxo5su/

html, body { 
    background-color: #1abc9c !important; 
}

1.) в вашем HTML, JQuery должен быть загружен до bootstrap.js
2.) самозагрузки CSS тела overwritting вашего тела background

источник

2015-06-07 12:33:57 pravin

Я определенно не советую использовать важные, если это абсолютно необходимо (например, если вам нужно переопределить свойство, установленное непосредственно в атрибуте стиля элемента внешней библиотекой) - css проблемы специфики селектора - это кошмар, а специфика должна быть сведена к минимуму - проблема OPs может быть решена путем переопределения определений, а не для того, чтобы одно определение принимало приоритет - это плохая привычка –

Да, правильно. я буду помнить об этом. – pravin

Белая коробка за текстом

ответ

Смежные вопросы