Какво е CSS и неговите възможности
Стиловете в уеб разработването е прието да се наричат "Каскадни таблици на стиловете" (Cascading Style Sheets), съкратено CSS. Един мощен инструмент, специално проектиран за удобство и лекота в оформянето на дизайна на уеб страниците. Предлага много възможности за постигане на уникален и цветен дизайн на всеки Internet ресурс.Днес има четири работни версии на спецификацията: CSS1, CSS2, CSS2.1, CSS3 (в момента се допълва и усъвършенства) и CSS4, която се намира в процес на разработка. Най-популярна сред разработчиците е най-новата версия CSS3, защото има повече възможности по отношение не само на обозначенията, проектирането и разполагането на елементи на страницата, но също така допуска възможности и за програмиране. Именно тази версия позволява да се създават анимации и необичайни визуални ефекти без да се прибягва до помощта на JavaScript, JQuery и други.
Структура на Каскадните таблици на стилове - CSS
➤селектор, който е обозначение на елемента, към който може да се приложи едно от качествата, с определена стойност.
Най-общо изглежда така:
селектор {
свойство: значение;
свойство: значение;
}
свойство: значение;
свойство: значение;
}
Селекторите могат да се повтарят в кода, а също така е възможно да се групират, като се разделят чрез запетая (,). За някои свойства се допуска групиране, като се разделят с интервали или запетаи и е възможно да се добавят коментари към кода, които се разполагат между символите / * * /.
селектор,
селектор,
селектор {
свойство: значение значение значение; /* ваш коментар */
свойство: значение, значение, значение;
}
селектор,
селектор {
свойство: значение значение значение; /* ваш коментар */
свойство: значение, значение, значение;
}
Как да се добави CSS в HTML документ
Използвайки свойства със съответни стойности може да се променя почти всеки параметър на даден елемент от дизайн на блог. Има няколко начина за добавяне на CSS към елементи на страниците - общ, локален и отделен.
➤Общ, или както се нарича "глобален" начин за добавяне на CSS означава, че свойствата на стил се написват в началото на HTML-документа и са валидни за целия документ (всички страници и указаните в тях блокове). Кодът се затваря ( ограничава) в специфичните за него тагове STYLE и се разполагат пред затварящия маркер HEAD.
<!DOCTYPE html>
<html>
<head>
...
<style>
body {
color: red;
}
</style>
…….
<html>
<head>
...
<style>
body {
color: red;
}
</style>
…….
</head>
<body>
...
</body>
</html>
<body>
...
</body>
</html>
➤Частен способ или "локален", дава възможност за добавяне на необходимите свойства директно към избрания елемент.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div style="background: green; color: white;"></div>
</body>
</html>
<html>
<head>
...
</head>
<body>
<div style="background: green; color: white;"></div>
</body>
</html>
➤Можете също да свържете таблицата със стилове към блога или сайта отделно , тоест, да вградите целия код в отделен файл, а в кода на страницата да посочите линк към него. Начинът да направите това е като използвате тага LINK и приложите правилото @import.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="style.css"> <!—използване на тага link -->
...
<style>
@import url(style.css); /* използване правилото @import*/
</style>
</head>
<body>
<div>...</div>
</body>
</html>
<html>
<head>
...
<link rel="stylesheet" href="style.css"> <!—използване на тага link -->
...
<style>
@import url(style.css); /* използване правилото @import*/
</style>
</head>
<body>
<div>...</div>
</body>
</html>
Оптимизация на кода
Стиловите правила се възприемат от браузъра много бързо, но ако те са много, при ниски скорости на Internet връзката (например мобилен или обществен Wi-Fi), могат да възникнат проблеми със скоростта на желаното показване на елементи в блога. Това често се случва, ако CSS се свързва отделно. За да се избегне тази ситуация, е възможно да се оптимизира крайния код, като използвате следните прости правила:
➤Когато пишете код, опитайте да групирате селектори с едни и същи значения на свойствата. Пример за това са заглавия с един и същи шрифт или блокове с един и същи вид и така нататък.
h1, h2, h3 {
background: lightbue;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 24px;
}
h2, h3 {
font-size: 18px;
}
background: lightbue;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 24px;
}
h2, h3 {
font-size: 18px;
}
➤Опитайте да се спазва йерархията на документа, т.е. от основно значение към по-малко значимо. Започнете с оформянето на дизайна от основните блокове, после заглавията, под-елементите и други.
➤Не указвайте противоречиви правила на стила за едни и същи елементи.
➤В края на писането на кода и тестването му можете да премахнете излишните интервали или дори да запишете всичко в един ред. Това само ще ускори обработката на кода от браузъра.
Добавяне на CSS в темите на Blogger
В темите на Blogger, както и във всеки HTML-документ, можете да добавите свои собствени свойства на CSS стила за елементите. Това е възможно без особени затруднения, въпреки факта, че темата е създадена на XML.
По-подробно за това ще прочетете в публикацията, посветена специално на този въпрос.
Надявам се, че ще използвате правилно всичко споделено до тук в оформянето на вашия дизайн.
Успех и доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
ПРОДЪЛЖЕНИЕ
Няма коментари:
Публикуване на коментар