«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


В CSS для скрытия элементов используется свойство display со значением none. При этом элемент не просто скрыт, он как бы удаляется со страницы вместе с содержимым. А его место автоматически занимают другие элементы.

Свойство visibility со значением hidden также скрывает элемент, но область ранее им занимаемая остается за ним: другие элементы не могут там располагаться. Значение collapse свойства visibility служит для скрытия элементов таблиц.

Свойства display и visibility применимы ко всем элементам.



Применение свойств display и visibility

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Cкрытие элементов </title>

<style type="text/css">
p {border:#0099CC solid 1px; padding:5px; font-size:18px; color:#CC0066;}
</style>

</head>
<body>

<p>
<img src="../img/peng_64.gif"> Скроем пингвина разными методами. </p>
<p>
<img src="../img/peng_64.gif" style="display:none;"> Пингвин скрыт и его место занял текст. </p>
<p>
<img src="../img/peng_64.gif" style="visibility: hidden;"> Пингвин скрыт, но область, ранее им занимаемая, осталась за ним. </p>

</body>
</html>

Результат

Прозрачность элемента

Свойство opacity предназначено для указания степени прозрачности элемента. Свойство принимает значение от 0 до 1.

1 - это значение по умолчанию, ему соответствует нормальному отображению элемента - он непрозрачен.

Соответственно при значении 0 - элемент становится невидим - он прозрачен. Вот таким способом можно скрыть элемент.

Свойство применимо ко всем элементам

Фрагмент кода

<p> Полупрозрачный пингвин! <img src="img/peng_128.gif" style="opacity:0.5;"> </p>

Результат

Полупрозрачный пингвин! Прозрачность элемента

Скрытая и видимая области

Для абсолютно позиционированных элементов применимо свойство clip. Оно обозначает ту область элемента, которая будет видна. Оставшаяся часть отображаться не будет.

Необходимая (видимая) часть элемента определяется заданием координат с помощью ключевых слов top, right, bottom и left, которые указывают расстояния от краев элемента до границ видимой области.

Свойство clip

Форма видимой области - это всегда прямоугольник.

За пределами блока

Свойство overflow используется в тех случаях, когда содержимое блока превышает его размеры.

Свойство применимо к блочным элементам.

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

При значении hidden свойства overflow будет отображена та часть содержимого, которая вместится в границы блока. Соответственно оставшаяся часть будет скрыта.

Также, при превышении габаритами контента размеров блока, можно воспользоваться полосами прокрутки: при значении scroll свойства overflow они будут присутствовать всегда, а при значении auto будут добавлены при необходимости.

Фрагмент кода

<p style="border:#FF3300 solid 2px; width:100px;">
<img src="img/peng_128.gif">
</p>

Результат

За пределами блока

Пингвин превышает ширину блока, поэтому выходит за его границу.

Применение свойства overflow

В следующем примере воспользуемся свойством overflow со значениями hidden иauto.

Фрагмент кода

<p style="border:#FF3300 solid 2px; width:100px; overflow:hidden;">
<img src="img/peng_128.gif">
</p>
<p style="border
:#FF3300 solid 2px; width:100px; overflow:auto;">
<img src="img/peng_128.gif">
</p>

Результат

Свойство overflow:hidden

Свойство overflow:auto

Курсор

Свойство cursor ничего не скрывает. Однако оно дает возможность изменить вид (тип) курсора при наведении мыши на элемент.

То есть (если можно так сказать) текущий курсор будет скрыт, а заданный появится.

Свойство применимо ко всем элементам.

Пингвина в примере скорее всего занимает какой-то вопрос. О чем он думает? Я хочу задать для пингвина курсор в виде стрелки со знаком вопроса, воспользовавшись свойством cursor со значением help.

Фрагмент кода

<p style="border:#FF3300 solid 2px; width:150px; cursor:help;">
<img src="img/peng_128.gif">
</p>

Результат

Свойство cursor

Наведите на него курсор!

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта