Основные css теги: CSS Справочник и примеры элементы

CSS Справочник и примеры элементы

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Главная Дальше ❯

A

B

backface-visibility	Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю
background	Сокращенное свойство для задания всех свойств фона в одном объявлении
background-attachment	Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode	Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip	Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color	Задает цвет фона элемента
background-image	Задание одного или нескольких фоновых изображений для элемента
background-origin	Задает исходную позицию фонового изображения
background-position	Определяет положение фонового изображения
background-repeat	Устанавливает, если/как фоновое изображение будет повторяться
background-size	Определяет размер фоновых изображений
border	Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom	Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-color	Задает цвет нижней границы
border-bottom-left-radius	Определяет радиус границы нижнего левого угла
border-bottom-right-radius	Определяет радиус границы нижнего правого угла
border-bottom-style	Задает стиль нижней границы
border-bottom-width	Задает ширину нижней границы
border-collapse	Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-color	Задает цвет четырех границ
border-image	Сокращенное свойство для установки всех свойств Border-Image-*
border-image-outset	Определяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeat	Указывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-slice	Определяет способ среза изображения границы
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width	Задает ширину изображения границы
border-left	Сокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-color	Задает цвет левой границы
border-left-style	Задает стиль левой границы
border-left-width	Задает ширину левой границы
border-radius	Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right	Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color	Задает цвет правой границы
border-right-style	Задает стиль правой границы
border-right-width	Задает ширину правой границы
border-spacing	Устанавливает расстояние между границами соседних ячеек
border-style	Задает стиль четырех границ
border-top	Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-color	Задает цвет верхней границы
border-top-left-radius	Определяет радиус границы верхнего левого угла
border-top-right-radius	Определяет радиус границы верхнего правого угла
border-top-style	Задает стиль верхней границы
border-top-width	Задает ширину верхней границы
border-width	Задает ширину четырех границ
bottom	Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break	Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadow	Прикрепление одной или нескольких теней к элементу
box-sizing	Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after	Задает поведение разрыва страницы, столбца или региона после созданного поля
break-before	Задает поведение разрыва страницы, столбца или региона перед созданным полем
break-inside	Определяет поведение разрыва страницы, столбца или региона в созданном поле

C

D

E

F

G

H

I

J

K

L

M

O

P

Q

R

T

U

V

W

Z

❮ Главная Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Основы CSS | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то свое визуальное оформление: параграфы имеют отступы, ссылки выделяются подчеркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

В этом уроке мы разберем ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает, вы сможете прочитать в следующем уроке.

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название свойства: значение;.

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:

<p>
  Хекслет — практические курсы по программированию. Мы помогаем новичкам стать
  профессиональными программистами, а опытным разработчикам получать новые
  знания и расти профессионально.
</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:

1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
2. Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберем некоторые свойства, которые помогут вам оформлять текст:

• font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.
• color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
• text-align. Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

• использование специального файла
• использование тега <style> внутри HTML-разметки
• записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберемся с каждым способом отдельно.

Использование отдельного CSS-файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body></body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег <link>. У данного тега необходимо указать атрибут href, значением которого будет путь до файла main. css. Тег <link> указывается в секции <head>.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body></body>
</html>

Дополнительно разберем эту запись: ../css/main.css. Ее можно условно разбить на три составляющие:

1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html/, поэтому мы «выходим» из нее в директорию site/.
2. css/ — переход в директорию css/.
3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main. css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге <style>. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег <style> обычно указывается внутри секции <head>. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <style>
      p {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
  </body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили еще до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.

Возьмем прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body>
    <p>
      Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.
    </p>
  </body>
</html>

Классы и идентификаторы

При создании разметки разработчикам удобно отделять одинаковые теги друг от друга с помощью имён. Например, на странице есть два заголовка:

<h3>Как стать программистом</h3>
<!-- Тут много текста -->
<h3>Какими навыками обладает программист</h3>
<!-- Тут много текста -->

Оба заголовка второго уровня, но в дизайне они могут иметь разные CSS стили. Вы уже познакомились с селектором по тегу и он не поможет дать каждому из заголовков уникальные стили.

Дать имена тегам позволяют атрибуты class и id. Эти атрибуты принимают произвольные имена, с помощью которых можно обратиться к элементу в CSS.

Различие класса и идентификатора в количестве использований:

• class — значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы
• id — значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице

Если значений у атрибута несколько, то они указываются через пробел, например:

<h3>Как стать программистом</h3>
<!-- Тут много текста -->
<h3>Какими навыками обладает программист</h3>
<!-- Тут много текста -->
<div>Второго элемента с идентификатором help быть не должно</div>
<div>Второго элемента с идентификатором another-help быть не должно</div>

Чтобы обратиться к элементам по их классу или идентификатору используются специальные селекторы, которые мы сейчас и рассмотрим.

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.
3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.

Рассмотрим все три селектора на реальном примере:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body>
    <main>
      <h2>Заголовок с идентификатором</h2>
      <p>Просто параграф без класса или идентификатора</p>
    </main>
  </body>
</html>

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}
.content {
  background-color: black;
}
p {
  color: white;
}

После применения этих стилей получится следующая картина:

• Черный фон секции <main>. Для этого использовали класс content и селектор .content;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
  </article>
</section>
<section>
  <h3>Интересные истории</h3>
  <article>
    <h3>История 1</h3>
    <p>Текст истории</p>
  </article>
  <article>
    <h3>История 2</h3>
    <p>Текст истории</p>
  </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h3 {
  font-size: 32px;
}

Этот селектор комбинирует два уже известных типа:

1. Селектор по классу .news
2. Селекторы по тегу article и h3

Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки <h3> из <article>, который лежит внутри элемента с классом news. В примере это элемент <section>.

Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов

Важно понимать, что такая запись . news article h3 выберет все заголовки второго уровня во всех <article>, которые лежат внутри блока с классом news. Давайте немного видоизменим верстку, чтобы это проверить.

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
    <section>
      <h3>Похожие новости</h3>
      <article>
        <h3>Похожая новость 1</h3>
        <p>Текст новости</p>
      </article>
    </section>
  </article>
</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри <article>, которые находятся в блоке с классом . news.

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те <article>, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих <article>. Это делается следующим образом:

.news > article > h3 {
  font-size: 24px;
}

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный селектор для заголовков.

Самостоятельная работа

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Теги W3.CSS (этикетки и знаки)

❮ Назад Следующая ❯

Метки: Сделанный Новый! Подробнее позже!

Метки как знаки: Фалкон-Ридж-Паркуэй ОСТАНАВЛИВАТЬСЯ! ОСТОРОЖНО!

Классы тегов W3.CSS

W3.CSS предоставляет один класс для тегов, этикеток и знаков:

Бирки, этикетки и знаки

В мире W3.CSS нет реальной разницы между тегом, меткой или знаком.

Прямоугольные теги

Класс w3-tag создает прямоугольный тег (метку или знак). Цвет по умолчанию черный:

Статус: Готово

Пример

Статус: Готово

Попробуйте сами »

Цветные метки

Используйте цвет 9 w3- класс для изменения цвета тега:  

Новинка!

Еще позже!

Пример

Новинка!

Подробнее позже!

Попробуйте сами »

Размеры тегов

По умолчанию тег наследует размер своего контейнера.

Размер w3- Классы (w3-крошечный, w3-маленький, w3-большой, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-большой) можно использовать для изменения размера тега:

6 6 6

66 66 66

66 66

Вы можете добавить дополнительный отступ к большим тегам:

Пример

66
66

Попробуйте сами »

Буквенные теги

A U г U С T

Пример

A
U
G
U
S
T

Попробуйте сами »

С А л Е

Пример

S
A
L
E

Попробуйте сами »

Знаки

Знаки — это не что иное, как большие теги.

Лондонский зоопарк

Пример

Попробуйте сами »

Дорожные знаки

Falcon Ridge Parkway

Пример

Попробуйте сами »

Большие знаки

W3- Размер Классы могут быть использованы для отображения больших знаков:

в случае
аварийных :
БЕГИТЕ К черту!

Пример

В СЛУЧАЕ

ЧРЕЗВЫЧАЙНАЯ СИТУАЦИЯ:

БЕГИТЕ КАК ПРЯМО!

Попробуйте сами »

49,99

Пример

49,99

3 900 »

Закругленные знаки

Классы w3-round- size можно использовать для добавления закругленных углов к знаку:

НЕ ДЫШАТЬ

ПОД ВОДОЙ

Пример

НЕ

ДЫШАТЬ

ПОД ВОДОЙ

Попробуйте сами »

Вращение тегов для поворота знака CSS

9000 :

ОСТАНАВЛИВАТЬСЯ

Пример

STOP

Попробуйте сами »

Примечание: transform:rotate() не работает в IE 9и ранее.

---

Вращающиеся метки

Класс w3-spin можно использовать для вращения знака на 360 градусов:

ОСТАНАВЛИВАТЬСЯ

Пример

STOP

Попробуйте сами »

❮ Предыдущая Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

5 Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS. Введение в CSS — GeeksforGeeks CSS позволяет применять стили к веб-страницам. Что еще более важно, CSS позволяет вам делать это независимо от HTML, из которого состоит каждая веб-страница. Он описывает, как должна выглядеть веб-страница: предписывает цвета, шрифты, интервалы и многое другое. Короче говоря, вы можете сделать свой сайт таким, каким хотите. CSS позволяет разработчикам и дизайнерам определять его поведение, включая расположение элементов в браузере.

В то время как html использует теги, css использует наборы правил. CSS прост в изучении и понимании, но он обеспечивает мощный контроль над представлением HTML-документа.

Почему CSS?

• CSS экономит время: Вы можете написать CSS один раз и повторно использовать один и тот же лист на нескольких HTML-страницах.
• Простое обслуживание: Чтобы внести глобальные изменения, просто измените стиль, и все элементы на всех веб-страницах будут обновлены автоматически.
• Поисковые системы: CSS считается чистой техникой кодирования, что означает, что поисковым системам не придется прилагать усилий, чтобы «прочитать» его содержимое.
• Превосходящие стили по сравнению с HTML: CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому вы можете придать своей HTML-странице гораздо лучший вид по сравнению с HTML-атрибутами.
• Автономный просмотр: CSS может хранить веб-приложения локально с помощью автономного кэша. Используя это, мы можем просматривать офлайн-сайты.

Версии CSS Годы выпуска:

Синтаксис CSS:
CSS содержит правила стилей, которые интерпретируются браузером и затем применяются к соответствующим элементам документа.
Набор правил стиля состоит из селектора и блока объявлений.

  Селектор -- h2 
  Объявление -- {color:blue;font size:12px;}  

Пример: В следующем примере все элементы p будут выровнены по центру, а цвет текста будет синим:

CSS

p {    цвет : синий ;    text-align : center ;    }

Селекторы CSS.

1. UNIVERSAL SELECTORS: Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type

CSS

* {     цвет : #000000 ;    }

Вывод: Это правило отображает содержимое каждого элемента в нашем документе черным цветом.

2.СЕЛЕКТОРЫ ЭЛЕМЕНТОВ: Селектор элементов выбирает элементы на основе имени элемента. Вы можете выбрать все элементы p на странице следующим образом (в этом случае все элементы p будут выровнены по центру с красным цветом текста).

CSS

p {    text-align : 9;    цвет : красный ; }

Выход:

3. Дисцендент SELECTORS: Предположим, что вы хотите применять правление в стиле к элементу. Как показано в следующем примере, правило стиля будет применяться к элементу em, только если он находится внутри тега ul.

CSS

ул ем {        цвет : #000000 ; }

Выход:

4.ID SELECTORS:

• . ИД.
• Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор идентификатора используется для выбора одного уникального элемента!
• Чтобы выбрать элемент с определенным идентификатором, напишите символ решетки (#), за которым следует идентификатор элемента.
• The style rule below will be applied to the HTML element with id=”para1″:

CSS

#gfg{      color : green ;      text-align : center ; }

Выход:

5.class Selectors:

• . Селекторы класса Selector Selects Selects Elements со специфическими атрибутами.
• Чтобы выбрать элементы определенного класса, напишите символ точки (.), а затем имя класса.
• В приведенном ниже примере все HTML-элементы с class="center" будут зелеными и выровнены по центру:

К данному элементу можно применить более одного селектора класса. Рассмотрим следующий пример:

html

.gfg{ цвет: зеленый; выравнивание текста: по центру; }

Output:

6.GROUPING SELECTORS If you have elements with the same style definitions, like this:

CSS

h 1 {     выравнивание по тексту : по центру ;     цвет : синий ;     } h 2 {     text-align : center ;     цвет : синий ;     } p {    text-align : center 5 9;     цвет : синий ;     }

Лучше сгруппировать селекторы, чтобы минимизировать код. Чтобы сгруппировать селекторы, разделите каждый селектор запятой. В приведенном ниже примере мы сгруппировали селекторы из приведенного выше кода:

CSS

h 1 , h 2 , p {     text-align : center ;     цвет : красный ;     }

Вывод:

CSS EFESCTS0003

До CSS: В этом примере мы не добавляем CSS.

html

< html > < head >      < title > Пример title > head > < body >      < main >         < h2 >HTML Page h2 >         < p >Это простая веб-страница. p > 5 0385 > body > html >

Output:

After CSS: In this example, we добавьте немного CSS.

HTML

< 999999999999999999999999999999999999999999999999999999999999999999999999999994999999499949999999999999999989н.0385 >      < title >Example title >      < style >          main { ширина: 600 пикселей;          высота: 200 пикселей;          заполнение: 10 пикселей;          фон: бежевый;          }          h2 { 3rab 8;          border-bottom: 1 пиксель с точками темно-зеленого цвета; } P { FANT-E-E-E-E-E-E-E-E-Else: SANS-Serif;          цвет: оранжевый;          }      style > head > < body >      < главная >          < h2 >Моя первая страница h2 >          < p >This is a basic web page. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт