HTML Теги
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Приоритет селекторов
Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).
Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .
При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.
Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.
Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:
- универсальный селектор (не добавляет вес) – 0,0,0,0 ;
- селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
- селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
- селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;
Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .
- * – 0,0,0,0 ;
- li – 0,0,0,1 ;
- li::before – 0,0,0,2 ;
- ul > li – 0,0,0,2 ;
- div input+label – 0,0,0,3 ;
- h1 + div – 0,0,1,2 ;
- .btn.show – 0,0,2,0 ;
- ul li a.item – 0,0,1,3 ;
- #aside div.show – 0,1,1,1 ;
- style=». » – 1,0,0,0 ;
Повысить важность определённого CSS свойства можно с помощью ключевого слова !important. В этом случае будет использоваться именно данное CSS-свойство
В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.
Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.
В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.
К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.
В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).
Создание и использование классов CSS
Для выделения какой-то группы объектов (элементов), которые необходимо наделить одними и теми же свойствами css, необходимо создать класс.Синтаксис:
.имя_класса{
свойство1 значение;
свойство2 значение;
}
|
Подробнее:
Пример: Создать два класса с названиями и . Один класс применить для заголовков , другой класс применить для тегов
Выполнение:
<html> <head> <style type="text/css"> |
h1.red1 {
color RGB(215,40,40);
text-align center
}
p.class1{color#3366FF; font-familyArial}
|
<style> <head> <body> <h1 class="red1">В моей душе<h1> <p class="class1"> Я хочу быть ребенком: наивным и смелым,<br> Ничего не бояться и верить в добро.<br> Я бы снова писала по черному белым:<br> Два плюс два - ну, четыре, конечно равно! <p> <p> Конец <p> |
Результат:
В моей душе
Я хочу быть ребенком: наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!
Конец
Задание: скопируйте код страницы. Измените страницу меню сайта так, чтобы одни пункты меню были темного цвета (класс ), а другие – светлого ( класс ).
Для гиперссылки добавить свойство:
<html> <head> <title> Классы <title> <style type="text/css"> ... <style> <head> <body> <center><h3> Главное меню <h3><center> <ul> <a href="#" class="dark"><li>Введение<li><a> <a href="#" class="dark"><li>Глава1<li><a> <a href="#" class="dark"><li>Глава2<li><a> <a href="#" class="dark"><li>Заключение<li><a> <ul> <center><h3> Дополнительное меню <h3><center> <ul> <a href="#" class="light"><li>Тест<li><a> <a href="#" class="light"><li>Глоссарий<li><a> <a href="#" class="light"><li>Литература<li><a> <ul> <body> <html> |
Примеры использования классов с тегами и просто классов:
Селектор CSS ID
Селектор CSS ID использует атрибут ID элемента HTML для выбора одного уникального элемента на странице. Чтобы использовать селектор идентификатора в CSS, вы просто пишете хэштег (#), за которым следует идентификатор элемента. Затем заключите в скобки свойства стиля, которые вы хотите применить к элементу.
Вот синтаксис селектора идентификатора в CSS:
idname {свойства стиля}
Есть несколько правил, которым вы должны следовать, чтобы правильно использовать селектор CSS ID
Прежде чем мы рассмотрим эти правила ниже, позвольте мне сделать важное замечание по поводу приведенных ниже примеров
Я буду использовать онлайн-редактор кода W3Schools для создания следующих демонстраций. Не стесняйтесь щелкать любую из исходных ссылок, чтобы увидеть полный фрагмент кода за примерами и поэкспериментировать с ними или создать свой собственный.
Я также буду использовать BootstrapCDN, поэтому вы увидите ссылку на таблицу стилей CSS и некоторый другой код в разделе , если вы щелкните, чтобы просмотреть код. Однако HTML и CSS примеров будут работать и на сайтах HTML5. Поэтому, если вы создаете свой сайт с нуля вместо использования CSS-фреймворка Bootstrap, вы можете просто удалить ссылку и скрипты из раздела .
Как использовать ID в CSS
Первое правило, которое следует учитывать при использовании атрибута ID, заключается в том, что он должен содержать хотя бы один символ и не может начинаться с числа.
Допустим, у меня на сайте несколько h2s, и каждый знаменует начало новой главы. Затем я мог бы дать каждому h2 имя ID.
Следующий HTML правильный:
Это неверно:
Второе правило, о котором следует помнить, заключается в том, что если элементу присвоено имя идентификатора, он должен быть уникальным на странице. Таким образом, селектор ID выбирает только один уникальный элемент.
Возвращаясь к примеру с несколькими h2, скажем, я хочу, чтобы у каждого из этих h2 был свой стиль, чтобы визуально подсказывать читателю, когда начинается новая глава. В этом случае я бы дал каждому h2 уникальное имя идентификатора, чтобы я мог использовать селекторы идентификаторов для применения к каждому уникального набора значений свойств.
Следующий HTML правильный:
Это неверно:
Следующий CSS изменит размер шрифта каждого h2:
Вот результат:
Последнее правило, о котором следует помнить при использовании селекторов идентификаторов, заключается в том, что значение свойства селектора идентификаторов должно точно соответствовать имени идентификатора.
Используя HTML из приведенного выше примера, следующий CSS будет правильным.
Это было бы неправильно:
Если бы я использовал этот CSS со строчной буквой «c», селекторы CSS ID и их соответствующие правила CSS не применялись бы. Вместо этого будет отображаться стиль h2 по умолчанию в Bootstrap, как показано ниже.
Теперь, когда мы понимаем, что такое селектор ID и как его использовать в CSS, давайте убедимся, что мы понимаем разницу между классом и ID в CSS.
Использование атрибута class
HTML атрибут используется для определения одинаковых стилей элементов с одинаковым именем класса.
Таким образом, все элементы HTML с одинаковым атрибутом получают одинаковый стиль.
Например, есть три элемента которые имеют одно и то же имя класса:
Пример
<!DOCTYPE html><html><head><style>
.cities { background-color: black; color: white; margin: 20px;
padding: 20px;} </style>
</head><body><div class=»cities»>
<h2>London</h2> <p>London is the capital of England.</p>
</div><div class=»cities»>
<h2>Paris</h2> <p>Paris is the capital of France.</p></div><div class=»cities»>
<h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p></div></body></html>
Результат:
Создание CSS-класса с помощью селектора
Приступим к изучению классов CSS на практике. Сотрите все, что есть сейчас в файле styles.css и добавьте следующий фрагмент кода, чтобы объявить правило для класса red-text:
После добавления кода в styles.css сохраните файл.
Теперь откройте файл index.html и сотрите все, кроме первой строки кода:
Она ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент HTML-кода:
Обратите внимание, здесь в имя класса не точка не добавляется. На данный момент файл index.html должен содержать такой код:. Здесь мы добавили текст с помощью тега HTML
Также мы указали класс red-text, добавив выделенный атрибут класса class = “red-text” внутри открывающего тега HTML
Здесь мы добавили текст с помощью тега HTML <p>. Также мы указали класс red-text, добавив выделенный атрибут класса class = “red-text” внутри открывающего тега HTML.
Сохраните файл index.html и загрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
Вы должны получить веб-страницу с красным текстом:
Here is the first sample of paragraph text.
Теперь давайте добавим еще один класс CSS, чтобы посмотреть, как происходит стилизация различных фрагментов текстового контента элемента <p>. Добавьте следующий фрагмент кода в файл styles.css (после класса red-text):
Это правило объявляет, что свойству background-color класса yellow-background-text присвоено значение yellow. Любой текстовый HTML элемент, которому присвоится этот класс, будет использовать желтый фон
Обратите внимание, слово text в классе yellow-background-text используется только для удобства чтения файла человеком. На обработку самого класса браузером это слово никак не влияет
Чтобы применить новый класс к каким-нибудь элементам, вернитесь в файл index.html и добавьте следующую строку в конец файла:
Мы добавили новый текст с помощью элемента <p> и указали класс yellow-background-text. Сохраните файл и перезагрузите его в браузере. Ваша веб-страница покажет два разных предложения, первое будет написано красным, а второе – на желтом фоне:Here is the first sample of paragraph text.
Here is the second sample of paragraph text.
Обратите внимание: в один HTML-тег можно добавить несколько классов. Попробуйте поместить оба класса в один текстовый элемент, добавив следующую строку в index.html:. Как видите, имена классов разделяются только пробелом
Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:Here is the first sample of paragraph text
Как видите, имена классов разделяются только пробелом. Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:Here is the first sample of paragraph text.
Here is the second sample of paragraph text.
Here is a third sample of text.
Теперь на странице есть третья строка текста, оформленная согласно свойствам, установленным в классах red-text и yellow-background-text – это красный текст на желтом фоне.
Class
При использовании class, одному HTML-дескриптору можно назначить стили из нескольких классов одновременно:
.my_class_r7t {color blue; font-style italic;}.my_class_ffR5 {color black; background-color #fafafa; padding 3px; border 1px solid #757575; margin-left 30px;}
Имена различных классов записываются через пробел:
<p class=»my_class_ffR5 my_class_r7t»>Пример применения 2-ух различных классов для 1-го HTML-тега.<p>
Как это выглядит, смотрите ниже:
Результат применения двух различных классов для 1-го дескриптора HTML.
Классы my_class_r7t и my_class_ffR5 устанавливают различные цвета содержимому HTML-тега. Использован будет тот цвет, который определен в файле стилей позже (в данном случае class my_class_ffR5 записан после my_class_r7t). Порядок применения классов в самом HTML-дескрипторе значения не имеет.
Чтобы назначить составным классам уникальное стилевое оформление, они записываются вместе, без проблеов:
.my_class_bbbb755 {font-weight bold;}.my_class_ffR5.my_class_bbbb755 {text-align right;}
Выравнивание по правому краю, будет применено только в случае, когда одному HTML-дескриптору присвоено сразу 2 класса:
<p class=»my_class_ffR5 my_class_bbbb755″>Пример применения стилей для составных классов</p>
Как это выглядит, смотрите ниже:
Пример применения стилей для составных классов
Один и тот же class, в отличае от id, можно без проблем присваивать не ограниченному кол-ву различных элементов:
<div class=»my_class_ffR5″>…<div><p class=»my_class_ffR5″>…<p><h5 class=»my_class_ffR5″>…<h5><div class=»my_class_ffR5″>…<div><p class=»my_class_ffR5″>…<p>
Классы | CSS | WebReference
Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class.
Синтаксис ?
Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчёркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | ||
| * | Повторять ноль или больше раз. | * |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Результат примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью класса
Примечание
Internet Explorer до версии 7 понимает классы, имена которых начинаются с дефиса (-) или символа подчёркивания (_). Остальные браузеры таки имена игнорируют.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Вычисленные стили: getComputedStyle
Итак, изменить стиль очень просто. Но как его прочитать?
Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?
Свойство оперирует только значением атрибута , без учёта CSS-каскада.
Поэтому, используя , мы не можем прочитать ничего, что приходит из классов CSS.
Например, здесь не может видеть отступы:
…Но что, если нам нужно, скажем, увеличить отступ на ? Для начала нужно его текущее значение получить.
Для этого есть метод: .
Синтаксис:
- element
- Элемент, значения для которого нужно получить
- pseudo
- Указывается, если нужен стиль псевдоэлемента, например . Пустая строка или отсутствие аргумента означают сам элемент.
Результат вызова – объект со стилями, похожий на , но с учётом всех CSS-классов.
Например:
Вычисленное (computed) и окончательное (resolved) значения
Есть две концепции в :
- Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, или .
- Окончательное () значение – непосредственно применяемое к элементу. Значения или являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, или . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, .
Давным-давно был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.
Так что, в настоящее время фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.
требует полное свойство!
Для правильного получения значения нужно указать точное свойство. Например: , , . При обращении к сокращённому: , , – правильный результат не гарантируется.
Например, если есть свойства , то что мы получим вызывая ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.
Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают в документе ниже, а некоторые (Firefox) – нет:
Стили, применяемые к посещённым ссылкам, скрываются!
Посещённые ссылки могут быть окрашены с помощью псевдокласса .
Но не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.
JavaScript не видит стили, применяемые с помощью . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
Вложенность в БЭМ нейминге
Блоки. Блоки могут быть вложены друг в друга.
Элементы. Элемент который принадлежит к блоку может находится только в нем. Элемент не может находится за пределами блока к которому он принадлежит.
Элементы одного блока могут находится друг в друге. Элементы можно вкладывать друг в друга, потому как всегда могут понадобиться дополнительные обертки и структурные элементы.
Важно помнить, все элементы внутри блока принадлежат непосредственном этому блоку. Даже если они вложены друг в друга
Не бывает элементов от элементов! Элементы бывают только от блока.
Неправильно:
<div class="card">
...
<div class="card__details">
<div class="card__details__price">12000 РУБ</div>
<a class="card__details__reade-more" href="#">Подробнее</a>
</div>
</div>
Правильно:
<div class="card">
...
<div class="card__details">
<div class="card__price">12000 РУБ</div>
<a class="card__reade-more" href="#">Подробнее</a>
</div>
</div>
Несмотря на то что и вложены в , они все равно являются элементами от блока .
Базовые селекторы
К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.
Селектор по элементу (тегу)
Селектор по элементу предназначен для выбора элементов по имени тега.
Пример задания правила для всех элементов p на странице:
Селектор по классу
Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).
Пример задания правила для всех элементов, имеющих класс center :
Селектор по идентификатору (id)
Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).
Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :
Универсальный селектор
Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.
Пример задания правила для всех элементов на странице:
CSS селекторы по атрибуту
Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.
Типы селекторов по атрибуту:
- – по имени атрибута;
- – по имени и значению атрибута;
- – по имени и значению, с которого оно должно начинаться;
- – по имени атрибута и его значению, которое равно value или начинается со value- ;
- – по имени атрибута и значению, на которое оно должно заканчиваться;
- – по указанному атрибуту и значению, которое должно содержать value ;
- [attr
=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.
Пример задания правила для всех элементов на странице, имеющих атрибут target :
Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):
Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :
Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://www.youtube.com/watch?v=TEOSuiNfUMA ):
Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):
Каких селекторов нет в CSS?
В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.
Здравствуйте. Вот, например, есть код
- text
- text
- text
Я могу отдельно выбрать каждый span. Могу-ли я как-то выбрать в css родительский ? Или через jquery? Большое спасибо.
Как выбрать элемент , который является прямым родителем элемента привязки?
В примере мой CSS будет примерно таким:
Очевидно есть способы сделать это с помощью JavaScript, но я надеюсь, что существует какое-то обходное решение, существующее на уровне CSS 2-го уровня.
Меню, которое я пытаюсь создать, извергает CMS поэтому я не могу переместить активный элемент в элемент . (если я не использую модуль создания меню, который я бы предпочел не делать).
Атрибуты
= Новый в HTML5.
| Атрибут | Значение | Описание |
|---|---|---|
| align | top bottom middle left right |
Не поддерживается в HTML5. Задание выравнивания элемента <object> в соответствии с окружающими элементами |
| archive | URL |
Не поддерживается в HTML5.Разделенный пробелами список URL в архивах. Архив содержит ресурсы, относящиеся к объекту |
| border | pixels |
Не поддерживается в HTML5. Задает ширину границы вокруг <object> |
| classid | class_ID | Не поддерживается в HTML5.Определяет значение идентификатора класса, заданное в реестре Windows или URL-адрес |
| codebase | URL | Не поддерживается в HTML5.Определяет, где найти код для объекта |
| codetype | media_type | Не поддерживается в HTML5.Тип носителя кода, на который ссылается атрибут ClassID |
| data | URL | Указывает URL-адрес ресурса, используемого объектом |
| declare | declare | Не поддерживается в HTML5.Определяет, что объект должен объявляться, не создаваться или создаваться до тех пор, пока не потребуется |
| form | form_id | Указывает одну или несколько форм, к которым принадлежит объект |
| height | pixels | Задает высоту объекта |
| hspace | pixels |
Не поддерживается в HTML5. Указывает пробелы на левой и правой стороне объекта |
| name | name | Задает имя объекта |
| standby | text | Не поддерживается в HTML5.Определяет текст для отображения во время загрузки объекта |
| type | media_type | Указывает тип носителя данных, указанных в атрибуте Data |
| usemap | #mapname | Указывает имя карты образа на стороне клиента, используемой с объектом |
| vspace | pixels |
Не поддерживается в HTML5. Указывает пробелы в верхней и нижней части объекта |
| width | pixels | Задает ширину объекта |
Class или id — что использовать?
На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.
Для того чтобы понять какая же между CSS и HTML разница, необходимо разобраться, что же такое CSS, а что такое HTML. В переводе с английского CSS означает «Каскадные таблицы стилей». CSS является технологией управления дизайном веб-страницы, он предоставляет множество возможностей для описания внешнего вида страницы, также позволяет значительно упростить вид HTML страницы с помощью переноса оформления для элементов страницы в CSS файл. CSS дает возможность использования одного оформления для неограниченного количества элементов HTML страниц. Это позволяет на всех страницах, которые используют один класс для оформления, изменять оформление на всех страницах сайта, изменив его 1 раз в CSS файле, это очень удобно, если на сайте больше 50 страниц, не нужно в каждой из них изменять оформление элемента. Что же такое HTML
? В переводе с английского HTML означает «Язык разметки гипертекста». HTML является стандартным языком разметки HTML документов. Язык разметки гипертекста используется непосредственно для структурирования содержимого HTML страницы. С его помощью можно создавать таблицы, оформлять их, создавать оформление для текстов и . HTML страницы без использования CSS
становятся сложными и запутанными, так как оформление для каждого элемента прописывается заново, что значительного увеличивает объем текста. Например, есть HTML страница, на которой размещено 3 части текста, которые необходимо оформить одинаково (размер, цвет), но использовать HTML теги для оформления всех трех сразу не получается, так как эти фрагменты находятся в разных местах HTML страницы. Для оформления таких текстов будет необходимо использовать код каждый раз, для каждого фрагмента в отдельности. При использовании же CSS, мы один раз создадим оформление для класса, а потом в коде HTML-страницы просто пропишем этот класс каждому из трех фрагментов. Теперь HTML код теперь выглядит менее объемно, не так ли? Изменив лишь один элемент CSS, мы можем поменять оформление сразу всех страниц сайта. А этих страниц могут быть тысячи.
10 ответов
Лучший ответ
В вашей таблице стилей:
Изменить: это тоже может помочь:
И в вашем примере:
Изменить, 4 года спустя. Поскольку это очень старый вариант, и люди продолжают его находить: не используйте tagNames в своих селекторах. быстрее, чем , потому что tagName добавляет шаг фильтрации, который вам не нужен. Используйте tagNames в селекторах только там, где это необходимо!
365
ajm
7 Май 2014 в 20:16
Есть различия между и в CSS.
Вот «простой английский» : Выберите все элементы с именем класса , которые являются потомками элемента с идентификатором .
А означает: Выберите элемент с идентификатором , а также именем класса .
Вы можете узнать больше здесь трюки css
87
Reza Abbasi
28 Июн 2018 в 10:01
Нет ничего плохого в объединении идентификатора и класса в одном элементе, но вам не нужно идентифицировать его обоими для одного правила. Если вы действительно хотите, вы можете:
Вам не нужен перед идентификатором, как предлагали другие.
В общем, правила CSS, специфичные для этого элемента, должны быть установлены с идентификатором, и они будут иметь больший вес, чем правила только для класса. Правила, указанные классом, будут свойствами, которые применяются к нескольким элементам, которые вы не хотите изменять в нескольких местах в любое время, когда вам нужно настроить.
Это сводится к следующему:
Есть смысл?
5
Gabriel Hurley
22 Июн 2009 в 16:54
Ну, как правило, вам не нужно классифицировать элемент, указанный идентификатором, потому что идентификатор всегда уникален, но если вам действительно нужно, должно работать следующее:
4
Blixt
22 Июн 2009 в 16:44
Вы можете комбинировать идентификатор и класс в CSS, но идентификаторы должны быть уникальными, поэтому добавление класса в селектор CSS приведет к его чрезмерной квалификации.
1
Eric Wendelin
22 Июн 2009 в 16:43
Идентификаторы должны быть уникальными для всего документа, поэтому вам не нужно выбирать на основе обоих. Вы можете назначить элементу несколько классов, используя
Ben Hughes
22 Июн 2009 в 16:43
Я думаю, вы все не правы. Идентификаторы против класса — это не вопрос специфики; у них есть совершенно разные логические цели.
Идентификаторы следует использовать для идентификации определенных частей страницы: заголовок, панель навигации, основная статья, указание автора, нижний колонтитул.
Для применения стилей к странице следует использовать классы. Допустим, у вас есть общий сайт журнала. На каждой странице сайта будут одинаковые элементы — заголовок, навигация, основная статья, боковая панель, нижний колонтитул. Но в вашем журнале есть разные разделы — экономика, спорт, развлечения. Вы хотите, чтобы три секции имели разный вид — экономичный консервативный и квадратный, спортивный активный, развлекательный и яркий и молодой.
Для этого вы используете классы. Вам не нужно создавать несколько идентификаторов — # Economics-article и # Sports-article и # Entertainment-article. В этом нет смысла. Вместо этого вы должны определить три класса: экономика, спорт и развлечения, а затем определить идентификаторы #nav, #article и #footer для каждого.
Greg
18 Дек 2013 в 18:44
Используйте: в переменных тега в CSS.
Lan…
31 Авг 2016 в 14:53
Продолжая ответ Аджма:
Для комбинации динамического идентификатора или выбора класса ->
Kristian
1 Мар 2021 в 07:53
Не будет работать, если тип документа — html 4.01 …
-1
BoltClock
23 Апр 2013 в 17:27
