Какво е CSS - Какво представляват каскадните таблици със стилове SISTRIX
В уеб дизайна CSS предлага опция за запазване на определени стилистични компоненти, които се използват в HTML документите, централно във файл и използването им за всички HTML документи.
Какво е CSS?
CSS означава Каскадни таблици със стилове и е възможност за HTML документи да отделят съдържанието на страница от инструкциите за проектиране на отделните елементи, като заглавия, цитати и др.
Можете да създадете CSS файл за домейн и да го интегрирате като външен ресурс на всички подстраници. Това може да спести много време, когато има фиксирани насоки за моите дизайнерски елементи, които не се променят между документите.
Каскадната част става ясна при работа с различни класове. Например можете да посочите в CSS файла, че всички H2 заглавия (родителски елемент) се показват с размер на шрифта 46 и след това да вмъкнете подклас от H2 заглавията (дъщерния елемент), който съдържа текста дебел отпечатва, когато е определен определен клас (напр. "получер").
В документа не е необходимо да повтарям инструкциите за размера на шрифта за подкласа, тъй като това се наследява от инструкцията от по-високо ниво (прелива).
С тази инструкция всеки получава
-Елементирайте размера на шрифта 42 и само заглавията с
също са отпечатани с удебелен шрифт.
Защо има каскадни таблици със стилове?
Възможността за отделяне на дизайна от съдържанието на документ носи забележителни предимства в скоростта. Отделните HTML документи са по-кратки, тъй като инструкциите за дизайн са възложени на външни изпълнители.
Освен това операторът на уебсайта не трябва да гарантира, че всички необходими инструкции за проектиране са на разположение за всеки документ. Това може да намали неимоверно административните усилия, особено при голям брой документи.
Също така мога да кажа на браузърите колко дълго може да се използва CSS файлът (и колко дълго може да се кешира). Това означава, че браузърът не трябва да изтегля файла всеки път, което е от полза за времето за зареждане.
Как мога да предам CSS информация в документ?
Има различни начини за вграждане на CSS в HTML документ. Двете най-често срещани са свързване към външен CSS файл и директно вграждане в HTML документ.
Външен CSS файл
Обикновено е най-лесно да обобщите цялата информация за стила в CSS файл и да препратите към него в частта на HTML документа:
Това казва на браузъра, че файлът "my-stylesheet.css" трябва да бъде зареден, за да се покаже правилно съдържанието на HTML документа.
Вграден CSS
Можете също така да изберете да добавите част от моя таблица със стилове директно, в раздела на HTML документа.
Използвате един за това
Браузърът вече ще знае, че всички елементи с class = "img-responsive" трябва да използват горните инструкции за стил.
Използване на CSS за оптимизация на търсачките
Възможността да се дефинира веднъж информация за стила и да се приложи на всички подстраници, естествено също носи предимства за оптимизация на търсачките.
Инструкции в CSS файл могат да се използват, за да се определи как точно се показва документ на настолен и/или мобилен браузър. Така че можете да направите едно Адаптивен дизайн и всички подстраници могат да се възползват от него, така че не са необходими две версии за настолни и мобилни устройства.
В допълнение, CSS се използва през годините за увеличаване на скоростта на зареждане на много уебсайтове. Това стана необходимо, когато за правилното показване на уебсайта се изисква голям брой файлове.
Изобилието от заявки в по-стария HTTP стандарт, HTTP/1.1, означава, че времето за зареждане е удължено единствено поради причината, че на браузъра е разрешено само да създаде максимален брой връзки.
С новия HTTP/2 стандарт това ограничение вече не е приложимо.
CSS и HTTP/1.1
С HTTP/1.1 повечето браузъри, казано по-просто, позволяват само 6 едновременни връзки на хост. Освен това връзките се прекратяват след прехвърляне на ресурса. Това може да доведе до увеличено време на зареждане само поради латентността (което е особено забележимо при мобилните връзки).
Можете също така да заредите графични елементи, които се използват на уебсайта като голям спрайт на изображението и след това да показват само тези части от изображението, които съдържат необходимата графика чрез CSS.
CSS и HTTP/2
С новия стандарт HTTP 2.0 ограничението за максималния брой връзки се намалява и връзките могат да се използват и за повече от един ресурс. В резултат на това латентността на установяването на връзка играе много по-малка роля за скоростта на страницата.
Заключение относно каскадните таблици със стилове
CSS е неразделна част от уеб дизайна и е напълно логично като SEO да се справите с възможностите, които каскадните таблици със стилове предлагат.
Особено когато става въпрос за оптимизация на PageSpeed, времето до първото съдържателно боя все още може да бъде съкратено с помощта на вграден CSS.