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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- EFFECTING CLICKING OUT TO CLOSE -->
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css"> <!-- EFFECTING WORDS IN MODALS  -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Я попытался избавиться от каждой строчки, чтобы увидеть, что именно они сделали и как они повлияли на мою программу. Некоторые либо влияют на модальные окна и возможность щелкнуть из них, либо стирают весь текст внутри модальных окон.

У меня возникла идея сделать отдельные html-файлы и вызывать их в главный файл, давая каждому из них разные метаданные. Это сработает?

Заранее спасибо.

0
kgt 6 Июл 2016 в 18:17
1
Вы можете попробовать придерживаться начальной загрузки и скопировать / вставить только те части, которые вам нужны, из файлов w3 css и добавить свои собственные. Или поищите совместимую тему начальной загрузки. Или напишите свой собственный CSS, используя только то, что вам нужно.
 – 
Turqueso
6 Июл 2016 в 18:28
2
Если вам достаточно удобно перемещаться по файлам css, вам действительно следует извлечь все необходимое из каждого файла css и поместить их в один файл. Если вам недостаточно удобна навигация по файлам css, я ДЕЙСТВИТЕЛЬНО предлагаю вам это сделать. Честно говоря, это было бы намного лучше. Кроме того, вашим конечным результатом будет неконфликтный CSS. 2 зайца с 1 камнем
 – 
mhodges
6 Июл 2016 в 18:29
2
Я бы настоятельно не рекомендовал использовать горячие ссылки на файлы CSS другого веб-сайта, если, конечно, они не являются частью CDN, предназначенного для этой цели. Разве вы не можете просто извлечь из них нужные стили вместо того, чтобы загружать всю таблицу стилей для одного аспекта?
 – 
Michael Giovanni Pumo
6 Июл 2016 в 18:29
Я не уверен, как извлечь файл CSS в одиночку, потому что моя ссылка взята с w3schools.com (хорошее место для обучения, которое я нашел для html / bootstrap), и скопируйте их код в свой документ. Потом пытался переставить и поиграть.
 – 
kgt
7 Июл 2016 в 15:40

3 ответа

Я бы предложил, как и другие, упомянутые в комментариях, сохранить только основные части в разделе заголовка. Это означает, что вам будет намного проще контролировать свой код, если вы напишете свой собственный CSS и загрузите его в свой html. Придерживайтесь Bootstrap, поскольку он уже дает базовый макет веб-страницы, который также может быть отзывчивым.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font awesome -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <!--Links to CSS, Bootstrap-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="your-external-css-file.css"/>
</head>

Теги заголовка должны включать что-то вроде предыдущего примера.

0
Makis Milas 6 Июл 2016 в 18:56

Внимательно изучив опубликованный вами код, я заметил, что у вас есть 2 ссылки на bootstrap / 3.3.6. Возможно, вам также придется поиграть с порядком файлов.

0
Marcelo Martins 6 Июл 2016 в 19:21

Указанные файлы (/w3.css и /w3-theme-black.css) не имеют между собой конфликтующих классов. Конфликт рендеринга может быть вызван тем, как вы реализовали такие классы.

Вы можете легко проверить эту теорию, изменив порядок, в котором вы ссылаетесь на файлы .css, например:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Если, изменив порядок CSS, вы получите обратный опыт, чем конфликт CSS, но я сомневаюсь. Следующим вариантом будет более подробное рассмотрение того, как вы использовали классы css.

Также я бы посоветовал переместить "" над файлами начальной загрузки css.

0
Marcelo Martins 6 Июл 2016 в 19:23