Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный
Лекция 1:

О HTML, CSS и JavaScript

Лекция 1: 12345 || Лекция 2 >

О цветах

В WEB используется цветовая модель RGB, следовательно, красный цвет можно записать не только как red, но и ещё несколькими способами:

p { color: red }
p { color: #ff0000 }
p { color: #f00 } /* сокращенная запись, экономит 3 байта */
p { color: rgb(255, 0, 0) }

Теперь вы без запинки должны назвать цвета #f00, #0f0, #00f, а те, у кого по рисованию было "отлично", назовут и #ff0, #0ff и #f0f ;)

С появлением CSS3, указывая цвет, мы также можем задать значение альфа-канала, т.е. прозрачность:

p { color: rgba(255, 0, 0, 1) } /* обычный текст */
p { color: rgba(255, 0, 0, 0.5) } /* полупрозрачный текст */

Ещё одна примочка CSS3 – это возможность использования цветовой модели HSL (hue saturation lightness – тон, насыщенность и светлота) и HSLA (HSL + α-канал):

p { color: hsl(  0,	100%,	50%) }	/* красный */
p { color: hsl(120,	100%,	50%) }	/* зелёный */
p { color: hsl(240,	100%,	50%) } /* синий */
p { color: hsla( 0,	100%,	50%, 0.5) } /* полупрозрачный красный */

Для перевода из HSL в RGB существует простой алгоритм, но пока не стоит им себя грузить

Да кто этим HSL пользуется? Не морочьте себе голову.

Для тех, кого вопрос со смешанием каналов RGB поставил в тупик, то вот вам наглядное руководство:


Блочные и строчные элементы

Опять я буду ссылаться на чей-то учебник – на этот раз от Ивана Сагалаева - http://softwaremaniacs.org/blog/category/primer/, и пусть вас не смущают даты написания статей – они повествуют об основах и актуальность они не потеряют ещё очень долго

Возможно, вы ещё не знаете, но HTML теги делятся на блочные (block) и строчные (inline). Блочными элементами называют те, которые отображаются как прямоугольник, они занимают всю доступную ширину и их высота определяется содержимым. Блочные теги по умолчанию начинаются и заканчиваются новой строкой — это <div>, <h1> и собратья, <p> и другие.

Если хотите, чтобы ваш HTML оставался валидным, следите за тем, чтобы блочные элементы не располагались внутри строчных элементов. Внутри строчных тегов может быть либо текст, либо другие строчные элементы.

Одна из самых часто встречаемых ошибок, это оборачивание заголовка в ссылку: <a href="#"><h1>Название статьи</h1></a>, не допускайте подобные промахи

Хотя если мы ориентируемся на HTML5 – то тег <a> теперь может быть блочным элементом, и приведённый пример будет валидным. Ага, вот такой я не последовательный.

По теме:

О размерах блочных элементов

Ещё хотел отдельно остановиться на вычислении ширины и высоты блочных элементов, ведь тут есть один нюанс, по умолчанию, высота и ширина элементов считается без учёта толщины границ и внутренних отступов, т.е. как-то так:


Эта блочная модель называется "content-box", и вот в CSS3 появилась возможность изменять блочную модель, указывая атрибут "box-sizing".

Отлично, теперь мы можем выбирать между двумя значениями "content-box" и "border-box", первый я уже описал, а вот второй вычисляет высоту и ширину включая внутренние отступы и толщину границ:


Такая блочная модель была свойственна IE6 в "quirks mode"

Полезные статьи по теме:

Плавающие элементы

Я бы хотел ещё рассказать о CSS свойстве "float", но боюсь, рассказ будет долгим и утомительным, но если кратко: если вы указываете элементу свойство "float", то:

  • наш элемент будет смещён по горизонтали, и "прилипнет" к указанному краю родительского элемента
  • если это был блочный элемент, то теперь он не будет занимать всю ширину родительского элемента, и освободит место
  • если следом идут блочные элементы, то они займут его место
  • если следом идут строчные элементы, то они будут обтекать наш элемент со свободной стороны

Это поведение "по умолчанию", как это выглядит в живую можно посмотреть на примере

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Свойство float в CSS</title>
    <link rel="profile" href="http://gmpg.org/xfn/11"/>
    <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
    <style>
        article {
            border: #999 1px solid;
            margin: 0 4px 4px;
        }
        article h2 {
            border: #999 1px solid;
            background: #fff;
        }
        article div {
            background: #ccffcc;
            font-size: 16px;
            padding: 10px;
        }
        article p {
            background: #ccffcc;
        }
        article span {
            background: #ccffcc;
        }
    </style>
</head>
<body>
    <div id="content" class="wrapper box">
        <menu label="Try...">
            <a href="html.example.html" title="go prev" class="button alignleft" rel="prev">← Prev </a>
            <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
            <a href="css.priority.html" title="go next" class="button alignright" rel="next">Next →</a>
        </menu>
        <header>
            <h1>Пример работы свойства float</h1>
            <h2>Смотрим... →</h2>
        </header>
        <article>
            <h2 style="float:right;">Article Title</h2>
            <div style="height:100px;">
                <div style="height:100px;"></div>
            </div>
        </article>
        <article>
            <h2 style="float:right;">Article Title</h2>
            <div style="height:100px;clear:both;">
                <div style="height:100px;clear:both;"></div>
            </div>
        </article>
        <article>
            <h2 style="float:right">Article Title</h2>
            <p>Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
            Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
            turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
            nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
            blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
            faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
            Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
            adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse 
            adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
            nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
            libero. Fusce et ultrices lectus.</p>
        </article>
        <article>
            <h2 style="float:right">Article Title</h2>
            <span>Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
            Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
            turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
            nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
            blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
            faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
            Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
            adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse
            adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
            nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
            libero. Fusce et ultrices lectus.</span>
        </article>
        <footer>
            ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
        </footer>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-1669896-2']);
            _gaq.push(['_trackPageview']);
            (function() {
             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
         </script>
	</div>
</body>
</html>

Тут главное надо понимать происходящее, и уметь управлять, если конечно вы хотите хоть чуть-чуть научиться верстать :)

Жизненно необходимая информация для верстальщиков:

"Раскладка в CSS: float" [http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/]

Позиционирование

Дам лишь вводную по "position" – у него бывает лишь четыре значения:

  • static – положение дел "по умолчанию", блоки ложатся друг за другом, сверху вниз, по порядку, без отклонений
  • absolute – блок позиционируется согласно заданным координатам
  • fixed – похоже на "absolute", с той лишь разницей, что блок не будет скролиться
  • relative – такой блок можно сдвигать относительно места где он расположен, ну и все внутренние "абсолютные" блоки будут использовать данный элемент как точку отсчета при позиционировании по координатам

Для самостоятельного изучения:

"Раскладка в CSS: позиционирование" [http://softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/]

Лекция 1: 12345 || Лекция 2 >
Наталья Маркова
Наталья Маркова
Ярослав Гаевой
Ярослав Гаевой

10 марта 2016 c 20:13 до 22:39 я сдавал экзамен. Однако, за два месяца статус не изменился: "Задание не проверено"

Когда ожидать проверки?

Руслан Жанбосынов
Руслан Жанбосынов
Россия
Дмитрий Молокоедов
Дмитрий Молокоедов
Россия, Новосибирск, НГПУ, 2009