15 Июля 2014
372

Громкая музыка из машин - французское наследие

Француженки, познав прелесть (прелесть?) чпокания в анусай, начали носить с собой ручных собачек, чтобы сваливать на них недержание газов из разбитых шахт. Видимо пацанчики на кредитных тазах тоже познали сие действо и скрывают музыкой дребезжания своих попцов. Другого объяснения действий этих п*доров я не вижу.

С кем отправиться в Скандинавию?

Доброго дня. У меня просьба к путешественникам,которые путешествовали в скандинавские страны с туроператором.Расскажите о своем опыте путешествия:понравилось ли обслуживание туроператора, можете ли порекомендовать,удовлетворены ли соотношением цены-качества? Будет возможность поставьте плюс - чем больше мнений тем лучше)
Моя мама хочет исполнить свою давнишнюю мечту:побывать в Финляндии.Хотелось бы чтоб мечта осуществилась с комфортом) Чтоб не было похоже на кармадрочерство - внизу два коммента для минусов

Как сделать свой сайт - простым языком (часть 5)

Чистим код. Улучшаем полосочку и меню записи текста
Предыдущая часть, блог, заготовка сайта

Если вы заметили, то указания 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;}

Проведите мышью над страничкой заготовки и испытайте как элементы реагируют на неё на заготовленной страничке сайта .
Показать полностью
Мои подписки
Подписывайтесь на интересные вам теги, сообщества, авторов, волны постов — и читайте свои любимые темы в этой ленте.
Чтобы добавить подписку, нужно авторизоваться.

Отличная работа, все прочитано! Выберите