Я 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>
Во-первых, в ваших .outer-div
вас есть font-color
который не является свойством, он просто color
. Но если вы исправите это, вы увидите, что текст по-прежнему черный, цвет по умолчанию. Это потому, что браузеры печально известны проблемами при визуализации элементов формы.
Как говорит MDN:
CSS-шрифт и текстовые функции могут быть легко использованы с любым виджетами (и да, вы можете использовать @font-face с виджетами формы). Однако поведение браузеров часто несовместимо. По умолчанию некоторые виджеты не наследуют семейство шрифтов и размер шрифта от своих родителей. И многие браузеры используют внешний вид системы по умолчанию.
Самый простой способ исправить это - добавить color:inherit;
или color:white
для вашего .navbutton
класса
Вы можете установить .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;
}
Входы не автоматически наследуют все родительские стили, поэтому вам нужно указать для наследования или указать стиль, который вы хотите.
.outerdiv input[type=button]
{
color:#fff;
}