2016-02-27 2 views
-1

Я работаю над проектом для школы (мы должны закодировать калькулятор), и мы используем внешний CSS в первый раз. Я пробовал в течение часа, но я полагаю, что мой внешний CSS не правильно связывается? Калькулятор просто появляется без какого-либо стиля.Внешний лист стиля не работает

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Crazy Calc</title> 
    <link rel="stylesheet" type="text/css" href="/style.css"> 
</head> 
<body> 

<h1>My Crazy Calculator<h1> 
<form name="calc"> 
<table> 
<tr> 
    <td colspan="4"><input class="textfield" type="text" name="input" ></td> 
</tr> 
<tr> 
    <td><input type="reset" value="clear" onclick="calc.input.value+='reset'"></td> 
    <td><input type="button" value="M" onclick="calc.store.value=calc.input.value;calc.input.value=''"></td> 
    <td><input type="button" value="MR" onclick="calc.input.value+=calc.store.value"></td> 
    <td><input type="button" value="/" onclick="calc.input.value+='/'"></td> 
</tr> 
<tr> 
    <td> 
    <input type="button" value="7" onclick="calc.input.value+='7'"> 
    </td> 
    <td> 
    <input type="button" value="8" onclick="calc.input.value+='8'"> 
    </td> 
    <td> 
    <input type="button" value="9" onclick="calc.input.value+='9'"> 
    </td> 
    <td> 
    <input type="button" value="*" onclick="calc.input.value+='*'"> 
    </td> 
</tr> 
<tr> 
    <td> 
    <input type="button" value="4" onclick="calc.input.value+='4'"> 
    </td> 
    <td> 
    <input type="button" value="5" onclick="calc.input.value+='5'"> 
    </td> 
    <td> 
    <input type="button" value="6" onclick="calc.input.value+='6'"> 
    </td> 
    <td> 
    <input type="button" value="-" onclick="calc.input.value+='-'"> 
    </td> 
</tr> 
<tr> 
    <td><input type="button" value="1" onclick="calc.input.value+='1'"></td> 
    <td><input type="button" value="2" onclick="calc.input.value+='2'"></td> 
    <td><input type="button" value="3" onclick="calc.input.value+='3'"></td> 
    <td><input type="button" value="+" onclick="calc.input.value+='+'"></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="button" value="0" onclick="calc.input.value+='0'"></td> 
    <td colspan="2"><input type="button" value="=" onclick="calc.input.value=eval(calc.input.value)"></td> 
</tr> 
<tr> 
    <td><input type="button" value="." onclick="calc.input.value+='.'"></td> 
    <td><input type="button" value="sin" onclick="calc.input.value=Math.sin(calc.input.value*Math.PI/180)"></td> 
    <td><input type="button" value="cos" onclick="calc.input.value=Math.cos(calc.input.value*Math.PI/180)"></td> 
    <td><input type="button" value="tan" onclick="calc.input.value=Math.tan(calc.input.value*Math.PI/180)"></td> 
</tr> 
<tr> 
    <td><input type="button" value="|x|" onclick="calc.input.value=Math.abs(calc.input.value)"></td> 
    <td><input type="button" value="log(x)" onclick="calc.input.value=Math.log(calc.input.value)"></td> 
    <td><input type="button" value="sqrt(x)" onclick="calc.input.value=Math.sqrt(calc.input.value)"></td> 
    <td><input type="button" value="e^x" onclick="calc.input.value=Math.exp(calc.input.value)"></td> 
    <td><input type="hidden" name="store"></td> 
</tr> 
</form> 

</body> 
</html> 

Стили:

body { 
     background-color: black; 
     } 

    h1 { 
     color:white; 
     text-align:center; 
     font-family:calibri; 
    } 

    table{ 
     margin-left:auto; 
     margin-right:auto; 
     border:3px solid blue; 
     border-radius:25px; 
    } 
+2

Проверьте средства разработки для браузера, чтобы узнать, какие ошибки вы хотите приобрести. – j08691

+0

Он должен работать: проверьте консоль (в Chrome на Windows Ctr shift I). –

+0

Каталог обоих файлов одинаковый? – devpro

ответ

-1

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

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>My Crazy Calc</title> 
     <link rel="stylesheet" type="text/css" href="calcstyle.css"/> 
    </head> 
+0

Все в порядке. См. Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link – j08691

0
  1. , если файл стилей находится в той же папке, добавьте косую черту: <link rel="stylesheet" type="text/css" href="/calcstyle.css">
  2. имя файла, как правило, чувствительны к регистру, поэтому убедитесь, что вы используете точно такое же имя. Также проверяйте пробелы в коде или имени файла.
+0

косую черту между текстом и css? так что текст \ css? –

+0

in href property: href = "/ calcstyle.css" – ViaSat

+0

все еще не работает. я не думаю, что хром находит мою таблицу стилей по какой-то причине –

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