ИНТЕРНЕТ В РОССИИ И В МИРЕ

3 600 000 000 пользователей
Сегодня Воскресенье 22.10.2017
Справочники -> HTML, CSS     Обновление - 22.09.2017

HTML, CSS

Основы HTML и CSS: что такое элемент HTML, правила HTML, декларация !DOCTYPE, структура HTML - документа, как устанавливать стили CSS, синтаксис CSS.

тег DIV. Примеры: DIV по центру страницы, два и более DIV по горизонтали.

тег IMG. Примеры: эффект "фото на столе", различные варианты расположения картинки и текста (картинка слева, текст справа и т.п.), горизонтальная лента из картинок.

Онлайн редактор примеров HTML + CSS + jQuery. Примеры: загрузка файлов (текст, видео) на страницу.

А

Абзац текста, параграф - <p></p>
Аббревиатура или акроним - <abbr title="расшифровка сокращения"></abbr>

Б

Блок - <div></div>

два div по горизонтали, например:

<div style="width:70%;float:left;">левый блок</div>

<div style="margin-left:72%;">правый блок</div>

отмена float (обтекание) со всех сторон - <br/ style="clear:both;">

DIV по центру страницы (колонки) - width:[значение меньше 100%];display:block;margin:0 auto;

В

Высота - height:[значение];

Г

Гиперссылка - <a href=""></a>

отмена подчеркивания у ссылок - text-decoration:none;

Граница - margin от других элементов:

со всех сторон - margin:15px;

сверху и снизу 10px, справа и слева 15px - margin: 10px 15px;

сверху - margin-top:25px;

справа - margin-right:15px;

снизу - margin-bottom:30px;

слева - margin-left:20px;

З

Заголовок - <h1></h1>

И

Индекс отображения элемента - z-index:[значение];
Показать пример

К

Картинка - <img src=" " alt=" " />

в поле ввода - <input type="image" src="URL" alt=" " />

в ячейке таблицы - <td style="background:url(img/2.jpg);color:red;font-weight:700;">картинка в ячейке</td>

картинка - ссылка <a href="#top"><img src="URL" alt=" " /></a>


Кнопка - button <button style="cursor:pointer;">кнопка</button>
Кнопка - input type="button" <input type="button" value="кнопка" />
Кнопка сброса данных - input type="reset" <input type="reset" value="Сброс" />
Кнопка отправить - input type="submit" <input type="submit" value="Отправить" />

Курсор - hover

изменение стиля css элемента при наведении курмора - <style>[элемент html]:hover {стили css}</style>

Курсор - cursor стили:

cursor:auto;

cursor:pointer;

cursor:move;

cursor:cell;

cursor:none;

cursor:not-allowed;

cursor:wait;

cursor:zoom-in;

Л

Линия - <hr/>

О

Отмена обтекания - clear - после элемента со стилем float.

Значения: clear: both (со всех сторон)| none|left|right|initial|inherit;


Отображение элемента(ов) - display

Невидимый (скрытый) элемент - display:none; Показать скрытый элемент или разместить Div / Table по центру (вместе с другими стилями) - display:block;

Расположение нескольких Div по горизонтали - display:inline

DIV 1
DIV 2
DIV 3

Отступы - padding внутри блочного элемента:

со всех сторон - padding:15px;

сверху и снизу 10px, справа и слева 15px - padding: 10px 15px;

сверху - padding-top:25px;

справа - padding-right:15px;

снизу - padding-bottom:30px;

слева - padding-left:20px;

П

Переключатель - checkbox,

отображающий состояние "включено" (checked="checked") <input type="checkbox" checked="checked"/> или "выключено" (disabled="disabled") - <input type="checkbox" checked="checked"/>

Позиция - position:absolute абсолютная -

position:absolute;top:[значение от верхнего края окна браузера];left:[значение от левого края окна браузера];

Позиция - position:relative относительная -

(относительно исходного места элемента) - position:relative;top:[значение];left:[значение]; Примеры:

position:relative;top:150px; - ниже относительно исходного места элемента (на 150px)

position:relative;top:-150px; - выше относительно исходного места элемента (на 150px)

position:relative;left:400px; - левее относительно исходного места элемента (на 400px)

position:relative;left:-400px; - правее относительно исходного места элемента (на 400px)

Позиция - position:fixed фиксированная -

(элемент становится непрокручиваемым) - position:fixed; Примеры на этой странице: блоки меню и поиска HTML,CSS

position:fixed; - фиксированная в этом месте;

position:fixed;top:230px;left:70%; - ниже от верхнего края окна браузера на 230px, от левого края окна браузера на 70%


Поле ввода текста -

<input type="text" maxlength=[максимальное количество символов] size=[видимая ширина в символах] >

дополнительный атрибут: readonly="readonly" (только для чтения).


Поле ввода даты - <input type="date" />
Поле ввода даты и времени - <input type="datetime-local" />

Поле ввода email

и проверка заполнения поля: - <input type="email" required />, где

type="email" проверяет наличие @ в адресе,

а атрибут required делает это поле обязательным для заполнения. По умолчанию атрибут required выключен.

Проверка проводится после нажатия кнопки "Отправить" - <input type="submit" value="Отправить" />


Поле ввода месяца, года - <input type="month" />
Поле ввода числа - <input type="number" />

Поле ввода номера телефона

в указанном формате и проверкой заполнения поля - <input type="tel" pattern="8 [0-9]{3} [0-9]{3} [0-9]{2}" required />

Телефон в формате: 8 xxx xxx xx


Поле ввода времени (часы, минуты) - <input type="time" />
Поле ввода пароля - <input type="password" />
Поле выбора цвета - <input type="color" />
Поле выбора файла - <input type="file" />

Ползунок - <input type="range" min="0" max="100" step="1" value="50"" />,

где min — минимальное число в диапазоне (по умолчанию 0),

max — максимальное число (по умолчанию 100),

step — шаг изменения чисел (по умолчанию 1),

value — текущее значение. По умолчанию value вычисляется по формуле: (min + max) / 2.

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

Пример: ползунок и JavaScript

Размер рисунка:


Прозрачность - opacity Пример: background:navy; color:#ffffff; opacity:0.5; filter:alpha(Opacity=50); - при уменьшении значения opacity элемент становится более прозрачным. В этом примере прозрачность 0.5, т.е. на 50%.
Прокрутка - overflow - overflow:auto;width:[значение];height:[значение];

Р

Радиокнопка - <input type="radio" /> (см атрибуты для переключателя)
Рамка - border:[толщина][стиль][цвет];

рамка - border:1px solid red;

border:2px dotted green;

border:4px double navy;

border-top:3px solid #000000;

border-right:3px solid black;

border-bottom:3px solid black;

border-left:3px solid black;

Рамка в таблице - сжатие всех рамок в ячейках - стиль CSS для table - border-collapse:collapse;
Рамка с закругленными углами -
- border-radius. Стили
width:50%; border-radius:15px; border:3px solid gray; padding:5px 10px;
Чем больше пикселей в border-radius, тем более рамка закругляется

С

Спецсимволы:

товарный знак - &#174; - ®

авторское право - &copy; - ©

знак меньше, угловая скобка - &lt; - <

знак больше, угловая скобка - &gt; - >

пробел - &nbsp;

Список маркированный - <ul style="[стиль, по умолчанию - list-style-type:disc; - черный кружок]"> <li></li><li></li><li></li> </ul> Примеры стилей маркера:
  • list-style-type:square;
  • list-style-type:circle;
Список нумерованный - <ol style="[type="[значенние]" start="[значенние]" ]"> <li></li><li></li><li></li> </ol>
  1. Значения атрибута type - цифра или англ. буквы: 1, A, a, I, i. По умолчанию type="1" start="1"
  2. Атрибут start используют для определения начального значения нумерации списка, без его указания нумерация начинается с цифры 1.
Список - select
поле со списком (атрибут size указывает, что список должен быть отображен раскрытым с указанным количеством опций) - Пример:

раскрывающийся список (атрибут size не указан)

Т

Таблица - table - <table></table>
  • заголовок - <caption></caption>
  • строка - <tr></tr>
  • заголовок колонки, строки - <th></th>
  • ячейка - <td></td>
Показать пример

Текст, шрифт, строка, слова:
  • область, часть текста - <span></span>
  • перевод, перенос строки - <br/>
  • перенос длинного слова - word-wrap:break-word;
  • межстрочный интервал - line-height:[значение, например 1.5;];
  • с красной строки (отступ слева) - text-indent:[значение];
  • зачеркивание - text-decoration:line-through;
  • подчеркивание - text-decoration:underline;
  • линия над текстом - text-decoration:overline;
  • подстрочный текст - <sub></sub>
  • надстрочный текст - <sup></sup>
  • шрифт жирный для важных слов - <strong></strong>
  • жирный - <b></b> | font-weight:700;
  • курсив - <i></i> | <em></em> | font-style:italic;
  • размер шрифта - font-size:90%;
  • шрифт преформатированный - <pre></pre>
  • выравнивание текста по центру блока - text-align:center;
  • по правому краю - text-align:right;
  • по ширине - text-align:justify;
  • буквы строчные - text-transform:lowercase;
  • буквы прописные - text-transform:uppercase;
  • интервал между буквами - letter-spacing:[значение в px];
Шрифты семейство - font-family:[значение];
Показать примеры

Текстовая область - textarea

<textarea> </textarea>

Ф

Фон - background

фоновое изображение (url в кавычках или без кавычек) - background-image:url("../images/bg.jpg"); или просто background:...


По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.
  • Повторение только по горизонтали - background-repeat:repeat-x;
  • Повторение только по вертикали - background-repeat:repeat-y;
  • Фоновое изображение без повторения - background-repeat:no-repeat;

Пример фона без повторения: width:250px; height:150px; color:#ffffff; background:url(img/bg.jpg); background-repeat:no-repeat; font-weight:700; font-size:80%; text-align:center;

Фоновое изображение


Позиции фона:
  • background-position:top left - в левом верхнем углу
  • background-position:left bottom - в левом верхнем углу
  • background-position:center top - по центру вверху
  • background-position:top right - в правом верхнем углу
  • background-position:center left - по левому краю и по центру
  • background-position:center center - по центру
  • background-position:center right - по правому краю и по центру
  • background-position:left bottom - в левом нижнем углу
  • background-position:center bottom - по центру внизу
  • background-position:right bottom - в правом нижнем углу

Ц

Цвет фона - background:[значение цвета];
Цвет шрифта - color:[значение цвета];
Цвета
#ffffff #000000 #080808 #303030 #505050 #606060 #707070 #888888 #c0c0c0
#400000 #000033 #000066 #000099 #0000cc #0000ff #003300 #003333 #003366
#003399 #0033cc #0033ff #006600 #006633 #006666 #006699 #0066cc #0066ff
#009900 #009933 #009966 #009999 ##0099cc #0099ff #00cc00 #00cc33 #00cc66
#00cc99 #00cccc #00ccff #00ff00 #00ff33 #00ff66 #00ff99 #00ffcc #00ffff
#660000 #660033 #660066 #660099 #6600cc #6600ff #663300 #663333 #663366
#663399 #6633cc #6633ff #990000 #990033 #990066 #990099 #9900cc #9900ff
#CC0000 #CC0033 #CC0066 #CC0099 #CC00cc #CC00FF #CC3300 #CC3333 #CC3366
#CC3399 #CC33CC #CC33FF #9999CC #9999FF #99CCCC #99CCFF #99FFCC #99FFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300
#FF3333 #FF3366 #FFFF00 #FFFF33 #FFFF66 #CCFF66 #CCFF99

Ещё больше цветов: w3schools.com

Ш

Ширина - width:[значение];

Я

Якорь - например, на странице элемент HTML с id="top", а вверху или внизу страницы ссылка на этот элемент <a href="#top">текст или картинка</a> Примеры: на этой странице значок (наверх) внутри якоря <a href="#top">URL картинки</a> и внизу страницы <a href="#top">Наверх</a>.


Поделиться:

А Б В Г З И
К Л О П Р
С Т Ф Ц Ш Я

Поиск HTML, CSS (RU/EN).
Например: Гиперссылка, Высота, margin

Содержание:

Наверх
   
Яндекс цитирования
При любом использовании материалов сайта прямая ссылка на http://www.bizhit.ru/ обязательна. © 2010 - 2017 гг. Материал сайта, в том числе реклама, не является публичной офертой.
Архив сайта    Обратная связь

Администрация сайта:
Не гарантирует точности и полноты предоставленных материалов. До принятия каких-либо решений уточните информацию из официальных источников.
Не контролирует и не несет ответственность за сайты третьих лиц, на которые посетитель bizhit.ru может перейти по ссылкам, доступным на сайте. На таких сайтах у пользователя может собираться или запрашиваться персональная информация, а также могут совершаться иные действия.

Реклама внизу страниц сайта от хостинг - провайдера.
Сделать бесплатный сайт с uCoz