×òî òàêîå CSS?
Î÷åíü ìíîãèå íà÷èíàþùèå âåáìàñòåðà íå ìîãóò ðàçîáðàòüñÿ, ÷òî òàêîå CSS è ñ ÷åì åãî "åäÿò".  ýòîì ðàçäåëå ñâîåãî ñàéòà ÿ ïîñòàðàþñü ìàêñèìàëüíî ïîäðîáíî "ðàçæåâàòü" è íà ïðèìåðàõ ïîêàçàòü, êàê ïðàâèëüíî ðàáîòàòü ñ ëèñòàìè ñòèëåé. Ñðàçó ñäåëàþ ñóùåñòâåííóþ îãîâîðêó - áóäóò ðàññìàòðèâàòüñÿ âíåøíèå ëèñòû ñòèëåé (âïðî÷åì, âíåøíèé ëèñò ñòèëåé îò âíóòðåííåãî íå ñèëüíî îòëè÷àåòñÿ).
CSS (Cascading Style Sheets - êàñêàäíûå òàáëèöû ñòèëåé) - ìîùíîå è óäîáíîå ñðåäñòâî ôîðìàòèðîâàíèÿ ñàéòà. Áåãëî òàáëèöû ñòèëåé óæå ðàññìàòðèâàëèñü â âåòêå "HTML" - óðîê 23 (âíóòðåííèé ëèñò ñòèëåé) è óðîê 24 (âíåøíèé ëèñò ñòèëåé).
Îñíîâíàÿ öåëü êàñêàäíûõ òàáëèö ñòèëåé - ðàçäåëèòü ñîäåðæèìîå âåá-ñòðàíèöû (íàïèñàííîé, íàïðèìåð, íà HTML) è ôîðìàòèðîâàíèå (ïðåäñòàâëåíèå) äîêóìåíòà (CSS). Ò.å., â êîäå html-ñòðàíèöû íàõîäèòñÿ èíôîðìàöèÿ, êîòîðóþ âèäèò ïîëüçîâàòåëü, çàãðóçèâ ýòó ñòðàíèöó â ñâîé áðàóçåð. À âîò òî, â êàêîì âèäå îí âèäèò ýòó èíôîðìàöèþ íà ñâîåì ýêðàíå - çà ýòî "îòâå÷àåò" ôàéë êàñêàäíîé òàáëèöû ñòèëåé.
Ñêîðåå âñåãî, âû óæå çíàåòå, ÷òî ôàéë ñòàíäàðòíîé html-ñòðàíèöû èìååò íàçâàíèå, ñêàæåì, index.html
Ãäå:
index - èìÿ ôàéëà;
html - ðàñøèðåíèå ôàéëà.
Èìåííî ðàñøèðåíèå ôàéëà "ãîâîðèò" áðàóçåðó ×ÒÎ ýòî çà ôàéë è êàê îí ñ íèì äîëæåí ðàáîòàòü.
Ôàéë êàñêàäíîãî ëèñòà ñòèëåé, îáû÷íî, èìååò íàçâàíèå style.css
Ðàñøèðåíèå css ïîçâîëÿåò áðàóçåðó èäåíòèôèöèðîâàòü äàííûé ôàéë èìåííî, êàê ëèñò ñòèëåé, è èíòåðïðåòèðîâàòü åãî ñîäåðæèìîå äîëæíûì îáðàçîì.
Êàê ïðàâèëî, îäèí ôàéë ëèñòà ñòèëåé "îáñëóæèâàåò" âåñü ñàéò. Ðàñïîëàãàåòñÿ îí â êîðíåâîì êàòàëîãå ñàéòà (òàì, ãäå è ãëàâíàÿ ñòðàíèöà ñàéòà). Äëÿ ïîäêëþ÷åíèÿ ëèñòà ñòèëåé â êîäå html-ñòðàíèöû äîëæåí áûòü ïðîïèñàí ÌÅÒÀ-òåã ñëåäóþùåãî ñîäåðæàíèÿ:
--- <link rel="stylesheet" href="style.css" type="text/css"> ---
Èìÿ ôàéëà êàñêàäíîãî ëèñòà ñòèëåé è ïóòü ê íåìó óêàçûâàåòñÿ â àòðèáóòå href. Áóäüòå âíèìàòåëüíû: ñëåäèòå çà ïðàâèëüíûì ïóòåì ê ëèñòó ñòèëåé (íà ðàçíûõ ñòðàíèöàõ îí ìîæåò áûòü ðàçíûì)! Ìîæíî èñïîëüçîâàòü àáñîëþòíûé ïóòü:
--- <link rel="stylesheet" href="http://mysite.ru/style.css" type="text/css"> ---
Íî, èìåéòå ââèäó, ÷òî ïðè òàêîé çàïèñè ôàéë íå áóäåò ðàáîòàòü áåç ïîäêëþ÷åíèÿ ê Èíòåðíåòó (â ëîêàëüíîì ðåæèìå).
Ñîáñòâåííî âñÿ "ïðåëåñòü" èñïîëüçîâàíèÿ âíåøíåãî ëèñòà ñòèëåé çàêëþ÷àåòñÿ â òîì, ÷òî âñÿ èíôîðìàöèÿ î ôîðìàòèðîâàíèè ÂÑÅÃÎ ñàéòà íàõîäèòñÿ â îäíîì ôàéëå! Íåòðóäíî äîãàäàòüñÿ, ÷òî, ïîìåíÿâ ïàðó-òðîéêó ñòðî÷åê â ôàéëå style.css, ÂÅÑÜ ñàéò ìãíîâåííî ïðåîáðàæàåòñÿ, ðåàãèðóÿ íà èçìåíåíèÿ. Ïîíèìàåòå òåïåðü, êàêîé ýòî ìîùíûé è ãèáêèé èíñòðóìåíò "ïðè÷åñûâàíèÿ" âàøåãî ñàéòà?!
