Интересное применение каскадных таблиц css и html

1 2 3 Следующая


В данной статье приводятся малоизвестные или малоиспользуемые приемы применения html и css, приводящие к интересным эффектам. Данная страничка постоянно обновляется и в нее добавляются разные эффекты, которые можно использовать при строительстве вашего сайта.



Примечание

Если в каких либо браузерах не будут работать эти приемы, попробуйте изменить кодировку браузера.

Содержание:


  1. Как сделать простое горизонтальное меню с субменю средствами css?    NEW

  2. Как можно реализовать ситуацию, чтобы показывалась картинка при наведении курсора на какой-либо текст?

  3. Что нужно сделать, чтобы строка, слово или часть текста мигала?

  4. Как увеличить расстояние от края окна до списка и от маркера до текста?

  5. Что нужно сделать, чтобы изменить маркер в маркированных списках?

  6. Как подписать картинку?

  7. Как нарисовать рамку вокруг ссылки при наведении на нее курсора?

  8. Как нарисовать рамку вокруг текста?

  9. Как выделить слово или часть предложения инверсным цветом?

  10. Как в тексте html написать формулу?



В. Как сделать простое горизонтальное меню с субменю средствами css?

О.При создании сайта всегда используется меню. Существует множество способов и методов создания этого самого меню. Ниже предлагается один из вариантов создания меню с выпадающим списком (субменю), используя средства css.


Для начала напишем правила css:


* {				/*Сброс настроек*/
 border: 0;
 padding: 0;
 margin: 0;
 }
#menu {				/*Свойства меню*/
 float: left;				/*Обтекание текста*/
 width: 500px;				/*Ширина меню*/
 list-style: none;			/*Без отображения маркера списка*/
 position: relative;			/*Относительное позиционирование*/
 }
#menu li {			/*Свойство списка меню*/
 float: left;				/*Обтекание текста*/
 border-right: 1px solid #999;		/*Правая вертикальная черта*/
 }
#menu li a {			/*Свойство ссылок списка*/
 padding: 10px 15px;			/*Внутренние отступы сверху и снизу,
					  слева и справа*/
 display: block;			/*Делаем ссылки блочными*/
 color: #000;				/*Цвет ссылок*/
 text-decoration: none;			/*Без подчеркивания*/
 }
#menu li a:hover {		/*Свойство ссылок под курсором*/		
 color: #fff;				/*Цвет ссылок*/
 text-decoration: none;			/*Без подчеркивания*/
 }
#menu li:hover {		/*Свойство списка под курсором*/
 background: #999;			/*Фон списка*/
 }
#menu li span {			/*Свойство субменю*/
 float: left;				/*Обтекание текста*/
 padding: 15px 0;			/*Внутренние отступы сверху и снизу,
					  слева и справа*/
 position: absolute;			/*Абсолютное позиционирование*/
 left: 0;				/*Позиция слева*/
 top:35px;				/*Позиция сверху*/
 display: none;				/*Невидимое субменю*/
 width: 500px;				/*Ширина субменю*/
 background: #999;			/*Фон субменю*/
 color: #fff;				/*Цвет ссылок*/
 }
#menu li:hover span {		/*Свойство субменю под курсором*/
 display: block;			/*Делаем ссылки блочными*/
 }
#menu li span a {		/*Свойство ссылок субменю*/
 display: inline;			/*Встроенные в текст ссылки*/
 }


Теперь напишем код html:


<ul id="menu">				<!--Список меню-->
<li><a href="#">Раздел 1</a></li>	<!--1 пункт меню-->
<li>					<!--Конец раздела-->
<a href="#">Раздел 2</a>		<!--2 пункт меню-->
<span>					<!--Субменю 2 раздела-->
<a href="#">Подраздел 1</a> |		<!--1 пункт субменю-->
<a href="#">Подраздел 2</a> |		<!--2 пункт субменю-->
<a href="#">Подраздел 3</a>		<!--3 пункт субменю-->
</span>					<!--Конец субменю 2 раздела-->
</li>					<!--Конец раздела-->
<li><a href="#">Раздел 3</a></li>
<span>					<!--Субменю 3 раздела-->
<a href="#">Подраздел 1</a> |
<a href="#">Подраздел 2</a> 
</span>
</ul>					<!Конец списка меню-->

У Вас должно получится так:






Назад



В. Как можно реализовать ситуацию, чтобы показывалась картинка при наведении курсора на какой-либо текст?

О. Вообще-то этот эффект называется rollover. Реализуется при помощи скрипта JavaScript. Но с некоторыми потерями, данный эффект можно реализовать при помощи каскадных таблиц. Создаем ссылку, например, на ту же страницу, где будет нужный Вам текст и включаем в нее картинку, заключенную в тэг <span>. Выглядеть это будет следующим образом:



<a href="index.html"><span><img src="../../image/baner1.gif" border=1 alt="Мой баннер"></span>Баннер сайта http://shad-55.narod.ru/Ваш текст</a>.
Теперь на эту ссылку пишем такие стили:
a { display: inline; } 
a span { display: none; }
a:hover span {
	display: inline;
	position: absolute;
	left: 400px }
a:hover {
	color: #F90;
	border: 0px; }

Картинка, заключенная в тэг <span>, на странице не показывается, а при наведении курсора на ссылку, выводится ваша картинка. Работает в браузерах Netscape 6, MSIE 6, Opera 8 и выше. К сожалению, данная редакция css в Mozilla Firefox версии ниже 4.0 НЕ работает.


Второй вариант более сложный, но зато картинка выводиться рядом с сылкой и что главнее - работает в Mozilla Firefox.


a.screen, a.screen:visited {
color:#c00; 
position:relative; 
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; 
width:200px; 
height:0; 
left:0; 
top:-150px;
}
a.screen:hover {
text-decoration:none; 
border:0; 
z-index:1000;
}
a.screen:hover b {
visibility:visible; 
height:150px; 
cursor:pointer; 
z-index:500; 
}
a.screen:hover b img {
border:0; 
}

Далее вставляем код:


<a class="screen" href="#">Ваш текст<b><img src="../../image/baner1.gif" border=1 alt="Мой баннер"></b></a>

Это баннер моего cайтаБаннер сайта http://shad-55.narod.ru/

Назад



В. Что нужно сделать, чтобы строка, слово или часть текста мигала?

О. Если Вам необходимо, чтобы какой-либо текст мигал, необходимо заключить нужный Вам текст в парный тэг <blink>. Для этого пишем следующую строку:


<p>Из плотной массы толпы Вы хотите выделить <b><blink>себя</blink></b>, любимого</p>

Должно получится так:

Из плотной массы толпы Вы хотите выделить себя, любимого.

A если Вы хотите выделить слово еще и цветом, например, красным - добавьте к этому слову <font color="red">

В IE, к сожалению, тэг <blink> не работает.


Назад



В. Как увеличить расстояние от края окна до списка и от маркера до текста?

О. Иногда, при использовании списков, возникает необходимость отодвинуть список от края окна и текст от маркеров. Делается это простым способом:

li {
    margin-left: 10px; /* Отступ списка от левого края */
    padding-left: 20px; /* Отступ от маркера до текста */
   }

Это должно выглядеть так:

  • Маша
  • Даша
  • Наташа
    •


Назад



В. Что нужно сделать, чтобы изменить маркер в маркированных списках?

О. Маркированные списки снабжаются тремя видами маркеров - точка (disk), квадрат (square) или кружок (circle). Чтобы вообще убрать маркеры, нужно задать стилю list-style-type параметр none. В качестве пользовательского маркера может служить любой символ или специальная картинка. Добавляется маркер с помощью свойства content через псевдоэлемент before.


Вставка символа:

li {
    list-style-type: none; /* Убираем маркеры у списка */
   }
li:before {
    content: "+ "; /* Добавляем в качестве маркера символ плюс */
   }

Далее в html коде в нужном месте вставляем код списка:
<ul>
<li>Маша</li>
<li>Даша</li>
<li>Наташа</li>
</ul>

У нас должно получиться так:
+ Маша
+ Даша
+ Наташа

Внимание: Псевдоэлемент before не работает в браузере Internet Explorer до 7-ой версии включительно, поэтому пользовательские маркеры в нем отображаться не будут.

Таким образом можно вставить любой символ из таблицы формата ЮНИКОД. В Microsoft World выберите Вставка > Символ > Другие символы, чтобы открыть окно символов, где можно выбрать код нужного символа. Выделите нужный Вам символ, снизу в окошке Код знака скопируйте код выделенного символа и вставьте его в свойство content через обратный слэш. К примеру Вы хотите использовать правую стрелку. Тогда в свойство content записывете следующее:

content: "\2192";


Далее. Если Вы хотите вставить вместо стандартного маркера свою картинку, то необходимо в свойстве content указать к ней путь. Например так:

content: url(bg_01400.jpg);  где bg_01400.jpg - путь к вашей картинке.


Назад



В. Как подписать картинку?

О. Иногда возникает необходимость сделать подпись к фото или любой другой картнке для улучшения ее информативности. Для этого воспользуемся следующим способом:
Для начала создадим стили

.podp {
    float: right; /* или left - Выравнивание по правому или левому краю */
    border: 1px solid #333; /* Параметры рамки */
    padding: 7px; /* Поля внутри блока */
    margin: 10px 0 5px 5px;  /* Отступы вокруг */
    background: #f0f0f0; /* Цвет фона */ 
    text-align: center; /* Выравнивание по центру */
   }
.podp p {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
    text-align: center; /* Выравнивание по центру */
   }

Между тэгами body вставляем следующий код:

<div class="podp">
<img src="Путь к вашей картинке" width="150" height="150" alt=" " />
<p>Ваша подпись к картинке</p>
</div>

У вас должно получится примерно так:

Мое фото

Вот такой он Я

 

 

 

 

 

 

 

 

 

 

 

 


Назад



В. Как нарисовать рамку вокруг ссылки при наведении на нее курсора?

О. Чтобы выделить ссылку рамкой при наведении на нее курсора, пишем следующие стили для ссылок:


 a { 
  text-decoration: none; 	/* Убираем подчеркивание у ссылок */
  padding: 2px 			/* Поле вокруг ссылки */
   }
 a:hover { 
  border: 1px solid red; 	/* Красная рамка вокруг ссылки */
  padding: 1px 			/* Изменяем величину поля вокруг ссылки */
   }

Между тэгами body вставляем следующий код:

<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html>Ссылка 2</a>
<p><a href=link3.html>Ссылка 3</a>

Получается вот такая красота:



Назад



В. Как нарисовать рамку вокруг текста?

О. Иногда, для подчеркивания важности, необходимо выделить текст рамкой или залить фоном. На следующем примере покажем как сделать и то и другое вместе. Создадим класс рамки и фона:


.ramka {
  border: double 4px black; 		/* Двойная рамка */
  background: #fc0;			/* Цвет фона под текстом */	
  padding: 5px				/* Поля вокруг текста */
  }

В нужном месте вставляем следующий код:

<p class="ramka">Здесь располагается ваш текст, который вам нужно выделить. </p>

У вас должно получиться так:

Посетите сайт Новичок для новичков, созданный для изучения html и css. Здесь Вы научитесь строить свои собственные сайты.


Типы рамок:


solid - одинарная линия
double - двойная линия
dotted - точечная линия
dashed - пунктирная линия

Назад



В. Как выделить слово или часть предложения инверсным цветом?

О. Для того, чтобы выделить текст инверсным цветом, создаем следующие стили:

 .inverse {
  font-family: Arial;		/* Шрифт Arial */
  font-weight: bold;		/* Жирное начертание */
  background: gold;		/* Золотистый фон */
  color: blue;			/* Символы синего цвета */
  padding: 3px			/* Поля между текстом и границей */
}

В нужном месте вставляем следующий код:


<span class=inverse>Ваш выделяемый текст</span>

Выглядеть все это будет следующим образом:


Для рассылок своих писем используйте сервис Smartresponder.ru совершенно бесплатно.


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


Назад



В. Как в тексте html написать формулу?

О. Иногда бывает ситуация, когда в текст необходимо вставить какую-либо формулу или установить сноску. Для этих целей применяются тэги <sup> и <sub>, которые переводят символы в верхний или нижний индекс. Для этого создадим стилевые классы: 

 .math { 
   font-style: italic; 			/* Наклонный стиль */
   font-size: 150% 			/* Размер шрифта */
   font-family: Times New Roman, Arial, Verdana; /* Шрифт */
   text-align: center;			/* Центрируем */
}	
 .sup { 
   vertical-align: 0.8em; 		/* Сдвигаем текст вверх */
   color: red;				/* Красный цвет верхнего индекса */
   font-size: 70%			/* Уменьшаем размер шрифта */
}
 .sub { 
   vertical-align: -0.8em;		/* Сдвигаем текст вниз */
   color: blue; 			/* Синий цвет нижнего индекса */
   font-size: 70%
}

В нужном месте создаем формулу с применением тэгов <sup> и <sub>.


<p class=math>f(x) = a<span class=sub>0</span> + a<span class=sub>1</span> x + ... + a<span class=sub>n-1</span> x<span class=sup>n-1</span> + a<span class=sub>n</span> x<span class=sup>n</span></p>

В итоге мы получаем вот такую красивую формулку многочлена стпени n:


f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn


Назад



1 2 3 Следующая


Страница 1 из 3

Реклама


Hosted by uCoz