Разное

Учебник css для начинающих: Учебник CSS для начинающих

Содержание

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

Прочитав каскадную таблицу стилей, браузер форматирует HTML документ в соответствии с правилами, заданными в этой таблице стилей.

Три способа добавить CSS на веб-страницу

Существует три способа подключения CSS к документу HTML:

  • Внутриэлементный или строчный
  • Внутридокументный или встроенный
  • Внешний

Внутриэлементные стили

При внутриэлементном или строчном подключении стиля, он задается непосредственно внутри определения HTML тега при помощи атрибута style. Атрибут style принимает любое CSS свойство. Данный способ используется для подключения уникального стиля к одному отдельно взятому элементу.

Это выглядит следующим образом:

<!DOCTYPE html>
<html>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления. Разделение содержимого и его визуального представления — это то, ради чего, собственно, и создавался CSS. Поэтому внутриэлементный способ определения стилей следует стараться избегать и использовать только при крайней необходимости.

Внутридокументные стили

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

Такое определение выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<style>
  h2 {
    color: red;
  }
  p {
    color: blue;
  }
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Следующее определение сделает все параграфы страницы синими, а все ссылки заголовки первого уровня красными.

Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать. Хотя иногда подобные стили бывают полезными. Например, для ускорения загрузки страницы.

Внешние стили

Внешние стили используются для подключения одновременно ко многим страницам сайта. Благодаря этому, изменив всего один файл CSS можно изменить внешний вид всего сайта!

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

p {
   color: red;
}
a {
   color: blue;
}

Если сохранить такой файл под именем «web.css» (расширение должно быть «.css»), то его подключают к HTML документу при помощи тега <link>:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" href="web.css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст.
 
  Еще текст.</p>
</body>
</html>

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

Несколько таблиц стилей на одной странице

Если какое-то свойство определяется для одного и того же селектора (элемента) в нескольких разных таблицах стилей, то использоваться будет значение того свойства, которое определяется в последней по подключению таблице стилей.

Допустим, что во внешней таблице стилей определен такой стиль для элемента <h2>:

h2 {
  color: navy;
}

Теперь допустим, что во внутридокументной таблице стилей также определен стиль для элемента <h2>:

h2 {
  color: orange;   
}

Если внутридокументная таблица подключается после внешней таблицы стилей, то цвет элемента <h2> будет «orange»:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h2 {
  color: orange;
}
</style>
</head>

Однако, если внутридокументная таблица подключается до внешней таблицы стилей, то цвет элемента <h2> будет «navy»:

<head>
<style>
h2 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle. css">
</head>

Каскадный порядок

А какой стиль будет использоваться, если для HTML элемента задано больше одного стиля?

Все стили на веб-странице будут «каскадно» транслированы в новую «виртуальную» таблицу стилей в следующем порядке (цифра 1 имеет наивысший приоритет):

  1. Внутриэлементный стиль (внутри HTML элемента)
  2. Внешние и внутридокументные таблицы стилей (в секции head)
  3. Стили браузера по умолчанию

Таким образом, у внутриэлементных стилей самый высокий приоритет, и они будут переопределять внешние и внутридокументные стили, а также стили, заданные браузером по умолчанию.

Изменение свойств текста

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

Стиль этого текста изменен при помощи свойств форматирования текста. В заголовке используются свойства text-align, text-transform и color. У параграфа заданы отступы, выравнивание и расстояние между символами.

Цвет текста

Свойство color используется для определения цвета текста.

Цвет можно задать как

  • имя цвета — например, «red»,
  • HEX значение — например, «#ff0000»,
  • RGB значение — например, «rgb(255,0,0)»,
  • HSL значение — например, «hsl(0,100%,50%)»,

Цвет текста страницы по умолчанию определяется в селекторе body.

body {
  color: blue;
}
h2 {
  color: green;
}

Цвет текста и фона

В следующем примере мы определяем цвет текста при помощи свойства color и цвет фона при помощи свойства background-color:

body {
  background-color: lightgrey;
  color: blue;
}
h2 {
  background-color: black;
  color: white;
}
div {
  background-color: blue;
  color: white;
}

Важно! Высокий контраст очень важен для людей со слабым зрением.

Поэтому всегда следите за тем, чтобы между цветом текста и фона (или фонового изображения) был хороший контраст!

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Изменение регистра букв текста

Свойство text-transform позволяет изменить регистр букв текста:

  • text-transform: capitalize — переводит первые буквы всех слов в верхний регистр.
  • text-transform: uppercase — переводит все буквы в верхний регистр.
  • text-transform: lowercase — переводит все буквы в нижний регистр.
  • text-transform: none — попробуйте сами это значение.
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

Выравнивание и направление текста

К этому разделу относятся следующие свойства:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

Выравнивание текста

Свойство text-align выравнивает текст внутри элемента по горизонтали.

Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

В следующем примере текст выравнивается по центру, по левому краю и по правому краю. Выравнивание по левому краю устанавливается по умолчанию, если направление текста слева направо. Если направление текста справа налево, то по умолчанию устанавливается выравнивание по правому краю.

  h2 {
  text-align: center;
}
h3 {
  text-align: left;
}
h4 {
  text-align: right;
}

Когда свойству text-align установлено значение justify, то строки растягиваются таким образом, чтобы их ширина была одинаковой (как в газетах и журналах):

div {
  text-align: justify;
}

Свойство text-align-last определяет выравнивание последней строки текста.

p.a {
  text-align-last: right;
}
p.b {
  text-align-last: center;
}
p.c {
  text-align-last: justify;
}

Направление текста

Свойства direction и unicode-bidi используются для изменения направления текста элемента:

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Вертикальное выравнивание

Свойство vertical-align определяет вертикальное выравнивание элемента.

Определим вертикальное выравнивание изображения в тексте:

img.a {
  vertical-align: baseline;
}
img.b {
  vertical-align: text-top;
}
img.c {
  vertical-align: text-bottom;
}
img.d {
  vertical-align: sub;
}
img.e {
  vertical-align: super;
}

Декоративное оформление текста

К свойствам декоративного оформления текста относятся

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

Добавление декоративной линии

Для добавления декоративной линии к тексту используется свойство text-decoration-line. Оно может принимать следующие значения:

  • overline — помещает горизонтальную линию над текстом
  • line-through — помещает горизонтальную линию через текст, создавая эффект перечеркивания
  • underline     — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст — ссылка.

Совет: Вы можете комбинировать несколько значений, например, одновременно можно использовать значения overline и underline для определения нижнего и верхнего подчеркивания текста.

h2 {
  text-decoration-line: overline;
}
h3 {
  text-decoration-line: line-through;
}
h4 {
  text-decoration-line: underline;
}
p {
  text-decoration-line: overline underline;
}

Примечание: Не рекомендуется подчеркивать текст, если это не ссылка, так как это может сбить с толку пользователя сайта.

Определение цвета декоративной линии

Чтобы определить цвет декоративной линии используется свойство text-decoration-color

.

h2 {
  text-decoration-line: overline;
  text-decoration-color: red;
}
h3 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}
h4 {
  text-decoration-line: underline;
  text-decoration-color: green;
}
p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Определение стиля декоративной линии

Чтобы определить стиль декоративной линии используется свойство text-decoration-style.

h2 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
h3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}
h4 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
p. ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Определение толщины декоративной линии

Чтобы определить толщину декоративной линии используется свойство text-decoration-thickness.

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}
h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}
h4 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}
p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Короткая форма записи

Свойство text-decoration позволяет объединить следующие свойства:

  • text-decoration-line (обязательно)
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
h2 {
  text-decoration: underline;
}
h3 {
  text-decoration: underline red;
}
h4 {
  text-decoration: underline red double;
}
p {
  text-decoration: underline red double 5px;
}

Совет: Все ссылки в HTML по умолчанию имеют подчеркивание. Иногда можно увидеть ссылки, у которых нет подчеркивания. Чтобы убрать подчеркивание у ссылки, используют свойство text-decoration: none;.

a {
  text-decoration: none;
}

Разбивка текста

В этом разделе вы узнаете о следующих свойства, позволяющих форматировать текст:

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

Текстовый отступ

Свойство text-indent используется, чтобы определить отступ первой строки текстового абзаца.

Значением может быть число в любых единицах измерения:

p {
  text-indent: 50px;
}

Расстояние между символами

Свойство letter-spacing используется, чтобы определить расстояние между символами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

В следующем примере показано, как увеличить или уменьшить расстояние между символами:

h2 {
  letter-spacing: 5px;
}
h3 {
  letter-spacing: -2px;
}

Высота строки

Свойство line-height используется, чтобы определить расстояние между строками, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, «2» означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Расстояние между словами

Свойство word-spacing используется, чтобы определить расстояние между словами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

В следующем примере показано, как увеличить или уменьшить расстояние между словами:

p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Пробельные символы

Свойство white-space определяет, как обрабатываются пробельные символы внутри элемента. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.

Возможные значения:

  • normal

    Значение по умолчанию. Последовательность пробельных символов сворачивается в один пробел, а переносы строк устанавливаются автоматически.

  • nowrap

    Последовательность пробельных символов сворачивается в один пробел. Текст никогда не переносится на новую строку и выводится в одну линию. Перенос происходит только по тегу <br>.

  • pre

    Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Действует аналогично тегу <pre>.

  • pre-line

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

  • pre-wrap

    В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

  • inherit

    Значение наследуется от родительского элемента.

  • initial

    Устанавливает значение по умолчанию.

p {
  white-space: nowrap;
}

Тень у текста

Свойство text-shadow добавляет к тексту тень.

При самом простом использовании определяется только горизонтальная (2px) и вертикальная (2px) тень:

Text shadow effect!

h2 {
  text-shadow: 2px 2px;
}

Можно добавить цвет:

Text shadow effect!

h2 {
  text-shadow: 2px 2px red;
}

Также, можно добавить размытие:

Text shadow effect!

h2 {
  text-shadow: 2px 2px 5px red;
}

Еще примеры эффекта тени у текста

Text shadow effect!

h2 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Text shadow effect!

h2 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

CSS свойства форматирования текста

СвойствоОписание
colorОпределяет цвет текста
letter-spacingУстанавливает расстояние между символами в тексте
line-heightУстанавливает межстрочный интервал текста
text-alignУстанавливает горизонтальное выравнивание текста
text-align-lastУстанавливает выравнивание последней строки текста
text-decorationДобавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом в одной декларации
text-decoration-colorУстанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-lineУстанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом
text-decoration-styleУстанавливает стиль декоративной линии оформления текста
text-intendУстанавливает величину отступа первой строки текстового блока
text-transformУправляет преобразованием текста элемента в заглавные или прописные символы
verical-alignВыравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-spaceУстанавливает, как отображать пробелы между словами
word-spacingУстанавливает расстояние между словами
directionОпределяет направление текста
unicode-bidiВместе со свойством direction определяет, как должен располагаться текст используемого языка
text-shadowДобавляет тень к тексту

Учебное пособие по CSS — javatpoint

следующий →

Учебное пособие по CSS Учебное пособие по или CSS 3 содержит базовые и расширенные концепции технологии CSS. Наш учебник по CSS разработан для начинающих и профессионалов. Основные моменты CSS приведены ниже:

  • CSS означает каскадную таблицу стилей.
  • CSS используется для разработки тегов HTML.
  • CSS — широко используемый язык в Интернете.
  • HTML, CSS и JavaScript используются для веб-дизайна. Это помогает веб-дизайнерам применять стиль к тегам HTML.

Пример CSS с редактором CSS

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

<голова> <стиль> h2{ белый цвет; цвет фона: красный; отступ: 5px; } п{ цвет синий; } <тело>

Напишите свой первый пример CSS

Это абзац.

Протестируйте сейчас

Вывод:

Напишите свой первый пример CSS

Это абзац.

Индекс CSS

Учебное пособие по CSS

  • Введение в CSS
  • Что такое CSS
  • Синтаксис CSS
  • Селектор CSS
  • Как добавить CSS
  • Встроенный CSS
  • Внутренний CSS
  • Внешний CSS
  • Комментарии CSS

Свойства CSS

  • Фон CSS
  • Граница CSS
  • Дисплей CSS
  • CSS Поплавок
  • Шрифт CSS
  • Высота строки CSS
  • Поле CSS
  • Непрозрачность CSS
  • Переполнение CSS
  • Заполнение CSS
  • Позиция CSS
  • Вертикальное выравнивание CSS
  • Пробел CSS
  • Ширина CSS
  • Перенос слов CSS
  • Контур CSS
  • Видимость CSS
  • Счетчик CSS

Расширенный CSS

  • Анимация CSS
  • Градиент CSS
  • CSS-переход
  • Подсказки CSS
  • Анимация всплывающей подсказки CSS
  • Стрелка CSS
  • CSS FlexBox
  • CSS @медиазапрос
  • 2D-преобразования CSS
  • CSS 3D-преобразования
  • Звуковой носитель CSS
  • Пользовательский интерфейс CSS
  • Разбиение на страницы CSS

Дизайн CSS

  • Макет CSS
  • Стол CSS

Вопросы для интервью

  • Вопросы для интервью по CSS

Учебное пособие по CSS 3

В этом уроке мы изучим свойства CSS 3 для разработки блочной модели, применения непрозрачности, радиуса и т. д.

Все свойства CSS

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

Условие

Прежде чем изучать CSS, вы должны иметь базовые знания HTML.

Аудитория

Наш учебник по CSS разработан, чтобы помочь как новичкам, так и профессионалам.

Проблема

Если вы обнаружите какую-либо проблему или ошибку в нашем руководстве по CSS, вы можете сообщить нам об этом. Мы заверяем, что вы не найдете никаких проблем в учебнике по CSS.

Следующая темаЧто такое CSS

следующий →

Для видео Присоединяйтесь к нашему каналу Youtube: Присоединяйтесь сейчас

Обратная связь

  • Отправьте свой отзыв на [email protected]

Помогите другим, пожалуйста, поделитесь

Изучите последние учебные пособия

Подготовка

Современные технологии

Б.

Тех / МСА

Learn CSS — Best CSS Tutorials (2023)

  1. Главная
  2. / Учебники по программированию
  3. / CSS

Генератор резюме разработчика

Высококачественный профиль резюме за 5 минут — автоматически генерируется из вашего 9 gitconnected0006