Таблица стилей CSS и селекторы
HTML-ին ոճ հաղորդելու տարբերակները
CSS – Cascading Style Sheets – Каскадная таблица стилей, используемая для описания внешнего вида веб-страницы. Css, автор Хокон Виум Ли. Языковой стандарт определен W3C. CSS-1 вышел в 1996 году, а теперь доступен CSS-3.
Каскадная таблица стилей. Для элемента html можно определить несколько вариантов стиля, поэтому среди них необходимо выбрать активный вариант. Оно выбрано путем каскадного перехода от более общего определения к более конкретному.
Например:
p { color: orange; }
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<p>Привет, мир!!</p>
<p style= "color: red">Уроки на Гаити:</p>
</body>
</html>
<style> элемент установлен для всех <p> текст элементов выделен оранжевым цветом, что является общим определением. Во-вторых <p> элемент style ատրիբուտով обозначено красным, что является конкретным определением. Таким образом, был использован каскадный переход от более общего к более конкретному.
Существует три варианта стилизации HTML:
1- inline – стиль определяется внутри элемента style через атрибут.
Например:
<p style= "color: red; font-size: 10px;">Привет, мир!</p>
color: и: font-size: — это имена свойств, и red; и: 10px; - стоимость недвижимости.
2 – придать элементу общий стиль будет использоваться в <style> элемент.
Например:
<head>
<style>
p{
color: orange;
}
</style>
</head>
<style> элемент имеет следующий стиль:
указан селектор. в качестве селектора выступает имя тега: pтот
Это могло бы быть также class և id значения атрибутов.
Если: селектор — это имя тега, тогда стиль будет применяться ко всем элементам этого типа.
Если селектором является значение атрибута класса, стиль будет применяться ко всем элементам, имеющим одинаковое значение атрибута класса.
p {
font-size: 18px;
color: red;
}
Если селектор classэто ценность
<p class= "testClass">Привет, мир!</p>
.testClass {
font-size: 18px;
color: orange;
}
Если селектор idэто ценность
<p id= "testId">Привет, мир!</p>
#testId {
font-size: 18px;
color: orange;
}
Если: classВ случае можно задать одно и то же значение нескольким элементам, тогда idкак таковой в html-документе.
" * » символ, стиль будет применен ко всем элементам:
*{ color: red }
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<div>
тег div.
<h2 data-no-auto-translation="">Header-2</h2>
<p>
п тег.
<h1 data-no-auto-translation="">header-1</h1>
</p>
</div>
</body>
</html>
Запятую можно использовать для перечисления элементов, к которым применяется стиль:
h1, h2 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<div>
тег div.
<h2 data-no-auto-translation="">Header-2</h2>
<p>
п тег.
<h1 data-no-auto-translation="">header-1</h1>
</p>
</div>
</body>
</html>
3 -<link> в дартс href адрес внешнего файла CSS определяется с помощью атрибута. Формат файла: " .css ".
<link> устанавливается в элементе. css в файле прописывается так же, как и էլեմենտում։
Внешний файл используется для удобства, если объем css-кода большой.
Например:
<head>
<link href= "style.css" rel= "stylesheet">
</head>
Բարդ սելեկտորներ
Есть также сложные селекторы. они есть
Կոնտեքստային սելեկտորներ
Հարևան սելեկտորներ
Դուստր սելեկտորներ
Ատրիբուտների սելեկտորներ։
Կոնտեքստային սելեկտորներ
Կոնտեքստային սելեկտորներն необходимы для стилизации дочерних элементов.
Сначала указывается основной элемент, а затем необходимые дочерние элементы, разделенные двоеточием.
Например:
div p {
color: orange;
}
<body>
<div>
<p>Привет, мир-1</p>
<form action="">
<p>Привет, мир-2</p>
<input type="hidden" name="trp-form-language" value="ru"/></form>
<p>Привет, мир-3</p>
<p>Привет, мир-4</p>
</div>
<p> Этот не подойдет </p>
</body>
Стиль применяется только к родительскому элементу. <p> к
Также это можно организовать следующим образом:
.red li a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href= "style.css" rel= "stylesheet">
<title></title>
</head>
<body>
<p>
Абзац в теле.
</p>
<div>
<p>Абзац в разделе..</p>
<ul class="red">
<li><a href="#" data-no-auto-translation="">Link 1</a></li>
<li><a href="#" data-no-auto-translation="">Link 2</a></li>
<li><a href="#" data-no-auto-translation="">Link 3</a></li>
<li><a href="#" data-no-auto-translation="">Link 4</a></li>
</ul>
</div>
<a href="#" data-no-auto-translation="">Link in body.</a>
</body>
</html>
Стиль – это <a data-no-auto-translation=""> к элементам, расположенным <li> в элементе, который, в свою очередь, <ul> в элементе которого class атрибут равен "red".
Հարևան սելեկտորներ
Հարևան սելեկտորը սահմանվում է " + "с и: վերաբերում է նշված սելեկտորի անմիջապես հարևան սելեկտորին միայն։
Например:
h1 + p {
color: orange;
}
<body>
<div>
<h1 data-no-auto-translation="">Header-1</h1>
<p>Пункт 1:</p>
<h1 data-no-auto-translation="">Header-2</h1>
<p>Параграф-2:</p>
<p>Этот не подойдет</p>
<div>
</body>
"~" это ч:Орана — это тип селектора. Стиль – это от указанного селектора ко всем соседним селекторам.
Например:
h1 ~ p {
color: orange;
}
<body>
<p>К этому не применимо</p>
<h1 data-no-auto-translation="">Hello h1</h1>
<p>Привет, мир-1</p>
<span>Это тоже не применимо</span>
<div>
<p>Это тоже не применимо</p>
</div>
<p>Привет, мир-1</p>
</body>
Դուստր սելեկտորներ
Դուստր սելեկտորները սահմանվում են " >: с символом » и рассматриваются селекторы, расположенные непосредственно в основном элементе.
Например:
div > h1 {
color: orange;
}
<body>
<div>
<h1 data-no-auto-translation="">Header-1</h1>
<p>
<h1 data-no-auto-translation="">Ոճն այս մեկին չի վերաբերի</h1>
</p>
</div>
</body>
Ատրիբուտների սելեկտորներ
Ատրիբուտների սելեկտորները ոճ են հաղորդում элементы, имеющие указанный атрибут или значение указанного атрибута.
Например:
<form>
<input type= "text" required >
<input type= "submit" >
</form>
Первый будет установлен стиль input[required] или: [required] .
Например:
input[required] {
color: red;
}
Второй установит стиль:
input[type="submit"] {
color: red;
}
Существуют атрибуты, значение которых больше единицы. В этом случае стиль будет использоваться, если значение атрибута начинается со значения, указанного в селекторе, или если оно присутствует в перечисленных значениях.
p[class ~= “par02”] - если где-нибудь class -ն ունենա “par02” արժեքը, то он будет соответствовать селектору.
p[class ~="par02"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation=""></style>
</head>
<body>
<p class="par01 par02 par03">Lorem ipsum dolor сидеть.</p>
<p class="par01 par03">Lorem ipsum dolor сидеть.</p>
<p class="par01 par02 par03">Lorem ipsum dolor сидеть.</p>
<p class="par01 par03">Lorem ipsum dolor сидеть.</p>
</body>
</html>
Допускается использование символа «-» для значения атрибутов class и id.
р[класс |: =”красный”] –значение атрибута должно начинаться с указанного в селекторе и продолжаться «-» с символом. Например: ” class = ‘red-цвет для этого' “.
p[class |="red"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation=""></style>
</head>
<body>
<p class="color-red-for-this">Lorem ipsum dolor сидеть.</p>
<p class="red-color-for-this">Lorem ipsum dolor сидеть.</p>
</body>
</html>
а[href ^ =”http://”] -азначение атрибута должно начинаться со значения, указанного в селекторе. Например: href= “http։//www.hayti.am” .
a[href ^="http://"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
</style>
</head>
<body>
<a href="https://hayti.am/ru/" data-no-auto-translation="">Lorem ipsum dolor sit.</a>
</body>
</html>
а[href $ =".pdf"] –значение атрибута должно заканчиваться указанным. Например: href= “изображение:.pdf” .
a[href $=".pdf"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
</style>
</head>
<body>
<a href="/ru/document.pdf/" data-no-auto-translation="">Lorem ipsum dolor sit.</a>
</body>
</html>
а[href * =»хайти»] –значение атрибута должно иметь указанное в нем значение. Например: href= “http://hayti.являюсь:” .
a[href *="hayti"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
</style>
</head>
<body>
<a href="https://hayti.am/ru/" data-no-auto-translation="">Lorem ipsum dolor sit.</a>
</body>
</html>
Если селекторы объединены без зонда, они относятся к одному и тому же элементу.
Также возможно объединить разные стили, при этом стиль будет определен от первичного к вторичному.
div {
width: 500px;
height: 200px;
margin-bottom: 20px;
}
.class1 {
color: white;
background-color: Black;
font-size: 30px;
font-weight: bold;
border: solid red 5px;
}
.class1.class2 {
color: black;
background-color: grey;
border-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style data-no-auto-translation="">
</style>
</head>
<body>
<div class="class1">Черное изображение имеет стиль .class1.</div>
<div class="class1 class2">
Серое изображение имеет стиль .class1 и .class2.
</div>
</body>
</html>
Russian 
Armenian