План лекции

Intro

Объектная модель документа (DOM)

Поток

Пример


<h1>Заголовок</h1>
<p>Параграф текста</p>
<span>
    Текст, в котором есть элементы, меняющие начертания текста.
    <i>Текст, выделенный курсивом</i>
    <b>Жирный текст</b>
</span>
    

Заголовок

Параграф текста

Текст, в котором есть элементы, меняющие начертания текста. Текст, выделенный курсивом Жирный текст

Блочные элементы


<h1>Заголовок</h1>
<p>Параграф текста</p>
<span>
    Текст, в котором есть элементы, меняющие начертания текста.
    <i>Текст, выделенный курсивом</i>
    <b>Жирный текст</b>
</span>
    

Строчные элементы


<h1>Заголовок</h1>
<p>Параграф текста</p>
<span>
    Текст, в котором есть элементы, меняющие начертания текста.
    <i>Текст, выделенный курсивом</i>
    <b>Жирный текст</b>
</span>
    

Стили отображения

<h1 style="color: red; font-size: 18px;">Заголовок</h1>
<p>Параграф текста</p>
<span>
  Plaint text, HTML5 Rocks!
</span>

Стили отображения

<h1 style="color: red; font-size: 18px;
line-height: 22px; white-space: normal;word-wrap: normal; break-word: inherit;border: none; outline: none; ....">Заголовок</h1>
<p>Параграф текста</p>
<span>
Plain text, HTML5 Rocks!
</span>

CSS (Cascade StyleSheets)

Примеры CSS-селекторов

      		div p span {
      			color: #F5E614;
      		}
      		div p.customClass span {
      			color: green;
      			font-weight: bold;
      		}
      	
					<div>
					<p><span>Желтый шрифт</span></p>
					<p class="customClass"><span>Зеленый и жирный шрифт</span></p>
					</div>
				

Желтый шрифт

Зеленый и жирный шрифт

Основные принципы CSS

Наследование

	<p
	style="color: white;
	background: green;
	border: 5px solid #000;
	padding-left: 80px;">Параграф текста
	<br>
	<span style="background: red; background: 3px solid #000;">
	  Plain text, HTML5 Rocks!
	</span>
	</p>

Пример каскадирования

        div p span {
					color: #F5E614;
        }
        p.myClass span {
					color: blue;
        }
        
				<div>
			 	<p class="myClass"><span>Параграф, css-селектором, которого является одновременно и "div p span"  и "p.myClass span"</span></p>
			 	</div>
			

Параграф, css-селектором, которого является одновременно и "div p span" и "p.myClass span"

Процесс обработки веб-страницы

IPython Notebook

IPython Notebook

Пример

Что нужно от команды