Как управлять частями файла CSS?

-1

Я сделал веб-страницу, где я могу изменить цвет фона, стиль и размер шрифта на 9 различных кнопок.Как управлять частями файла CSS?

Проблема №1 здесь я использую один файл css для каждой отдельной кнопки, и проблема № 2 заключается в том, что, например, если изменить цвет фона на синий, и я хочу изменить стиль шрифта на курсив, я не могу одновременно активны 2, а другой - по умолчанию.

Любые советы о том, как это сделать?

Вот мой CSS и HTML разметка:

<!DOCTYPE html> 
<html> 
<head> 
    <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> 
    <link href="style.css" rel="stylesheet"> 
    <script> 
    function swapStyleSheet(sheet){ 
     document.getElementById('pagestyle').setAttribute('href', sheet); 
    } 
    </script> 
</head> 
<body> 
    <div class="menu-wrap"> 
     <nav class="menu"> 
      <ul class="clearfix"> 
       <li> 
        <a href="#">CSS 1 <span class="arrow">&#9660;</span></a> 
        <ul class="sub-menu"> 
         <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li> 
         <li onclick="swapStyleSheet('skrift1.css')"><a href="#">Bytt farge</a></li> 
         <li onclick="swapStyleSheet('background1.css')"><a href="#">Bytt bakgrunnsfarget</a></li> 
        </ul> 
    </div> 
    <div class="menu-wrap"> 
     <nav class="menu"> 
      <ul class="clearfix"> 
       <li> 
        <a href="#">CSS 2 <span class="arrow">&#9660;</span></a> 
        <ul class="sub-menu"> 
         <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li> 
         <li onclick="swapStyleSheet('skrift2.css')"><a href="#">Bytt farge</a></li> 
         <li onclick="swapStyleSheet('background2.css')"><a href="#">Bytt bakgrunnsfarget</a></li> 
        </ul> 
    </div> 
    <div class="menu-wrap"> 
     <nav class="menu"> 
      <ul class="clearfix"> 
       <li> 
        <a href="#">CSS 3 <span class="arrow">&#9660;</span></a> 
        <ul class="sub-menu"> 
         <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li> 
         <li onclick="swapStyleSheet('skrift3.css')"><a href="#">Bytt farge</a></li> 
         <li onclick="swapStyleSheet('background3.css')"><a href="#">Bytt bakgrunnsfarget</a></li> 
        </ul> 
    </div> 
    <p class="skrift">skrifttypen skal endre seg.</p> 
    <p class="skrift">skrifttypen skal endre seg.</p> 
    <p class="skrift">skrifttypen skal endre seg.</p> 
</body> 
</html>

источник

2015-10-02 J. Doe

Вы задаетесь вопросом немного запутанным, не могли бы вы уточнить? Что вы подразумеваете под «1 css-файлом для каждой отдельной кнопки», вы используете файл css для каждой другой кнопки? –

Вы действительно должны закрыть свои теги правильно, просто говоря. – meskobalazs

Я не уверен, в чем проблема, что происходит, когда вы (щелкните) загрузите новую таблицу стилей? это не вступает в силу, или вы просто ищете другой способ сделать это? – MJoraid

Ну, не меняют файлы таблиц стилей для начала. Вы можете:

имеют разные классы для разных ситуаций и устанавливают эти классы на свой элемент с помощью JavaScript. Это довольно легко, даже в ванили JS, например:

document.getElementById('myButton').classList.add("btn-red");
нагрузки переопределение таблицы стилей динамически, который заменит существующие стили. Поэтому вместо того, чтобы иметь полномасштабную полную таблицу стилей, просто внесите изменения в файлы CSS и загрузите ее после таблицы стилей по умолчанию.

Я бы порекомендовал первый подход, он гораздо более прочный и разумный. Большинство CSS-фреймворков работают одинаково, просто взгляните на Bootstrap (twitter-bootstrap).

источник

2015-10-02 10:39:22 meskobalazs

Похоже на логический подход. Я просто надеюсь, что он это получит. – MJoraid

Как управлять частями файла CSS?

ответ

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