Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Основні властивості тексту

Основні властивості тексту

Frontend SELF UA
Рівень 14 , Лекція 0
Відкрита

1.1 Колір

CSS (Cascading Style Sheets) надає багато властивостей для стилізації тексту. Серед них ключовими є color, font-size і font-weight. Ці властивості дозволяють керувати кольором тексту, його розміром і товщиною шрифту відповідно. Розглянемо кожну з цих властивостей детальніше.

Властивість color задає колір тексту. Воно може бути встановлене за допомогою різних колірних форматів, включаючи назви кольорів, шістнадцяткові значення, RGB, RGBA, HSL і HSLA.

Приклади використання

1. Назви кольорів:

CSS 
    
      p {
        color: red;
      }

2. Шістнадцяткові значення:

Telegram
CSS 
    
      p {
        color: #ff0000;
      }

3. RGB і RGBA:

CSS 
    
      p {
        color: rgb(255, 0, 0);
        color: rgba(255, 0, 0, 0.5); /* Прозорий червоний */
      }

4. HSL і HSLA:

CSS 
    
      p {
        color: hsl(0, 100%, 50%);
        color: hsla(0, 100%, 50%, 0.5); /* Прозорий червоний */
      }

Приклад використання в HTML:

CSS 
    
      p {
        color: #3498db; /* Синій колір */
      }
HTML 
    
      <body>
        <p>Цей текст буде синім.</p>
      </body>

1.2 Властивість font-size

Властивість font-size задає розмір тексту. Значення може бути вказано в різних одиницях, таких як пікселі (px), у відносних (em, rem, %), "похідних" від пікселя (mm, cm, pt, pc), vw і vh (viewport width і viewport height), і інших.

Приклади використання

1. Пікселі:

CSS 
    
      p {
        font-size: 16px;
      }

2. Відносні:

%, em, rem

CSS 
    
      p {
        font-size: 150%; /* 150% базового розміру шрифту */
        font-size: 1.5em; /* 1.5 рази більше базового розміру шрифту */
        font-size: 1.5rem; /* розмір відносно розміру шрифту елементу <html> */
      }

3. "В'юпортні" одиниці:

CSS 
    
      p {
        font-size: 2vw; /* 2% від ширини "в'юпорту" */
        font-size: 2vh; /* 2% від висоти "в'юпорту" */
      }

Приклад використання в HTML:

CSS 
    
      p {
        font-size: 18px; /* Розмір тексту 18 пікселів */
      }
HTML 
    
      <body>
        <p>Цей текст буде розміром 18 пікселів.</p>
      </body>

1.3 Властивість font-weight

Властивість font-weight задає товщину тексту. Значення можуть бути вказані як ключові слова (normal, bold, bolder, lighter) або числові значення від 100 до 900, де 400 відповідає normal, а 700 відповідає bold.

Приклади використання

1. Ключові слова:

CSS 
    
      p {
        font-weight: bold;
      }

2. Числові значення:

CSS 
    
      p {
        font-weight: 300; /* Легкий текст */
        font-weight: 700; /* Еквівалент bold */
      }

Приклад використання в HTML:

CSS 
    
      p {
        font-weight: 700; /* Жирний текст */
      }
HTML 
    
      <body>
        <p>Цей текст буде жирним.</p>
      </body>
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ