Уебсайтовете биха изглеждали скучни без CSS, тъй като този език за стилизиране отговаря за стила, размера, цвета и позиционирането на текста на уеб страницата.
Съдържание
Какво е CSS?
Cascading Style Sheets, съкратено като CSS, е език, който описва как HTML елементите трябва да се показват на екран или хартия. CSS е създаден от World Wide Web Consortium (W3C) през 1996 г.
HTML елементите не са проектирани да имат тагове, които биха могли да помогнат за форматирането на уеб страница, и от разработчиците се изисква само да напишат маркиране за страницата. Въвеждането на тагове като при стартирането на HTML 3.2 доведе до нови проблеми за разработчиците.
Тъй като уеб страниците имат цветен фон, различни шрифтове и множество стилове, пренаписването на код става скъпо и болезнено. Училищата на W3C въведоха CSS за решаване на тези предизвикателства и той продължи да се развива през годините.
Защо CSS?
#1. CSS е ефективен
CSS ни спестява от болката при добавяне на тагове като шрифт, подравняване на елементи, рамка, цвят, стил на фона и размер на всяка уеб страница.
#2. Спести време
Можете лесно да промените външния вид на целия уебсайт, като промените външния CSS файл.
#3. Съвместимост с множество устройства
Съвременните уеб потребители имат достъп до сайтове на джаджи с различни размери на екрана, като компютри, таблети и смартфони. CSS улеснява създаването на уеб страници, отговарящи на размерите на екрана.
#4. Лесни за поддръжка приложения
Съвременните уеб приложения непрекъснато се развиват. CSS улеснява промяната на отделни компоненти или дори на целия уебсайт, без да променя кодовата база.
Как се използва CSS с HTML за създаване на уебсайтове?
HTML е стандартен език за маркиране, използван за създаване на уеб страници. От друга страна, CSS описва как се показват уеб страници (създадени с помощта на HTML). Уеб страница, създадена с помощта на HTML и CSS, в идеалния случай ще има HTML файл с текст, връзки към изображения и HTML тагове.
Този HTML файл може да има или отделен CSS файл, свързан към него с помощта на етикет за връзка, или да използва вътрешни или вградени CSS стилове. Един HTML файл може да има заглавие като
и абзац, обозначен с
. Можете да използвате CSS, за да инструктирате браузъра да показва цялото съдържание в абзаца с удебелен шрифт или дори да направите съдържанието на заглавката 50 пиксела и зелено на цвят.
Ще демонстрираме как работят HTML и CSS в следващия раздел.
Видове CSS
#1. Външен CSS
За да бъде CSS класифициран като външен, трябва да има HTML файл и отделен CSS файл с разширение .css. Например style.css. CSS файлът е свързан с HTML файла/документа с помощта на етикет за връзка.
Пример за външен CSS файл:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS файлът може да бъде свързан със следния HTML документ:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Тагът за връзка свързва външния лист със стилове с HTML документа, докато атрибутът href указва местоположението на външния лист със стилове.
Крайната уеб страница ще се появи, както следва:
Външният CSS е най-препоръчителният подход, тъй като улеснява създаването на многократно използвани компоненти и извършването на универсални промени в кодовата база.
#2. Вътрешен CSS
Вътрешният CSS е идеален, когато имате един HTML документ, който искате да стилизирате уникално. Наборът от стилови правила е написан в HTML документа в секцията head.
Това е пример за вътрешен CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Изобразената уеб страница ще се появи, както следва:
Вътрешният CSS не е идеален в повечето случаи, тъй като прави кода в HTML документ толкова голям, че влияе върху скоростта на зареждане.
#3. Вграден CSS
Вграденият CSS съдържа CSS стила в тялото. Например можете да оформите абзац, заглавие или дори div с помощта на вграден CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Изобразеният документ ще се появи, както следва:
Вграденият CSS не е идеален, ако искате да мащабирате вашето уеб приложение, тъй като добавянето на CSS свойство към всеки HTML таг отнема време.
Разгледайте някои от най-добрите онлайн курсове и книги за овладяване на CSS.
Създавайте адаптивни уебсайтове с HTML и CSS
Този курс за създаване на адаптивни уебсайтове в реалния свят учи как да създавате адаптивни уебсайтове с помощта на HTML5 и CSS3. Не са ви необходими предварителни познания по уеб разработка, за да научите този курс, който изследва концепции като модел на кутия, разрешаване на конфликти на селектори, схеми за позициониране и наследяване.
Това е и идеалният курс, ако искате да научите как да обмисляте, планирате, скицирате, кодирате, тествате и оптимизирате професионален уебсайт.
Разширен CSS и Sass
Разширеният курс по CSS и Sass ви запознава с това как CSS работи зад кулисите, като изследва теми като каскада, специфичност и наследяване.
Курсът включва много съвременни CSS техники за създаване на мощни, отзивчиви уеб страници. Курсът представя Saas и как да го използвате в проекти, докато проектирате CSS, глобални променливи и управлявате медийни заявки.
Също така е идеалният курс, ако искате да научите CSS анимация, тъй като засяга @keyframes, анимация и преход.
Научете CSS
Научете CSS от Codecademy учи как да използвате CSS, за да трансформирате HTML във визуално привличащи вниманието уебсайтове. Курсът е разделен на 8 урока и има 6 проекта за проверка на вашето разбиране.
Основните неща, които ще научите от този курс, са как да добавяте стил към HTML елементи, да свързвате HTML и CSS файлове и да създавате уникални оформления за уеб страници.
Създайте първата си уеб страница с HTML и CSS
Курсът за създаване на вашата първа уеб страница учи как да използвате HTML5 и CSS3 за създаване на адаптивни уебсайтове. Този безплатен курс е представен в 4 модула и изисква около 10 часа за завършване. Не са ви необходими предварителни познания по програмиране, за да научите този курс.
Основи на CSS
CSS Basics е създаден от W3Cx. Някои от нещата, които ще научите в този курс са; най-добри практики в уеб дизайна, основни CSS селектори и как да изберете CSS свойства. Курсът е разделен на 5 модула; имате нужда от около 5 седмици, за да го завършите, когато учите 5-7 часа на седмица.
Въведение в CSS3
Този курс по CSS3 представя каскадни стилови таблици. Курсът е подготвен от Университета на Мичиган и учи как да пишете CSS правила, да създадете добри навици за програмиране и да тествате код. Необходими са ви около 12 часа, за да завършите този курс, който се предлага със сертификат за споделяне при завършване.
Въведение в HTML и CSS
Този въвеждащ курс по HTML и CSS учи как да създавате стилизирани и добре структурирани уебсайтове с помощта на HTML и CSS. Курсът учи обучаемите как да създават уебсайтове с помощта на дървовидна структура и след това да ги стилизират с помощта на CSS.
Този безплатен курс е подходящ за начинаещи и използва модел на самообучение. Необходими са ви около 3 седмици, за да завършите този курс, който преподават експерти от индустрията.
CSS урок
CSS Tutorial е безплатен курс за W3schools. Курсът е разделен на глави за лесно разбиране. Всяка глава дава примери и упражнения. Платформата има онлайн, където можете да експериментирате с различни концепции чрез бутона „Опитайте сами“.
CSS: Окончателното ръководство
Книгата CSS: The Definitive Guide е полезна, ако искате да научите основите на CSS, от селекторите и спецификата до каскадата. Книгата също така подробно описва трикове за flexbox, позициониране и плуване.
Това е и книгата, която трябва да поръчате, ако искате да научите как да използвате CSS за създаване на 2D и 3D трансформации, преходи и анимация. Окончателното ръководство се предлага както във версия за Kindle, така и във версия с меки корици.
Адаптивен уеб дизайн с HTML5 и CSS
Тази книга за Адаптивен уеб дизайн с HTML5 и CSS учи как да създавате готови за бъдещето отзивчиви уебсайтове с помощта на HTML5 и CSS.
След като научите триковете от тази книга, уебсайтовете, които създавате, ще работят безупречно на настолни компютри, таблети и мобилни телефони. Книгата е написана в лесен за следване формат и се предлага във формати с меки корици и Kindle.
HTML и CSS: Дизайн и изграждане на уебсайтове
Тази книга за HTML и CSS е идеална за всички, независимо дали сте любители, студенти или професионалисти.
Писателят предава съдържанието на тази книга чрез информационни графики и лайфстайл фотография, за да улесни възприемането на различни концепции. Ресурсът е представен в уникална структура, което улеснява разглеждането на всички глави.
Модерен CSS
Тази книга за Modern CSS: Овладейте ключовите концепции на CSS за модерна уеб разработка учи CSS чрез примери на код, диаграми и екранни снимки.
Книгата представя цветове, селектори, модели на кутии, комбинатори и специфика в първите си глави. След това книгата въвежда стилизиращ текст, позициониране, градиенти, граници, Z-индекс и контексти на подреждане. Освен това научавате теми за напреднали като преходи, анимации, трансформации, flexbox и CSS мрежи.
Заключителни думи
Ролята на CSS в съвременните уебсайтове не може да бъде подчертана достатъчно. Освен че прави уеб страниците визуално привлекателни, CSS улеснява навигирането в различни уеб страници.
Изучаването на CSS може да бъде лесно, ако използвате изброените по-горе ресурси. Някои от тези курсове са безплатни, докато други са платени.
След това можете да разгледате CSS cheat sheets за разработчици и дизайнери.