Знак #говорит нам о том что это id.
Классы работают аналогичным образом, но в отличие от id, может существовать множество элементов с одинаковым классом.
Пример:
<!DOCTYPE html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet" href="style.css">
<title>IT Center</title>
</head>
<body>
<h1>IT Center РЭУим. Г.В. Плеханова</h1>
<pclass="text">Разработка с вниманием к деталям</p>
<pclass="text">Обучение с вниманием к тебе</p>
<ahref="https://vk.com/reu_it"><imgid= "logo"src="http://the-center.it/img/logo.png"></a>
</body>
</html>
CSS:
#logo{
background-color: red;
}
.text{
color: blue;
}
.- точка говорит нам о том, что это класс. Чтобы избежать конфликтов с одинаковым id, используйте по возможности классы. Используйте id, только если вы уверены, что элемент является уникальным.
Но вот вам загадка, что будет, если мы допишем первому тегу idи изменим с помощью него цвет текста на красный. Какой цвет будет в этом случае?
<!DOCTYPE html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet" href="style.css">
<title>IT Center</title>
</head>
<body>
<h1>IT Center РЭУим. Г.В. Плеханова</h1>
<pclass="text" id="red">Разработка с вниманием к деталям</p>
<pclass="text">Обучение с вниманием к тебе</p>
<ahref="https://vk.com/reu_it"><imgid= "logo"src="http://the-center.it/img/logo.png"></a>
</body>
</html>
CSS:
#logo{
background-color: red;
}
.text{
color: blue;
}
#red{
color: red;
}
Вот вам результат:
Цвет изменился, а все потому, что idимеет приоритет выше чем class. Все селекторы имеют приоритет, и в случае конфликта применяются те стили, у которых приоритет селектора больше.
1.Самый высокий приоритет у атрибута style, который можно указать в самом теге элемента.
2.Затем идет id
3.Class
4. Имена элементов, например p{}
Если же приоритеты совпадают, применяются те стили, которые были описаны последними в CSSфайле.
Наследование.
Применение CSS к документам HTML основано на принципе наследования и каскадирования.
Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа <p> средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. А вот если для параграфа <p> средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.
Каскадность.
Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Почему именно каскадные?
Всё дело в том, что стили для элемента могут быть определены в нескольких местах: внутри одного файла стилей и в разных файлах стилей.
Браузер находит все CSS-правила, затрагивающие данный элемент, а затем комбинирует их и получает итоговый список свойств для этого элемента. Комбинирование свойств производится по чётким правилам, которые опираются на приоритетность и специфичность.
CSSСвойства.
Существует очень много различных свойств css.
Отступы:
| margin | Задает внешние отступы для элемента. |
| margin-bottom | Задает нижний внешний отступ для элемента. |
| margin-left | Задает левый внешний отступ для элемента. |
| margin-right | Задает правый внешний отступ для элемента. |
| margin-top | Задает верхний внешний отступ для элемента. |
| padding | Устанавливает внутренние отступы в элементе. |
| padding-bottom | Задает нижний отступ(внутреннее поле) для элемента. |
| padding-left | Задает левый отступ(внутреннее поле) для элемента. |
| padding-right | Задает правый отступ(внутреннее поле) для элемента. |
| padding-top | Задает верхний отступ(внутреннее поле) для элемента. |
Позиционирование:
| bottom | Указывает направление смещения позиционированного элемента от нижнего края. |
| clear | Указывает с какой стороны элемента не допускаются плавающие элементы. |
| clip | Определяет видимую часть абсолютно позиционированных элементов. |
| display | Указывает, как будет отображаться элемент в браузере. |
| float | Определяет будет ли элемент плавающим. |
| left | Указывает направление смещения позиционированного элемента от левого края. |
| position | Определяет метод позиционирования элементов. |
| right | Указывает направление смещения позиционированного элемента от правого края. |
| top | Указывает направление смещения позиционированного элемента от верхнего края. |
| visibility | Определяет, является ли элемент видимым. |
| z-index | Указывает порядок расположения элементов по оси Z. |
Размер:
| height | Устанавливает фиксированную высоту. |
| max-height | Указывает максимальную фиксированную высоту. |
| max-width | Указывает максимальную фиксированную ширину. |
| min-height | Указывает минимальную фиксированную высоту. |
| min-width | Указывает минимальную фиксированную ширину. |
| overflow | Определяет, что предпринять, если содержимое элемента превосходит размер области элемента. |
| overflow-x | Указывает, обрезать или нет левый/правый край содержимого - если оно переполняет доступную область элемента для его содержания. |
| overflow-y | Указывает, обрезать или нет верхний/нижний край содержимого - если оно переполняет доступную область элемента для его содержания. |
| resize | Указывает, может ли размер элемента изменяться пользователем. |
| width | Устанавливает фиксированную ширину. |
Рамка и контур:
| border | Позволяет использовать основные свойства границ в одном объявлении. |
| border-bottom | Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении. |
| border-bottom-color | Задает цвет для нижней границы рамки. |
| border-bottom-left-radius | Позволяет сделать округлую границу нижнего левого угла. |
| border-bottom-right-radius | Позволяет сделать округлую границу нижнего правого угла. |
| border-bottom-style | Определяет стиль для нижней границы рамки. |
| border-bottom-width | Определяет ширину для нижней границы рамки. |
| border-color | Задает цвет для границ рамки элемента. |
| border-image | Позволяет использовать изображение в качестве рамки. |
| border-left | Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении. |
| border-left-color | Задает цвет для левой границы рамки. |
| border-left-style | Определяет стиль для левой границы рамки. |
| border-left-width | Определяет ширину для левой границы рамки. |
| border-radius | Позволяет изменить форму углов. |
| border-right | Меняет внешний вид правой границы рамки. |
| border-right-color | Задает цвет для правой границы рамки. |
| border-right-style | Определяет стиль для правой границы рамки. |
| border-right-width | Задает ширину для правой границы рамки. |
| border-style | Задает стиль для границ рамки элемента. |
| border-top | Меняет внешний вид верхней границы рамки. |
| border-top-color | Задает цвет для верхней границы рамки. |
| border-top-left-radius | Позволяет сделать округлую границу верхнего левого угла. |
| border-top-right-radius | Позволяет сделать округлую границу верхнего правого угла. |
| border-top-style | Определяет стиль для верхней границы рамки. |
| border-top-width | Определяет ширину для верхней границы рамки. |
| border-width | Задает ширину для границ рамки элемента. |
| outline | Создает внешнюю границу вокруг элемента. |
| outline-color | Определяет цвет внешней границы. |
| outline-offset | Сдвигает внешнюю границу на заданное расстояние от края элемента. |
| outline-style | Указывает стиль для внешней границы. |
| outline-width | Указывает ширину для внешней границы. |
Таблицы:
| border-collapse | Определяет будут ли границы рамки объединены в одну. |
| border-spacing | Определяет расстояние между границами смежных ячеек и общей рамкой таблицы. |
| caption-side | Указывает расположение заголовка таблицы. |
| empty-cells | Регулирует видимость пустых ячеек в таблице. |
| table-layout | Задает алгоритм использования макета таблицы. |
Текст:
| color | Изменяет цвет текста. |
| direction | Определяет направление написания текста. |
| letter-spacing | Контролирует расстояние между символами в тексте. |
| line-height | Определяет межстрочный интервал(интерлиньяж). |
| quotes | Определяет тип кавычек для встроенных цитат. |
| text-align | Указывает способ выравнивания содержимого по горизонтали. |
| text-decoration | Добавляет некоторые элементы декорирования к тексту. |
| text-indent | Определяет отступ первой строки в тексте элемента. |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий элемент. |
| text-transform | Контролирует использование строчных и прописных букв в тексте. |
| vertical-align | Определяет вертикальное выравнивание в элементе. |
| white-space | Определяет способ обработки пробелов внутри элемента. |
| word-break | Определяет правила переноса для не-CJK сценариев. |
| word-spacing | Определяет ширину пробелов между словами. |
| word-wrap | Позволяет прерывать длинные слова для переноса на другую строку. |
Тени и прозрачность:
| box-shadow | Добавляет эффект отбрасывания тени к элементу. |
| opacity | Устанавливает уровень прозрачности элемента. |
| text-shadow | Создает тень для текста. |
Фон:
| background | Устанавливает несколько или все значения свойств фона в одном объявлении. |
| background-attachment | Указывает будет ли фоновое изображение фиксированным. |
| background-clip | Определяет область в элементе, для которой задается фон. |
| background-color | Устанавливает цвет фона для элемента. |
| background-image | Устанавливает фоновое изображение в элементе. |
| background-origin | Указывает область позиционирования для фонового изображения. |
| background-position | Устанавливает начальное место для фонового изображения. |
| background-repeat | Задает, как фоновое изображение будет повторяться на экране. |
| background-size | Указывает размер для фонового изображения. |
Шрифт:
| font | Изменяет стандартный вид текста. |
| @font-face | Позволяет использование любого шрифта на странице. |
| font-family | Указывает шрифт или семейство шрифтов для текста. |
| font-size | Указывает размер для шрифта. |
| font-size-adjust | Контролирует размер неосновных шрифтов. |
| font-stretch | Регулирует ширину текста. |
| font-style | Позволяет изменять стиль текста. |
| font-variant | Конвертирует строчные буквы в прописные уменьшенного размера. |
| font-weight | Задает ширину символов текста. |
Со всеми свойствами вы можете ознакомиться подробнее здесь. Это очень полезный сайт для web-разработчика.