вторник, 19 февраля 2013 г.

Jquery и CSS

CSS это каскадные таблицы стилей - это инструмент возник в эпоху интернета 2.0, когда для успешного ведения бизнеса в интернете стало нехватать изобразительных средств.
Дело в том, что интернет (страницы и первый браузер) создавали физики, а не лирики и не бизнесмены (как нам повезло ;) ). Поэтому они изначально заложили во всё строгий транспарентный фундамент, логику в сочитании с объявленными стандартами. Но время шло и у сообщества появилось желание попробывать новые формы привлечения внимания пользователей. Появилась и получила поддержка идея разделить оформление страницы и элементы разметки. Для дизайнеров оказалось удобнее создать одну таблицу со стилями и потом подключать её к множеству страниц, чем прописывать оформление в каждый тэг.
Когда стандарт CSS появился он был принят не всеми сразу, были ошибки и современем пришлось доработать до CSS второй версии.
Визуально к эре интернета 2.0 относят появление всякого рода сглаженных очертаний кнопок и окон. Муветоном стали считаться гиперссылки выделенные синим цветом. Широкое распостронение получили ролоуверы...
Интересной особенностью в JQuery является возможность управление стилями тэгов.
Предположим что у нас есть слой с id pixcont - <div id="pixcont"></div>
А вот так можно урасить pixcont
<script>
$(document).ready(function() {


$("#pixcont").css("border","1px    solid    #110f00");
$("#pixcont").css("padding","3px");
$("#pixcont").css("cursor","pointer");
$("#pixcont").css("width","800px");
$("#pixcont").css("height","600px");
$("#pixcont").css("overflow","scroll");

 });
</script>

Поясню:
1. $("#pixcont").css("border","1px    solid    #110f00"); - рисуем рамку по периметру размером 1 px и цветом ( #110f00)
2.  $("#pixcont").css("padding","3px"); - создаём отступ для содержание, чтобы оно не прилипало к краям
3. $("#pixcont").css("cursor","pointer"); - меняем курсор при наведении
4. $("#pixcont").css("width","800px"); $("#pixcont").css("height","600px"); - ширина, высота
5. $("#pixcont").css("overflow","scroll"); - если текст, или картинка будут больше нашего элемента, появятся полосы прокрутки.






Комментариев нет:

Отправить комментарий