Барлық CSS мәнерлерін қалпына келтіріңіз. CSS мәнерлерін қалпына келтіру, жұмыс шешімдерінің мысалдары

CSS қалпына келтіру(мәнерді қалпына келтіру) көмегімен нөлге теңеледі CSS көмегімен, браузерлер әдепкі бойынша орнататын кейбір HTML элементінің параметрлері. Мысалы, мұндай элементтерге бастапқыда тік шеттері нөлге тең емес ( CSS ) бар абзацтар ( тег ), маркерленген тізімдер(тег ), оларда өрістер ғана емес, белгілі бір түрдегі маркерлер де бар (CSS ) және т.б.

Енді осы CSS қалпына келтіру не үшін қажет, ол бізге не береді деп ойланайық? Елестетіп көріңізші, сіз өзіңіздің сайтыңыздың беттерін орналастырдыңыз және сонымен бірге браузерлер әдепкі бойынша ұсынатын абзацтардың шеттерін өзгерткен жоқсыз, өйткені олардың өлшемі сізге өте қолайлы. Айтыңызшы, неге сіз әлемдегі бұрыннан бар және пайда болатын барлық браузерлер бірдей өлшемдегі өрістер жасайды деп шештіңіз? Оның үстіне, сіз орналасуыңызды тексерген шолғыштар келесі нұсқаларында осы өрістердің өлшемін өзгертпейді немесе мүлде жоймайды деп ойлайсыз ба? Сіз ненің иісін сезе аласыз?

Осылайша, CSS-ті қалпына келтіру арқылы макет дизайнерлері өздерін осындай түсініспеушіліктерден сақтандырады, яғни олар алдымен элементтер үшін барлық «критикалық» CSS сипат мәндерін қалпына келтіреді, содан кейін оларды қажетінше қайта қосады, бірақ өз өлшемдерімен. Осылайша, сайт барлық браузерлерде бірдей көрінетініне сенімді бола аласыз. Әрине, сіз стильдерді қалпына келтіре алмайсыз, бірақ жай ғана орналасу кезінде элементтерге қажетті параметрлерді орнатыңыз, бірақ бір жерде бірдеңе жіберіп алу қаупі бар және бір сәтте бәрі «жүзіп» қалады.

Жоғарыда айтылғандарға сүйене отырып, CSS қалпына келтіру мүмкіндіктерінің бірі оны қолданғаннан кейін көптеген HTML элементтері өздерінің таныс көрінісін жоғалтады. Ал абзацтар үшін шеттердің жоғалуы жаңадан келгендер күтетін нәрсе болса, онда, мысалы, тегтердің көмегімен жасалған түймелердің немесе кенеттен кәдімгі мәтінге сырттай ұқсас болуы - бұл таңқаларлық. Бірақ бұл сізді шатастырмауы керек, өйткені бұл үшін стильдер қалпына келтіріледі, осылайша орналасу дизайнері оларды кейінірек қайта көрсетуді ұмытпайды.

Мәнерлерді қалпына келтірудің көптеген жолдары бар және қайсысын таңдайсыз, бірақ мен сізге бір нәрсені айта аламын - ең жақсы қалпына келтіру - тәжірибеңіз бен әдеттеріңізге негізделген өзіңіз жасаған әдіс. Егер сізде әлі мұндай тәжірибе болмаса, төмендегі опциялардың бірін пайдалануға болады.

Әрқашан кодтың ең басында CSS қалпына келтіру мәнерлерін көрсетіңіз, әйтпесе кейбір опциялар келесі себептерге байланысты жұмыс істемеуі мүмкін. стиль басымдықтары, оларды HTML беті мен CSS кодын өңдеу кезінде браузерлер орнатады.

Әмбебап селектор көмегімен CSS қалпына келтіру

Мысалдың сипаттамасы

Бұл мысалда пайдалану әмбебап селекторкөрсетілген мәнерлер бетте болатын барлық HTML элементтері үшін дереу қалпына келтіріледі. Көріп отырғаныңыздай, сипаттардың көпшілігі қауіпсіздік желісі үшін ғана көрсетілген, өйткені олардың мәндері CSS спецификациясына сәйкес браузерлер әдепкі бойынша алмастыратын мәндерге сәйкес келеді. Бірақ өздеріңіз білетіндей, іс жүзінде мұның бәрі мүлде дұрыс емес және егер сипат шынымен де барлық жетекші браузерлерде олардың ата-аналарынан алынған элементтермен мұраланған болса, CSS сипатымен орнатылған бірдей сыртқы шеттер әрқашан бастапқыда нөлге тең бола бермейді.

Бірақ жақтаулардың ( CSS ) және контурлардың ( CSS ) өлшемдері әдепкі бойынша нөлге тең емес, бірақ спецификацияға сәйкес. Дегенмен, олардың қалыңдығы нөлге қайтарылды, сондықтан орналасу дизайнері оны қажет жерде нақты көрсетуді ұмытпады.

CSS-ті Yahoo!

Мысалдың сипаттамасы

Yahoo компаниясы бір уақытта стильдерді қалпына келтірудің өзіндік нұсқасын жасады. Мұнда нақты элементтердің қасиеттері қазірдің өзінде өзгертілген, бұл оларды басқаруда үлкен икемділікке мүмкіндік береді. сыртқы түрі. Мысалы, мұнда таңбалауыштар тізімдерден жойылады, ал тырнақшалар CSS сипаты арқылы тегтен жойылады. Бұл тәсілдің артықшылықтары айқын, бірақ кемшіліктерге көбірек көлемді және кейде артық код кіреді. Бірақ қажеттіліктеріңізге сай кез келген CSS қалпына келтіруді өзгертуге ешкім кедергі жасамайды. Кейбір қажет емес заттарды алып тастай аласыз делік. тег таңдаушыларынемесе тырнақшаларды алып тастап қана қоймай, оларға қажетті көріністі дереу орнатыңыз.

Эрик Мейер CSS қалпына келтірілді

Мысалдың сипаттамасы

CSS-ті қалпына келтірудің тағы бір әдісін белгілі бір ортада танымал веб-әзірлеуші ​​Эрик Мейер ұсынды. Мұнда ол HTML 5 тегтері үшін мәнерді қалпына келтіруді қосты, айтпақшы, осы жазу кезінде олар әлі де өте нашар қолдау көрсетті. заманауи браузерлер. Бірақ сіз әрқашан болашаққа қарауыңыз керек, солай емес пе?

Шындығында, бұл мақаланы шексіз жалғастыруға болады, өйткені мен тағы бір рет қайталаймын, бір сәтте әрбір макет дизайнері өзінің ұқыптылығына сүйене отырып, өзінің қалпына келтіру опциясына келеді немесе оны мүлдем пайдаланбайды.

Көптеген терушілер деп аталатындарды пайдаланады CSS қалпына келтіру, бұл ерекшеліктерді жоюға қызмет етеді әртүрлі браузерлер. Шын мәнінде, берілген файлстильдер кестесі барлық CSS сипаттарын әдепкіге қайтарады. Бұл мақалада мен осы файлдың кодын көрсетемін және оны қалай жасау керектігін түсіндіремін CSS қалпына келтіруді пайдалану керек пе, жоқ па?.

Мен неше түрлі көрдім CSS қалпына келтіру, олардың барлығы шамамен бірдей. Сіз мынаны пайдалана аласыз:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, аббревиатура, мекенжай, үлкен, сілтеме, код,
del, dfn, em, шрифт, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, орталық,
dl, dt, dd, ol, ul, li,
өрістер жинағы, пішін, белгі, белгі,
кесте, тақырып, tbody, tfoot, thead, tr, th, td (
фон: мөлдір;
шекара: 0;
қаріп өлшемі: 100%
маржа: 0;
контур: 0;
толтыру: 0;
тік туралау: негізгі сызық;
}
дене (
сызық биіктігі: 1;
}
ол, ул (
тізім стилі: жоқ;
}
блок тырнақша, q (
дәйексөздер: жоқ;
}
блок тырнақша:бұрын, блоктау: кейін,
q:бұрын, q:кейін (
мазмұны: »»;
мазмұны: жоқ;
}
:фокус(
контур: 0;
}
кесте(
border-collapse: күйреу;
шекара аралығы: 0;
}

Менің ойымша, оны қолданудың себебі неде екені түсінікті, бірақ сол себепті, мысалы, мен оны басқа көптеген тергіштер сияқты қолданбаймын, бұл туралы айту керек. Біріншіден, бұл қосымша файл, Екіншіден, қосымша уақытөңдеу үшін, бірақ ең бастысы - маған әдепкі сипаттар ұнайды. Мысалы, кестедегі бірдей өрістер. Ақыр соңында, барлық әдепкі сипаттар жай ғана емес, әртүрлі элементтерді көрсетудің ең оңтайлы нұсқасы ретінде жасалған. Мен сені сендіремін, nulling төсеукесте ұяшықтары үшін оны негізгі файлға қайтаратын шығарсыз. Бұл мән әдепкі бойынша болғаннан ерекшеленетіні шындықтан алыс. Демек, алдымен оны алып тастаймыз, содан кейін қайтарамыз. Алғашқы кемшіліктермен қатар (қосымша файл және қосымша код), көптеген макет дизайнерлері пайдаланбайды CSS қалпына келтіру.

Бәрібір, мәнерді қалпына келтіруді пайдалану жаман емес, сондықтан сіз сайттың бейімделуін жеңілдету деп ойласаңыз, оны қауіпсіз пайдалана аласыз әртүрлі браузерлермакетіңізді шынымен жеңілдетеді.

Бұл қысқа мақала CSS қалпына келтіруге арналған. Бұл не?

CSS қалпына келтіру CSS негізі болып табылады.

html элементтерінің бастапқыда белгілі бір қасиеттер мен мәндер жиыны болатынынан бастайық, олардың кейбіреулері әрбір браузерде әртүрлі анықталады. Және тек сіздің түрі үшін html беттеріқай шолғышпен қаралатынына байланысты емес және CSS қалпына келтіру пайдаланылады.

Бұл CSS құжатының негізі, дәлірек айтсақ, бірінші ережелері.

Ол элемент қасиетінің мәндерін орнатуға арналған қалаған күй, бұл бізге болашақта жұмыс істеуге ыңғайлы болады. Басқаша айтқанда, бұл css мәнерлерін қалпына келтіріңіз.

CSS Reset - бұл шағын фреймворк, CSS сипаттарының жиынтығы html құжаттары. Өте қарапайым пішінол келесідей көрінеді: * (толтыру: 0; шеті: 0) , яғни беттің барлық элементтері үшін біз нөлдік сыртқы және ішкі шегіністерді орнатамыз.

Оны қалай құруға болады?

Менің ойымша, әрбір веб-әзірлеуші ​​өзінің CSS қалпына келтіруін жазуы керек, бұл оларға қолдануға ыңғайлы болады. Әрине, дайын шешімдер бар. Олардың кейбіреулерін қарастырайық.

Крис Потеет арқылы CSS қалпына келтіру.

Yahoo арқылы CSS қалпына келтіру.

Және тағы біреуі мәнерлерді қалпына келтірумаған ең ұнайтыны. Ол HTML5 үшін бейімделген.

Стильдерді қалпына келтіру, Эрик Майер

Веб-сайттарды орналастырған кезде стильдерді қалпына келтіруді бөлек reset.css файлында жазып, оны негізгі CSS-ге қосу дұрысырақ. Бұл ыңғайлы, бұл файлды CSS қалтасына жай көшіріп, негізгі стиль файлына қосу арқылы көптеген жобаларда пайдалануға болады.

• Аударма

Бұл мақала CSS-ті реттеу бойынша серияның біріншісі. Бүгін біз технологияны қарастырамыз CSS қалпына келтіру.

Бұл не үшін қажет?

Мысалы, сіз элементті пайдаланып жатырсыз ақұжатыңызда. Браузерлердің көпшілігі ұнайды Internet Explorerжәне Firefox сілтемесін қосыңыз Көк түс және астын сызу. Дегенмен, бес жылдан кейін біреу жасауды шешкенін елестетіп көріңіз жаңа браузер(оны UltraBrowser деп атаймыз). Браузерді әзірлеушілер көк түсті ұнатпады және астын сызу тітіркендіргіш болды, сондықтан олар сілтемелерді бөлектеуді шешті. қызыл түстежәне батыл. Дәл осыған негізделген, егер элемент үшін негізгі мәнер мәнін орнатсаңыз а, содан кейін UltraBrowser әзірлеушілері оны қалай көргісі келетіні емес, сіз қалағандай болатынына кепілдік беріледі.

Бірақ қазір бізде мүлде шегініс, соның ішінде жеке абзацтар арасында да жоқ! Не істеу? Өтірік айтпаңыз және қорықпаңыз: қалпына келтірудің астында біз қажетті ережені сипаттаймыз. Оны жасауға болады әртүрлі жолдар: абзацтың астындағы немесе үстіндегі шегінісін көрсетіңіз, оны пайызбен, пикселмен немесе эммен көрсетіңіз.

Ең бастысы, браузер қазір біз оны емес, біздің ережелермен ойнайды. Мен мұны осылай жасауды шештім:

* ( жиегі: 0; толтыру: 0; ) p ( жиегі: 5px 0 10px 0; )

Нәтижесінде біз үшінші мысалда көруге болатын нәрсені алдық.

Жобаңыздағы белгілі бір мәселені шешіп жатсаңыз, өзіңіздің бастапқы қалпына келтіру мәнерлеріңізді жасай аласыз. Қарамастан, жеке CSS қалпына келтіруді жасау бойынша қадамдық нұсқаулық жоқ. Өз ұстанымдарыңызға және өз стиліңізге сеніңіз.

Сізге дұрыс таңдау жасауға көмектесу үшін тағы бірнеше сілтеме:

1. Азырақ - менің таңдауым CSS қалпына келтіру (Эд Эллиот).

2. CSS қалпына келтіру - браузер көретін бірінші нәрсе

Иә, бұл күлкілі естілгенін түсінемін, бірақ бұл жас пен үлкен әзірлеушілердің басты қателіктерінің бірі. Көптеген адамдар бұл туралы ұмытып кетеді.

Кейбіреулер логикалық сұрақ қоюы мүмкін: бұл неге болып жатыр? Жауап қарапайым: CSS файлында жазылған ережелер (тіпті құжаттағы ретімен) бұрын жарияланған ережелерді қайта жазады.

Тақырыптан көп ауытқымай, әрі қарай жалғастырайық. Біздің мысалға Эрик Мейердің стильдерін қолданайық, бірақ кейін 4-мысалда көрсетілгендей біздің қасиеттеріміздің сипаттамасы. Математиктер мынаны айтар еді: «Дәлелдеу үшін қажет нәрсе осы еді».

3. CSS қалпына келтіру үшін бөлек CSS құжатын пайдаланыңыз

Негізі мен жасаушы позицияны ұстанамын бір үлкен CSS файлыбұл тәсілдің жоғары өнімділігіне байланысты. Бірақ ішінде бұл мәселеМен көпшілікпен келісемін: CSS қалпына келтіру параметріне көшу керек бөлек файл(әдетте reset.css деп аталады). Бұл жағдайда оны басқа CSS ережелерінен бөлуге күш салмай, оны әртүрлі жобаларда пайдалануға болады.

4. Әмбебап селекторды қолданбауға тырысыңыз

Бұл кеңес әсіресе CMS тақырыптары сияқты шешімдерді әзірлеу кезінде маңызды. Оның қалай қолданылатынын және қалай өзгертілетінін алдын ала болжай алмайсыз. Бұл үшін әмбебап селекторлардың болжанбайтын (азырақ болса да) механизмін пайдаланғаннан гөрі, барлық элементтер үшін негізгі CSS ережелерін сипаттаған дұрыс.

5. CSS қалпына келтіруді пайдалану кезінде артық сипат сипаттамаларын болдырмаңыз

Эриктің CSS қалпына келтіруіне оралайық. Ол элементтің сызық биіктігі, түсі және фоны үшін әдепкі мәндерді орнатады денекелесідей:

дене ( сызық биіктігі: 1; түс: қара; фон: ақ; )

1. фон түсі: #cccccc;
2. түсі: #996633;
3. Белгілі бір фондық кескінді көлденеңінен қайталағыңыз келеді.

Бұл жағдайда сипаттарыңызды сипаттау үшін жаңа селекторды жасаудың қажеті жоқ - оларды жай ғана CSS қалпына келтіруге қосуға болады. Қанекей соны істейік:

негізгі дене (жол биіктігі: 1; түс: #996633; фон:#ccc url(tiled-image.gif) қайталау-x жоғарғы сол жақ; )

Эрик Мейер бұл туралы былай деді: «Бұл әркім CSS қалпына келтіруді өзгертусіз пайдалануы керек емес».

• Аударма

Бұл мақала CSS-ті реттеу бойынша серияның біріншісі. Бүгін біз технологияны қарастырамыз CSS қалпына келтіру.

Бұл не үшін қажет?

Мысалы, сіз элементті пайдаланып жатырсыз ақұжатыңызда. Internet Explorer және Firefox сияқты браузерлердің көпшілігі сілтеме қосады Көк түсжәне астын сызу. Дегенмен, бес жылдан кейін біреу жаңа браузер жасауды шешеді деп елестетіп көріңіз (оны UltraBrowser деп атаймыз). Браузерді әзірлеушілер көк түсті ұнатпады және астын сызу тітіркендіргіш болды, сондықтан олар сілтемелерді бөлектеуді шешті. қызыл түстежәне батыл. Дәл осыған негізделген, егер элемент үшін негізгі мәнер мәнін орнатсаңыз а, содан кейін UltraBrowser әзірлеушілері оны қалай көргісі келетіні емес, сіз қалағандай болатынына кепілдік беріледі.

Бірақ қазір бізде мүлде шегініс, соның ішінде жеке абзацтар арасында да жоқ! Не істеу? Өтірік айтпаңыз және қорықпаңыз: қалпына келтірудің астында біз қажетті ережені сипаттаймыз. Мұны әртүрлі жолдармен жасауға болады: абзацтың төменгі немесе жоғарғы шегіндегі шегінісін көрсетіңіз, оны пайызбен, пикселмен немесе эммен көрсетіңіз.

Ең бастысы, браузер қазір біз оны емес, біздің ережелермен ойнайды. Мен мұны осылай жасауды шештім:

* ( жиегі: 0; толтыру: 0; ) p ( жиегі: 5px 0 10px 0; )

Нәтижесінде біз үшінші мысалда көруге болатын нәрсені алдық.

Жобаңыздағы белгілі бір мәселені шешіп жатсаңыз, өзіңіздің бастапқы қалпына келтіру мәнерлеріңізді жасай аласыз. Қарамастан, жеке CSS қалпына келтіруді жасау бойынша қадамдық нұсқаулық жоқ. Өз ұстанымдарыңызға және өз стиліңізге сеніңіз.

Сізге дұрыс таңдау жасауға көмектесу үшін тағы бірнеше сілтеме:

1. Азырақ - менің таңдауым CSS қалпына келтіру (Эд Эллиот).

2. CSS қалпына келтіру - браузер көретін бірінші нәрсе

Иә, бұл күлкілі естілгенін түсінемін, бірақ бұл жас пен үлкен әзірлеушілердің басты қателіктерінің бірі. Көптеген адамдар бұл туралы ұмытып кетеді.

Кейбіреулер логикалық сұрақ қоюы мүмкін: бұл неге болып жатыр? Жауап қарапайым: CSS файлында жазылған ережелер (тіпті құжаттағы ретімен) бұрын жарияланған ережелерді қайта жазады.

Тақырыптан көп ауытқымай, әрі қарай жалғастырайық. Біздің мысалға Эрик Мейердің стильдерін қолданайық, бірақ кейін 4-мысалда көрсетілгендей біздің қасиеттеріміздің сипаттамасы. Математиктер мынаны айтар еді: «Дәлелдеу үшін қажет нәрсе осы еді».

3. CSS қалпына келтіру үшін бөлек CSS құжатын пайдаланыңыз

Негізі мен жасаушы позицияны ұстанамын бір үлкен CSS файлыбұл тәсілдің жоғары өнімділігіне байланысты. Бірақ бұл мәселеде мен көпшілікпен келісемін: CSS қалпына келтіру бөлек файлға (әдетте reset.css деп аталады) жылжытылуы керек. Бұл жағдайда оны басқа CSS ережелерінен бөлуге күш салмай, оны әртүрлі жобаларда пайдалануға болады.

4. Әмбебап селекторды қолданбауға тырысыңыз

Бұл кеңес әсіресе CMS тақырыптары сияқты шешімдерді әзірлеу кезінде маңызды. Оның қалай қолданылатынын және қалай өзгертілетінін алдын ала болжай алмайсыз. Бұл үшін әмбебап селекторлардың болжанбайтын (азырақ болса да) механизмін пайдаланғаннан гөрі, барлық элементтер үшін негізгі CSS ережелерін сипаттаған дұрыс.

5. CSS қалпына келтіруді пайдалану кезінде артық сипат сипаттамаларын болдырмаңыз

Эриктің CSS қалпына келтіруіне оралайық. Ол элементтің сызық биіктігі, түсі және фоны үшін әдепкі мәндерді орнатады денекелесідей:

дене ( сызық биіктігі: 1; түс: қара; фон: ақ; )

1. фон түсі: #cccccc;
2. түсі: #996633;
3. Белгілі бір фондық кескінді көлденеңінен қайталағыңыз келеді.

Бұл жағдайда сипаттарыңызды сипаттау үшін жаңа селекторды жасаудың қажеті жоқ - оларды жай ғана CSS қалпына келтіруге қосуға болады. Қанекей соны істейік:

негізгі дене (жол биіктігі: 1; түс: #996633; фон:#ccc url(tiled-image.gif) қайталау-x жоғарғы сол жақ; )

Эрик Мейер бұл туралы былай деді: «Бұл әркім CSS қалпына келтіруді өзгертусіз пайдалануы керек емес».