- •Тема 1. Основы css 4
- •Тема 2. Управление шрифтом 10
- •Тема 3. Управление текстом 10
- •Тема 4. Управление элементом 21
- •Тема 5. Управление Позиционированием элемента 32
- •Тема 6. Управление видимостью элемента 32
- •Тема 7. Управление списком, таблицей и интерфейсом 32
- •Тема 8. Css по Браузерам 32
- •Тема 9. Хаки css 32
- •Тема 1. Основы css
- •Тема 2. Управление шрифтом
- •Тема 3. Управление текстом
- •Vertical-align. Вертикальное выравнивание текста
- •Тема 4. Управление элементом
- •Тема 5. Управление Позиционированием элемента
- •Тема 6. Управление видимостью элемента
- •Visibility. Видимость элемента
- •Тема 7. Управление списком, таблицей и интерфейсом
- •Тема 8. Css по Браузерам
- •Тема 9. Хаки css
Тема 6. Управление видимостью элемента
Visibility. Видимость элемента
С помощью свойства visibility определяется видимость элемента при просмотре страницы. Если этому свойству присвоено значение hidden, то элемент не виден на экране, но занимает в документе определенное место. На экране область, занимаемая таким элементом, выглядит пустой.
Свойство visibility может содержать следующие свойства:
-
hidden
Элемент становится невидимым, хотя первоначально отображался.
visible
Элемент виден на экране.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
visibility:hidden;
CLIP. Определение видимой части элемента
Определяя ширину и высоту элемента, вы управляете его размерами, а обрезая элемент, определяете, какая его часть будет видна на экране. Оставшаяся часть не удаляется, она просто становится невидимой и занимает на экране определенное место, которое отображается как пустое пространство.
На данный момент единственно доступная форма области — прямоугольник.
Если край области нужно оставить без изменений, следует установить auto.
Форма записи для свойства clip следующая:
clip: rect(Y1, X1, Y2, X2)
! Clip работает только для абсолютно позиционированных элементов.
position:absolute;
clip: rect(40px, auto, auto, 40px);
! |
Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px).
OVERFLOW. Управление невидимой частью
Иногда не все содержимое элемента отображается на экране. Это происходит в том случае, когда выделяется видимая область элемента, у которой ширина и/или высота меньше, чем необходимая для элемента область, а так же когда часть элемента скрыта с помощью свойства clip. С помощью свойства overflow можно определить, каким образом будет работать браузер с этой не поместившейся на экране частью элемента.
-
scroll
Рядом с видимой областью элемента помещается полоса прокрутки.
hidden
Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible
Оставшаяся часть элемента отображается на экране.
auto
Полосы прокрутки добавляются только при необходимости.
position:absolute;
clip: rect(40px, auto, auto, 40px);
overflow:scroll;
OVERFLOW-Х. Управление невидимой частью по вертикали.
Управляет отображением содержания блочного элемента по горизонтали
-
scroll
Рядом с видимой областью элемента помещается полоса прокрутки.
hidden
Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible
Оставшаяся часть элемента отображается на экране.
auto
Полосы прокрутки добавляются только при необходимости.
position:absolute;
clip: rect(40px, auto, auto, 40px);
overflow-x:scroll;
OVERFLOW-Y. Управление невидимой частью по горизонтали.
Управляет отображением содержания блочного элемента по вертикали
-
scroll
Рядом с видимой областью элемента помещается полоса прокрутки.
hidden
Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible
Оставшаяся часть элемента отображается на экране.
auto
Полосы прокрутки добавляются только при необходимости.
position:absolute;
clip: rect(40px, auto, auto, 40px);
overflow-y:scroll;
OPACITY. Эффект прозрачности
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
В качестве значения выступает число из диапазона от 0.0 до 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности.
! |
Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
filter: (opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
Задание 6.1 Определение видимости элемента
Создайте html файл добавьте в него параграф и изображение. Задайте обтекание изображения текстом.
Укажите значение свойства visibility видимость элемента:
<style type="text/css">
.hide
{
position: relative;
visibility: hidden;
float: left;
}
</style>
После того как свойство видимости установлено, примените созданный класс .hide к изображению.
Задание 6.2 Определение видимой части элемента
Создайте html файл добавьте в него параграф и изображение назначьте размеры изображению width 379, height 480.
Укажите значение свойства clip. Чтобы определить форму видимой области, напишите rect (прямоугольник), откройте круглые скобки, укажите четыре значения, разделенных пробелами, и закройте скобки.
<style type="text/css">
.clipInHalf
{
position: absolute;
clip: rect(15px 350px 195px 50px);
top:0px;
left:0px;
}
</style>
Задание 6.3 Управление невидимой частью элемента
Создайте html файл добавьте в него параграф с большим количеством текста.
Примените стиль к изображению:
<style type="text/css">
.pScroll
{
position: absolute;
clip: rect(15px 350px 195px 50px) ;
top:0px;
left:0px;
overflow: scroll;
width:200px;
height:200px;
}
</style>
Задание 6.4 Масштабируемая навигация
Создаем разметку навигации с помощью маркированного списка:
<body id="intro">
<ul id="nav">
<li id='t-intro'><a href="/">Главная</a></li>
<li id="t-about"><a href="/">Компании</a></li>
<li id="t-news"><a href="/">Новости</a></li>
<li id="t-sponsors"><a href="/">Спонсоры</a></li>
</ul>
</body>
/*настройка навигационного списка*/
#nav
{
width: 100%;/*Устанавливаем высоту для блока списка*/
float:left; /*Устанавливаем выравнивание блока списка слева */
margin: 0; /*Устанавливаем внешний отступ для блока списка */
padding: 10px 0 0 46px; /*Устанавливаем внутренние отступы для блока списка*/
list-style: none; /*Отказываемся от маркеров*/
background: #FFCB2D; /*Задаем цвет фона*/
background-image:url(../images/navBottLine.gif); /*Задаем нижнюю линию с помощью изображения*/
background-repeat:repeat-x; /*Разрешаем копировать фон по горизонтали*/
background-position:bottom left; /*Размещаем фон внизу и слева в блоке списка*/
}
/*настройка элемента списка*/
#nav li
{
float:left; /*Задаем размещение элемента списка слева, что позволяет создать горизонтальный
список*/
margin: 0; /*Устанавливаем внешний отступ для блока списка */
padding: 0; /*Устанавливаем внутренние отступы для блока списка */
font-family:"Lucida Console", sans-serif; /*Устанавливаем тип шрифта*/
font-size: 100%;/* Устанавливаем размер шрифта */
}
/*настройка вида ссылки*/
#nav a
{
float:left; /* Задаем размещение элемента списка слева, что позволяет создать горизонтальный
список */
display: block; /*Создаем блок из ссылки чтобы сделать всю вкладку активной*/
margin: 0 1px 0 0; /*Устанавливаем внешний правый отступ 1рх*/
padding: 4px 8px; /*Устанавливаем внутренние отступы для блока списка*/
color: #333; /*Задаем цвет шрифта*/
text-decoration: none; /*Отменяем подчеркивание ссылки*/
border: 1px solid #9B8748; /*Создаем бордюр вокруг ссылки*/
border-bottom: none; /*Отменяем отображение бордюра с низу*/
background: #F9E9A9; /*Задаем цвет фона*/
background-image:url(../images/ bottOff.gif); /*Фон для не активной кнопки*/
background-repeat:repeat-x; /* Разрешаем копировать фон по горизонтали */
background-position:bottom left; /*Размещаем фон внизу и слева в блоке элемента */
}
/*настройка вида ссылки при наведение */
#nav a:hover, body#intro #t-intro a
{
color: #333; /*Задаем цвет шрифта*/
padding-bottom: 5px; /*Устанавливаем нижний внутренний отступы для блока списка, что закрывает
нижний бордюр для активной ссылки*/
border: #727377; /*Задаем цвет для бордюра*/
background: #fff; /* Задаем цвет фона */
background-image:url(../images/on_bg.gif); /*Фон для активной кнопки*/
background-repeat:repeat-x; /* Разрешаем копировать фон по горизонтали */
background-position:top left; /*Размещаем фон вверху и слева в блоке элемента */
}
----------------------------------------------------------------------------------------------------------------------------