Основные HTML тэги и их предназначение:

Тэги и атрибуты Описание
<h1></h1> | <p></p> | <i></i> | <u></u> | <b></b> |<br/> "h1" заголовок первого уровня (всего 6 уровней), "p" абзац, "i" наклонный текст, "u" подчёркнутый текст, "b" жирный текст, "br" перевод строки.
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
"ul" – список, маркированный чёрными точками,
"ol" – список, пронумерованный греческими цифрами.
<div align='center' style='border:1px solid blue;'></div> Контейнер див с выравниванием его содержимого по центру с рамкой в один пиксель синего цвета. По умолчанию ширина 100% длины браузера или родительского блока, высота 0 пикселей.
width="500px" height="200px" Любому блоку, элементу можно задать ширину и высоту. Ширина 500 пикселей, высота 200.
<font color='green'></font> Тэг, отвечающий за раскраску текста.
<img src="images/foto1.jpg" style="margin:0px 0px 0px 0px;" height="" width="" alt="" title="" border="0"> Код для вставки изображения.
<a href="index.html" title="index" target="_blank"> </a> Ссылка с атрибутом "target" и параметром "_blank", которая открывается в новом окне.
<table border="1px" bgcolor="#FDFCE9">
<tr>
<td width="250px">Строка 1</td>
<td width="350px">Строка 2</td>
</tr>
</table>
Код таблицы состоящей из одной строки и двух столбцов.
<div align='center' style='border:1px solid blue; height:50px; width:500px; padding:10px 10px 10px 10px; background:url(images/foto1.png); background-size: 100% 100%; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:19px; color:#333;'></div> Контейнер див с часто-использованными параметрами.


Основные (часто-использованные) стили CSS:

Стилевые свойства Описание
position: absolute | fixed | relative; Задаём позиционирования блока (элемента). absolute – абсолютное позиционирование относительно окна браузера (положение других блоков не берётся во внимание); fixed – фиксированное позиционирование относительно окна браузера (при прокрутке странице блок (элемент) остаётся неподвижным); relative – относительное позиционирование элемента относительно родительского элемента.
top:10px; left:20px;

height:150px; width:1000px;
top:10px; и left:20px; - задаёт позиционирование от верха браузера в 10 пикселей и от левого края браузера (родительского элемента) в 20 пикселей. По умолчанию значения будут нулевыми. height:150px; и width:1000px; - задаёт высоту и ширину блока (элемента). По умолчанию высота нулевая, а ширина 100% окна браузера или родительского блока.
overflow: auto; Растягивает родительский блок по максимальную высоту одного из дочерних блоков. Другими словами родительский блок с «overflow: auto;» будет растягиваться, в случае если вы внесёте дополнительную информацию в один из дочерних блоках, которые расположены вряд друг за другом.
padding: 2px 5px 7px 10px; Задаёт отступ от края внутри контейнера (элемента) в пикселях: от верхнего края 2 пикселя; от правого 5; от нижнего 7; от левого 10;
margin: 2px 5px 7px 10px; Задаёт отступ от края снаружи контейнера (элемента) в пикселях: с верхнего края 2 пикселя; с правого 5; с нижнего 7; с левого 10;
border: 1px solid red; Задаём рамку нашему блоку толщиной в один пиксель непрерывного красного цвета.
border: solid blue; border-width: 0px 1px 2px 3px; Задаём рамку нашему блоку непрерывного синего цвета с разной толщиной рамки – верхней 0 пикселей (без верхней рамки); правой 1 пикс.; нижней 2 пикс.; левой 3 пикселей.
background: transparent | red | url(images/foto1.png); Задаёт фоновое изображение блоку, контейнеру, элементу. transparent – прозрачный фон; red – красный цвет; url(images/foto1.png) – в качестве фона будет использована изображение..
background: url(images/foto1.png);
background-size: 100% 100%;
Растягивает фоновое изображение на весь блок, в случае если изображение меньше и сжимает если изображение больше блока.
float: left | right; Задаёт обтекание блока слева или справа.
font-family: Arial, Helvetica, sans-serif; Задаёт шрифт текста. Через запятую можно указать сколь угодно шрифтов. Браузер пользователя покажет текст в первом шрифте, если этот шрифт в браузере не установлен он перейдёт ко второму, и т.д.
font-size: 14px; Задаёт размер шрифту в пикселях.
line-height: 19px; Устанавливает расстояние между строками, а точнее от верхней точки строки до верхней точки следующей строки.
text-align: left | right | center | justify; Выравнивает текст в контейнере. По левому краю; по правому; по центру; по обеим краям.
color: #0000FF | blue; Задаёт цвет тексту в контейнере.
cursor: pointer | help | text | wait | default; Задаёт вид курсора при наведении на блок. Рука; со знаком вопроса; текст; песочные часы; обычная стрелка (вид по умолчанию).
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
Сглаживаем края блока, контейнера, элемента.

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Вероника
<a href="index.html" title="index" target="_blank"> </a> Ссылка с атрибутом «title», которая открывается в новом окне.

это не правильно.

атрибут «title» отвечает за подсказку, а вот за открытие отвечает target с его параметром "_blank"

можете удалить мой комментарий) я не против. только исправьте ошибку
2014-03-16 12:38
Спасибо! Даже не знаю зачем я, вообще, упомянул в описании об атрибуте "title"

2014-03-16 13:41

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь