Каскадность — браузер находит все CSS-правила, а затем комбинирует их и получает итоговый список свойств. Комбинирование свойств производится по правилам, которые опираются на приоритетность и специфичность. Благодаря механизму каскадности, CSS-правила будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов.
Порядок определяется по:
- важности;
- специфичности;
- порядку в исходном коде.
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Блоку можно задать внешную рамку, которая не влияет на его размер и не занимает места.
outline: 3px solid #cacaca;
outline-offset: 10px;
Если рамка border элемента широкая, а сам элемент имеет нулевую ширину и высоту, то стороны рамки становятся треугольными. Эту тухнику используют для создания стрелок.
Некоторые списки лучше оборачивать в dl.
Ссылка на главной не должна вести на себя.
<!-- Логотип на главной странице -->
<a class="header-logo"><img></a>
<!-- Логотип на других страницах -->
<a class="header-logo" href="/"><img></a>
i — тект отличающийся от окружающего текста, но не являющийся более важным.
Для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-, это позволяет хранить текстовую информацию, которая может помочь в работе скриптов, а также для оформления элементов через CSS.
<p data-text="hello">world</p>
p::before {
content: attr(data-text) " ";
}
Функиця attr() используется для добавления значения атрибута HTML-элемента в свойства.
Чтобы был эффект от вертикального выравнивания vertical-aling: middle был виден, нужно задать высоту строки такую же, как высота элемента.
Свойство clip может обрезать содежимое элемента, с помощью прямоугольной области. Все, что не поместится в эту область — будет не видимым. Синтаксис: clip: rect(верхняя-координата, правая-координата, нижняя-координата, левая-координата);
Свойство clip работает только для абсолютно спозиционированных элементов.
clip: rect(0, 100px, auto, 0);
Свойство counter-reset создает переменную, в которой будет храниться счетчик отображений элемента. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов::after и ::before. Синтаксис: counter-reset: <имя_счетчика>.
Свойство counter-increment позволяет увеличивать значение счетчика. Чтобы увеличивать счетчик, нужно добавить свойствоcounter-increment: <имя_счетчика> к каждому элементу, который будет нумероваться.
Функция counter(<имя_счетчика>) позволяет считывать значение счетчика и передавать его в псевдоэлементы.( нужно задать им свойство позволяет передавать значение счетчика (через свойство content).
ul {
counter-reset: counter_name;
}
li::before {
counter-increment: counter_name;
content: "part " counter(counter_name) ". ";
}
Пример использования JavaScript в HTML5
var control = document.querySelector('.class');
var data = control.dataset.attribute; // получаем data-attribute=".."
if (control) {
control.classList.remove('class');
control.classList.add('active');
control.innerHTML = 'inner text' + data;
}
var controls = document.querySelectorAll('.class');
for (var i = 0; i < controls.length; i++) {
element.style.width = '10px';
}
document – это специальная переменная, в которой хранитсякорневой элемент HTML-документа, будем называть его просто «документ». В нём хранятся все остальные теги.
querySelector – это метод документа, который по указанному селектору ищет и возвращает первый найденный элемент, подходящий под селектор. В этом методе можно использовать любые CSS-селекторы.
Другой метод querySelectorAll возвращает все элементы, соответствующие селектору.
У элементов, которые мы находим с помощью querySelector, есть свойство classList, в котором хранится список классов элемента. Список классов можно изменять, удаляя или добавляя в него классы с помощью методов add и remove свойстваclassList.
В свойстве dataset HTML-элемента хранятся все значения его data-атрибутов. Обратиться к ним можно по названию data-атрибута, удалив из названия приставку data-.
Добавлять содержимое в HTML-элемент через JavaScript можно с помощью свойства innerHTML. Присвоенная свойству innerHTML строка заменяет всё содержимое HTML-элемента. В этой строке можно использовать любой HTML-код.
Метод addEventListener позволяет отслеживать и обрабатывать события котрые происходят с объектом. Первый параметр задаёт тип события (например, click), второй — функцию-обработчик.
С помощью element.style можно и получать, и изменять значения свойств.