Бул учтары менен чындыктарды алуу
Бардык желе браузерге чоочун, эмне кирет "defauly стилдеги". Бул башка стили маалымат жок HTML элементтеринин жана сезилишин жазсын стилдери бар. Мисалы, дээрлик ар бир браузерде Гипершилтемелердеги демейки карап бир баса менен көк түс болуп саналат. Бул ошол шилтемелер сиз башка жол менен чагылдырууга аларга айтып коёюн, эгерде мына ушундай болот.
Демейки серепчи стилдери алар көзөмөлдөп 100% болуп стилдер менен жаңы баштаса болот үчүн пайдалуу, бирок, көп учурда интернет дизайнерлери бул образын алып келет болушу мүмкүн. Бул бир деп аталган колдонуп жатат "чебер салынган."
Адатта, кожоюн стилдер бардык документтерде чакырып, биринчи салынган болушу керек. Сиз кайчылаш-браузер Дизайн көйгөйлөргө алып келиши мүмкүн демейки серепчи орнотууларды алып чыгууну мастер салынган колдонушат. Эгер башкы стилдер менен стилдерди тазаланды кийин, дизайн браузерлердин бардыгы ошол эле жерден башталат - сүрөт үчүн таза кенеп сыяктуу.
Global Defaults
Сиздин мастер стилдер менен башталышы керек кырлары, paddings жана чек араларын алып токтотууда беттеги. Кээ бир браузерлер браузер панели кырына чейин калтырылып 1 же 2 пиксел документтин денесин Стандарттыка. Бул, алар баары бир көрсөтүлүшүн камсыз кылат:
HTML, дене {margin: 0px; толтургучтар: 0px; Чек ара: 0px; }Ошондой эле арип шайкеш келет. Сенин бет да 100 пайызга же 1em менен Тамганын көлөмүн, ко бол жеткиликтүү, ал эми көлөмү дагы келет. Ал сызык бийиктиги камтыйт болушу мүмкүн.
орган {арип: 1em / 1.25 Arial, Helvetica, Sans-Serif; }Башкы Formatting
Аталыш же баш теги (H1, Н2, H3, ж.б.), адатта, алардын тегерегиндеги чоң айырмачылык же төшөмө менен жоон текст демейки. салмагы, чектерин жана толтургуч клиринг менен, сиз, бул теги дагы кошумча стилдерди туруп, алардын айланасында тексти көп (же кичирээк) экендиги камсыздоого:
h1, h2, h3, h4, h5, h6 {margin: 0; толтургучтар: 0; арип өлчөмү: нормалдуу; арип-үй-бүлө: Arial, Helvetica, Sans-Serif; }Сиз баш сөздүү кабарында тегдерге белгилүү бир өлчөмдө, кат-аралыгы жана paddings белгилөө эске алышыбыз керек болот, бирок ал чынында эле сиз иштеп чыгуу жана мастер-стилдин чыгып калышы керек жатасыз сайттын стили көз каранды. Сиз өзгөчө үчүн бул аталыштардын үчүн образын кошууга болот.
Plain Text Formatting
аталыштардан тышкары, сиз тазалоо үчүн сак болушу керек, башка текст теги бар. адамдар көп учурда унутуп бири коюлган стол клетка теги (TH жана TD) жана түрү теги (SELECT, TEXTAREA жана КИРГИЗҮҮ) болуп саналат. Эгер дене жана абзац тексти, ошондой эле өлчөмү ошол коюлган эмес болсо, браузер, аларды чыгарат кандайча жарган калыштуу болушу мүмкүн.
б, чт, ТД, ли, дд, т, ул, ол, шариятка каршы, С, шекери, abbr, бир, киргизүү, тандоо, TEXTAREA {margin: 0; толтургучтар: 0; арип: нормалдуу нормалдуу нормалдуу 1em / 1.25 Arial, Helvetica, Sans-Serif; }Ошондой эле сиздин шилтеме берүү үчүн жакшы (шариятка жана С) да, Кыскартуулар, алар дагы бир аз чыгып турат да, бир аз кошумча стили кыскартуулар:
Blockquote {маржа: 1.25em; толтургучтар: 1.25em} Q {арип стили: жантык; } Дарагынын шекери, abbr {курсор: жардам; чек: 1px өлтүрүлөт; }Шилтемелер жана сүрөттөр
Шилтемелер деп аталган көк белгилешти тексттен башкаруу жана өзгөртүү кыйын болуп саналат. Мен ар дайым менин шилтемелер баса калуу үчүн көрүшөт, бирок аны башка жол менен артык болсо, өз-өзүнчө, бул ыкмаларды орното аласыз. бул долбоор көз каранды, анткени мен да, кожоюну стилдин түстөрдү камтыбайт.
а, а: ссылка, бир: барып, бир: жигердүү, бир: үстүнө {текст кооздугу: белгилейт; }буркандары менен, анын чек аралары өчүрүү үчүн маанилүү. көпчүлүк серепчилер даана айкелдин айланасын чек Статусунда өзгөрүүлөр жок, ал эми, сүрөттөлүш байланыштуу болгондо, серепчилер чек коёт. Бул маселени чечүү үчүн:
IMG {чек ара: эч бири; }Tables
столдор мындан ары жайгашуу максаттар үчүн колдонулат, ал эми, эгерде, сиз сайтта дагы деле чыныгы tabluar маалыматтар үчүн пайдалана алат. Бул HTML үстөлдөргө жакшы пайдалануу болуп саналат. Биз буга чейин жарыяланбаган текст көлөмү Сиздин стол клеткалар үчүн да бирдей экенин камсыз кылып, бирок сиз үстөл эле калыш үчүн өтө зарыл дагы башка бир нече стилдери бар:
стол {margin: 0; толтургучтар: 0; Чек ара: эч бири; }түрлөрү
башка элементтер менен болуп, сен да түрлөрүн жүзүндөгү чектерин жана paddings чыгып кетиши керек. Мен сиз үчүн дагы бир нерсе "деп түрү теги кайрадан саналат камтылган сиз кодду теги коюп кайда кошумча боштук эмес, деп". башка текст элементтери менен эле, бул менин тексттин калган эле деп мен, Үстүнө тандап, бир талаачага жана киргизүү үчүн арип маалыматтарды аныктайт.
түрү {margin: 0; толтургучтар: 0; дисплей: саптагы; }Ошондой эле этикеткалар үчүн курсорду өзгөртүү үчүн бир жакшы ой. Бул учурда ар бир адам, аны басканда жазуучу бир нерсе турганын көрүүгө жардам берет.
этикеткасы {курсор: көрсөткүч; }Common Classes
Кожоюну салынган бул бөлүгү үчүн, аныктоо керек класстарды сага мааниси. Булар мен баарынан көп колдонгон класстардын бири болуп саналат. Алар белгилүү бир элементке белгиленген эмес Белгилей кетсек, ошондуктан, канча сураса, аларды дайындоого болот:
.Бишкекте {түшүнүктүү: экөө тең; } .floatLeft {жадымда: сол; } .floatRight {жадымда: оң; } .textLeft {текстти тегиздөө: сол; } .textRight {текстти тегиздөө: оң; } .textCenter {текстти тегиздөө: борбору; } .textJustify {текстти тегиздөө: актоого; } .blockCenter {дисплей: бөлүгү; маржа-сол: унаам; маржа-оң: унаам; } / * Туурасы * / .bold {арип-салмак коюуга эстеп: кайраттуулук менен; } .italic {арип стили: жантык; } .underline {текст кооздугу: белгилейт; } .noindent {маржа-сол: 0; толтуруу сол: 0; } .nomargin {margin: 0; } .nopadding {толтургучтар: 0; } .nobullet {тизме стилиндеги: эч ким; тизме стилиндеги-сүрөт: эч ким; }Бул класстар эле класс жана башка ар кандай стилдеги мурун жазылган, анткени, алар кийин пайда болгон өзгөчө стили өзгөчөлүктөрү менен жокко жеңил экенин унутпа каскадынын . Эгер сиз элементке жалпы класс жана коюп, ал күчүнө эмес деп таап, анда сиз ошол эле элемент таасир сиздин кийин Стилдерди биринде башка бир стили жок деп кепилдик берүү үчүн текшерүү керек.
Бүтүндөй Master салынган
/ * Global Defaults * / HTML, дене {margin: 0px; толтургучтар: 0px; Чек ара: 0px; } Орган {арип: 1em / 1.25 Arial, Helvetica, Sans-Serif; } / * Саны * / h1, h2, h3, h4, h5, h6 {margin: 0; толтургучтар: 0; арип өлчөмү: нормалдуу; арип-үй-бүлө: Arial, Helvetica, Sans-Serif; } / * Текст стилдери * / б, чт, ТД, ли, дд, т, ул, ол, шариятка каршы, С, шекери, abbr, бир, киргизүү, тандоо, TEXTAREA {margin: 0; толтургучтар: 0; арип: нормалдуу нормалдуу нормалдуу 1em / 1.25 Arial, Helvetica, Sans-Serif; } Blockquote {маржа: 1.25em; толтургучтар: 1.25em} Q {арип стили: жантык; } Дарагынын шекери, abbr {курсор: жардам; чек: 1px өлтүрүлөт; } Чакан {арип өлчөмү: .85em; } Чоң {арип өлчөмү: 1.2em; } / * Шилтемелер жана сүрөттөр * / а, бир: ссылка, бир: барып, бир: жигердүү, бир: үстүнө {текст кооздугу: белгилейт; } IMG {чек ара: эч бири; } / * Tables * / стол {margin: 0; толтургучтар: 0; Чек ара: эч бири; } / * Түрлөрү * / түрү {margin: 0; толтургучтар: 0; дисплей: саптагы; } Этикеткасы {курсор: көрсөткүч; } / * Common класстар * / .Бишкекте {түшүнүктүү: экөө тең; } .floatLeft {жадымда: сол; } .floatRight {жадымда: оң; } .textLeft {текстти тегиздөө: сол; } .textRight {текстти тегиздөө: оң; } .textCenter {текстти тегиздөө: борбору; } .textJustify {текстти тегиздөө: актоого; } .blockCenter {дисплей: бөлүгү; маржа-сол: унаам; маржа-оң: унаам; } / * Туурасы * / .bold {арип-салмак коюуга эстеп: кайраттуулук менен; } .italic {арип стили: жантык; } .underline {текст кооздугу: белгилейт; } .noindent {маржа-сол: 0; толтуруу сол: 0; } .nomargin {margin: 0; } .nopadding {толтургучтар: 0; } .nobullet {тизме стилиндеги: эч ким; тизме стилиндеги-сүрөт: эч ким; }Атайга Krynin тарабынан Original макалада. Jeremy Джирард тарабынан 10/6/17 разм