Стилизиране на елементите в страницата чрез CSS3
Основни CSS свойства за оформление на текст, шрифт, цвят, фон и рамка.
Created for
Created by
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 свойства за оформление на шрифт
Можем да задаваме тип на шрифта
Можем да управляваме размера на шрифта
Можем да задаваме стила на шрифта
Можем да управляваме дебелината на шрифта.
Font Family
Свойство: font-family
Font Size
Свойство: font-size
Font Style
Свойство: font-style
Font Weight
Свойство: font-weight
Font Variant
Свойство: font-variant
Font - съкратен запис за всички Font свойства
Свойство: font
Включване на 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
- Отворете fonts.google.com
- От менюто "Categories" (в дясно), маркирайте категориите шрифтове, които ви интересуват.
- Ако желаете само шрифтове, които да поддържат кирилица, то задайте език "Cyrillic" чрез менюто "Languages"
- Може да прегледате отделните шрифтове като зададете ваш текст, от настройките за съответния шрифт:
- От падащото меню за дадения шриф, изберете "custom" (ето как)
- След като въведете текста, може да го приложите върху всички шрифтове, като изберете "APPLY TO AL FONTS" (ето как)
Включване на Google Fonts
- За да използвате даден шрифт във вашата страница:
- Натиснете бутона '+' към избрания от вас шрифт.
- Отворете появилият се в дъното на страницата блок с текст: "1 Family Selected" (ето как)
- Следвайте посочените там инструкции :)
Включване на шрифтове-икони
- Предпочитан вариант за икони е да използвате някоя от библиотеките, които предлагат векторни икони като шрифтове, вместо 'jpg', 'png' и пр. растерни изображения.
- Може да търсите по име в някои от най-популярните библиотеки: glyphsearch
Font Awesome Icons
Font Awesome Icons- howto
- Вместо да сваляме Font Awesome на нашия сървър, ще използваме CDN (Content Delivery Network), тъй като те са cloud базирани. Може да използвате:
- Font Awesome CDN
- BootstrapCDN
- Или да се регистрирате с мейл към Font Awesome CDN за да получите персонализирана библиотека.
- Без значение кой източник ще използвате, бъдете сигурни, че сте избрали min версията на съответния файл.
Font Awesome Icons- howto
<head>
</head>
<body>
</body>
CSS свойства за фон на елемент
Background Color
Свойство: background-color
Background Image
Свойство: background-image
Background Image - Size
Свойство: background-size
Background Image - Repeat
Свойство: background-repeat
Background Image - Position
Свойство: background-position
Background Image - Attachment
Свойство: background-attachment
Background - съкратен запис за всички Backgrounds свойства
Свойство: background
Задаване на фон за цялата страница.
- Елемента, на който искаме да поставим изображението като фон е body.
- Височината на елемента body се определя динамично, в зависимост от съдържанието!
- За да сме сигурни, че елемента body ше бъде висок поне колкото viewport-a, трябва да зададем:
- Бихме могли да използваме и vh еденици, вместо процент.
html, body{
min-height: 100%;
}
Задаване на фон за цялата страница - примери
- Пример за снимка, поместена във viewport-a, като пропорциите се запазват.
Изображението не се изрязва.
Не гарантира запълването на целия фон. - bg_image_contain_viewport
- Пример за снимка, заемаща изцяло viewport-a. Пропорциите се запазват.
Изображението може да бъде изрязано. - bg_image_cover_viewport
- Пример за снимка, заемаща изцяло viewport-a. Пропорциите не се запазват!
- bg_image_to_viewport
CSS свойства за рамка на елемент
Border Style
Свойство: border-style
Border Width
Свойство: border-width
Border Color
Свойство: border-color
Border - съкратен запис за всички Border свойства
Свойство: border
Задачи за упражнение
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. То заема цялото съдържание на страницата, като пропорциите НЕ СЕ запазват.
Едно от възможните решения може да видите тук: TheCrow-Solution.html
These slides are based on
customised version of
framework