Scino: Front-end [part-1]

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 bdo
blockquote body br button canvas caption cite code col colgroup
data datalist dd del details dfn div dl dt em embed fieldset figcaption
figure footer form h1 h2 h3 h4 h5 h6 head header hr html i iframe img
input 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 - (англ. 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; }

Scino: Front-end [part-1]

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (12)

Ähnlich wie Scino: Front-end [part-1]

Ähnlich wie Scino: Front-end [part-1] (20)

Mehr von SCINO

Mehr von SCINO (19)

Scino: Front-end [part-1]