HTML-цвет текста моей кнопки отображается неправильно

Question

HTML-цвет текста моей кнопки отображается неправильно

0

Я n00b, так что легко на меня. :)

Сейчас я застрял, потому что мне нужно выяснить, почему цвет текста двух названных кнопок (Resume и Programs) не белый. Кнопки находятся внутри outerdiv класса outerdiv; поэтому они должны наследовать свойство font-color: #FFFFFF. Но, видимо, они этого не делают, поскольку шрифт по-прежнему черный.

Пожалуйста, объясните логику HTML, которая исправляет эту проблему.

Код:

<html>
<head>
    <title>my site</title>


    <style type="text/css">
        p
        {
            font-family: Arial;
            color: #FFFFFF;
        }
        #mtx_bckgd
        {
            font-family: "Courier New";
            height: 750px;
            width: 1000px;
            position: absolute;
            z-index: -1;
            background: linear-gradient(180deg, #39275b, #FFFFFF);
        }
        #mtx_bckgd > p
        {
            word-wrap: break-word;
            color: #D8D8D8;     
            overflow: hidden;
        }
        #headerbox
        {
            height: 50px;
            top: 25px;
            left: 5px;
        }
        h1
        {
            color: #FFFFFF;
            font-weight: 400;
            text-align: center;
            margin: auto;
            padding: auto;
            text-shadow: 2px 2px rgb(51,51,51);

        }
        #navbar
        {
            top: 120px;
            left: 5px;
            width: 1000px;
            height: 30px;
        }
        #uwlogo
        {
            height: 50px;
            float: left;
        }
        #JaminWEB
        {
            margin: 0px auto;
        }
        .navbutton
        {
            width: 33%;
            height: 25px;
            background-color: rgba(51,51,51,0.5);
            margin: 0px;
            padding: 0px;
        }
        #footer
        {
            top: 800px;
        }
        .outerdiv
        {
            position: absolute;
            font-family: Arial;
            width: 1000px;
            border: solid 2px #FFFFFF;
            background-color: rgba(215,169,0,0.5);
            margin: 0px;
            padding: 0px;
            font-color: #FFFFFF;
        }

    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 4000; ++i)
                bitstr += Math.floor(Math.random() * 10) % 2 ? "0" : "1";
            document.getElementById("mtx_txt").innerHTML = bitstr;

        }

    </script>


</head>
<body>
    <div id="mtx_bckgd">
        <p id="mtx_txt"></p>
    </div>
    <div class="outerdiv" id="headerbox">
        <div id="uwlogo">
            <img src="C:\Users\XXXXXX\Desktop\uwlogo.png" height="50px">
        </div>
        <div id="JaminWEB">
            <h1>JaminWEB</h1>
        </div>

    </div>

    <div class="outerdiv" id="navbar">
        <input type="button" class="navbutton" value="Resume"/>
        <input type="button" class="navbutton" value="Programs"/>
        <input type="button" class="navbutton"/>



    <div class="outerdiv" id="footer">
        <p>Last modified: March 21st, 2014</p>
    </div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>

user3443528 21 март 2014, в 20:29

Источник

Теги:

html

css

3 ответа

0

Вы можете установить .navbutton чтобы иметь цвет белого в css или добавить color:inherit должен работать. И правильное свойство "font-color" в CSS - это просто "цвет", fyi.

Пример:

.navbutton
    {
        width: 33%;
        height: 25px;
        background-color: rgba(51,51,51,0.5);
        margin: 0px;
        padding: 0px;
        color: #fff;
    }

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

Jacques 21 март 2014, в 17:30

0

.outerdiv input[type=button]
        {
           color:#fff;
        }

raju 21 март 2014, в 16:32

2

Вы можете объяснить, почему?
user3443528 21 март 2014, в 19:02

Ещё вопросы

j08691 · Accepted Answer · 2014-03-21T16-11-00.000Z

Во-первых, в ваших .outer-div вас есть font-color который не является свойством, он просто color. Но если вы исправите это, вы увидите, что текст по-прежнему черный, цвет по умолчанию. Это потому, что браузеры печально известны проблемами при визуализации элементов формы.

Как говорит MDN:

CSS-шрифт и текстовые функции могут быть легко использованы с любым виджетами (и да, вы можете использовать @font-face с виджетами формы). Однако поведение браузеров часто несовместимо. По умолчанию некоторые виджеты не наследуют семейство шрифтов и размер шрифта от своих родителей. И многие браузеры используют внешний вид системы по умолчанию.

Самый простой способ исправить это - добавить color:inherit; или color:white для вашего .navbutton класса

Пример jsFiddle