селектор {
свойство-css: значение;
свойство-css: значение;
свойство-css: значение;
}
h1 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
margin: 10px 0px;
}
h1 на странице и назначаем им стиль, размер и начертание шрифта (font-size: 20px; font-weight: bold;), высоту строки (line-height: 1.5;) и внешний отступ (margin: 10px 0px;)./*для всех заголовков первого уровня*/
h1 {
font-size: 30px;
margin: 15px 0px;
}
class).
/* задаём внешний вид для всех тегов с классом alert */
.alert {
color: red;
display: inline-blcok;
padding: 10px;
border:1px solid #000;
}
/* для элемента с id="contact_form" */
#contact_form {
padding: 10px;
font-size: 1em;
}
/* задаём цвет шрифтов на всём сайте */
* {
font-color: #000;
}
[attr] – по имени атрибута;[attr=value] – по имени и значению атрибута;[attr^=value] – по имени и значению, с которого оно должно начинаться;[attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value-;[attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;[attr*=value] – по указанному атрибуту и значению, которое должно содержать value;[attr~=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.target.
[target] {
color: red;
}
[target="_blank"] {
color: red;
}
href безопасный протокол https , если быть точным, ссылка начинается с https
[href^="https"] {
color: red;
font-weight: bold;
}
href которых есть подстрока (где-то в середине).
[href*="youtu.be"] {
background-color: green;
}
:hover, и вы можете задать кнопке отличный внешний вид, чтобы пользователю было легче понять, что он навёл курсор на некий активный элемент с которым можно взаимодействовать.
/*обычный класс описывающий цвет ссылки в меню*/
.menu a {
color: green;
}
/*класс с псевдоклассом :hover, состояние элемента
при наведении на него курсора мышки*/
.menu a:hover {
color: red; /*при наведении поменяется цвет ссылки на красный*/
}
:disabled используя который, можно например сделать поле формы полупрозрачным, чтобы визуально дать понять что с этим полем нельзя взаимодействовать в данный момент.:first-child позволит вам обратиться к первому элементу списка и задать ему отличный от остальных стиль. Давайте разберёмся детальнее.:link, :visited, :hover, :active и :focus.:link и :visited работают только у ссылок (тег <a href="...">ссылка</a>).:hover, :focus и :active могут применяться не только к ссылкам, но и к другим элементам, например кнопкам, картинкам, спискам, полям формы и т.д.:link предназначен для выбора ссылок, которые не успел посетить пользователь. В данном примере, подсветим синим цветом ссылки с классом wiki (документация), по которым пользователь ещё не успел перейти.
a.wiki:link {
color: blue;
}
a.wiki:visited {
color: red;
}:hover вы даже можете прикрутить анимационные эффекты используя этот псевдокласс.
/*исходный класс кнопки*/
.btn {
display: block;
transition: 0.3s; /*анимация, смена фона будет плавной*/
background-color: #00B6BD;
}
/*Меняем цвет фона, при наведении курсора на кнопку*/
.btn:hover {
background-color: #F5F4EF;
}
hover используется для подсветки ссылок и кнопок, но при необходимости может быть применён и к другим элементам.
/*Стиль кнопки в момент нажатия*/
.btn:active {
background-color: red;
color: white;
}
.form input[type="text"]:focus {
background-color: #8BB100
}
:first-child, :last-child, :only-child, :nth-child(выражение), :nth-last-child(выражение). Где выражение представляет собой число, математическую формулу или зарезервированное ключевое слово.
.menu li:first-child {
font-weight: bold;
color: red;
}
.menu li:last-child {
font-weight: bold;
color: red;
}
span:only-child {
color: red;
}
<div>
<span>Этот span единственный дочерни элемент</span>
</div>
<div>
<span>Этот span один из потомков родителя</span>
<span>Этот span один из потомков родителя</span>
</div>
span, т.к. он является единственным дочерним элементом своего родительского div.
/* выбрать второй элемент li в родителе*/
.li:nth-child(2) { ... }
/* выбрать нечётные элементы родителя 1, 3, 5 и т.д. */
.li:nth-child(odd) { ... }
/* выбрать чётные элементы родителя */
.li:nth-child(even) { ... }
/* выбор элемента по формуле, в данном примере будут выбраны элементы под номером 1, 3, 5, 7, ... внутри родителя */
.li:nth-child(2n+1) { ... }
Xn + Y. X и Y - это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 ...). Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, ...). Таким образом 3 умножить на 0 плюс 2 равно 2, 3 умножить на 1 плюс 2 равно 5, 3 умножить на 2 плюс 2 равно 8 и т.д.:nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе ведётся не с начала, а с конца (т.е. в форму в счётчи n будет подставляться не 0 а число, равное числу элементов в родителя минус 1). В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even
:enabled, :disabled и :checked.:hover, :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий (клик мышкой, выделение поля формы, выбор chekbox-а в форме и т.д.).disabled ), с которыми пользователь может взаимодействовать, например внести текст или выбрать флажок.
/*задаём зелёный цвет фона всем включённым полям формы*/
input:enabled {
background-color: #CBDC00;
}
input:disabled {
border: 1px solid red;
}
input:checked {
border: 1px solid red;
}
label около выбранного checkbox.
input:checked + label {
background-color: green;
}
h3, h4, h5 {
font-size: 20px;
margin-top: 15px;
margin-bottom: 10px;
colot: #000;
}
h3, h4 а также h5. В перечислении можно использовать все возможные селекторы, например.
h3, .title, #contact_form_title {
font-size: 20px;
margin-top: 15px;
margin-bottom: 10px;
colot: #000;
}
h3 (т.е. всех тегов <h3>...</h3>), для всех элементов содержащих класс title, а так же конкретному заголовку с id="contact_form_title". Это позволяет нам выделять общие для нескольких групп элементов стили, и засовывать их в один класс (одни фигурные скобки), а отличия в отдельные классы.
gallary-row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body><!--Предок gallary-row-->
<div class="container"><!-- родитель gallary-row -->
<div class="row gallary-row"> <!-- gallary-row текущий рассматриваемый элемент-->
<div class="col-4"><!-- дети gallary-row (они так же являются потомками)-->
<img src="/img.jpg" alt=""><!--потомки gallary-row -->
<a href="#">More</a><!--потомки gallary-row -->
</div>
<div class="col-4"><!-- дети gallary-row -->
<img src="/img.jpg" alt=""><!--потомки gallary-row -->
<a href="#">More</a><!--потомки gallary-row -->
</div>
<div class="col-4"><!-- дети gallary-row -->
<img src="/img.jpg" alt=""><!--потомки gallary-row -->
<a href="#">More</a><!--потомки gallary-row -->
</div>
</div>
<div class="row"><!--сосед gallary-row -->
<div class="col-12">
<h1>Header</h1>
</div>
</div>
</div>
</body>
</html>
| Вид селектора | Числовой вес |
|---|---|
Универсальный селектор *
|
0 баллов |
Селектор по типу элемента, например span
|
1 балл |
Селектор по классу, например .class
|
10 баллов |
Селектор по ID, например #contact_form
|
100 баллов |
inline-стиль элемента, style="border: 1px solid black;"
|
1000 баллов |
<div class="container" id="main_container">Некий контейнер с текстом</div>
div {
background-color: #CCC;
}
#main_container {
background-color: #41A4F4;
}
.container {
background-color: #CBDC00;
}
div.container т.к. селектор по типу элемента 1 балл + селектор по классу .container 10 баллов итого 11, больше чем просто селектор по классу .container.
div.container {
background-color: #CCC;
}
.container {
background-color: #CBDC00;
}
div.container {
background-color: #CCC;
}
.container {
background-color: #CBDC00!important;
}
!important лучше не прибегать вовсе, это плохой вариант, т.к. дальше будет путаница, думаешь что должны работать одни стили, а работают другие. Пишите ваши стили правильно!(Голосов: 1, Рейтинг: 3.3) |
Почему IT-специалисту необходимо освоить английский язык? Разбираем в статье.
Как правильно подключать стили и скрипты к шаблону 1С Битрикс.
В статье рассмотрен пример функции для генерации оглавления статьи блога или новости
Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...
С выходом 20-й версии 1С Битрикс, появилась возможность работы с элементами инфоблока средствами ORM...