Чистим код. Улучшаем полосочку и меню записи текста
,
,
Если вы заметили, то указания CSS сильно увеличивают HTML-код.
Например, описание "полосочки" растянуто несколькими указаниями CSS:
<div
style="width:33px; height:100%; position:fixed; border:collapse; left:0; top:0;background-color:pink;display: block;">
Для очистки кода HTML можно вынести их все в отдельный файл (назовём его "style.css", а на страничке дать ссылку на него:
<LINK href="style.css" rel="STYLESHEET" type="text/css">
Правила оформления вынесенного файла простые:
1. Указывается имя группы HTML-элементов и сразу после этого в фигурных скобках - описание CSS для этой группы.
2. На основной страничке нужно дать идентификатор соответствующего элемента.
1. Например, вам нужно всем элементам "заголовок" (<h1>) дать свойства шрифт красного цвета. Для этого достаточно в выносном файле написать:
h1 {color:red;}
При необходимости, одинаковые свойства можно присвоить нескольким элементам, перечислив их через запятую, например:
h1, div {color:red;}
2. Если же вам нужно указать свойства только для отдельного элемента, то его нужно как-то идентифицировать. Это можно сделать по id или по class (есть и более изощренные способы), тогда на самой страничке тоже укажите эти идентификаторы.
Для примера на нашей страничке вынесем все CSS-описания в отдельный файл.
Тогда код странички:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<LINK href="style.css" rel="STYLESHEET" type="text/css">
<meta name="GENERATOR" content="bogomil with FAR">
<meta name="description" content="Самый простой сайт лучших анекдотов">
<meta name="keywords" content="Отборные анекдоты">
<meta content="text/html; charset=windows-1251" http-equiv=Content-Type>
<title>Отборные анекдоты</title>
<body>
<a name="top"></a>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript"></script>
<ins class="adsbygoogle"
style="float:right;display:inline-block;width:120px;height:600px"
data-ad-client="ca-pub-6772407259536043"
data-ad-slot="4949306615"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<h1 onClick="window.document.form.style.display='block';" title="Кликните для ввода своего текста">Здесь будет сайт анекдотов!</h1>
<form action="save.php" method="post" name="form"><input type="text" name="usertext" size="57"><input type="submit" value="Сохранить на сайте"></form>
<hr>
<?php $f=fopen('textfile.txt','r'); echo date("j.m.Y H:i",filemtime('textfile.txt')).': '.fgets($f,2500); fclose($f); ?>
<button onClick="for (var i=0; i90) n=32; document.getElementById('rand').innerHTML+=String.fromCharCode(n);if (Math.random()>0.9999)document.getElementById('rand').innerHTML+=' HELLO! ';}">Подкинуть 1000 символов</button>
<a href="#top" onClick="scroll(0,0); return false;"><div class="poloska"></div></a>
<p id="rand"></p>
</body>
Содержимое текстового файла style.css:
body {margin:1em 1em 1em 55px;}
h1 {font-size:3em; padding-bottom:1em;}
form {display:none;}
hr {width:75%; text-align:left;margin-left: 0;}
button {display:block; margin-top:2em;}
.poloska {width:33px; height:100%; position:fixed; border:collapse; left:0; top:0;background-color:pink;display: block;}
В выносном файле можно давать несколько свойств одно и того-же элемента. Например, сейчас на заготовке не совсем понятно, что нужно кликнуть на заголовок для появления скрытой формы ввода. Поэтому, напишем в выносном файле свойство "когда мышка над текстом, то показать его подчеркнутым, как ссылку":
h1:hover {text-decoration:underline;}
:hover - обозначает событие "мышь над элементом". Давайте применим его и к нашей полосочке скроллинга - когда мышь будет над ней, то закрасим её, а в остальных случаях - не будем закрашивать:
.poloska {... background-color:none;...}
.poloska:hover {background-color:gray;}
Проведите мышью над
и испытайте как элементы реагируют на неё на заготовленной страничке сайта .
