Візуальны стыль і макет вэб-сайта прадыктаваныя CSS або каскадныя табліцы стыляў. Гэта дакументы, якія фарміруюць вэб-старонка ў HTML-разметку, падаючы вэб-браўзэры з інструкцыямі аб тым, як адлюстроўваць старонкі, якія з'яўляюцца вынікам гэтай разметкі. CSS апрацоўвае макет старонкі, а таксама колер, фонавыя малюнкі, кнігадрукаванне і многае іншае.
Калі вы паглядзіце на файл CSS, вы ўбачыце, што, як і любую разметку ці мову кадавання, гэтыя файлы маюць пэўны сінтаксіс для іх. Кожны стыль брызент складзены з некалькіх правілаў CSS. Гэтыя правілы, узятыя ў поўнай меры, то, што стылі на сайце.
Складовыя часткі CSS Правіла
Правіла CSS складаецца з двух асобных частак - селектар і дэкларацыі. Селектар вызначае, што ў цяперашні час стыль на старонцы і дэкларацыі, як гэта павінна быць у стылі. Напрыклад:
р {
колер: # 000;
}
Гэтае правіла CSS. Селектар частка з'яўляецца "р", які з'яўляецца элементам выбару для «пунктаў». Было б, такім чынам, выбраць усе пункты сайта і надаць ім гэты стыль (калі няма пунктаў, якія адрасаваныя больш канкрэтныя стылі ў іншых месцах у вашым CSS дакумента).
Частка правілы, якая кажа «колер: # 000;» тое, што вядома як дэкларацыя. Гэтая заява складаецца з двух частак - уласцівасцяў і значэння.
Ўласцівасць з'яўляецца «колер» частка гэтай дэкларацыі. Гэта дыктуе, які аспект селектара будзе зменены візуальна.
Значэнне, што абраны CSS ўласцівасць будзе зменена. У нашым прыкладзе мы выкарыстоўваем шаснаццатковае значэнне # 000, які з'яўляецца CSS скарачэнне для «чорнага».
Такім чынам, выкарыстоўваючы гэта правіла CSS, наша старонка будзе мець пункты адлюстроўваюцца ў колер шрыфта чорнага колеру.
CSS Асновы уласнасці
Пры запісе уласцівасцяў CSS, вы не можаце проста зрабіць іх, як вы лічыце патрэбным. Для выпадкаў, «колер» з'яўляецца сапраўдным CSS ўласцівасць, так што вы можаце выкарыстоўваць яго. Гэта ўласцівасць з'яўляецца тое, што вызначае колер тэксту элемента. Калі вы спрабавалі выкарыстаць «тэкст-колер» або «колер шрыфта» у якасці уласцівасцяў CSS, гэта будзе не таму, што яны не з'яўляюцца рэальнымі часткамі мовы CSS.
Іншым прыкладам з'яўляецца ўласцівасць «фонавы малюнак». Гэта ўласцівасць вызначае малюнак, якое можа выкарыстоўвацца для фону, як гэта:
.logo {
Фонавы малюнак: URL (/images/company-logo.png);
}
Калі вы спрабавалі выкарыстаць «фонавы малюнак» або «фон-графічны» як ўласцівасць, яны не будуць, таму што, зноў жа, гэта не фактычныя ўласцівасці CSS.
Некаторыя ўласцівасці CSS
Ёсць цэлы шэраг уласцівасцяў CSS, якія можна выкарыстоўваць для афармлення сайта. Вось некаторыя прыклады:
- Border (уключаючы мяжы стылю, межы-колеру і межы шырыні)
- Набіванне (у тым ліку абіўка-топ, абіўка-направа, абіўка дна, і абіўка-злева)
- Поля (у тым ліку розніцы-топ, розніцы-направа, краі дна, і краі налева)
- шрыфт сям'і
- памер шрыфта
- фон колеру
- шырыня
- вышыня
Гэтыя ўласцівасці CSS вялікія з іх выкарыстоўваць у якасці прыкладаў, таму што яны ўсё вельмі проста і, нават калі вы не ведаеце CSS, вы можаце здагадацца, што яны робяць на аснове іх імёнаў.
Ёсць і іншыя ўласцівасці CSS, якія вы сустрэнеце, а таксама якія могуць быць не гэтак відавочныя, як яны працуюць на аснове іх імёны:
- тарка
- ясна
- пераліў
- Тэкст-пераўтварэнні
- Z-індэкс
Як вы глыбей у вэб-дызайне, вы будзеце сутыкацца (і выкарыстоўваць) усе гэтыя ўласцівасці і многае іншае!
Ўласцівасці патрэбныя значэння
Кожны раз, калі вы выкарыстоўваеце ўласцівасць, вы павінны даць яму значэнне - і некаторыя ўласцівасці могуць прымаць толькі пэўныя значэння.
У нашым першым прыкладзе «колеру» уласнасці, мы павінны выкарыстоўваць значэнне колеру. Гэта можа быць шаснаццатковае значэнне , значэнне RGBA, ці нават каляровыя ключавыя словы . Любы з гэтых значэнняў будзе працаваць, аднак, калі вы выкарыстоўвалі слова «змрочны» з гэтым уласцівасцю, ён не будзе рабіць нічога, паколькі, як апісальны, як гэта слова можа быць, гэта не прызнаецца значэнне ў CSS.
Наш другі прыклад «фонавага малюнка» патрабуе контур малюнка можна выкарыстоўваць для здабывання фактычнага выявы з файлаў вашага сайта. Гэта значэнне / сінтаксіс, які патрабуецца.
Усе ўласцівасці CSS маюць значэння, якія яны чакаюць. Напрыклад:
- Мяжа колеру чакае, што значэнне колеру
- Мяжа памеру чакае, што значэнне праклейвання, як пікселі або працэнты
- Стылі Памежныя чакае адно з зарэзерваваных стыляў, якія выкарыстоўваюцца для гэтага ўласцівасці, як «цвёрды»
Калі вы ідзяце па спісе уласцівасцяў CSS, вы выявіце, што кожны з іх мае пэўныя значэння, якія яны будуць выкарыстоўваць для стварэння стыляў яны прызначаны.
Пад рэдакцыяй Джэрэмі Girard