CSS (окулушу ⁄siːɛsɛs⁄, англисче Cascading Style Sheets «стилдердин каскаддык [көптүк] таблицалары») — белгилөө тилин колдонуу менен (көбүнчө HTML же XHTML ) жазылган документтердин (веб-барактардын) тышкы көрүнүшүн баяндоочу формалдык тил. Ошондой эле, каалаган XML документине колдонулушу мүмкүн, мисалы SVG же XUL.
| CSS | |
|---|---|
| Кеңейтилиши | .css |
| MIME-түр | text/css |
| Иштеп чыгуучу | CSS Working Group |
| Жарыяланышы | 17-декабрь, 1996-жыл |
| Формат түрү | Стилдер тили |
| Стандарттар | 1-деңгээл, 2-деңгээл, 2-деңгээл 1-ревизия, |
| Сайт | https://www.w3.org/Style/CSS/ |
CSS веб-барактарды түзүүчүлөр тарабынан түстөрдү, шрифттерди, стилдерди, өзүнчө блоктордун жайгашуусун берүү жана веб-барактардын тышкы көрүнүшүн көрсөтүүдөгү башка аспектилерде колдонулат. CSS иштеп чыгуунун негизги максаты веб-барактын логикалык түзүмүн баяндоону (HTML жана башка тилдер менен ишке ашырыла турган белгилөө тилдери) анын тышкы көрүнүшүнүн баяндалышынан бөлүү (учурда [2022] формалдык CSS тили менен ишке ашырылат). Мындай бөлүштүрүү документтин жеткиликтүүлүгүн жогорулатып, чоң ийкемдүүлүктү жана аны берилиши менен башкарууга мүмкүндүк берет, ошондой эле, документтин түзүмүндөгү татаалдыкты жана кайталануучулукту азайтат.
Андан тышкары, CSS бир эле документти түрдүү стилдерде же чыгаруу ыкмасында бере алат, мисалы, экранга берүү (түрдүү өлчөмдөгү экрандарга ылайыкташтырып), басып чыгарууга өзүнчө даярдап берүү, үн менен окуу (атайын үн браузерлери же экрандан окуу программасы аркылуу) же Брайль шрифтин колдонгон түзүлүштөргө чыгарып берүүдө.
CSS эрежелери, тышкы көрүнүшү баяндалуучу веб-документтин өзүндө же .css кеңейтилишине ээ болгон тышкы файларда жайгашышы мүмкүн. CSS форматы — бул CSS эрежелери жана пикирлери (комментарийлери) камтылган тексттик файл. CSS стилдери баяндалуучу веб-документке төрт ыкма менен кошулушу мүмкүн:
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
<⁄head>
<body>
.....
<⁄body>
<⁄html>
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
<⁄style>
<⁄head>
<⁄html>
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
<⁄style>
<⁄head>
<body>
.....
<⁄body>
<⁄html>
<!DOCTYPE html>
<html>
<head>
.....
<⁄head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
<⁄p>
<⁄body>
<⁄html>
Биринчи эки учурда документке тышкы стилдер, ал эми экинчи эки учурда — ички стилдер колдонулган.
CSSти XML документине кошуу үчүн документте стилдер файлына атайын шилтеме болушу керек:
<?xml-stylesheet type="text⁄css" href="style.css"?>
Документке CSS стилдерди кошуудагы биринчи үч учурда (өйдөдөн караңыз) файлдагы CSSтин ар бир эрежеси эки негизги бөлүккө ээ — селектор жана жарыялоолор блогу. «{» (фигуралык кашаа) белгисинне чейинки сол жагында жайгашкан селектор документтин кайсы бөлүгүнө (балким, атайын белгиленгендер) эрежелердин жайылаарын аныктайт. Жарыялоолор блогу эреженин оң жагында жайгашат. Жарыялоолор фигуралык кашаанын ичине жайгаштырылып, өз кезегинде «;» (үтүр чекит) белгиси менен бөлүнгөн бир же бир нече жарыялоолордон турат. Ар бир жарыялоолор «:» (кош чекит) белгиси менен бөлүнгөн CSS касиетинин (функциясынын) жана анын маанисинин айкалышынан турат. Селекторлор бир сапта үтүр аркылуу топтолушу мүмкүн. Бул учурда, касиет алардын ар бирине колдонулат.
селектор, селектор {
касиет: маани;
касиет: маани;
касиет: маани;
}
Документке CSSти кошуудагы CSS эрежелеринин төртүнчү учурунда ага колдонуучу style элементинин атрибут маанилери «;» белгиси менен бөлүнгөн жарыялоолордун тизмесин билдирет («CSS касиети : мааниси» — бул бир жарыялоо, ушундай жарылоолордун үтүр чекит аркылуу бөлүнөт деген сөз).
* {
margin: 0;
padding: 0;
}
p {
font-family: arial, helvetica, sans-serif;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
#paragraph1 {
margin: 0;
}
a[href="https:⁄⁄tyup.net"] {
font-weight: bold;
}
div#paragraph1 p.note {
color: blue;
}
p.note > b {
color:green;
}
h1 + p {
font-size:24px;
}
a:active {
color: blue;
}
p::first-letter {
font-size: 32px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text⁄html; charset=utf-8">
<title>
Класстар жана идентификаторлор селекорлору
<⁄title>
<style>
p.big {
font-family: arial, helvetica, sans-serif;
color: red;
}
div#first {
background-color: silver;
}
<⁄style>
<⁄head>
<body>
<div id="first">
<!-- Бул боз фондогу id боюнча стилдештирилген div -->
<⁄div>
<p class="big">
<!-- Бул кызыл түстөгү текст -->
<⁄p>
<⁄body>
<⁄html>
Элемент класстары жана элемент идентификаторлорунун негизги айырмачылыктары кийинкидей: идентификатор бир элементке арналган, класс болсо дароо бир нече элементке бериле алат. Ошондой болсо да, заманбап браузерлер, шартка ылайык, бирдей идентификаторлого ээ болгон элементтерди туура көрсөтө берет. Дагы бир айырмачылыгы, класстардын көптүк түрдө болуу мүмкүндүгүндө, мисалы, элемент классы боштук аркылуу бөлүнгөн бир нече сөздөрдөн турганда. Идентификаторлор үчүн бул мүмкүн эмес.
Идентификатордун класстан кийинкидей айырмасын белгилөө маанилүү: документте уникалдуу элементти табуу үчүн идентификаторлор JavaScript тилинде кеңири колдонулат.
Класстардын жана идентификаторлордун аттары, тег жана алардын атрибуттарынан айырмаланып тамга регистрына (чоң жана кичине тамгаларга) сезимталдуу.
Класстардын жана идентификаторлордун касиеттери ага ылайык селекторлордун жардамы менен берилет. Ошону менен бирге, жалпы класс касиети катары берилиши мүмкүн (мындай учурда селектор «.» [чекиттен] башталат, мисалы, «.big») же идентификатор касиети өзүнө-өзү берилиши мүмкүн (мындай учурда селектор «#» [торчо] белгисинен башталат, мисалы, «#first»), ошондой эле, ошол класстын кайсы бир элементинин касиети катары же ошол идентификатору менен берилет.
CSSте веб-барак автору тарабынан берилүүчү класстардан тышкары, айтылуу псевдокласстардын чектелген топтому бар, булар, гипершилтемерлердин киргизүү фокусунун белгилүү бир абалда турган көрүнүшүн, ошондой эле, башка элементтердин биринчи туунду элементи болгон элементтердин көрүнүшүн баяндайт. Андан тышкары, CSS-те айтылуу төрт псевдоэлемент бар: биринчи тамга, биринчи сап, элементке чейин жана кийин атайын стилдерди колдонуу.
HTML документтерине CSSти колдонуу, мурастоо жана каскаддоодо негизделген. Мурастоо негизи аталык-элементтерге жарыяланган CSS касиеттери дээрлик дайыма тукум-элементтер тарабынан мурасталат.
Каскаддоо негизи кайсы бир HTML элементине бир убакта ылайыктуулугуна бирден көп болгон CSS эрежеси коюлган учурда колдонулат, башкача айтканда ошол эрежелердин маанилеринин конфликтиси пайда болгондо. Мындай конфликттерди чечүү үчүн артыкчылык эрежелери киргизилет.
| Селектор | a, b, c, d | Сан |
|---|---|---|
| span | 0, 0, 0, 1 | 1 |
| div .class | 0, 0, 1, 1 | 11 |
| #id .class | 0, 1, 1, 0 | 110 |
| div span | 0, 0, 0, 2 | 2 |
| .class | 0, 0, 1, 0 | 10 |
| #id span | 0, 1, 0, 1 | 101 |
Стилдер таблицасынын мисалы (кийинкидей түрдө өзүнчө .css файлында жайгаштырылышы мүмкүн же <style> тегтери менен курчалып, ошол эле веб-барактын «башында» жайгаштырууга болот):
p {
font-family: arial, helvetica, sans-serif;
}
h2 {
font-size: 20pt;
color: red;
background: white;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
p#paragraph1 {
padding-left: 10px;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
[type="button"] {
background-color: green;
}
Бул жерде p, h2, .note, p#paragraph1, a:hover, #news p жана [type="button"] болгон селекторлору бар CSSтин жети эрежеси берилген. Өйдөдө жазылган кодго төмөндө баяндама берилет, бул дайыма ушундай болот дегенди билдирбейт, автор кандай код жазса ошондой болот.
CSSтин пайда болушуна чейин веб-барактарды көркөмдөө бир гана HTMLдин каражаттары менен түздөн-түз документтин ичинде ишке ашырылган. Бирок, CSSтин пайда болушу менен документтин мазмунун жана берилишин түп-тамырынан ажыратууга мүмкүн болду. Жаңы киргизүүнүн эсебинен окшош документтердин массасына бирдиктүү көркөмдөө стилин оңой пайдалануу, ошондой эле, бул көркөмдөөнү тез өзгөртүү мүмкүндүгү келди.
Артыкчылыктары:
Кемчиликтер:
CSS — W3C консорциуму тарабынан жактырылган жана «Web стандарттары» жалпы аталышын алган кеңири спектрдагы технологиялардын бири. 1990-жылдары программисттер жана веб-дизайнерлер өзүлөрүнүн сайттарын долборлоого мүмкүндүк жаратуу үчүн Web тармагын стандартташтыруу, кандайдыр бир бирдиктүү эрежелерди түзүү зарылдыгы айкын болгон. Ошентип, HTML 4.01 жана XHTML тилдери, ошондой эле, CSS стандарты пайда болгон.
1990-жылдардын башында ар кандай браузерлер веб-барактарды көрсөтүүнүн жеке стилдери болгон. HTML өтө тез өнүгүп, ошол убактагы маалыматты көркөмдөө боюнча талаптарды канааттандырууга кубаты жеткен, ошондуктан, CSS анча кеңири таанылган эмес.
«Стилдердин каскаддык таблицалары» (Cascading Style Sheets) термини 1994-жылы Хокон Ли сунушталган. Ал Берт Бос менен биргеликте CSSти өнүктүрө баштаган.
Ошол убактагы стилдер тилинен айырмаланып CSS негизгисинен тукумуна мурастоону колдонгон, ошондуктан иштеп чыгуучу мурда аныкталган стилдерге таянып ар кандай стилдерди аныктай алат.
1990-жылдары Дүйнөлүк Желе Консорциуму (W3C) CSSке кызыгуусун көрсөтүп, 1996-жылдын декабрында CSS1 сунуштамасы чыккан.
W3C сунуштамасы, 1996-жылдын 17-декабрында кабыл алынып, 1999-жылдын 11-январында оңдолгон. Бул сунуштама берүүчү мүмкүндүктөрдүн арасында:
W3C сунуштамасы 1998-жылдын 12-майында кабыл алынган. Бир нече өзгөчөлүктөрдөгү тескери айкалышууну сактап, CSS1де негизделген. Функционалдуулугуна кошулуулар:
Учурда (2022) W3C CSS2ни колдоосун токтотуп, анын ордуна CSS2.1 колдонууну сунуштайт. Албетте булардын экөө тең эскирген, бирок кээ бир учурларда эскилери зарыл болуп калышы ыктымал.
W3C сунуштамасы, 2011-жылдын 7-июнунда кабыл алынган.
CSS2.1 CSS2ге негизделген. Мурдагы версиясындагы каталарды оңдоодон тышкары, жаңы ревизияда спецификациялардын кээ бир бөлүктөрү өзгөртүлгөн, ал эми кээ бирлери таптакыр алынган. Алынган бөлүктөр келечекте CSS3кө кошулушу мүмкүн.
CSS3 (англисче Cascading Style Sheets 3 — үчүнчү муундагы каскаддык таблицалардын стилдери) — CSSтин автивдүү иштелип чыгып жаткан (2022) спецификациясы. Белгилөө тилинин жардамы менен ишке ашырылган формалдык тилди билдирет. CSS1, CSS2 жана CSS2.1ге салыштырмалуу эң масштабдуу редакциясы. CSS3түн негизги өзгөчөлүгү анын JavaScript колдонбостон анимацияланган элементтерди түзө алуусу, сызыктуу жана радиалдык градиенттерди, көлөкөлөрдү, жылмалоо ж. б. колдоосу.
Көбүнчө HTML жана XHTML белгилөө тилинде жазылган веб-барактарды баяндоо жана тышкы көрүнүшүн көркөмдөө каражаты катары пайдаланылат, бирок, каалаган XML документтерине да колдонула алат, мисалы, SVG же XUL.
Муруңку версияларына караганда спецификация модулдарга бөлүнгөн, алардын иштеп чыгуусу жана өнүгүүсү көз карандысыз ыкмада жүрөт. CSS3 CSS2.1ге негизделип, учурдагы касиеттерди жана маанилерди толуктап, жаңыларын кошот: блоктордун тоголоктолгон бурчтары, трансформация, балким өзгөрмөлөрдү киргизүү.
W3C тарабынан 2011-жылдын 29-сентябрынан бери иштелип чыгууда. CSS4 модулдары CSS3 негизинде түзүлүп, жаңы касиеттер жана маанилер менен толукталууда. Булардын баары азырынча жөнөкөй жазма түрүндө гана (working draft).
Мисалы:
CSS стандартын толугураак колдогон браузерлер: Gecko (Mozilla Firefox ж. б.), Webkit (Safari, Arora, Google Chrome) жана Presto (Opera) кыймылдаткычындагы браузерлер.
Мурдагы эң популярдуу браузер Internet Explorer 6 CSSти жарым-жартылай гана колдойт.
Internet Explorer 7 CSSти колдоосун кыйла жакшырткан, бирок дагы деле көптөгөн каталар менен иштеген.
Internet Explorer 8 толугу менен CSS 2.1ди жана жарым-жартылай CSS3тү колдогон жаңы кыймылдаткычты пайдаланат.
Веб-стандарттардын браузер тарабынан колдоосун текшерүү үчүн Acid тести иштелип чыккан, анын ичинде CSS стандартынын түрдүү бөлүктөрү.
W3C консорциумунун CSS стандарттарында width касиети блок мазмунунун кемтиктерин жана рамкаларын камтыбастан жазылыгын аныктаган модел колдонулат. Internet Explorer браузеринин эрте версиялары (4 жана 5) жеке моделин ишке ашырып, мында width блоктун рамкаларынын ортосундагы аралыкты аныктайт, анын ичинде кемтиктер (padding) жана рамкалар (border) дагы эске алынат. Internet Explorer 5тен тышкары, бул моделди Netscape 4 жана Opera 7 браузерлери да түшүнүшөт. W3C стандарттык моделин колдоо, IE 6-версиясында гана пайда болгон.
CSS3түн иштелип чыгуучу стандартында бул көйгөйдү чечүү үчүн W3C стандарттык моделинде колдонууга көрсөтүлгөн content-box мааниси менен box-sizing касиети киргизилген, IE 5 моделинде колдонуу үчүн border-box мааниси.
Mozilla браузеринде бул касиетти -moz-box-sizing жеке иштиктүү аталышында дагы бир padding-box маанисин киргизген, ошентип үчүнчү блоктук модел түзүлгөн, мында width — рамкаларды эске албастан блоктун мазмунунун жана кемтиктеринин өлчөмү.
CSSти ар кандай браузерлер тарабынан ишке ашыруу айырмачылыктары, веб иштеп чыгуучуларды «кантип бардык браузерлерде баракты бирдей көрсөтүү керек?» деген суроого чечим издөөгө мажбур кылат. Мында, CSS чыпкалар (CSS-хактар) түрдүү элементтерге стилдерди тандап колдонууга мүмкүндүк берет. Мисалы, Internet Explorer 6, «* html селектор» («star html bug» атында белгилүү болгон чыпка) түрүндөгү селекторлорду колдонгон эрежелерди пайдаланат. Quirks mode-до иштеген W3C жана IE блоктук модели, жазылыгы 100 пиксель жана ички кемтиктери 10 пиксель болгон #someblock блогун көрсөтүү үчүн кийинкидей код жазса болот:
⁄* W3C модели - мазмун жазылыгы 80px жана ар бир жагынан кемтиктер 10px *⁄
#someblock { width: 80px; padding: 10px; }
⁄* Кийинки эреже IE6 гана колдонот. *⁄
* html #someblock { width: 100px; padding: 10px; }
Internet Explorer үчүн эрежелерди тандалма колдонуунун дагы бир ыкмасы: шарттуу пикирлер (комментарийлер).
2010-жылы колдоо алдында болгон Internet Explorer-дин бардык версиялары кооптуу болгон: браузер тарабынан каскаддык стилдерди (CSS) иштетүүдө алгач мааниленбеген (инициализацияланбаган) эс пайда болуп, анын аркасынан колдонуучунун компьютеринде аралыктан зыяндуу кодду иштетүү мүмкүндүгү бар эле.
CSS Framework (ошондой эле, Web design framework) — бул калыптоочунун (верстальщик) жумушун жөнөкөйлөтүү, иштеп чыгууну тездетүү жана ката кетирүүнү болтурбоо (ар кандай браузерлердин айкалышуу көйгөйлөрү ж. б.) үчүн алдын-ала даярдалган CSS-библиотека, мисалы, Bootstrap. Скрипттик программалоо тилинин библиотекалары сыяктуу эле CSS-фреймворктор .css түрүндөгү файлдар менен долбоорго кошулуп (веб-барактын башына коюлат), калыптоону анча жакшы билбеген программит же дизайнерге туура html макет түзүүгө мүмкүндүк берет.
Барактарды калыптоодо көп учурда бир эле маанини көп жолу пайдаланууга туура келет: бир эле түстөр, шрифттер ж. б. Эгер бул маанини өзгөртүү керек болсо, көп жерлерди өзгөртүш керек болот.
Бул маселелерди чечүү жана иштеп чыгууну тездетүү үчүн CSS тилинин бир нече кеңейтүүлөрү (препроцессорлору) бар. Кеңейтүү деген сөз, CSS кеңейтүү үчүн коду туура дегенди билдирет, тескери эмес. «Кеңейтилген CSS» кодунан жөнөкөй, браузерлер тарабынан кабыл алынуучу CSS файлды алуу үчүн компиляция жасоо зарыл. Компиляция бир нече түрлөрдө болушу мүмкүн: