Scino: Front-end [part-1]

HTML

HTML

HTML - (англ. HyperText Markup Language - «язык разметки гипертекста») - стандартный язык разметки документов во Всемирной паутине.

Язык HTML интерпретируется браузерами и отображается в видедокумента, в удобной для человека форме.

Состав HTML

Язык HTML состоит из элементов, которые можно разделить на группы:

по количеству «тегов» на элемент:– контейнеры – <h1></h1>, <b></b>, <div></div>;

– одиночные – <img>, <hr>.

по отображению:– блочные;

– встроенные.

HTML элементы

!doctype a abbr address area article aside audio b base bdi bdoblockquote body br button canvas caption cite code col colgroupdata datalist dd del details dfn div dl dt em embed fieldset figcaptionfigure footer form h1 h2 h3 h4 h5 h6 head header hr html i iframe imginput ins kbd keygen label legend li link main map mark math menu menuitem meta meter nav noscript object ol optgroup option output p param pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

«Блочные» элементы HTML

• Занимает 100% ширины родительского элемента;

• Высота зависит от содержимого;

• Начинается с новой строки;

• Может содержать как другие «блочные» элементы, так и «встроенные».

«Встроенные» элементы HTML

• Является частью другого элемента;

• Ширина зависит от его содержимого.

«Блочный» элемент во «встроенном»

Структура HTML

<!doctype html> 

<html> 

<head> <meta charset="utf-8"> <title> HTML</title> 

</head> 

<body>  <p> Hello World! </p> 

</body> 

</html> 

Атрибуты элементов HTML

Атрибуты – дополнительная информация о элементе содержащаяся в теге.

<img src=“logo.png” alt=“Логотип”>

<a href=“http://scinolab.com/” title=“Перейти на сайт scinolab.com”>SCINO</a>

<p style=“text-align: right;”>Hello World!</p>

<div class=“content” id=“main-content”> … </div>

Элементы интерфейса

<input type=“text”><input type=“password”><input type=“button” value=“Кнопочка”><button>Другая кнопочка</button><input type=“file”><input type=“checkbox”><input type=“radio”>

<select><option>Значение 1</option><option>Значение 2</option>

</select>

<textarea>Поле для ввода текста</textarea>

<a href=“ http://scinolab.com“>SCINO</a>

CSS

CSS

CSS - (англ. Cascading Style Sheets - «каскадные таблицы стилей») - формальный язык описания внешнего вида документа, написанного с использованием языка HTML.

Структура CSS

h1 {

text-align: center;

color: #FF2626;

font-size: 20px;

font-family: Arial, Helvetica, sans-serif;

text-transform: uppercase;

padding: 20px;

}

Свойства CSS

background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-width columns content counter-increment counter-reset cursor direction display empty-cells filter float font font-family font-size font-stretch font-style font-variant font-weight height hyphens image-rendering left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes resize right scrollbar-3dlight-color scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index

Подключение CSS – Внутренний стиль

<body>

<p style=“font-size: 60px; font-family: Arial, sans-serif; color: #FF2626;”>Hello World!</p>

</body>

Подключение CSS – Глобальный стиль

<head>

<style >

p {

font-size: 60px;

font-family: Arial, sans-serif;

color: #FF2626;

}

</style>

</head>

Подключение CSS – Внешний файл

<head>

<link rel="stylesheet" href="style.css">

</head>

В файле style.css:

p {

font-size: 60px;

font-family: Arial, sans-serif;

color: #FF2626;

}

Классы CSS

Классы применяются:– для изменения вида одного элемента;

– для изменения вида группы элементов.

<p class=“world”> Hello World! </p>

<p class=“scino”> SCINO </p>


.world { color: yellow; }

.scion { color: red; }

Псевдоклассы CSS

Динамическое состояние элемента::hover { … }

:active { … }

:visited { … }

:focus { … }

Выборка элементов::first-child { … }

:last-child { … }

:first-of-type { … }

Идентификаторы CSS

Идентификаторы применяются :– для изменения вида одного элемента;

– для создание ссылок «якорей».

<p id=“world”> Hello World! </p>

<a href=“http://scinolab.com/hello.html#welcome-message”> SCINO – Welcome Message </p>

#world { color: yellow; }

Идентификаторы CSS

Идентификаторы применяются :– для изменения вида одного элемента;

– для создание ссылок «якорей».

– для обращения к элементу из скриптов.

<p id=“world”> Hello World! </p>

<a href=“http://scinolab.com/hello.html#welcome-message”> SCINO – Welcome Message </p>

#world { color: yellow; }

Имена CSS

Для идентификаторов и классов нужно использовать настолько длинные имена, насколько требуется, но настолько короткие, насколько это возможно.

Облегчает дальнейшее сопровождение кода как для автора, так и для других разработчиков.

Сложение CSS свойств

<p class=“world upper”> Hello World! </p>


<p class=“world upper small”> Hello World! </p>

.world { color: yellow; }

.upper { text-transform: uppercase; }

.small { text-transform: lowercase; }

Селекторы CSS

Селекторы – это классы, идентификаторы и теги к которым применяются стилевые свойства.

1. * { … }

2. p { … }

3. .world { … }

4. #world { … }

5. .world .russia { … }

6. .world .russia .taganrog { … }

7. .world + .russia { … }

8. .world > .russia { … }

9. .world.russia { … }

10. input[type=“checkbox”] { … }

Приоритет селекторов CSS

p – 1

:first-child – 1

.world – 10

#world – 100

style=“…” – 1000

!important – >1000

.world .russia p { color: blue; } – 21

.world .russia .taganrog p { color: yellow; } – 31

#scino { color: red; } -100

<div class=“world”>

<div class=“russia”>

<div class=“taganrog”>

<p id=“scino”>SCINO</p>

</div>

</div>

</div>

Наследование свойств CSS

Перенос стилевых свойств с родительского элемента на дочерние.

<div>

<p class=“world” >

Hello World!

</p>

</div>

div { color: red; }

.world { text-decoration: underline; }

Вопросы

Software

Scino: Front-end [part-1]