Блоки в CSS. Позиционирование блоков css. CSS ширина блока

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Блоки в CSS.В HTML к блочной структуре относят: заголовки h1, h2, h3, h4, h5, h6, параграфы <p> и элементы <div> и т.д.
В блоках могут располагаться картинки, ссылки и т.п.

border

Рамка блока. Чтобы сделать рамку видимой и красивой, нужно указать её стиль.

Имеет такие свойства:
-width — толщину рамки
-color — цвет рамки
-style — стиль рамки.

Стили указываются так:
solid — сплошная рамка
dotted — точечная рамка
dashed — пунктирная рамка
double — из двойной сплошной линии (минимальная толщина 3 пикселя)
groove — рамка с имитацией объемной вдавленной линии
ridge — рамка с выпуклой линией
inset — рамка имитирующая вдавленный блок
outset — рамка делает блок так, что он кажется выпуклым.

Можно писать сокращённой формой. Последовательность такая:
толщина стиль цвет.  Все пишется через пробел, например:

h1
{border: 4px dotted red; }

Пример рамки:

CSS Блоки

Также можно задавать разный стиль для каждой стороны рамки. Подставьте к border -top,
left,
right,
bottom
 
(верх,лево,право,низ),
этим вы уточняете какую именно сторону рамки вы бы хотели заменит в стиле.

>> Пример CSS :

h2{
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: green;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: black; }

В сокращённом виде:

h2{
border-top: 10px solid red;
border-left: 3px dotted green;
border-right: 3px dotted green;
border-bottom: 5px dashed black;}

Можно задать стиль всей рамки, а нужные стороны прописать отдельно.

h2{
border: 20px solid red;
border-top: 5px dashed black;
border-bottom-color: blue; }

 

padding

Это поля внутри блока. Размер от рамки до содержимого в блоке ( размер в пикселях ).

Пример:

CSS Блоки

Здесь также можно задавать значения для отдельных полей, подставляя слова top, —left, —right, —bottom.

Пример:

h2{
padding: 50px;
padding-top: 10px;
padding-lef: 10px;
padding-right: 10px;
padding-bottom: 10px; }

 

margin

Задаёт расстояние отступа от блока до других элементов на странице.
Вы можете задавать расстояние на каждую сторону, подставляя слова top, —left, —right, —bottom.
Пример, общий отступ 100 пикселей, а сверху 10 пикселей.

h2{
margin: 100px;
margin-top: 10px; }

Вот что получится:

CSS Блоки

дальше. — Высота и ширина блоков в CSSчайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

Как изменить цвет в css? css цвет текста. Коды цветов css

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Как изменить цвет в css?Как изменить цвет в css?
За цвет CSS отвечает:
— COLOR
— BACKGROUND-COLOR
— BACKGROUND-IMAGE
— BACKGROUND-REPEAT
— BACKGROUND-ATTACHMENT
— BACKGROUND-POSITION
— BACKGROUND

color

color — определяет цвет какого либо элемента. Например:

h2
{color: green; }
p
{color: red; }

В HTML-документе, заголовки <h2> будут зелёного цвета, а текст в параграфе <p> будет красным.
Цвета в CSS можно задавать не только названием, но и в цифирном значении (Пример: #00cc67).
просмотрите коды цветов css

 

background-color

Определяет цвет фона определённого элемента. Это может быть ячейка таблицы или весь HTML документ полностью и т.д. Пример:

body
{background-color: #000000; }
h2
{color: white;}
р

{color: red;}

Цвет фона <body> документа будет чёрным,
цвет текста в <h2> (заголовок) будет белым,
цвет текста в <р> (содержание) будет красного.


 

 

 

 

 

 

дальше. — картинки в CSSчайник, CSS ДЛЯ ЧАЙНИКОВ

Закругление углов в CSS — border-radius.

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Закругление углов в CSS - border-radius.Часто на сайте нужно использовать закругленные углы и не всегда вставка картинки это выход с положения. На помощь верстальщику пришел CCS.
С помощью CCS, можно закруглить углы быстро и так как мы захотим без вмешательства графики. Это ускоряет работу сайта, который становиться намного легче по весу и профессиональней на вид.

Закругленные углы используются часто в меню сайта,   галереях, контенте,  кнопках, поле поиска,   комментариях.   
Закругление можно сделать при помощи стиля border-radius.

Закругление углов border-radius.

Пример.

<title>Скругление углов методами CSS </title>
<style type=»text/css»>
div
{
font:18px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
padding: 47px;

border: 1px solid #fff;
border-radius: 20px 0 20px 0;

/*указываем закругление для других браузеров*/
-moz-border-radius: 20px 0 20px 0;
-webkit-border-radius: 20px 0 20px 0;
}
</style>

</head>
<body>
<div>

Блок будет иметь скругленные углы.

</div>
</body>

  • -moz-border-radius – закругленные углов для браузеров Firefox.
  • -webkit-border-radius закругленные углов для браузеров Chrome.

Результат:

Блок будет иметь скругленные углы.

Итак:
border-radius: 20px  0     20px   0;
border-radius:   1     2      3      4;

1 – закруглене лево-верх
2 – закруглене право-верх
3 – закруглене право-низ
4 – закруглене лево-низ

Вот еще один пример.

<title>Скругление углов методами CSS </title>
<style type=»text/css»>
div
{
font:18px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
padding: 47px;

border: 1px solid #fff;
border-radius: 120px;
/*указываем закругление для других браузеров*/
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
width: 132px
}
</style>

</head>
<body>
<div>
Блок будет иметь скругленные углы для браузеров Chrome и Firefox. Закругленные углы используются часто в меню сайта, галереях, контенте, кнопках, поле поиска, комментариях. Скругление углов методами CSS на сайте nocrisise.ru.
</div>
</body>

Результат:

Блок будет иметь
скругленные углы
для браузеров
Chrome и Firefox.
Закругленные углы используются часто
в меню сайта,  
  галереях,
контенте,  
кнопках,
поле поиска,   
комментариях.
Скругление углов
методами CSS
на сайте nocrisise.ru.


 

 

 

 

 

 

 

 


дальше. -нестандартные шрифты в CSS
чайник, CSS ДЛЯ ЧАЙНИКОВ

Всплывающие блоки — «Поплавки». css всплывающие блоки

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Всплывающие блоки - "Поплавки".Свойство float

Float – это позиционирования блоков в одной строке. Частенько используется при разработке современных дизайнов  сайта.

Имеет значения :

left — блок будет иметь позицию слева.
right блок будет позиционироваться с правой стороны.
Расположение по умолчанию, это когда блоки располагаются друг за другом вниз.

Пример:

>> В CSS напишем:

.blok1{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok2{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok3{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok4{
height: 100px;
width: 100px;
border: 2px solid blue;}

>> В HTML напишем:

<div class=»blok1″>БЛОК 1<br>LEFT</div>
<div class=»blok2″>
БЛОК 2<br>LEFT</div>
<div class=»blok3″>
БЛОК 3<br>RIGHT</div>
<div class=»blok4″>
БЛОК 4<br>RIGHT</div>

Всплывающие блоки - "Поплавки".

В блоках напишем значения FLOAT которые зададим позже. Для наглядности для первых двух напишем слева, а для двух последних справа.

>> Теперь зададим значение FLOAT.

.blok1
{height: 100px;
width: 100px;
border: 2px solid blue;}

.blok2
{float: left;
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok3
{float: right;
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok4
{float: right;
height: 100px;
width: 100px;
border: 2px solid blue;}

>> В HTML напишем:

<div class=»blok1″>БЛОК 1<br>LEFT</div>
<div class=»blok2″>
БЛОК 2<br>LEFT</div>
<div class=»blok3″>
БЛОК 3<br>RIGHT</div>
<div class=»blok4″>
БЛОК 4<br>RIGHT</div>

Всплывающие блоки - "Поплавки".

Если в HTML-документе после блоков добавить параграф <p>  с текстом, тогда текст окажется в положение между блоками.

Пример:

Всплывающие блоки - "Поплавки".

 

>> Теперь давайте попробуем поставить блоки в низу.
Для этого существует свойство clear.

Свойство clear

Clearпозволяет ставить блоки под блоками.

Имеет значения:
left — размещает блок под левыми всплывающими блоками
right — размещает блок под правыми блоками
both размещает блок ниже всех всплывающих блоков.

Давйте создадим ещё два блока 300х300 пикселей.

>> В CSS добавим стиль:

.bigblok1{
height: 200px;
width: 200px;
border: 2px solid blue;
float: right;
clear: right;}

.bigblok2{
height: 200px;
width: 200px;
border: 2px solid blue;
float: left;
clear: left;}

>> А в HTML :
<div class=»blok1″>БЛОК 1<br>LEFT</div>
<div class=»blok2″>
БЛОК 2<br>LEFT</div>
<div class=»blok3″>
БЛОК 3<br>RIGHT</div>
<div class=»blok4″>
БЛОК 4<br>RIGHT</div>
<div class=»bigblok1″>Большой БЛОК</div>
<div class=»bigblok2″>
Большой БЛОК 2</div>

Получим вот что:

Всплывающие блоки - "Поплавки".

В самих блоках может находиться, текст, списки, картинки, ссылки и т.д.

дальше. — Свойство z-index (слои на CSS)чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

Текст в CSS. Выравнивание текста, подчёркнутый. Как задать в css цвет текста?

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

основы css и htmlЧтобы выровнять текст по вертикали, по центру. Придать отступ тексту или сделать текст жирным или изменить размер и цвет текста, используйте такие правила как:
— TEXT-ALIGN
— TEXT- DECORATION
— TEXT-INDENT
— TEXT-TRANSFORM
— LETTER-SPACING
— WORD-SPACING

 

text-align

Выравнивание текста на странице.
left — выравнивание по левому краю (по умолчанию)
center — выравнивание по центру
right — по правому краю
justify — по ширине экрана ( от левого до правого краёв экрана)

Пример:

h1
{ text-align: center;}
h2 
{text-align: left;}
h3 
{text-align: right;}
p 
{text-align: justify;}

заголовок <h1> будут выровнены по центру,
заголовок <h2> будут по левому краю,
заголовок <h3> справа,
параграфы <p> будут по ширине экрана.

 

text-decoration

Нужен для оформление текста.
noneзначение по умолчанию, обычный текст
underline — подчёркнутый текст
overline — надчёркнутый сверху
line-through — перечёркнутый текст

Например:

h1 
{text-align: center; 
text-decoration: underline; }
h2 
{text-align: left;
text-decoration: overline; }
h3 
{text-align: right; 
text-decoration: line-through; }

заголовок <h1> будет подчёркнутый,
заголовок <h2> будет надчёркнутый сверху,
заголовок <h3> будет перечёркнутый,

text-indent

Применяется для создания абзаца, красной строки. Позволяет сделать отступ для параграфа «p». Пример:

h1
{text-align: center;}
p
{text-indent: 20px; }

Для всех параграфов <p> абзац будет равен 20 пикселям.

text-transform

Предназначен для изменения регистра букв.
none — значение по умолчанию,  ничего не делает
capitalize — Все Первые Буквы Слов Делает Заглавными
uppercase — ДЕЛАЕТ ВСЕ БУКВЫ ЗАГЛАВНЫМИ
lowercase — делает все буквы строчными

h2
{text-align: center;
text-transform: capitalize;}

 

letter-spacing

С этим правилом можно указать расстояние между буквами. Задаётся в пикселях.

h1
{text-align: center;
letter-spacing: 20px; }

Для заголовков <h1> расстояние между буквами будет 20 пикселей.

 

word-spacing

Это правило определяет расстояние между словами в пикселях.

h2
{word-spacing: 30 px; }

расстояние между словами в заголовках <h2> будет 30 пикселей.

 

# У вас наверняка возникли вопросы, например:

Как задать в css цвет текста?

p {color: #cc0000px; }

Цвет текста в параграфе <р> будет красного цвета.

 

Как задать размер текста в css ?

p {font-size:14px; }

Размер текста в параграфе <р> будет 14 пикселей.

дальше. — Шрифты в CSS.чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

Шрифты в CSS. Как задать шрифт в css?

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Шрифты в CSS. Как задать шрифт в css?На шрифты в CSS влияет такие правила как:
— FONT-FAMILY
— FONT-STYLE
— FONT-VARIANT
— FONT-WEIGHT
— FONT-SIZE
— FONT

 

font-family

Это правило позволяет задать тексту определённый шрифт. Например:

h2
{font-family: verdana, arial, sans-serif; }
p
{font-family: «Times New Roman», serif; }

Для заголовка <h2> будет применён шрифт verdana, если его вдруг не окажется то будет использоваться шрифт arial, и уж если нет шрифта arial будет применён sans-serif.
Для параграфов <р> аналогично.

 

font-style

Это правило служит для изменения стиля шрифта.
normal — обычный
italic — курсив
oblique – наклонный

Пример:

h2
{font-family: verdana, arial, sans-serif;
font-style: italic; }

Для всех заголовков <h2> будет использован курсив.

 

font-weight

Позволяет сделать шрифт жирным.  
normal — обычный
bold — полужирный

 

font-size

Размер шрифта. Пример:

p 
{font-size: 80px; }

Размер текста в параграфе <р> будет 80 пикселей.
Можно сделать совсем маленькие буквы или огромные.

 

font

Сокращённая запись всех вышеперечисленных свойств/
Последовательность записи такая:
1 — FONT-STYLE
2 — FONT-VARIANT
3 — FONT-WEIGHT
4 — FONT-SIZE
5- FONT-FAMILY

Пример:

p
{font-style: italic;
font-variant: small-caps ;
font-weight: bold;
font-size: 24px;
font-family: arial, sans-serif; }

Можно заменить и сделать намного короче с правилом «FONT»:

p
{font : italic small-caps bold 24px arial,sans-serif; }

Все значения указываются через пробел!!! Если не указать какое ни будь значение, оно будет использовано по умолчанию.

дальше. — Списки в CSS.чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

Свойство z-index. Cлои на CSS

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Свойство z-index (слои на CSS)С помощью свойства z-index, задаются слои (координаты) на странице.

Пример:

Свойство z-index (слои на CSS)

>> Вот так будет выглядеть CSS файл:

body{
background: #775B06;}

.dama{
position: absolute;
top: 151px;
left: 151px;
z-index: 1; }

.king{
position: absolute;
top: 201px;
left: 211px;
z-index: 2; }

.tyz{
position: absolute;
top: 251px;
left: 271px;
z-index: 3; }

>> В HTML добавим :

<div><img src=»dama.jpg» class=»dama»></div>
<div><img src=»king.jpg» class=»king»></div>
<div><img src=»tyz.jpg» class=»tyz»></div>

С помощью свойства z-index, можно накладывать текст на картинки или наоборот. Можно делать текст с эффектом тени и т.д.


дальше — курсор (cursor) в CSSчайник, HTML ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

Прозрачный CSS фон, цвет фона страницы.

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Цвет фона страницы.

Прозрачный CSS фон, цвет фона страницы.CSS атрибуты, определяющие фон страницы или элемента
Как задать web – странице фон цветом, через CSS?
Для данного запроса воспользуемся атрибутом  background-color.

Цвет фона страницы будет зеленым:

Прозрачный CSS фон, цвет фона страницы.

скопируй код в блокнот и сохрани как «fon.html«

<html https://nocrisise.ru >
<head>
<title>Пример с цветом фона</title>
<style type=»text/css»>

body
{
background-color:#66cc66
}

.fon
{
background-color:#339933;
color:#ffffff
}
</style>

</head>

<body>

<p class=»fon»>Текст белого цвета на зеленом фоне</p>

</body>
</html>

— посмотреть что выйшло. Цвет фона страницы

Атрибуты и значения, которые мы использовали:

  • background-color – определяет цвет фона.
  • color – определяет цвет текста.

Фоновое изображение или CSS картинка как фон.

CSS картинка — фон определяется с помощью изображения атрибутом background-image.
Например, я хочу, чтобы вот эта картинка была моим фоном на сайте:

Напишем код для данного запроса:

скопируй код в блокнот и сохрани как
«fon-2.html«

<html https://nocrisise.ru>
<head>
<title>Картинка — фон в CSS</title>
</head>

<body style=»background-image:url(/wp-content/uploads//wp-content/uploads/img/day.gif)»>

<p>nocrisise.ru – для вашего заработка.</p>
</body>
</html>

Можно записать этот код и по-другому. Оба кода правильны и будут у нас работать одинаково.

скопируй код в блокнот и сохрани как
«fon-2.html«

<html https://nocrisise.ru>
<head>
<title>Пример с цветом фона</title>
<style type=»text/css»>
body
{
background-image:url(/wp-content/uploads//wp-content/uploads/img/day.gif);
}
</style>

</head>

<body>
<p> nocrisise.ru – для вашего заработка </p>
</body>

</html>

Посмотрим, что у нас получилось, пример CSS фон — картинка

CSS прозрачный фон для блока

Как сделать прозрачный фон на CSS? Если для вашего сайта нужно прозрачный фон, это возможно сделать,  используя обычный CSS.

Пример написания кода на CSS , определяющие прозрачность фона:

скопируй код в блокнот и сохрани как
«fon-3.html«

<html https://nocrisise.ru>
<head>
<title>прозрачныйфонна CSS </title>

<style type=»text/css»>
div.page {width:400px; height:350px; background: url(/wp-content/uploads/img/night.gif) repeat; border:1px solid #555555}
div.block {width:270px; height:150px; margin-top:79px; margin-left:94px; background-color:#ffffff; border:1px solid #333333;
/* Internet Explorer */
filter:alpha(opacity=50);
/* CSS3 standard */
opacity:0.5}
div.block p {margin:47px 0 0 10px; font-weight:bold; color:#000000}
</style> 

</head>

<body>
<div class=»page»>
<div class=»block»>

<p>Прозрачный фон для блока. От nocrisise.ru – все для вашего заработка </p>
</div>
</div>

</body>

</html>

— Посмотрим на прозрачный фон для блока

Результат:

прозрачный фон для блока

CSS прозрачность фона работает в Internet Explorer и на других браузерах.

Дополнительно про Картинки в CSS

дальше. — Закругление углов в CSSчайник, CSS ДЛЯ ЧАЙНИКОВ

>> Списки в CSS. Всё на примерах

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Списки в CSSВсе свойства могут применяться как к пронумерованным, так и непронумерованным спискам.

— LIST-STYLE-TYPE
— LIST-STYLE-IMAGE

 

list-style-type

disk — в виде закрашенного кружка
circle — в виде не закрашенного кружка
square — в виде закрашенного квадратика
decimal — арабские числа (1,2,3 и т.д.)
upper-roman — большие римские цифры (I,II,III,IV и т.д.)
lower-roman — маленькие римские цифры (i,ii,iii,iv и т.д.)
upper-alpha — заглавные буквы (A,B,C и т.д.)
lower-alpha — строчные буквы (a,b,c  и так далее)
none — без маркера

Пример:

ol 
{list-style-type: decimal;}
ul
{list-style-type: disk;}

А можно наоборот из пронумерованного списка сделать непронумерованный.

 

list-style-image

Позволяет  вместо стандартного маркера (кружочка или квадратика), поставить своё изображение. Значением является путь к изображению.

ul 
{list-style-image: uгl(bullet.gif); }

Если изображение находится в папке, соответственно путь указывают с папкой, например:

ul 
{list-style-image: uгl(img/bullet.gif); }

И теперь у каждого пункта будет стоять ваш маркер (картинка), это может быть крестик, стрелка, нолик и что угодно.

дальше. — Цвет ссылки в CSS.чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

CSS — курсор (cursor). Cобственные курсоры — картинки (пользовательские курсоры). Формат cursor ANI, CUR и SVG.

скачать бесплатно — » HTML на примерах, всё доступно и просто (для начинающих)»
— — —чайник, HTML ДЛЯ ЧАЙНИКОВ— — —
>> с к а ч а т ь <<

скачать бесплатно — «Как создать классный сайт!
От начала и до конца»
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

CSS - курсор (cursor).Для установки собственного курсора для ваших web – страниц поможет CSS, свойство cursor.

Свойство CSS cursor – служит для изменения внешнего вида курсора.

Свойством cursor можно задавать стандартные виды курсоров, это те, что находятся на компьютере пользователя, а можно загрузить и установить свой личный курсор. Обычно формат курсора CUR или SVG.

> Стандартные курсоры.
Наведите мышкой, понаблюдайте изменение курсора.

  • auto — курсор по умолчанию.

  • crosshair — перекрестие.

  • default  — курсор в виде стрелки.

  • pointer  — курсор обозначающий ссылку.

  • move  — курсор, определяющий объект для  перемещения.

  • e-resizene-resizenw-resizen-resizese-resizesw-resizes-resize , w-resize  — курсоры, обозначающие возможность перемещения края объекта.

  • text  — курсор, обозначающий текст.

  • wait  — курсор, обозначающий загрузку программы или объекта.

  • help  — курсор, означающий справочную информацию, в виде вопросительного знака.

Пример заполнения.

скопируй код в блокнот и сохрани как «cursor.html«

<html>
<head>

<style type=»text/css»>

.help { cursor: help }

.crosshair {cursor:crosshair}

.wait {cursor:wait}

.ne-resize{cursor:ne-resize}

</style>

</head>
<body>

<a href=»#» class=»help»>наведи курсор </a>
<a href=»#» class=»crosshair»>наведи курсор</a>
<a href=»#» class=»wait»>наведи курсор</a>
<a href=»#» class=»ne-resize»>наведи курсор</a>

</body>
</html>

Вот, что должно получиться. При наведении курсора мышки на ссылку, курсор будет меняется.

.наведи курсор./.наведи курсор./.наведи курсор /.наведи курсор

> Собственный курсор-картинка на CSS
Для установки на сайт собственного курсора укажите в свойстве cursor путь к самому курсору-картинке.

cursor : url(‘путь к курсору‘), стандартный курсор

Для наглядности приведу примеры:

P { cursor : url(«my.cur«), text; } 
P { cursor : url(«
my.svg«), url(«my.cur«), auto; }

Пример заполнения.

скопируй код в блокнот и сохрани как
«cursor-img.html«

<html>
<head>

<style type=»text/css»>

body { cursor : url(«Up_Arrow.cur»), text;}

a:hover
{
cursor : url(«UpArrow.cur»), url(«Up_Arrow. svg «), auto;
}


</style>

</head>
<body>

<a href=»#» >наведи курсор </a>
<a href=»#» >наведи курсор</a>
<a href=»#»>наведи курсор</a>
<a href=»#»>наведи курсор</a>
<p>Вот и все</p>

</body>
</html>

просмотреть пример курсора

Я указал, что картинка курсора находиться в корне сайте, то есть вместе со страницей сайта. Если картинка курсора лежала бы в папке “img”, тогда путь был бы таким

cursor : url(«img /UpArrow.cur»), url(«img /Up_Arrow. svg”), auto;

Расшифровка: я указал, где находиться курсор-картинка и какую картинку нужно загрузить для курсора (UpArrow.cur), в случае, если картинка не загрузилась, будет загружаться вторая картинка (Up_Arrow. svg), но даже если и она по каким-то причинам не загрузилась, тогда пойдет загрузка курсора по умолчанию (auto – смотрите стандартные курсоры).

 

 

 

 

 

 

 

 

В качестве курсора можно использовать файлы в формате CUR, ANI, SVG, PNG, GIF курсоры
Поддерживаются собственные курсоры-картинки (пользовательские курсоры) начиная с браузеров IE6, Firefox 1.5.
Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI.
IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.
скачать курсоры  для мыши, бесплатно.
дальше —Прозрачный CSS фончайник, HTML ДЛЯ ЧАЙНИКОВ

И кстати, если Вы ищете недорогой хостинг могу посоветовать Вебхост — для неограниченного количества сайтов и абузоустойчивый Зомро — для доров, зайтов про казино и адалт.