Стилизиране на елементите в страницата чрез CSS3
Основни CSS свойства за оформление на текст, шрифт, цвят, фон и рамка.
Created for
Created by
2015 - 2023,
CSS свойства за оформление на текст
Overview
w3schools: CSS TextМожем да променяме цвета на шрифта
Да зададем хоризонтално подравняване на текста
Да подравним текста вертикално.
Да подчертаваме текста
Да преобразуваме малки/големи букви
Да отместваме в ляво първия ред на параграф, с каквато пожелаем стойност. Така, както се прави в печатната литература, с цел да се улесни читателя визуално да разграничава началото на параграф.
Да променяме разстоянието между буквите.
Да променяме разстоянието между думите.
Да променяме разстоянието между редовете. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text Color
Свойство: color
Text Decoration
Свойство: text-decoration
Text Transformation
Свойство: text-transform
Text Indentation
Свойство: text-indent
Letter Spacing
Свойство: letter-spacing
Word Spacing
Свойство: word-spacing
Text Align
Свойство: text-align
Vertical Align
Свойство: vertical-align
w3schools: CSS vertical-align Property
Забележка: често се употребява в комбинация с line-height върху поредови елементи. За да разберете добре как работи, е необходимо задълбочено познаване на поредовия форматиращ контекст.
Line Height
Свойство: line-height
vertical-align: пример
See the Pen vertical-align (quick demo) by Iva Popova (@webdesigncourse) on CodePen.
vertical-align:middle - пример
See the Pen vertical-align: middle by Iva Popova (@webdesigncourse) on CodePen.
Повече информация:
CSS свойства за оформление на шрифт
CSS свойства за оформление на шрифт
Въведение
- Повече за шрифтовете: w3schools: CSS Fonts
Можем да задаваме тип на шрифта
Можем да управляваме размера на шрифта
Можем да задаваме стила на шрифта
Можем да управляваме дебелината на шрифта.
Основни свойства
| CSS Property | Описание |
|---|---|
| font-family | Определя шрифта, който ще се използва за текста. Може да зададете списък от шрифтове като резервни опции. |
| font-size | Определя размера на шрифта. Може да се зададе в пиксели (px), ем (em), проценти (%) и други мерни единици. |
| font-style | Определя стила на шрифта. Може да бъде: normal, italic, или oblique. |
| font-weight | Определя дебелината на шрифта. Може да бъде: normal, bold, или числови стойности като 100-900. |
| font-variant | Определя вида на шрифта, като например малки главни букви (small-caps). |
| font-stretch | Определя разтягането на шрифта. Може да бъде: normal, ultra-condensed, extra-condensed, и т.н. |
Примери
| CSS Property | CSS Code | Displayed Text |
|---|---|---|
| font-family | font-family: "Arial", sans-serif; |
This text uses the "Arial" font-family. |
| font-size | font-size: 24px; |
This text has a font size of 24px. |
| font-style | font-style: italic; |
This text is italicized. |
| font-weight | font-weight: bold; |
This text is bold. |
| font-variant | font-variant: small-caps; |
This text uses small-caps variant. |
| font-stretch | font-stretch: condensed; |
This text is stretched with a condensed font. |
Font - съкратен запис за всички Font свойства
Свойство: font
Включване на custom шрифтове
Включване на custom шрифтове
Включване на custom шрифтове
- Когато искаме да използваме нестандартен шрифт то освен да го посочим в
font-family, трябва да включим и съответния файл с шрифта към страницата, за да бъде достъпен за потребителите. - Това се осъществява, чрез CSS правилото @font-face
Включване на custom шрифтове - пример
@font-face {
/* задаваме име на шрифта":*/
font-family: ChasingEmbers;
/* указваме пътя до файловете със шрифта */
src: url("fonts/Chasing Embers Demo Version.otf"),
url("fonts/Chasing Embers Demo Version.ttf");
}
.customFont{
/* използваме "нашия шрифт", с името, което сме указали по-горе: */
font-family: "ChasingEmbers", cursive;
font-size: 5em;
font-weight: normal;
}
Heading with custom font
Heading with custom font
Самите файлове със шрифта, може да свалите от тук
Използване на Google Fonts
Използване на Google Fonts
Въведение
- Google Fonts е безплатна онлайн библиотека, която предоставя колекция от над 1,400 шрифта, които могат да се използват в уебсайтове.
- Предимства:
- Безплатни за ползване - без лицензионни ограничения.
- Лесна интеграция - шрифтовете се добавят с линк или CSS
@import. - Многообразие от стилове - налични са различни семейства, дебелини и варианти.
- Облачна услуга (cloud) - хоствани на сървърите на Google, осигурявайки глобална достъпност и оптимизирано зареждане.
- Автоматични актуализации - винаги се ползва последната версия на шрифта.
- Спестяване на ресурси - не изисква хостване на шрифтовете на собствения сървър.
- Кеширане - шрифтовете се съхраняват локално, което ускорява зареждането при повторно посещение или на друг сайт, използващ същия шрифт.
Включване на шрифтове-икони
Включване на шрифтове-икони
Включване на шрифтове-икони
- Предпочитан вариант за икони е да използвате някоя от библиотеките, които предлагат векторни икони като шрифтове, вместо 'jpg', 'png' и пр. растерни изображения.
- Може да търсите по име в някои от най-популярните библиотеки: glyphsearch
Font Awesome Icons
Font Awesome Icons- howto
- Търсене на икони: fontawesome.com/search
- Вместо да сваляме Font Awesome на нашия сървър, ще използваме CDN (Content Delivery Network), тъй като те са cloud базирани. Може да използвате:
- Font Awesome CDN @cdnjs.com
- Или да се регистрирате с мейл към Font Awesome CDN за да получите персонализирана библиотека.
- Без значение кой източник ще използвате, бъдете сигурни, че сте избрали min версията на съответния файл, както и че версията е >= на версията на иконите, които ще използвате.
Font Awesome Icons- howto
<head>
</head>
<body>
</body>
CSS свойства за фон на елемент
CSS свойства за фон на елемент
Основни свойства
| Свойство | Описание | Пример |
|---|---|---|
background-color |
Определя фоновия цвят на елемента. | background-color: red; |
background-image |
Задава фоновото изображение за елемента. | background-image: url('./images/red_star.png'); |
background-repeat |
Определя дали фоновото изображение ще се повтори (повторение по хоризонтала, вертикала или не). Възможни стойности: repeat, no-repeat, repeat-x, repeat-y |
background-repeat: no-repeat; |
background-position |
Определя началната позиция на фоновото изображение. | background-position: center; |
background-size |
Определя размера на фоновото изображение. Възможни стойности: cover, contain, или конкретни размери (напр. 100px 200px). |
background-size: cover; |
background-attachment |
Определя дали фоновото изображение ще се движи при скролиране на страницата. Възможни стойности: scroll, fixed |
background-attachment: fixed; |
background |
Кратка форма за задаване на всички гореспоменати свойства. | background: #fff url('./images/red_star.png') no-repeat center/cover fixed; |
Reference: w3schools: CSS Backgrounds
Паралакс ефект с background-fixed
- Паралакс ефектът е визуален ефект, при който различни елементи на страницата изглеждат, че се движат с различна скорост при скролиране. Например, фоновото изображение може да изглежда неподвижно или да се движи по-бавно от съдържанието на страницата. Това създава усещане за дълбочина и динамика на сайта.
- Често се използва за подобряване на потребителското изживяване и визуалната привлекателност на уеб страниците.
- Пример: simpleParalaxEffect.html
Задаване на фон за цялата страница.
- Елемента, на който искаме да поставим изображението като фон е body.
- Височината на елемента body се определя динамично, в зависимост от съдържанието!
- За да сме сигурни, че елемента body ше бъде висок поне колкото viewport-a, трябва да зададем:
margin:0;
padding: 0;
min-height: 100vh;
Задаване на фон за цялата страница - примери
- Пример за снимка, поместена във viewport-a, като пропорциите се запазват.
Изображението не се изрязва.
Не гарантира запълването на целия фон. - bg_image_contain_viewport
- Пример за снимка, заемаща изцяло viewport-a. Пропорциите се запазват.
Изображението може да бъде изрязано. - bg_image_cover_viewport
- Пример за снимка, заемаща изцяло viewport-a. Пропорциите не се запазват!
- bg_image_to_viewport
CSS свойства за рамка на елемент
CSS свойства за рамка на елемент
| Свойство | Описание | Пример |
|---|---|---|
border |
Определя стил, дебелина и цвят на рамката на елемента. Кратка форма за задаване на всички свойства за рамка. | border: 2px solid black; |
border-width |
Определя дебелината на рамката. | border-width: 5px; |
border-style |
Определя стила на рамката (solid, dashed, dotted, double...) |
border-style: dashed; |
border-color |
Определя цвета на рамката. | border-color: red; |
border-top |
Задава рамката за горната част на елемента (дебелина, стил и цвят). | border-top: 2px solid blue; |
border-right |
Задава рамката за дясната част на елемента. | border-right: 5px dashed green; |
border-bottom |
Задава рамката за долната част на елемента. | border-bottom: 3px dotted orange; |
border-left |
Задава рамката за лявата част на елемента. | border-left: 4px solid purple; |
border-radius |
Омекотява ъглите на рамката, като им дава заоблена форма. | border-radius: 10px; |
Reference: w3schools: CSS Borders
Задачи за упражнение
Задачи за упражнение
The Crow
- Да се състави страница, наподобяваща максимално точно показаната на фиг.1. Кодът трябва да е валиден HTML5!
- Забележете, че всеки текст, който е заграден в кавички е оформен различно от останалият: шрифтът е наклонен, а разстоянието между буквите е 2px. Отделно, всяка фраза "никой друг!" е подчертана с оранжево (преливащо към кафяво - може да увеличите изгледа за да видите по-ясно).Също така, обърнете внимание на типа шрифт (serif, sans-serif) и задайте съответния.
- Текстът на стихотворението може да копирате и от тук: https://chitanka.info/text/2384-garvanyt (използвани са само първите 4 куплета.)
- Използваното за фон изображение, може да изтеглите от тук: https://pixabay.com/en/raven-crow-night-creepy-darkness-1002849. То заема цялото съдържание на страницата, като пропорциите НЕ СЕ запазват.
These slides are based on
customised version of
framework