![]() |
![]() |
![]() |
![]() |
B oáùeì âèäe ïpaâèëo, çaäaþùee còèëü âûãëÿäèò âoò òaê:
Haïpèìep, ìû ìoæeì çaäaòü öâeò coäepæèìoìó òeãa <b> òaêèì cïocoáoì:
Çäecü b ýòo ceëeêòop, color ýòo câoécòâo, red, êaê âû óæe íaâepíoe äoãaäaëècü, çía÷eíèe.
Äeëaeò òo æe caìoe, ÷òo è:
ßcío, ÷òo âòopoé âapèaíò ïpeäïo÷òèòeëüíee, òaê êaê eão óäoáíee èçìeíèòü, oí çaíèìaeò ìeíüøe ìecòa, a cëeäoâaòeëüío áûcòpee ïepeäacòcÿ ïo ceòè è ò.ä.
Còaíäapò CSS paçpeøaeò ïpèìeíÿòü íeêoòopoe còèëeâoe ïpaâèëo, òoëüêo òeì òeãaì, êoòopûe íaõoäÿòcÿ âíóòpè äpóãèõ. Ïoÿcíþ ía ïpèìepe:
Coãëacío ýòèì còèëeâûì ïpaâèëaì, ápoóçep, âcòpeòèâ òeã <li>, âëoæeííûé â oäèí òeã <ol>, äoëæeí ïpèìeíèòü çía÷eíèe upper-roman äëÿ câoécòâa list-style ê ýòoìó òeãó. Bcòpeòèâ òeã <li>, âëoæeííûé â äâa òeãa <ol>, oí äoëæeí ècïoëüçoâaòü çía÷eíèe upper-alpha äëÿ câoécòâa list-style ê ýòoìó òeãó è ò.ä. Taêæe ìoæío ãpóïïèpoâaòü êoíòeêcòíûe ceëeêòopû
Ýòo ïpaâèëo oçía÷aeò, ÷òo òeêcò, âûäeëeííûé òeãoì <B>, íaõoäÿùèìcÿ â <I>, è òeêcò, íaõoäÿùèécÿ â òeãe <LI>, âëoæeííoì â oäèí òeã <OL>, áóäeò âûäeëeí ãoëóáûì öâeòoì.
Paccìoòpèì cëeäóþùèe ïpèìepû:
B ïepâoì ïpèìepe çâeçäo÷êa,óíèâepcaëüíûé ceëeêòop, oçía÷aeò, ÷òo còèëeâoé ïpaâèëo äoëæío áûòü ïpèìeíeío êo âceì ýëeìeíòaì äoêóìeíòa, òaê ÷òo âecü òeêcò â íeì áóäeò âûäeëeí æèpíûì øpèôòoì Bo âòopoì ïpèìepe còèëeâoe ïpaâèëo áóäeò ïpèìeíÿòücÿ êo âceì òeãaì <h3>, ÿâëÿþùèìcÿ äo÷epíèìè ïo oòíoøeíèþ ê òeãó <h1>, è êo âceì <h3> òeãaì, ÿâëÿþùèìcÿ poäèòeëücêèìè ïo oòíoøeíèþ ê <h1>. Tpeòèé ïpèìep èëëþcòpèpóeò òèï cìeæíoão ceëeêòopa, äaííoe còèëeâoe ïpaâèëo áóäeò ïpèìeíeío ê òeãó, cëeäóþùeìó íeïocpeäcòâeíío ça äpóãèì. B ýòoì cëó÷ae âcÿêèé paç, êoãäa ça çaãoëoâêoì ïepâoão ópoâíÿ cëeäóeò çaãoëoâoê âòopoão ópoâíÿ, çaãoëoâoê âòopoão ópoâíÿ còaíeò æèpíûì.
Ïceâäoýëeìeíòû ïoêa íe ïoääepæèâaþòcÿ íè oäíèì èç ïoïóëÿpíûõ ápaóçepoâ, òaê ÷òo âû cìeëo ìoæeòe ïpoïócòèòü ýòoò paçäeë. Cèíòaêcèc ïceâäoýëeìíòoâ òaêoâ:
Ïceâäoýëeìeíòû first-line è first-letter oïpeäeëÿþò còèëü ïepâoé còpoêè è ïepâoé áóêâû. Haïpèìep òaê âû ìoæeòe coçäaòü áóêâèöó
Ïceâäoýëeìeíòû before è after ïoçâoëÿþò óêaçûâaòü â äoêóìeíòe ìecòa, êóäa âcòaâëÿòü aâòoìaòè÷ecêè ãeíepèpóeìoe coäepæèìoe. Haïpèìep oïpeäeëèâ còèëü óïopÿäo÷eííoão cïècêa cëeäóþùeì oápaçoì:
âû óâèäèòe ïepeä êaæäûì cïècêoì cëoâo ccûëêè.
Èíoãäa íóæío ècïoëüçoâaòü oäèí còèëü aáçaöeâ äëÿ ïpèìepoâ ècõoäíûõ êoäoâ ïpoãpaìì, a äpóãoé äëÿ oïècaíèÿ aëãopèòìoâ. Ecëè íè oäèí èç aáçaöeâ íe áóäeò èìeòü ÿâíoão êoíòeêcòa, ïo êoòopoìó eão ìoæío áóäeò oòëè÷èòü oò äpóãoão, òo ìoæío oïpeäeëèòü còèëü äëÿ êaæäoão â oòäeëüíocòè:
B ceëeêòope, ïocëe èìeíè òeãa ÷epeç òo÷êó ïpèïècaío èìÿ êëacca. Ïepâoe ïpaâèëo coçäaëo êëacc còèëeé aáçaöeâ code, òeêcò êoòopûõ äoëæeí âûâoäèòücÿ øpèôòoì symbol c c oòcòóïoì 30 ïèêceëeé oò êpaÿ, a âòopoe alg, òeêcò êoòopûõ áóäeò oòoäâèíóò oò ëeâoão êpaÿ ía 2 ïèêceëÿ. ×òoáû ïpèìeíèòü ê coäepæèìoìó òeãa oïpeäeëeííûé êëacc íaäo âcòaâèò â òeã aòpèáóò class è ïpècâoèòü eìó èìÿ còèëeâoão êëacca.
B paìêaõ còaíäapòa CSS ìoæío coçäaâaòü êëacc, íe accoöèèpóÿ èõ c êaêèì-íèáóäü òeãoì. Haïpèìep, çaäaâ còèëeâoe ïpaâèëo cëeäóþùeì oápaçoì:
è ïpècâoèâ bold_and_italic câoécòâó class íeêoòopoão òeãa, âû óêaæeòe ápoóçepó, ÷òo coäepæèìoe ýòoão òeãa íaäo oòoápaæaòü æèpíûì è íaêëoííûì øpèôòoì.
Êpoìe òpaäèöèoííûõ êëaccoâ, còaíäapò CSS oïpeäeëÿeò eùe è ïceâäoêëaccû. Ï ceâäoêëaccû ïoçâoëÿþò óïpaâëÿòü oòoápaæeíèeì ýëeìeíòoâ, íaõoäÿùèõcÿ â êaêoì-íèáóäü cocòoÿíèè. Ïceâäoêëaccû ïpècoeäèíÿþòcÿ ê èìeíè òeãa äâoeòo÷èeì, è èõ èìeía çapaíee oïpeäeëeíû. Ïoêa cóùecòâóeò âceão ceìü ïceâäoêëaccoâ:
Ïo÷òè âce òeãè äoïócêaþò aòpèáóò id, c ïoìoùüþ CSS ìoæío coïocòaâèòü òeãó c äaííûì çía÷eíèeì id íeêoòopoe còèëeâoe ïpaâèëo. Èìÿ ID-êëacca oòäeëÿeòcÿ oò èìeíè òeãa çíaêoì # (peøeòêa).
Teïepü ìoæío coçäaòü cèíèé çaãoëoâoê, íaïècaâ <h1 id="blue"> èëè, ïpècâoèâ aòpèáóòó id ëþáoão òeãa çía÷eíèe yellow, oêpacèòü eão coäepæèìoe â æeëòûé öâeò. Óïoòpeáëeíèe còèëeé, coçäaííûõ òaêèì cïocoáoì oáëaäaeò cóùecòâeííûì íeäocòaòêoì çía÷eíèe id óíèêaëüío è äoêóìeíòe.
W3C ïpeäïoëaãaeò, ÷òo â íeäaëeêoì áóäóùeì HTML äoêóìeíòû áóäóò oòoápaæaòücÿ íe òoëüêo ía ìoíèòopaõ êoìïüþòepoâ, ío è ía òaêèõ ýêçoòè÷ecêèõ ócòpoécòâaõ, êaê ïpèíòepû, ïe÷aòaþùèe ïo Ápaéëþ(äëÿ cëeïûõ). Äëÿ ýòoão áûëa ïpèäóìaía cïeöèaëüíaÿ äèpeêòèâa @media. Cèíòaêcèc:
B äaííûé ìoìeíò â còaíäapò CSS âõoäÿò cëeäóþùèe ócòpoécòâa: aural ( cèíòeaòopû pe÷è), braille (òaêòèëüíûé), embossed (ïpèíòepû, ïe÷aòaþùèe ïo Ápaéëþ), handheld (êapìaííûe), print (oáû÷íûe ïpèíòepû), projection (ïpoeêöèoííûe aïïapaòû), tty (òeëeòaéï), tv (òeëeâèçopû) è all (oáúeäèíÿeò âce òèïû). Ceé÷ac íè oäèí èç ïoïóëÿpíûõ ápoóçepoâ íe ïoääepæèâaeò äèpeêòèâó @media.
Êaê è â äpóãèõ ÿçûêaõ ïpoãpaììèpoâaíèÿ, â CSS êoììeíòapèè òoëüêo ïpèâeòcòâóþòcÿ. Ho íe âçäóìaéòe ââoäèòü èõ êaê â HTML, CSS íe HTML. Bû äoëæíû oôopìëÿòü êoììeíòapèè â câoèõ còèëÿõ ía÷èíaÿ èõ c cèìâoëoâ /* è çaêaí÷èâaÿ cèìâoëaìè */. He cêóïèòecü ía ècïoëüçoâaíèe êoììeíòapèeâ, oíè oáëeã÷aò ïoíèìaíèe còèëeé äëÿ âac è ëþäeé, êoòopûe, ìoæeò áûòü, áóäóò ìoäèôèöèpoâaòü âaøè còèëè â äaëüíeéøeì. |
![]() |
![]() |
![]() |
![]() |