что такое стиль перейти ↓
★ что такое CSS перейти ↓
★ что можно сделать с помощью стиля перейти↓ ★ задание стиля внутри кода элемента (встроенный стиль) перейти↓
★ задание стиля вне кода элемента
(внутренний стиль) перейти↓
★ создаем документ средствами CSS перейти↓
★ создание с помощью стиля изображений: перейти↓
круг круг с окантовкой
треугольник перевернутый треугольник
свой дизайн кнопки обработчика
★ как заменить одну картинку другой перейти↓
чистый HTML
чистый CSS
чистый JavaScript
смена фоновой картинки
★ анимационные эффекты с помощью CSS перейти↓
растягивание элемента
Затухание элемента
Поворот элемента
смена картинок с затуханием
смена картинок с плавным исчезновением ★ простое новое окно средствами CSS перейти↓
★ как задать hover сразу для нескольких элементов перейти↓ ★ маленькие хитрости CSS перейти↓
как убить шрифт
как отцентрировать текст в рамке по вертикали
как изменить расстояние между буквами и строками
как изменить стиль ссылки
как изменить стиль рамки
как отменить стиль элемента
Как изменить изменить значение атрибута стиля в идентификаторе с помощью JavaScript
Как избавиться от рамки при клике на focus
Как избежать искажения рамки вокруг текста
что такое tabindex
что такое z-index
как вставить текст в внутренний стиль CSS
как сделать перенос строки в тексте, записанном в стиле CSS
что такое стиль
Для придания HTML-документу определенного внешнего вида, т.е. его
оформления, каждый элемент HTML-документа имеет атрибут под названием
"стиль" (style). Стиль - это правило,описывающее форматирование отдельного
элемента на странице. Свойства атрибута "стиль" позволяют задать тип,
размер и цвет шрифта, расположение элементов HTML-документа на экране
монитора, сделать элемент невидимым или снова вернуть ему видимость
и многое другое.
что такое CSS
Для описания внешнего вида веб-страницы используется язык CSS. Аббревиатура
CSS расшифровывается следующим образом: Каскадные Таблицы Стилей(Cascading
Style Sheets). CSS — формальный язык описания внешнего вида документа,
который используется как средство описания, оформления внешнего вида веб-страниц.
CSS и HTML - это два разных языка для разных целей. Язык HTML-кода отражает
смысловое содержание и логическую структуру веб-страницы. Язык CSS используется
для описания внешнего вида, дизайна веб-страницы.
Например, чтобы задать размер шрифта и его цвет для одного конкретного абзаца
текста в рамках документа, нужно записать код:
<p style="font-size: 25px; color: red;"></p>
В этом примере внутри тэгов style расположен стиль, задающий красный цвет текста
и его размер (25px).
Или: установить элементу с идентификатором id="text" красный цвет
текста с помощью атрибута style. Пишем:
<p id="text"></p>
<script>
document.getElementById("text").style.color = "red";//св-во color объекта style
</script>
Текст, выведенный с помощью идентификатора text, будет красным.
что можно сделать с помощью стиля
Как было указано выше, стиль позволяют задать тип,размер
и цвет шрифта, расположение элементов HTML-документа на экране монитора,
сделать элемент невидимым или снова вернуть ему видимость и многое
другое. ПОСМОТРИТЕ, как с помощью стиля можно создать то или иное
оформление Web-страниц.
задание стиля внутри кода элемента
(встроенный стиль)
Проще всего записать стилевое описание непосредственно в самом элементе.
Оно включает перечисление наименований свойств атрибута "стиль" и их значений
внутри кода элемента. Таблица стилей, заданная внутри элемента HTML при помощи
атрибута style, называется встроенной. Если вы решите изменить цвет и размер шрифта
абзаца каком-то месте документа, то можно записать
<p style="font-size:20px; color:red"></b>далее идет текст</p>
Если точно такое же изменение потребуется в другом месте документа, придется
повторить указанный код.
Для разделения элементов списка между собой используется знак "точка
с запятой" (;). Например, для задания расположения элемента в окне для отступа
сверху мы пропишем следующее: margin-top: 10px. Для отступа справа: margin-right:
0px. Для задания отступа снизу: margin-bottom: 0px. Для задания отступа слева:
margin-left: 40px.
Можно все объединить, прописав следующее: margin: 10px 0px 0px 40px;
Цифры после margin означают отступы: сверху, справа, снизу и слева.
Например, для картинки код стиля будет выглядеть так.
<img SRC='18.jpg' style='width:375; height:250; margin-top:10px;
margin-left:50px;'>
Можно сократить код стиля:
<img SRC='18.jpg' style='width:375; height:250; margin: 10px 0px 0px 50px;'>
Эти коды помещают в body между <div> и </div>.При наличии в окне браузера большого количества элементов величины margin-top могут принимать отрицательные
значения.
Для понимания терминов позиционирования элемента приводим
две картинки,взятые из сайта Романа Чуева.
задание стиля вне кода элемента
(внутренний стиль)
Второй способ задания стиля именуется «внутренний стилем». При
использовании внутренного стиля свойства элемента достаточно указать только один раз
между тегами <style> и </style> после кода </head>. Задав набор параметров (стилей)
для каждого отдельного элемента сайта, в дальнейшем нужно будет просто указать
его наименование, а не прописывать все характеристики каждый раз полностью.
Набор параметров (стилей) образует список, элементы которого можно записывать
как в одну строку, так и в несколько. Начинается список строкой, содержащей
имя элемента и открывающую фигурную скобку (закрывающая скобка указывает на
конец списка). Для разделения элементов списка между собой используется знак
"точка с запятой" (;). Будьте внимательны: забыли одну скобку или двоеточие — все:
ничего работать не будет, стиля как будто не существует.
Как указать элемент, к которому применяется встроенный стиль? Это можно
сделать двумя способами. Либо задать идентификатор внутри элемента HTML при помощи
атрибута id, либо задать класс с помощью атрибута class внутри элемента HTML.
Если стиль задается через идентификатор, то в первая строка списка будет
содержать знак диеза # и имя самого идентификатора. Если вместо идентификатора
используется класс, то строка начинается с точки . и к ней приписывается имя класса.
Применительно к стандартным элементам (table, img, tr и т.п.) точку не ставят.
Примеры использования "id" и "class" применительно к стилю рассмотрены в
дальнейших примерах.
создаем документ средствами CSS
Проиллюстрируем задание стиля следующим примером. Создадим
несколько блоков, которые отобразятся в окне браузера как текст и изображение.
Последнему создадим некоторое обрамление в виде рамок и фона (две рамки,
пространство между которыми (фон) сделаем цветным). Как мы помним встроенный стиль,
который мы будем а основном использовать открывается тегом <style>. Далее создаем
внешнюю и внутреннюю рамку.
<style>
#kvad1
{
border: 6px solid red;
width: 600px;
height: 400px;
margin-left: 140px;
margin-top: 80px;
background-color:cyan;
}
#kvad2
{
border: 6px solid yellow;
width: 500px;
height: 300px;
margin-left: 33px;
margin-top: -3px;
background-color:#c71585;}
Как видим, внешняя рамка поименована как kvad1, внутренняя как kvad2. Мы
получили два блока, обращение к которым идет через идентификатор (знак#). Для
каждой рамки мы указали ее размер, толщину, цвет, отступы слева и сверху от
краев окна браузера, цвет фона между рамками. Следует учесть, что значения
отступов имеют условный характер.
Чтобы эти блоки показались на экране сразу начнем формирование
соответствующих тегов в body.
<body>
<div id="kvad1">
<div id="kvad2"><img id="card" src="18.jpg">
</div></div>
Имя блока помещается между тегами <div> и </div>. Открыв два открывающих тега
<div, мы сразу же не забываем записать два закрывающих тега </div>. Поскольку
картинка будет помещена во внутреннюю рамку, т.е. в блок #kvad2, ее код должен
следовать сразу за кодом этого блока. Стиль картинки (ее размеры, позиционирование)
зададим в встроенном стиле (выше body). Присвоим ее блоку наименование #card.
Вообще-то img - стандартный элемент и можно было бы использовать img как наименова-
ние блока (без знака #). Но если у вас на странице есть еще картинки, они мгновенно
попадут под этот стиль (например, станут одного размера). Поэтому мы и выбираем
наименование #card.
#card
{
width: 320px;
height: 200px;
margin-top: 25px;
}
Перейдем теперь к текстовым блокам. Два из них зададим как идентификаторы
#title1 и #title2. Их свойства опишем в внутреннем стиле (выше body). Для третьего
(выше body). Для третьего используем встроенный стиль (внутри его кода, записанного
в body.
#title1
{
border: 6px solid #5000aa;
border-radius: 10px;
width: 740px;
height: 60px;
margin-top:-40px;
text-align: center; font-size:45px;color: yellow;
font-weight: bold;
}
#title2
{
margin-top:-30px;
text-align: center; font-size:45px;color: red;
font-weight: bold;
}
</style>
Поскольку блок #title2 завершает внутренний стиль, после него не забываем поставить
закрывающий тег </style>.
Третий текстовый элемент поместим между тегами <p и </p> в body. Кодировка
body примет следующий окончательный вид:
<body>
<p id="title1">Пример использования стилей</p>
<p id="title2">Эта строка имеет внутренний стиль</p>
<div id="kvad1">
<div id="kvad2"><img src="18.jpg">
<p style='margin-top:-530px;font-family: Arial;
text-align: center; font-size:40px;color: blue;font-weight: bold;'<Эта строка
имеет встроенный стиль</p>
</div></div>
</body>
Теперь посмотрим,как выглядит созданный документ.Посмотреть
создание с помощью стиля изображений
Средствами чистого CSS можно создавать изображения. Приведем
некоторые примеры. Все отступы работают только для этой страницы.
круг
</head>
<body>
<div id="ita" style=" border-radius: 70px; width: 70px; height: 70px;
background-color: #0000ff; margin-left:20; margin-top:0">
</div>
</body>
круг с окантовкой
</head>
<style>
.round {
margin-left: 30;
width: 70px;
height: 70px;
border-radius: 70px; /*параметры круга*/
background: cyan; /*заливка*/
border: 12px solid red; /*окантовка*/
}
</style>
<body>
<div class="round"></div>
треугольник
</head>
<style>
#itak {
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-left: 45px solid transparent; //растягивает по горизонтали влево
border-right: 45px solid transparent; //растягивает по горизонтали вправо
border-bottom: 75px solid red; //растягивает по вертикали
}
</style>
<body>
<div id="itak">
</div>
</body>
перевернутый треугольник
</head>
<style>
#kati {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 50px solid transparent;
border-top: 90px solid red;
margin-left:30;
margin-top:0;
}
</style>
<body>
<div id="kati"></div>
свой дизайн кнопки обработчика
С помощью стиля можно придать разнообразный дизайн кнопкам обработчиков.
Самый примитивный способ придать кнопке неординарный вид - задать в ее коде
стиль фона, бордюра, цвета и размера шрифта. С помощью размера шрифта можно
регулировать размеры кнопки - ее длину и высоту. Все это делается с помощью
простого кода. <body>
<input type="button" style='font-size:30px; color:purple;
border:6px solid red; background-color:cyan '
value=пуск onClick="alert('Кнопка работает')"></body>
Более изощренный дизайн требует стиля с большим количеством элементов.
Можно создать кнопку, используя только встроенный стиль
(чистый CSS). Например, следующий код создаст такую кнопку
<style>
#itak112
{border-radius: 10px;
border:6px solid red;
background-color: cyan;
text-align:center;
padding:1px;
width: 85px;
height: 57px;
margin-top:-100px;
margin-left:900px;
color:black;
-webkit-box-shadow: 0px 6px 0px #ff0000;
-moz-box-shadow: 0px 6px 0px #ff0000;
box-shadow: 0px 6px 0px #ff0000;
}
</style>
При этом в body следует записать
<body>
<div id="itak112"><input type=button style=' font-size:40px;
background-color: transparent;'
value=OK onClick="Show()">
</div>
Можно создать кнопку методом document.write в скрипте. В следующем примере так
создается кнопка "ВОЗВРАТ". Она появляется в новом окне после
нажатия кнопки "ПУСК", которая обычным способом записана в body .
Кнопка "ВОЗВРАТ" является сочетание кода ячейки в таблице и кода изображения.
Кроме того, она выполняет функцию ссылки (сама кнопка расположена чуть ниже).
<script>
function WWA()
{
document.write('<table style="background-color: cyan; border-radius: 20px; "
border=8> '); //строку не разрывать
document.write('<tr><td ><a href="jav21.html"><img src="9.jpg"></a><font size=5
color=red><BR>ВОЗВРАТ</td></tr>') //строку не разрывать
document.write('<BR><BR></table>');
}
</script>
</head>
<body>
<input type="button" value="ПУСК" style='border:8px solid red;
background-color: yellow; border-radius: 20px; font-size:30px; color:green'
onclick=WWA()>
Нажмите кнопку "ПУСК"
Наиболее эффектные кнопки обработчиков включают в себя изображение (картинка).
Это касается и последней кнопки "ВОЗВРАТ", и кнопки ОК в заголовке этого
раздела. Главные коды для кнопки в заголовке приводятся ниже.
<style>
#itaka111
{
width: 65px;
margin-top:-120px;
margin-left:25px;
}
</style>
<script>
qw="Кнопка работает"
</script>
</body>
<div id="itaka111" onClick=alert(qw)><img src='111.png'>
У кнопки ОК в заголовке простой встроенный стиль, задающий ширину и
местоположение на экране браузера. Код изображения (img) записывается в body.
Можно убедиться, что все
представленные здесь кнопки - "живые".
Как заменить одну картинку другой
Замену одной картинки на другую можно произвести либо с помощью чистого CSS,
либо с помощью чистого HTML. Рассмотрим два самых простых способа.
Чистый HTML
<body>
<img src="12.jpg" style='width:450px' onmouseover="src='159.jpg'"
onmouseout="src='12.jpg'">
</body>
Кодировка this.src означает, что при наведении курсора
(onmouseover) на "это изображение", т.е. на то, которое
в коде записано перед этим (531.jpg), оно заменяется на
другое (18.jpg). Одновременно размеры "этого изображения"
меняются на другие. Аналогично при уводе курсора
(onmouseout) происходит возврат к исходному изображению
и изменение размера картинки. Возможность при смене картинки
менять ее размеры - большое преимущество этого метода.
Чистый CSS
<style>
<!--задаем 1-ый(tim) и 2-ой(tam) рисунки. tam пустой, но будет записан в body>
.tam { }
img {margin-top:85px; //задает расположение изображения
width: 300px; //размер изображения
height: 200px;
}
.tim {display:block; position:absolute;} //полная видимость
.tim:hover {opacity:0} //полная прозрачность-рис. исчезает
</style>
<body>
<div
<img class="tim" src="150.jpg">
<img class="tam" src="03.jpg">
</div
</body>
В этом примере смена картинки происходит только за счет
встроенного стиля, т.е. чистого CSS. При наведении курсора
(этому соответствует кодировка .tim:hover, которая будет
разъяснена ниже в разделе "Как применить hover сразу для
нескольких div-блоков") происходит изменение прозрачности:
1-ая (верхняя) картинка становится прозрачной, т.е.
невидимой {opacity:0}. 2-ая (нижняя) картинка становится
видимой. При уводе курсора приходим к исходному состоянию.
Размер картинок можно задавать произвольно в блоке img, но
он будет одинаков для обеих картинок. В принципе, каждой
картинке можно задать свои размеры в div-е, но тогда одна
картинка будет вылезать из-под другой.
Чистый JavaScript
Для полноты картины рассмотрим смену картинок с помощью чистого JavaScript (для
сокращения кода в body размеры картинки перенесены во встроенный стиль.
<head>
<style>
.img {
width: 300px;
height: 200px;
}
</style>
<script>
function mouseOver(){
document.getElementById("button").src="03.jpg";}
function mouseOut(){
document.getElementById("button").src="18.jpg";}
</script>
</head>
<body>
<img class="img" src="18.jpg" id="button" onmouseover="mouseOver()"
onmouseout="mouseOut()"></a>
В этом примере задаются две функции (MouseOver и MouseOut),
в каждой из которых записан код вывода изображения с помощью
метода getElementBy(Id), используя идентификатор button.
Используя события onmouseover и onmouseout, при наведении
курсора выводится одна картинка, при уводе курсора - другая.
Смена фоновой картинки
<style>
.trim{
margin-top: -280px; //значения условные
margin-left: -180px; //значения условные
display: block;
background:url("18.jpg") center ; //первый рисунок
background-repeat: no-repeat ;
width: 600px;
height: 400px;
opacity: 1;
}
.trim:hover{
background:url("531.jpg") center;
background-repeat: no-repeat;
background-size: 100% 100%; //второй рисунок
}
</style>
<body>
<div id="trim" ></div>
</body>
посмотреть
Особенность фоновых картинок состоит в том, что они создаются исключительно
средствами CSS. Поэтому вызывают изображение по единому электронному адресу
ресурсов в интернете (url), который указывают внутри блока встроенного
стиля. Для задания размеров картинки надо либо указать либо ширину (width) и
высоту (height) в пикселях (px), либо соответствующие им проценты в коде
background-size. Кодировка background-repeat: no-repeat устраняет
повторение картинки на экране браузера в случае малого размера картинки.
Замене картинок путем наведения курсора соответствует блок #tim:hover.
Дополнительно приведем кодировку смены картинок, которая сопровождается
увеличением размера второй картинки. Кроме того, размер первой картинки уменьшен
по сравнению с оригиналом (30% от width=600px и height=400px).
<style>
#tim
{
width:600px;
height:400px;
margin-left:20px;
margin-top:10px;
background-image:url("77.jpg");
background-repeat: no-repeat;
background-size: 30% 30%;
}
#tim:hover
{
background-image:url("60.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
<body>
<div id="tim" ></div>
</body>
Анимационные эффекты с помощью CSS
С помощью CSS можно проделывать не просто разнообразные изменения элементов.
Этим изменениям можно придать эффект растянутости во времени, т.е. наделить их
свойством двигаться. Осуществляется это с помощью "движков", которым
соответствуют определенные коды. Если у вас не очень старая версия браузера,
то вы используете код -webkit-transition, -webkit-transform и другие, начинающиеся
со слова -webkit. Для поддержки ранних версий браузеров использовались коды
движков, начинающихся с -moz или -ms. Многие авторы в интернете в документе
вываливают сразу коды всех движков. Вам же нужно убедиться, какой именно один
из трех переваривает ваш браузер и ограничиться одним кодом.
Растягивание элемента
В этом примере рассматривается изменение размеров квадрата, но попутно
добавлено изменение цвета рамки и фона. Если бы речь шла только об изменении
размера, нужно использовать кодировку -webkit-transition: width 2s, height 2s;
Это означает, что для изменения ширины и высоты квадрата мы задали время 2 секунды.
Затем в кодировку #wox1:hover{} внутри фигурных скобок мы прописываем, какие именно
значения ширины и высоты мы хотим иметь после окончания движения:
#wox1:hover {width: 250px; height: 250px;}
Если одновременно с размерами, мы хотим изменить вдобавок еще и другие
свойства, мы вписываем их в фигурные скобки. При этом в коде "движка"
-webkit-transition мы должны были бы перечислить эти свойства. Но можно не
заморачиваться этим, а просто записать -webkit-transition: all 2s;
<style>
#wox1 {
display: block;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: -80px;
background-color: pink;
border: 6px solid red;
-webkit-transition: all 2s;
}
#wox1:hover {
background-color: #00FF00;
width: 250px;
height: 250px;
border: 6px solid yellow;
}
</style>
<script>
function FF()
{
document.getElementById('wox1').style.display ='block'
}
</script>
<body> посмотреть
Затухание (медленное исчезновение) элемента
Свойство transition (в переводе на русский означает «переход») придает изменению
стиля растянутость во времени (плавность перехода). К примеру, цвет блока при
наведении на него мышкой изменится не резко, а в течение определенного времени.
Элемент как бы растворяется в воздухе. Код эффекта очень простой:
-webkit-transition:5s; он указывает, что переход от полной видимости
(непрозрачности) до полной невидимости (полной прозрачности) происходит за 5
секунд. Начинается переход при наведении курсора в соответствии с кодом
#tram:hover{opacity:0}.
<style>
#tram{
width:450px;
height:300px;
-webkit-transition:5s ; //время эффекта
}
#tram:hover{
opacity:0; //прозрачность
}
</style>
<body>
<div id="tram"><img src="1002.jpg"></div>
Смена картинок с затуханием
Замена одной картинки другой за счет плавного затухания (исчезновения) верхней
картинки. Код эффекта очень простой (он уже был приведен выше):
-webkit-transition:3s; он указывает, что переход от полной видимости
(непрозрачности) до полной невидимости (полной прозрачности) происходит
за 3 секунды. Начинается переход при наведении курсора в соответствии с кодом
.tremf:hover{opacity:0}.
<style>
.tremf {display:block; position:absolute;}
.tremf:hover{opacity:0;
-webkit-transition:3s ; //время эффекта
}
</style>
<body>
<div><img class="tremf" src="03.jpg">
<img class="tremf" src="18.jpg">
</div>
посмотреть
Смена картинок с плавным исчезновением
Еще один интересный эффект при смене картинок - "схлопывание верхней картинки".
Уменьшаясь в размерах картинка стягивается в точку, однако процесс "схлопывания"
происходит не мгновенно, а плавно. Задав определенное время в коде
-webkit-transition: all 1s можно это "схлопывание" сделать либо мгновенным,
либо значительно растянуть во времени.
<style>
.rom img {
margin-left: 400px;
margin-top: -300px;
position:absolute;
-webkit-transition: all 1s ;
}
.rom img.raz
{
height: 400px;
width:600px;
-webkit-transform:scale(0);
}
.rom:hover img.raz
{
-moz-transform:scale(1);
-webkit-transform:scale(1);
}
.rom:hover img.dva
{
-moz-transform:scale(0);
-webkit-transform:scale(0);
}
</style>
<body>
<a class="rom" href="#">
<img class="raz" src='18.jpg' width = "300" height="200">
<img class="dva" src='03.jpg' width = "300" height="200">
</a>
посмотреть
Простое новое окно средствами CSS
В интернете есть много примеров создания нового (всплывающего или модального) окна.
Однако в большинстве они очень громоздкие по коду и оставляют желать лучшего в
отношении пояснений. Мы создадим несколько окошек, начиная с самого простого.
Его кодировка такова.
<style>
#new-wind {
width: 600px;
height: 500px;
text-align: center;
padding: 15px;
border: 6px solid red;
border-radius: 10px;
background-color:#0f9;
position: fixed;
top: 0px;
right: 0;
bottom: 0;
left: 0px;
margin: auto;
display: none;
}
#new-wind:target {display: block; }
a{text-decoration: none; font-size:20px;border: 4px solid red;}
</style>
</head>
<body>
<div id="new-wind">
<a href="#price"Закрыть окно</a>
<pЗдесь можно расположить content</p>
</div>
<a href="#new-wind"<Открыть новое окно</a>
</body>
Основному блоку присвоен идентификатор #new-wind. Напомним, что блок - это
совокупность стилевых свойств, ограниченная фигурными скобками и имеющая
наименование. В этом блоке мы перечисляем: широту и высоту окна, центровку текста,
рамку и ее закругление, цвет фона. Далее задаем позиционирование. Наконец,
поскольку в неактивном состоянии окно должно быть скрыто, последней строкой в блоке
стиля окна указываем display: none.
Для вывода нашего модального окна из неактивного состояния используем псевдо-
класс target. Последний изменяет режим вывода элемента, поэтому наше модальное окно
будет выводиться при нажатии на ссылку. Псевдо-класс :target позволяет связать
гиперссылку <a> с любым элементом на странице, при этом значение атрибута href ссылки
должно начинаться с символа # и содержать либо идентификатор id выбранного элемента,
либо метку (якорь). При нажатии на ссылку с псевдо-класс :target в
соответствии с идентификатором или якорем перенаправляет документ к этому
элементу, т. е. этот элемент становится целью (отсюда и :target- цель, мишень).
В теле документа (после body) между <div> и </div> перечисляем идентификаторы.
Закрытие окна привязываем к внутренней ссылке с якорем. Код гиперссылки на открытие
окна (которая должна быть на странице основного документы) записываем после </div>.
Наконец в представленной кодировке имеется строка
a{text-decoration: none; font-size:20px;border: 4px solid red;}
Это стиль ссылок. В нем отменено подчеркивание и задана рамка красного цвета.
Открыть новое окно 1
Немного усложним наше окно. Создадим стили для кнопки "закрыть" и для
заголовка. Теперь они будут независимыми элементами окна и при необходимости можно
внести изменения в их стиль. Кроме того, запишем в окно текст. Для разнообразия
стилевые блоки для этих элементов оформим как классы. Блок заголовка и блок
текста кодируются так.
.title1{
margin-top:0px;margin-bottom:0;
text-align: left; font-size:30px;color: yellow;
font-weight: bold;
}
.title2
{
margin-top:0px;margin-bottom:0;
text-align: left; font-size:70px;color: red;
font-weight: bold;
}
Блок закрытия окна
.close
{
margin-left:400px;
margin-top:-330px;
padding:1px 5px 0;
border:2px solid red;
font-size:20px;
right:4px;
}
Блок <div>.... </div> нужно дополнить кодами
<p class="title1">Заголовок модального окна</p>
<p class="title2">Здесь можно<BR> расположить<BR> content </p>
<a href="#met" class="close">закрыть</a>
Посмотрите, что из этого получилось.
Открыть новое окно 2
Теперь вложим в новое окно небольшой content. Придадим ему динамический
характер (здесь одним стилем на обойтись - потребуется использование
JavaScript). Посмотрите, как это выглядит. Открыть новое окно 3
Как задать hover сразу для нескольких элементов
При работе с изображениями широко используется псевдокласс hover. Псевдоклассы -
это особые свойства, которые позволяют менять стиль элемента в зависимости от
действий пользователя. Классическим примером применения псевдоклассов является
ссылка, которая меняет свой цвет при наведении на неё курсора.
Если мы хотим изменить стиль элемента, это можно сделать с помощью псевдокласса
hover. Чтобы наведение курсора изменяло вид элемента, используется
следующий синтаксис: элемент:hover { ... }
Этот код срабатывает срабатывает, когда пользователь наводит курсор на элемент,
но при этом кнопка мыши не нажата.
Иногда нужно, чтобы при наведении курсора на один элемент изменения происходили
и в других. При этом может возникнуть сложность в записи кода hover сразу
для нескольких элементов. Начнем с простого примера.
Пусть в встроенном стиле находится блок
<style>
.aa {
border: 6px solid red;
width: 190px;
height: 100px;
background-color: #0000FF;
text-align: center;
font-size:35px;
color:yellow;
}
</style>
Чтобы его свойства изменились при наведении курсора, в стиль нужно добавить
следующую запись:
.aa:hover
{
width: 300px;
height: 130px;
background-color: green;
font-size:0px;
}
С помощью hover мы изменили размер прямоугольника, цвет фона и отменили текст.
посмотреть
Усложним задачу. Пусть мы имеем три блока и хотим, наведя курсор на один блок,
вызвать изменения сразу в трех. К уже имеющемуся блоку аа добавим еще два: два
прямоугольника, один из которых подобен блоку аа (блок bb), а другой (dd) содержит
надпись "наведи курсор на верхний квадрат".
.bb {
border: 6px solid red;
width: 210px;
height: 100px;
background-color: #0000FF;
font-size:0px;
}
.dd
{
border: 6px solid red;
border-radius: 8px;
height: 50px;
width: 330px;
text-align: center;
font-size:20;
color:green;
font-weight: bold;
background-color: yellow;
}
Сразу не забудем дать этим блокам описание в body:
<div class="bb">текст<BR>появился</div>
<div class="dd">Наведи курсор <BR>на верхний квадрат</div>
Применим и к новым блокам псевдокласс hover:
.aa:hover + .bb{
font-family:Monotype Corsiva;
text-align: center;
font-size:35px;
background-color: pink;
height: 130px;
width: 320px;
text-align:center;
font-size:45px;
color:blue;
}
.aa:hover ~ .dd{display: none}
Обратите внимание на запись кода hover, когда мы применяем его к нескольким элементам:
в первой строчке ставим знак +, а во второй - знак подобия ~. Теперь посмотрим, что у
нас получится при наведении курсора на верхний квадрат.
посмотреть
Мы видим, что наведение курсора на верхний прямоугольник производит изменения сразу в
трех блоках: верхний блок исчезает, а в двух нижних происходят изменения с фоном,
размером и текстом.
Заметим, когда нужно произвести ОДИНАКОВЫЕ изменения в трех блоках,
можно было бы обойтись самым кратким кодом:
.a:hover, .b:hover, .c:hover{}
Однако все блоки вели бы себя как независимые, т.е. курсор вызывал изменения только в
наведенном блоке.
Как прикрепить CSS к скрипту
Рассмотрим, как задается CSS для элементов скрипта. С помощью метода document.write
создадим две таблицы: одну с внутренним стилем (вне кода элементов) между
тегами </head> и <script>), другую - с встроенным стилем (внутри кода элементов).
Еше две таблицы, идентичные первым двум, записаны внутри функции и
призваны продемонстрировать специфические взаимоотношения CSS и метода
document.write. Также скрипт содержит коды, соответствующие выводу и скрытию
элементов с задержкой и без нее.
</head>
<style>
#xox
{
display: block;
}
#xox1
{
display: none;
}
#tab2
{
border-color:red ;
border-style: solid;
border-width: 6px;
width:160px;
height:160px;
font-size:25px;
color:blue;
text-align: center;
}
#td2a
{
border-color:purple ;
border-style: solid;
border-width: 4px;
background-color: cyan;
}
#td2b
{
border-color:purple ;
border-style: solid;
border-width: 4px;
background-color: pink;
}
#td2c
{
border-color:purple ;
border-style: solid;
border-width: 4px;
background-color: cfc;
}
#td2d
{
border-color:purple ;
border-style: solid;
border-width: 4px;
background-color: green;
}
</style>
<script>
tab0="<TABLE id='xox'><TD>"
tab2="<TABLE id='tab2'>"
sj5="<td id='td2a'>ячейка 1</TD>"
sj6="<td id='td2b'>ячейка 2</TD><TR>"
sj7="<td id='td2c'>ячейка 3</TD>"
sj8="<td id='td2d'>ячейка 4</TD></TABLE>"
tab3="<TABLE width=160px height=160px style=' border-color:red; border-style: solid;
border-width: 6px;text-align: center;'>"
sj9="<td style='font-size:25px; color:blue; border-color:purple;border-style: solid;
border-width: 4px;background-color: cyan;'>ячейка 1</TD>"
Ячейки sj10, sj11, sj12 имеют тот же код, что и sj9, за одним исключением: они
отличаются цветом фона и нумерацией.
sj10="<td style='.....;background-color: pink;'>ячейка 2</TD><TR>"
sj11="<td style='.....;background-color: #cfc;'>ячейка 3</TD>"
sj12="<td style='.....;background-color:green;'>ячейка4</TD></TABLE></td></table>"
Ячейки собираются вместе и вместе с кодом таблицы выводятся методом document.write.
tc2=tab0+tab2+sj5+sj6+sj7+sj8
tc3=tab3+sj9+sj10+sj11+sj12
tc=tc2+tc3
document.write(tc)
Эти же самые две таблицы запишем внутри функции, которую будем запускать кнопкой.
function WW()
{
b="<p align=center><img id='kot' SRC='image.jpg' width=300 height=200 >"
setTimeout('document.write(b)',5000)
setTimeout("document.getElementById('kot').style.display='none'",12000)
setTimeout("document.getElementById('xox1').style.display='none'",6000)
document.getElementById('xox').style.display='none'Далее идет повтор кодировки двух
таблиц, записанной перед функцией.
tab0="<TABLE id='xox1'><TD>"
tab2="<TABLE id='tab2'>"
sj5="<td id='td2'>ячейка 1</TD>"
sj6="<td id='td2'>ячейка 2</TD><TR>"
sj7="<td id='td2'>ячейка 3</TD>"
sj8="<td id='td2'>ячейка 4</TD></TABLE>"
tab3="<TABLE width=160px height=160px style=' border-color:red; border-style: solid;
border-width: 6px;text-align: center;'>"
sj9="<td style='font-size:25px; color:blue; border-color:purple;border-style: solid;
border-width: 4px; background-color: cyan;'>ячейка 1</TD>"
sj10="<td style='.....;background-color: pink;'>ячейка 2</TD><TR>"
sj11="<td style='.....;background-color: #cfc;'>ячейка 3</TD>"
sj12="<td style='.....;background-color:green;'>ячейка4</TD></TABLE></td></table>"
tc2=tab0+tab2+sj5+sj6+sj7+sj8
tc3=tab3+sj9+sj10+sj11+sj12
tc=tc2+tc3
document.write(tc)
t="<BR><span style='font-size:25;color:blue'>Внутренний стиль Встроенный
стиль</span><BR><BR>"
document.write(t)
w="<BR><span style='font-size:28;color:red'>После нажатия кнопки ПУСК у таблицы
с внутренним стилем - стиль исчез, у таблицы с встроенным
стилем -
стиль сохранился.</span>"
document.write(w)
}
</script>
<body >
<input type="button" value="ПУСК" onclick="WW()">
Мы видим, что при запуске функции кнопкой внутренний стиль исчез, а встроенный стиль
сохранился. Это связано со специфическими взаимоотношениями CSS и метода
document.write, которые объясняются
Маленькие хитрости CSS
Приведем ряд кодов стилевого оформления документа, редко упоминаемых в
руководствах по CCS.
Как убить шрифт.
Пусть при наведении курсора шрифт должен исчезать, тогда в стиле мы используем
код #a:hover{font-size:0px;}
Здесь #a - наименование блока, который содержит описание шрифта.Посмотреть 1
Как отцентрировать текст в рамке по вертикали.
Чтобы произвести центровку текста по вертикали,
нужно изменить значение параметра line-height (задается
цифрой в px).Например,
line-height: 40px;
Уменьшая цифры перемещаем текст вверх, увеличивая - -вниз.
Посмотреть 2
При наведении курсора line-height меняется с 40px на 120 px
Как изменить расстояние между буквами и строками.
Расстояние между буквами или цифрами можно изменить, поменяв значение параметра
в коде
letter-spacing: 0.2em;
где em - это относительная единица измерения расстояние между буквами.
Расстояние между строками можно изменить, поменяв значение параметра
в коде
line-height : 50px;
Вместо пикселей (px) можно использовать пункты (pt), высоту шрифта
текущего элемента (em), дюймы(in), множитель (число - как на пишущей машинке)
и так далее.
Посмотреть 3
При наведении курсора letter-spacing: меняется с 0.2em на 0.4em, а line-height: меняется с 70рх до 100 рх
Как изменить стиль ссылки.
Вместо стандартного вида ссылки можно сделать ссылку со своим собственным стилем.
Например, можно убрать подчеркивание, изменить шрифт, изменить фон. Чтобы ссылка
не подчеркивалась используем код:
text-decoration: none;
Чтобы изменить шрифт:
font-family:Arial; font-size:35px; color:green;
Чтобы изменить фон:
background-color: grey;
Чтобы сделать рамку:
border:4px solid red;
посмотреть4
Если стиль ссылки содержит рамку (border), а в ссылке есть якорь, то код якоря
надо записывать так
<a id="metka1" style='opacity: 0'></a>
Иначе появляются две вертикальные линии с высотой с высоту рамки.
Как изменить стиль рамки.
Чаще всего используют сплошную рамку, но ей можно придать и другой вид.
Двойная. border-top: 12px purple double; border-bottom: 12px purple double;
border-left: 12px purple double; border-right: 12px purple double;
Штриховая. border: 6px dashed ;
border-color:green ;
Пунктирная. border: 6px dotted ;
border-color:blue ;
Выпуклая. border: 11px outset ;
border-color:#f0f ;
Посмотреть 5
Как отменить стиль элемента.
Предположим в блоке нужно отменить выше заданный стиль. Рассмотрим это на простом
примере. Пусть при наведении курсора мы хотим иметь изменения размеров двух блоков.
Назовем эти блоки: Блок А и Блок Б. Предположим, что в блоке А мы хотим растянуть
изменение размеров во времени (свойство transition). Время изменения - 2 секунды.
Зададим это изменение в начале внутреннего стиля. Тогда оно будет применяться
к обоим блокам, и его не надо указывать в стиле каждого блока.
*{ -webkit-transition: width 2s, height 2s;}
Но в блоке Б нам свойство transition не нужно, а поэтому в стиле этого блока
его надо отменить. Для этого используем код:
-webkit-transition:none;
Теперь при наведении курсора размеры блока А будут меняться медленно, а размеры
блока Б - мгновенно посмотреть 6
Как изменить изменить значение атрибута стиля в идентификаторе с помощью JavaScript.
Предположим, в ходе выполнения сценария нужно изменить значение атрибута стиля
в идентификаторе элемента, например, display:none идентификатора 'idn'
поменять на display = "block", сделав запись в скрипте. С этой целью в скрипте
организуем функцию change(), в которой обращаемся к идентификатору 'idn'
и указываем новое значение атрибута стиля.
<script>
function change() {
document.getElementById("idn").style.display = "block"
}
</script>
Далее можно организовать задержку этой функции, чтобы изменение срабатывало
через определенное время, либо сделать кнопку, либо обратиться к
функции
document.addEventListener("click", change);
которая производит указанное изменение по клику (без создания кнопки).
Если же изменение значения атрибута стиля нужно произвести внутри уже
имеющейся в скрипте функции, то функцию change создавать не надо, нужно
просто вставить одну строчку
document.getElementById("idn").style.display = "block"
Ниже приводится скрипт по изменению значений атрибутов стиля в двух
идентификаторах. Один из них по имени 'ramka' задает стиль рамки. Этот
идентификатор записан во внутреннем стиле (между тэгами <style> и
</style>). Другой - по имени 'deta' - записан во встроенном стиле,
т.е. в коде картинки. По ходу сценария изменются значения атрибутов
стиля: видимости (с display:none в CSS на display='block' в JavaScript),
цвет фона рамки (с background-color: cyan в CSS на backgroundColor='0f0'
в JavaScript.
При воспроизводстве скрипта с экрана пояснительные записи /*.....*/ должны
быть удалены.
<style>
#ramka {display:none;
left: 200px;
width: 600px;
height: 450px;
position: relative;
padding: 1.5em;
background-color: cyan;
border: 8px solid red;
border-radius: 30px;
margin-top: 35px; margin-left:-180px;
}
</style>
</head>
<body>
<div id="ramka">
<script>
function CSH()
{
z=document.getElementById('ramka') /*изменяем значение видимости */
setTimeout("z.style.display='block'",100); /*делаем рамку видимой */
y=document.getElementById('deta') /*изменяем значение видимости */
setTimeout("y.style.display='block'",2000); /*делаем картинку видимой */
x=document.getElementById('deta') /*изменяем значение видимости */
setTimeout("x.style.opacity='0'",6000); /*делаем картинку невидимой */
p=document.getElementById('ramka') /*изменяем значение цвета фона рамки*/
setTimeout("p.style.backgroundColor='#0f0'",7500);/*меняем цвет фона рамки*/
}
</script>
<div id="deta" style="display: none; margin-left: 75px;margin-top: 80px;">
<p align=center><img SRC='12.jpg' width=450 height=300></div>
</div>
<input type="button" value="посмотреть " style='border:8px solid red;
background-color: yellow; border-radius: 20px; font-size:20px; color:green'
onclick=CSH()>
Как избавиться от рамки при клике на focus.
В браузерах Safari и Chrome иногда при срабатывании обработчика onfocus
(в JavaScript) или псевдокласса focus (в CSS) наблюдается характерное свечение
(рамка, окантовка), которое указывает активное поле. Причем рамка появляется как
вокруг элемента, воспринимающем focus, так и на том элементе, который появляется
при срабатывании focus. Убрать окантовку можно добавлением в стиль CSS (между тэгами
<style> и </style>) кода :focus { outline: none; }Как избежать искажения рамки вокруг текста
Когда текст состоит из нескольких строк, попытка заключить его в рамку может приводить
к появлению рамочного обрамления вокруг каждой строки. В данном случае следует заключить текст
между тегами div и установить для него стиль, а текст вставлять уже внутрь данной «конструкции».
<script>
z='текст из нескольких строк'
imd="<div style='background-color: yellow;border-radius: 12px; width: 570px; height: 75px; border: 5px solid #f00;
line-height:24px;padding:3px; font-size:18px;color:blue;'>"+z+"</div>" //строку не разрывать
document.write(imd)
</script>
Что такое tabindex.
Действие обработчика onfocus( в JavaScript) или псевдокласса focus (в CSS)
основано на событии focus. Это событие заключается в наведении курсора на
сфокусированный элемент с последующим кликом по нему. Элемент считается
сфокусированным, если он обладает способностью оказаться в фокусе курсора.
Ели элемент не сфокусирован, то он является невидимым для курсора мыши, когда
последний перемещается по окну браузера. Некоторые элементы Javascript (их
немного, например, INPUT) являются сфокусированными по умолчанию. Другие
нуждаются в фокусировке. Для этого в коде элемента надо прописать tabindex="1".
Если при этом в стиле указать атрибут "cursor:pointer", он будет сигнализировать
о том, что при движении по окну браузера курсор наткнулся на сфокусированный
элемент: вид курсора изменится со стрелки на лапку.
<style>
.askt {cursor:pointer}
.askt:focus .img{display:block}
</style>
<body>
<div class="askt" tabindex="1">
Посмотреть
Что такое z-index .
Изображение каждого блока появляется на экране в том порядке, в котором они
перечислены во внутреннем стиле (между тегами <style> и </style>). При этом в
пространстве очередной блок располагается поверх предыдущего, т.е ближе к
пользователю. Удаление изображения блока от экрана (соответственно приближение его
к пользователю) задается свойством под названием z-index. Если в стиле он
отсутствует, то по умолчанию он имеет нулевое значение и расположение блоков
перпендикулярно плоскости экрана соответствует вышеописанному.
Если мы хотим какой-то блок удалить от экрана (приблизить к себе) нужно в
стиле этого блока указать z-index=1. Если меняется расположение только одного блока,
цифра задается совершенно произвольно (лишь бы не ноль). Если меняется расположение
нескольких блоков, значение z-index увеличивается по отношению к исходной цифре.
Чем ближе к себе мы хотим видеть изображение блока, тем больше должно быть значение
z-index. В примере "Посмотреть 7" синий квадрат, расположенный (от нас) позади
розового, при наведении курсора приобретает z-index=1 и оказывается впереди розового.
Иногда z-index не помогает, тогда следует в стиль верхнего слоя добавить
наименование позиционирования (без указания параметров), например, position: absolute;
посмотреть 7
Как вставить текст в стиль CSS
Обычно текст вставляют в body, а его параметры задают в стиле.
Можно ли текст вставить непосредственно стиль? Да, можно, если использовать,
например, псевдокласс after. Приведем код, поименовав псевдокласс как aauw:after.
Запишем в стиль предложение: 'Текст, записанный в стиле(class 'aau ',
псевдокласс 'after '), при использовании шрифта Segoe Script'. Код будет такой
.aauw:after{position: absolute; white-space: pre;
content:
"\0aТекст, записанный в стиле\0a(class 'aau ', псевдокласс\0a 'after '), при использовании \0a шрифта Segoe Script" ;
font-family: Segoe Script;
font-size:50px; font-weight: bold;
color: red; line-height: 2.0;}
О некоторых особенностях форматирования текста, записанного в стиле, смотри чуть ниже
в параграфе "Как сделать перенос строки в тексте, записанном в стиле CSS"
посмотреть 8
Как сделать перенос строки в тексте, записанном в стиле CSS
Чтобы сделать перенос в строке, записанной в стиле, нужно в элемент content
вставить свой текст, поместив его в кавычки. Сам код переноса - совокупность
трех символов: наклонная черта, ноль и латинская буква 'a' (\0а).
В целом это выглядит так.
content:
"\0a Эта строка записана с переносом . \0a Сам текст, записан в стиле\0a
при использовании шрифта \0a именуемого как Segoe Script ." ;
Помимо этого, естественно должны быть указаны: псевдокласс (.c:after),
позиционирование, а после записи строки - характеристики шрифта. Это вылядит так:
<style>
.c:after{position: absolute; margin-top:-200px; left: 12%; margin-right: -50%;
content:
"\0a Эта строка записана с переносом . \0a Сам текст, записан в стиле\0a при использовании шрифта \0a именуемого как Segoe Script ." ;
white-space:pre;
font-family: Segoe Script;
font-size:50px; font-weight: bold;
color: green; line-height: 2.0;}
</style>
Чтобы посмотреть, как это работает, кликни по "Щелкни" и сделай это еще три раза.
На что еще надо обратить внимание? Весьма полезным оказывается код
white-space: pre;. С его помощью текст на экране монитора будет
представлен точно так, как написан. В частности расстояние между словами можно
увеличивать с помощью пробелов.
Оглавление (простые скрипты для основных приложений JavaScript)
Кодировка this.src означает, что при наведении курсора
(onmouseover) на "это изображение", т.е. на то, которое
в коде записано перед этим (531.jpg), оно заменяется на
другое (18.jpg). Одновременно размеры "этого изображения"
меняются на другие. Аналогично при уводе курсора
(onmouseout) происходит возврат к исходному изображению
и изменение размера картинки. Возможность при смене картинки
менять ее размеры - большое преимущество этого метода.
Чистый CSS
<style>
<!--задаем 1-ый(tim) и 2-ой(tam) рисунки. tam пустой, но будет записан в body>
.tam { }
img {margin-top:85px; //задает расположение изображения
width: 300px; //размер изображения
height: 200px;
}
.tim {display:block; position:absolute;} //полная видимость
.tim:hover {opacity:0} //полная прозрачность-рис. исчезает
</style>
<body>
<div
<img class="tim" src="150.jpg">
<img class="tam" src="03.jpg">
</div
</body>
В этом примере задаются две функции (MouseOver и MouseOut),
в каждой из которых записан код вывода изображения с помощью
метода 
