Введение в веб-разработку с HTML, CSS, JavaScript

Теперь, ваш выбор размещения стилей в одном или другом месте не только влияет на возможность повторного использования стилей, но также влияет на то, какие объявления стилей переопределяют другие объявления стилей.

Давайте рассмотрим пример.

В этом примере мы указываем в теге style, что каждый h2 в нашем HTML-документе должен иметь темно-бордовый цвет текста.

Однако есть и другие места, где вы можете указать стиль CSS.

Например, вы можете указать стиль CSS непосредственно для элемента, указав атрибут style и объявления CSS непосредственно в теге элемента.

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

Это называется встроенным стилем, и, как вы могли догадаться, это наименее пригодный для повторного использования способ стилизации элементов.

Обычно этот способ стилизации используется для быстрого тестирования, чтобы посмотреть, как будет выглядеть стиль.

Теперь, что, если у меня есть несколько страниц на моем веб-сайте, и я хочу, чтобы все они выглядели одинаково? Это означает, что указание стилей с помощью тега style мне не поможет.

И мне нужен какой-то другой способ указать стили, который является внешним по отношению к HTML-странице.

Для этого мы можем использовать тег с именем link, где мы сообщаем браузеру, что есть таблица стилей и указываем ее местоположение, используя атрибут href.

И внешние таблицы стилей – это просто файлы со списками правил CSS. И здесь нет никаких особых тегов.

Как вы можете видеть в этом файле style.css, мы указываем для тела документа, что его цвет фона должен быть серым, а размер шрифта должен составлять 130% от размера шрифта по умолчанию.

Реальные веб-сайты почти всегда используют внешние таблицы стилей, что означает, что вы берете все свои стили и помещаете их во внешний файл, а затем связываете его обратно с несколькими HTML-страницами с помощью тега link.

Этот метод не только повторно использует стили CSS, но и способствует единообразному виду всего веб-сайта.

Теперь давайте рассмотрим разрешение конфликтов при определении стилей.

Само название CSS – это каскадные таблицы стилей. То есть каскадирование – это фундаментальная особенность CSS. Это алгоритм, определяющий, как комбинировать значения свойств из разных источников.

И если есть конфликт в стилизации, чтобы понять какое правило CSS выигрывает, нужно понимать этот алгоритм.

Алгоритм каскадирования объединяет четыре концепции.

Это происхождение, или приоритет происхождения, слияние, а также наследование и специфичность.

Сначала давайте рассмотрим первые две концепции – происхождение и слияние.

Когда два CSS объявления конфликтуют, другими словами, они определяют по-разному одно и то же свойство для одного и того же элемента, срабатывает правило приоритета происхождения.

И это очень простое правило – последнее объявление побеждает.

Теперь, пытаясь выяснить, что такое последнее объявление, вы должны помнить, что HTML обрабатывается последовательно. То есть сверху вниз.

Поэтому, чем ниже объявление на странице, тем выше его приоритет.

При этом для внешнего CSS думайте, как об объявленном в том месте, где он подвязан.

Теперь о слиянии.

Когда разные объявления CSS не конфликтуют, но свойства CSS для элемента разные, существует простое правило – объявления сливаются.

Таким образом, объявления, например, размера шрифта и объявление цвета, так как это два разных свойства, при том, что они определены для одного и того же элемента, и даже если они определены в разных местах, они сольются в одно объявление. И элемент получит как размер шрифта, так и цвет.

Следующей концепцией, которую мы собираемся рассмотреть, является наследование.

И это довольно простая концепция. Основная идея здесь заключается в том, что у вас есть дерево объектной модели документа. И если вы укажете какое-то свойство CSS для какого-либо элемента, все дочерние элементы этого элемента также наследуют это свойство, и вам не нужно указывать свойство для каждого элемента.

Так, например, если я укажу одно свойство в теге body, каждый элемент, который является дочерним элементом тега body унаследует это свойство. Точно так же, если я укажу свойство для какого-либо элемента на HTML-странице, каждый дочерний элемент этого элемента также унаследует это свойство. И очевидно, что ни один из родителей этого элемента не унаследует это свойство.

Теперь давайте рассмотрим концепцию специфичности.

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

И есть довольно простой метод, который позволяет выяснить, какая комбинация селекторов является более специфичной, чем другие.

Вы можете думать о специфичности как о подсчете очков. Комбинация с наибольшим количеством очков побеждает.

И эту оценку можно рассчитать, если расположить типы факторов, влияющих на оценку, слева направо, причем слева будет наивысшее значение специфичности. Затем просто возьмите правило CSS и заполните эту табличку.

Самое высшее значение специфичности имеет атрибут стиля элемента style. И это происходит, когда вы указываете объявления CSS прямо в элементе, используя атрибут стиля. Нет ничего более конкретного, чем это объявление.

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

Здесь у первого правила количество баллов 2, а у второго 12 баллов. Поэтому второе правило выигрывает.

И есть еще одна концепция, которую мы рассмотрим. И это концепция переопределения всех правил с помощью «!important».

В этом примере все три абзаца получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Потому что правило «!important» переопределяет свойство background-color в обоих случаях.

Правило «!important» говорит что не имеет значение, какая есть специфичность и переопределяет все CSS объявления.

Теперь я хочу предупредить вас об использовании этого «!important». Хотя очень заманчиво пропустить понимание всех этих каскадных правил и правил специфичности и просто хлопать «!important» везде, когда что-то не получается, это очень быстро в реальном проекте превратится в кошмар обслуживания, когда вы будете переопределять одно «!important» объявление другим «!important» объявлением, и возникнет гигантский беспорядок.

Теперь, давайте поговорим о стилизации текста.

Существует множество свойств CSS, влияющих на отображение текста. Мы не будем пытаться охватить каждое из них. Вместо этого мы рассмотрим несколько свойств, которые иллюстрируют концепции, лежащие в их основе.

В этом примере мы создаем класс с именем style, и мы применяем этот класс ко второму абзацу в нашем html-файле.

И наша задача состоит в том, чтобы стилизовать второй абзац.

И первое, что мы обычно хотим сделать, это указать семейство шрифтов. И здесь указана ссылка на часто используемые шрифты.

Таким образом, семейство шрифтов – это имя свойства font-family.

И значение для семейства шрифтов может варьироваться. То, что вы обычно указываете в семействе шрифтов, – это комбинация шрифтов. И причина, по которой вы указываете не один шрифт, а несколько шрифтов, заключается в том, что, когда вы указываете семейство шрифтов, вы полагаетесь на компьютер пользователя.

И возможно, что конкретный шрифт не установлен на компьютере пользователя, поэтому вы указываете несколько вариантов.

Свойство font-family должно содержать несколько имен шрифтов в качестве запасных, чтобы обеспечить максимальную совместимость между браузерами и операционными системами. Начните с нужного шрифта и закончите общим семейством, чтобы позволить браузеру выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны. Названия шрифтов должны быть разделены запятой.

И на тот случай, если вы не знаете разницы между Serif и Sans-Serif, скажу, что есть шрифты без засечек и шрифты с засечками – это шрифты, в которых есть не только линии, но и небольшое украшение в конце.

Далее давайте изменим цвет. И это мы делаем с помощью свойства color.

И здесь можно использовать предопределенные имена цветов red, green, blue и т.д., а можно использовать шестнадцатеричное значение для определенного цвета.

Свойство font-style указывает, хотите ли вы, чтобы текст был курсивным или обычным.

Следующее свойство – это вес шрифта.

И вес шрифта можно указать от нормального до жирного. И вы также можете указать вес с помощью числа.

Далее мы можем указать размер шрифта.

Почти каждый браузер имеет размер шрифта по умолчанию 16 пикселей. Не путайте это с точками pt, здесь используются пиксели. Точки pt используются в печати, но не на экране. На экране вы используете пиксели. Пиксели считаются абсолютной единицей измерения размера. Тем не менее, у них есть относительная составляющая.

Пиксели привязаны к устройству просмотра. Для устройств с низким DPI или низким количеством точек на дюйм один пиксель соответствует одной точке пикселя устройства на дисплее. Для принтеров и экранов с высоким разрешением один пиксель подразумевает несколько точек пикселей устройства.

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

При всем при этом пиксели по-прежнему считаются абсолютной единицей измерения.

Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

Другое полезное свойство – text-align, которое позволяет центрировать или выравнивать текст по правому и левому краю.

Теперь давайте немного поговорим об относительном размере шрифта. И здесь есть две относительные единицы измерения, это проценты и ems.

Здесь тег body имеет размер 120%. И это означает, что мы хотим взять размер, который браузер предоставляет по умолчанию, и увеличить его на 120%.

В большинстве браузеров размер текста по умолчанию составляет 16 пикселей. Таким образом, 120% от 16 пикселей будет чуть больше 19 пикселей.

Здесь размер текста составляет 2em. И это единица измерения, эквивалентная ширине буквы в этом конкретном шрифте, который мы используем.

Поначалу это звучит немного запутанно, но суть в том, что это относительный размер.

Так как мы установили размер шрифта 120% во всем теле документа, и когда вы комбинируете этот размер шрифта с 2.5em, это говорит о том, что вы хотите увеличить шрифт в два с половиной раза по сравнению со 120%.

И наконец размер текста можно задать с помощью единицы vw, что означает «ширину области просмотра» viewport . Viewport – это размер окна браузера и 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.

Теперь, в HTML каждый элемент считается блоком. Однако этот блок содержит не просто контент.

Помимо содержимого, блок содержит отступы, границы и поля. И существуют правила, определяющие, как эти компоненты блока влияют на компоновку, а также, как вычисляются ширина и высота блока.

В качестве примера давайте рассмотрим структуру HTML этого документа.

Здесь есть тег h1 и тег div с идентификатором box, а внутри этого div есть еще один div с идентификатором content и текстом.

И так как div является элементом блочного уровня, он пытается заполнить родительский элемент целиком по ширине.

Но если приглядеться, здесь есть некоторое пространство между заголовком и текстом.

Давайте откроем инструменты разработчика Chrome и выясним, что это за пространство.

Давайте выберем тег body и посмотрим, что происходит.

И мы видим, что тег body имеет отступ около восьми пикселей. Откуда же взялись эти восемь пикселей?

И здесь написано таблица стилей пользовательского агента. Это означает, что это сам браузер. Это стили браузера по умолчанию.

Мы можем сделать margin 0, и когда мы это сделаем, мы увидим, что теперь наш контент находится на одном уровне с фактическими границами окна браузера.

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

И это потому, что внутренний блок содержимого полностью закрывает внешний, потому что они имеют одинаковый размер. Они оба пытаются заполнить своего родителя, который в данном случае является тегом body.

Поэтому давайте установим некоторые отступы внешнего блока.

Давайте установим padding 10 пикселей сверху, 10 пикселей справа, 10 пикселей внизу и 10 пикселей слева.

И вуаля, теперь мы увидели синий фон. Также мы добавили этому блоку черную границу с толщиной 5 пикселей и размеры самого блока 300 пикселей на 50 пикселей, а также отступ сверху от заголовка 50 пикселей.

Кроме того, мы добавили свойство overflow. Свойство overflow указывает, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико и не помещается в указанной области. И свойство overflow имеет следующие значения:

visible – по умолчанию. Переполнение контента в блоке не отсекается, и содержимое отображается за пределами блока.

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

scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого.

auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.

В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.

В CSS 3 есть такое свойство как box-sizing со значением border-box.

Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.

Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом:

ширина + отступ + граница = фактическая ширина элемента

высота + отступ + граница = фактическая высота элемента

С этим значением border-box свойства box-sizing все будет включено и размер нашего блока станет 300 пикселей на 50 пикселей.

Конец ознакомительного фрагмента.

Текст предоставлен ООО «Литрес».

Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.