HTML/CSS

HTML

Тег: Описание:

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

<p></p> Абзац

<em></em> Курсив с приданием тексту важности

<i></i> Просто курсив

<strong></strong> Жирный шрифт - придание тексту особой важности

<b></b> Жирный шрифт- просто выделение жирным, без придания важности

<hr> Разделительная линия

<br> Перенос строки

<img src="ссылка"> Вставка изображения. Одиночный тег. Атрибуты: width, height, alt-описание изображения, если не загрузится

<div></div> Выбрать фрагмент текста

<span></span> Выбрать текст

<blockquote></blockquote> Выделение длинных цитат.

<q></q> Выделение коротких цитат, текст обрамляется в кавычки

<cite></cite> Используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

<p style:"css-свойство;"> Атрибут style задает css свойство в html коде

<!DOCTYPE html> Начало html документа

<title>текст</title> Заголовок страницы в браузере

Комментарии HTML

<ul><li></li></ul> Создание неупорядоченного списка. Каждый элемент списка обернут в <li></li>

<ol><li></li></ol> Создание упорядоченного списка. Каждый элемент списка обернут в <li></li>

<ol start="3"></ol> Упорядоченный список начиная с 3.

<dl></dl> Cписок определений внутрь нужно поместить <dt></dt> и <dd></dd>

<dt></dt> Расположен внутри <dl></dl> обозначает термин

<dd></dd> Расположен внутри <dl></dl> обозначает определение термина

<sup></sup> Верхний индекс

<sub></sub> Нижний индекс

<del datetime="2015-05-07"></del> Выделяет текст, который был удалён в новой версии документа(зачеркивает)

<ins datetime="2015-05-07"></ins> Выделяет текст, который был добавлен в новой версии документа.(подчеркивает)

<pre></pre> Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега

<mark></mark> Подсвечивает текст желтым цветом

<a href="https://htmlacademy.ru">HTML Academy</a> Создание ссылки

<a href="#glava1">Глава 1</a> Ссылка с якорем содержит символ #, после которого идёт идентификатор, который может быть у любого тега

<a title="Подсказка" href="#"> Атрибут title задает описание ссылки, при наведении на нее курсором. Атрибут target : _self – ссылки открываются в той же вкладке, это значение по умолчанию._blank – ссылки открываются в новой вкладке (или в новом окне браузера, если он не поддерживает вкладки).

<table border="1"></table> Создание таблицы с рамкой в 1px.

<table></table> Oбозначает таблицу.

<tr></tr> Расшифровывается как «table row», обозначает строку таблицы.

<td></td> Расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

<tr><td>данные</td><td></td></tr> Создание ряда таблицы.

<table cellpadding="2"></table> Отступы внутри ячейки таблицы. Но лучше задаваеть его в CSS в td.

<table cellspacing="5"></table> Отступы между ячейками таблицы. Лучше задавать в CSS table{}.

<th></th> Аналогичен <td> но текст становится жирным и выравнивается по центру

<table> <caption>Текст</caption> </table> Заголовок(название) таблицы, аналогичен тегу <h1>

<td colspan="2">Текст</td> Растягиваем ячейку по горизонтали до двух ячеек

<td rowspan="2">Текст</td> Растягиваем ячейку по вертикали до двух ячеек

_____________________________________________________________________________________________________________________

<form action="https://site" method="get"> поля формы </form> Создание формы <form></form>. Атрибут action задаёт адрес, URL, отправки формы; method задаёт метод отправки формы. Методы: get - посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

_____________________________________________________________________________________________________________________

<input maxlength="5" type="text" name="search"> Input - одиночный тег, расположен внутри <form>. Обязательные атрибуты type задаёт тип поля; name задаёт имя поля. Длина поля 5char. Атрибуты readonly если поле ввода не подразумевает ввода данных от пользователя, но отправляется на сервер, disabled на сервер не отправляется

_____________________________________________________________________________________________________________________

<input type="text" name="total" id="total-field" value="5"> Атрибут value заполняется значение по умолчанию 5 в текстбокс

____________________________________________________________________________________________________________________

<label> Подпись <input type="text" name="username"> </label> Тег <label> связывает слово "подпись" с текстбоксом

_____________________________________________________________________________________________________________________

<label for="user-field-id">Имя пользователя</label> Связь между "Имя пользователя" и текстбоксом

_________________________________________________________________________________________________________________

<input type="password" name="parol'"> Тип password заменяет все символы вводимые в текстбокс звездочками

_______________________________________________________________________________________________________________

<input type="submit" value="Войти"> Создается кнопка отправки данных с именем "Войти"

_____________________________________________________________________________________________________________________

<input type="reset" value="восстан"> Восстанавливаем все поля ввода по умолчанию

_____________________________________________________________________________________________________________________

<input type="button" value="Войти" Создается кнопка, при нажатии появляется окошко с текстом "Хай"

onclick="javascript:alert('Хай')">

_____________________________________________________________________________________________________________________

<textarea name="comment" rows="10">Текст</textarea> Создается многострочное текстовое поле. Атрибут rows-высота поля, cols- длина текстового поля

__________________________________________________________________________________________________________________

<input type="checkbox" name="checkbox" checked> Создание чекбокса. Checked- по умолчанию стоит галочка. Required- обязательное поле

_____________________________________________________________________________________________________________________

<input type="radio" name="imya"> Создание радиобаттона. Создание нескольких радиобаттонов с одним именем и разными value связывает их

_____________________________________________________________________________________________________________________

<select name="theme"> <option value="light"> Создается раскрывающийся список. Чтобы сделать список с несколькими Светлая тема</option> <option value="dark"> вариантами выбора, нужно добавить к тегу <select> атрибут multiple. Высоту Тёмная тема</option> </select> мультиселекта можно изменять с помощью атрибута size тега <select>. Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

<input type="file" name="avatar"> Создается поле для загрузки данных. При этом нужно обязательно в теге <form> добавить атрибут enctype со значением multipart/form-data чтобы поле заработало

_____________________________________________________________________________________________________________________

<input type="hidden" name="account_number" Скрытое поле, отправляется на сервер account_number - 15.

value="15">

_____________________________________________________________________________________________________________________

… Создание многоточия

CSS

font-size: 20px; Размер шрифта. Можно задавать в px, %, em, pt-пункты

color : red; Задание цвета шрифта

background-color: red; Цвет фона

text-decoration: line-through; Зачеркивание текста. underline-подчеркивание,overline-подчеркивание сверху

padding-left: 15px; Отступ слева на 15px

border-left: 2px solid #ccc; Вертикальная линия слева от текста

table {border: 3px solid black;} Таблица с рамкой 3px черного цвета

td {border: 3px solid lightgray;} Таблица с ячейками 3px серго цвета

table { border-collapse: collapse; } Убираем двойные рамки в таблице

td {border-left: 2px solid lightgray;} Атрибуты border-left,border-right,border-top,border-bottom отображение сетки табл.

td { padding: 10px; } Отступы внутри ячейки таблицы 10 px.

td {padding-left: 20px; } Атрибуты padding-left,padding-right,padding-top, padding bottom отступы в ячейке

table { border-spacing: 3px;} Отступы между ячейкми таблицы

caption {caption-side:top;} Расположение заголовка таблицы может быть top или bottom

caption {text-align: left;} Выравнивние текста по горизонтали left, right, center,justify-по ширине

td { vertical-align: top; } Выравнивание по вертикали top, middle, bottom, sub,super-аналог <sub>,<sup>

h1{font-family:Tahoma;} Задание стиля текста

.underline {text-decoration: underline;} Подчеркивание выбранного текста

.bold { font-weight: bold;} Выделение текста жирным шрифтом

.italic {font-style: italic;} Выделение текста курсивом

.p-first {margin-left: 50px;} Отступ текста на 50 пикселей

.p-absolute {position: absolute;} Выделенный текст размещается на другом слое, т.е может наложиться. Затем его можно двигать куда угодно, left:100px;top:20px;

.footer {clear: both;} Смещение сетки с текстом вниз.

.right-column {float: right;} Смещение сетки с текстом вправо.

border-radius: 5px; Округление углов.

ul .hit { ... } Выбрать все элементы с классом .hit внутри тегов ul

_____________________________________________________________________________________________________________________

.first + li, .fourth + li { Выбeрeтся второй и пятый. background-color: red;}

_____________________________________________________________________________________________________________________

.places>li>span {font-weight: bold;} Выбирается путь доступа к span.

li:last-child { ... } Выьирает последний li. first-child-первый.

li:nth-child(4){....;} Выбирает 4 элемент li. 2n-выбирет четные номера li

tr:hover {background-color: red;} При наведении на строку она подсвечивается красным цветом

_____________________________________________________________________________________________________________________

em {display: none;} Делает em видимым при наведении на tr

tr:hover em {display: inline;}

_____________________________________________________________________________________________________________________

a:link{color:black; } Задаем цвет ссылок

a:visited{color:black; } Задаем цвет посещенным ссылкам. active- активным ссылкам.

form input:focus {...;} При нажатии на текстовое поле оно будет изменяться

input[checked] { ... } Выбираются все checked

input[type="text"] { ... } Выбираются все текстбоксы

#id{......} Cелектор по id

line-height: 100px; Отступ между строками

_____________________________________________________________________________________________________________________

text-transform:значение; Значения: capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр).uppercase Все символы текста становятся прописными (верхний регистр).none Не меняет регистр символов.inherit Наследует значение родителя.

_____________________________________________________________________________________________________________________

text-indent:<значение> | <проценты> | inherit Устанавливает величину отступа первой строки блока текста например для абзаца <p>

ul { list-style: square outside;} /* Квадратные маркеры */ /* Маркеры размещаются за пределами текстового блока */

.cross { cursor: crosshair; } Устанавливает форму курсора, когда он находится в пределах элемента.

_____________________________________________________________________________________________________________________

.descr { visibility: hidden; } visibility Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон.

_____________________________________________________________________________________________________________________

.dashed {border-bottom: 1px dashed;} Пунктирное подчеркивание. dotted-точечное

_____________________________________________________________________________________________________________________

p{white-space:nowrap;} nowrap — отображает весь текст одной строкой без переносов; pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>; pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;

_____________________________________________________________________________________________________________________

selector { background-image: Задаем фоновое изображение

url("адрес-картинки"); }

_____________________________________________________________________________________________________________________

selector {background-repeat: Повтор фонового изображения. repeat-x — повторять только по repeat-x;} горизонтали.repeat-y — повторять только по вертикали.no-repeat — не повторять.

______________________________________________________________________________________________________________________________________

selector{background-position: 50% 50%;} Расположение фонового изображения. 50% 50% по центру. right bottom- справа внизу. 50px 100px - отступ 50пикс. от правого края и 100 от верха.

_____________________________________________________________________________________________________________________

background-attachment:scroll Позиция фона. scroll-фон прогручивается. fixed- остается на месте

____________________________________________________________________________________________________________________

box-sizing:значение content-box — значение по умолчанию, соответствует стандартной блочной модели.

border-box- общая ширина элемента

__________________________________________________________________________________________________________________

box-shadow: 3px 3px 4px #cccccc; тень от блока

______________________________________________________________________________________________________________

display:значение block-обозначает блочный элемент, inline-строчный,inline-block-блочно-строчный

display:table задает элементу тип таблица.

display:table-row; <tr>

display:table-cell; <td>

display:none Скрытый элемент не отображается и не занимает места на странице.

visibility:hidden Оно «прячет» элемент — он становится невидимым, нозанимает место на странице.

_____________________________________________________________________________________________________________________

clear: left — запрещено обтекание слева;right — запрещено обтекание справа;both — запрещено обтекание с обеих сторон;none — обтекание разрешено.Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный.

_____________________________________________________________________________________________________________________

.clearfix::after { content: ""; Растягиваем фоновый блог для флоатов добавляя в контейнер для флотатов класс display: table;clear: both;} clearfix. Вместо добавления третьего элемента с clear:both.

_____________________________________________________________________________________________________________________

position:relative Задается относительное позиционирование

top:60px; Смещает относительный блок вниз на 60 пикселей. Остальный блоки на месте

left:10px; Смещает относительный блок вправо на 60 пикселей. Остальный блоки на месте

_____________________________________________________________________________________________________________________

position:absolute Задается абсолютное позиционирование. top, left, right,bottom. Если спозиционировать строчный элемент, он начнет вести себя как блочный можно задавать высоту и ширину.

Если он находится в относительном блоке то координаты расчитываются относительно относительного блока.

margin Можно задавать смещение относительно старой позиции элемента а не относительно окна браузера

_____________________________________________________________________________________________________________________

position:fixed Фиксированный элемент тоже выпадает из потока.Фиксированный элемент привязывается к определенной точке в окне браузера и остается на ней всегда, даже при прокрутке страницы.Фиксированный элемент можно позиционировать с помощью свойств top, left, right,bottom, но точка отсчета всегда привязана к окну браузера.

_____________________________________________________________________________________________________________________z-index:число Чем больше z-index, тем выше располагается блок. Задается дль absolute relative и fixed

white-space: nowrap; Перенос текста запрещен

opacity:значение Прозрачность, значения [0.0; 1.0]. 1.0- непрозрачный. 0.0 полностью прозрачный.

outline: Аналог border не влияет на положение блока и его ширину для 4-х сторон.

HTML

Comments