CSS

Материал из Неолурк
Перейти к навигации Перейти к поиску

CSS — язык разметки документов в Интернете, одна из трех основ современного Интернета вместе с HTML и JavaScript. Предназначается для описания стилей элементов веб-страницы (размеров, отступов, цвета и т. п.), так что на самой странице приводятся только классы и идентификаторы элементов, что позволяет разделить труд страницесоздавателя и дизайнера, кроме того сокращается размер страницы и улучшается читаемость. Фактически, является языком шаблонов, если в HTML имеется элемент <div class="ppk"> и в CSS прописаны стили для div.ppk, то происходит как бы подстановка этих стилей и выходит, что отображается <div style="тут стили">.

Основы верстки CSS и HTML
Пара строчек кода, немного меда — и при наведении мышою на элементыч изменяются его стили (за это отвечает особо хитрый атрибут: focus, помещаемые сразу после селектора-выбирателя)

В подавляющем большинстве используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

История[править]

По распространённым в интернете слухам, первый кто предложил концепцию отделения описания дизайна от текста и собственно сам стандарт CSS, был некто Хокон Виум Ли (норвежский учёный, специалист в области информатики) из компании Opera Software. Да да, из той самой Оперы Софтверэ, которая занимается разработкой, поддержкой и внедрением на массовый рынок браузера Opera, хотя последняя уже не так, хотя когда она была той остаётся загадкой для многих и сегодня. После того «предложения» W3C полностью поддерживает данную парадигму и разрабатывает CSS радуя всех веб дизайнеров и верстальщиков новыми стандартами и рекомендациями. В то же время производители популярных веб раузерных движков как то под час расстраивают своим слоупокстом по внедрению стандартов в обиход.

Первая вариация CSS была создана в 1996. Были возможности описать размер и цвет шрифта, величину отступов. В качестве верстки необходимо было использовать громоздкие таблицы без видных границ, при помощи которых на старых веб-сайтах производилось все позиционирование. Возможности были ограничены.

Вторая вариация была внедрена достаточно быстро, уже в 1998, так как оказалось, что возможностей CSS совершенно не хватает для создания развитых документов. Появились могучие блоки div, которые стало возможно распределять по странице с использованием абсолютного позиционирования, улучшились возможности по поиску необходимого элемента в документе.

Третья редакция появилась в 2000-х и применяется и в настоящее время. Существенно повысились возможности описания стилей, добавилась возможность создавать сложные объекты вроде градиентов и теней, анимированных изображений без использования скриптов, появились пространства имён и улучшенные селекторы.

Это наиболее развитая версия версия, известная всем верстальщикам каскадных таблиц стилей. Предложен консорциумом всемирной паутины сравнительно н давно и полностью поддерживается далеко не во всех браузерах (об ослике и говорить не приходится, ибо на него уже все давно забили) и по сей день. Тем не менее наворотов там уйма, что симпатизирует абсолютно всем и в особенности тем, кто не знает JavaScript ибо теперь и они могут делать красивые (движущиеся) динамические web-страницы.

Отличием данной версии пожалуй является то, что в рунете практически не реально найти адекватной документации по этому стандарту. Есть конечно попытки, но всё как то не так. Посему читать документацию лучше в первоначальном источнике, т.е. на официальном сайте консорциума всемирной паутины. Благо там пишут грамотные ребята и всё оформлено по высшему классу.

Ныне на большинстве сайтов CSS-стили хранятся в отдельном файле (или файлах) и добавляются в заголовочные места документа, подгружаются автоматически и сразу же применяются. Стили сложных сайтов могут быть весьма массивными, хоть обычно и не такими большими, как JavaScript и картинки.

Особенности[править]

Исторически далеко не все браузеры работали корректно с версией CSS от W3C и старались внедрить собственные стили и особенности, что сильно давило на мозги дизайнеров сайтов — выходило так, что надо было проверять правильное отображение страницы на нескольких браузерах, причем возникала необходимость писать специальные правила для разных браузеров (особенно в этом отличался старый Internet Explorer, игнорировавший стандарты и нередко отображающий страницы криво). Постепенно это всё нормализовалось, так как IE ушел в прошлое.

Сложность тестирования под обычные и мобильные версии, впрочем, привела к тому, что многие сайты имеют отдельные версии, естественно, с отдельными стилями (слишком отличается размер экранов и масштаб, чтобы пытаться сделать одну и ту же версию под компьютер и смартфон).


12fd83r2jd0.png Работает – не трогай!
ПрограммыX86ProxifierAutoHotInterceptionAutoHotKeyShareXPerlAPKPureAvast!ΜTorrentOperaWindowsPythonPHPSublime TextJavaScriptCSSОперационная системаHTMLPaintLinuxMacOSHTTPSFace PayOnfidoId.abonentPickpointWindows 2000Windows XPDrimsimСкрепышОт AdobeWindows 7МС-21Калькулятор Consul WarGoogle PlayAppleVIPoleИИ GalacticaWindows 11Hello AsukaStable DiffusionChatGPTCharacter.AIHello WorldЯндекс.БраузерDiscordАнтивирус КасперскогоF-DroidUnstable DiffusionTinderGitHubWindows vs LinuxAdobe Flash PlayerBASICHTC HD2MySQLTikZ
ИнициативыTesla PhoneПодсветка компьютераТряпка для очистки экрана от AppleРегистрация самолетов на БермудахФейковый билет на самолетЛевая симкаСерый телефонОнлайн-проверка автомобиляЧек-лист осмотра автомобиляФейковая бронь отеляЗапрет старых автомобилейИВЛУстановка NovelAI на компьютерAlternativeToPythonTutorCodeWarsDataCampAppleScript
ПонятияМесто на дискеБаннермейкерУведомления в браузереПовышение разрешения нейросетьюРаспознавание лицЧистая установкаСкриншотАппаратное ускорениеSMSДатамайнКапчаТоррентПроксиКомпьютерПереустановка WindowsСтройкаВерсия 2.0МанКодОбфускацияАвтоматизацияРандомайзерНейросетиТекстовый файлГрафические артефактыБольшие данныеПлагинMagnet-ссылкаОбратная капчаRepackBATБрутфорсАльфа-тестАналоговая дыраТаймстампКэшШаблоны
ТехникаУмный домАкваланг (ядерный) • Телефонпланшетроботизированная доставкаСмартфонАэрофлотАйфонАйпадHuaweiСуперджетMNP в УкраинеКошерный телефонSIM-картаКнопочные телефоныGPS-маячокПропаганда электромобилейIPhone 3GGlofiishКомпакт-дискMacBookIPhone 7ArduinoВеб-камера
МемыПеределка фамиклона из PAL в NTSCРаботает — не трогайASCII-артПропеллерТеледильдоникаДилдо с подсветкойИнженерИндусский кодНескучные обоиСрок годности сим-картыБета-тестЗа сжатие ДжипегаШкала ебучих шакаловЕбучий шакалПорфирьевич
ИнновацъиZonaПодсветка синтаксиса кодаOpenAIРаспознавание PDFРазбор самолётов на запчастиДва монитораЗапрет формата APKRuMarketNashStoreРоссийские аналоги Google PlayRuStoreРоссийский процессорМногоразовая туалетная бумагаБезопасные для российских самолётов страныСканирование дисков Google ChromeНастройка викибота для HTTPSДвигатель на вампиреДело Google в ФАСЗелёный водородBrowser hijackingHTCНейросети-расистыИзменение TTL сетевых пакетовФотокарточкаДипфейк
ЛюдиДенис КумпонТомас ЭдисонЛамборгини УрусБилл ГейтсИлья КанторЮрий КлючевскийМарк ЦукербергЕвгений ПоповВеб-мастерIT-звёздыElevenLabs