Осы кеңестермен фактілерді алыңыз
Барлық веб-браузерлерде «defauly стильдері» деп аталатын нәрсе бар. Бұл стильдердің кез-келген ақпараты болмаған кезде HTML элементтерінің көрінісі мен сезімін қалыптастыратын стильдер. Мысалы, дерлік әрбір браузерде еренсілтемелердің әдепкі көрінісі астын сызылған ашық көк түс болып табылады. Міне, осы сілтемелер оларды басқа жолмен көрсетпесеңіз, көрінеді.
Әдепкі браузер стилі пайдалы болуы мүмкін, бірақ көптеген жағдайларда веб-дизайнерлер бұл стильдерді алып тастауды қалайды, сонда олар 100% басқаруға болатын стильдермен жаңарта алады. Бұл «master stylesheet» деп аталатын нәрсе арқылы жасалады.
Мастер стилі парағы барлық құжаттарыңызда қоңырау шалған алғашқы стильдер кестесі болуы керек. Веб-браузер веб-дизайнында ақаулықтар тудыруы мүмкін әдепкі браузер параметрлерін тазарту үшін негізгі стиль кестесін қолданасыз. Мастер стильдер кестесімен стильдерді тазартқаннан кейін, дизайныңыз барлық браузерлерде бірдей жерден басталады - кескіндеме үшін таза кенеп сияқты.
Жаһандық әдепкі параметрлер
Сіздің мастер стиль кестеңіз беттің шеттерін, толтыруларын және шекараларын нөлден бастау арқылы бастауы керек. Кейбір веб-браузерлер құжаттың корпусын браузер тақтасының шеттерінен шығырылған 1 немесе 2 пикселге теңестіреді. Бұл олардың барлығы бірдей көрсететініне көз жеткізеді:
html, body {margin: 0px; толтыру: 0px; шекара: 0px; }Сондай-ақ, қаріптің дәйектілігін жасағыңыз келеді. Сондай-ақ, сіздің бетіңіз қол жетімді болуы үшін, қаріп өлшемін 100 пайызға немесе 1EM етіп орнатыңыз, бірақ мөлшері әлі де бірдей. Жолдың биіктігін қосқаныңызға сенімді болыңыз.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Тақырыптың пішімі
Тақырып немесе тақырып тегтері (H1, H2, H3, және т.б.), әдетте, үлкен шеттермен немесе олардың айналасында толтырылған мәтінді қою әдепкі депкі. Салмақ, шеттер мен толтыруларды тазалау арқылы қосымша тегтер болмай, айналасындағыларға қарағанда бұл тегтер әлі де үлкен (немесе кішірек) болып қалады:
h1, h2, h3, h4, h5, h6 {margin: 0; толтыру: 0; қаріптің салмағы: қалыпты; font-family: Arial, Helvetica, sans-serif; }Сіз өзіңіздің тақырып тегтеріңізге нақты мөлшерді, хат-аралықты және толтыруларды орнатуды қарастырғыңыз келуі мүмкін, бірақ сіз шынымен жобаланған сайттың стиліне байланысты және мастер стилінің парағынан тыс қалуы керек. Арнайы дизайныңыз үшін осы тақырыптарға қосымша мәнерлерді қосуға болады.
Кәдімгі мәтінді пішімдеу
Тақырыптардан басқа, басқа да мәтіндік тегтер бар. Адамдар жиі ұмытып кеткендер - кесте ұяшық тегтері (TH және TD) және пішін тегтері (SELECT, TEXTAREA және INPUT). Егер сіз оларды денеңізбен және параграф мәтінімен бірдей мөлшерде орнатпасаңыз, браузерлер оларды қалай көрсететініне жағымсыз таңқаларыңыз мүмкін.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, енгізу, select, textarea {margin: 0; толтыру: 0; Қаріп: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Сондай-ақ, сіздің баға белгілеріңізді (BLOCKQUOTE және Q), акронимдерді және аббревиатураларды сәл қосымша стильдермен қамтамасыз ету өте жақсы, сондықтан олар біраздан ерекшеленеді:
blockquote {margin: 1.25em; толтыру: 1.25em} q {қаріп стилі: курсив; } акроним, abbr {курсор: help; төменгі шекара: 1px dashed; }Сілтемелер мен суреттер
Сілтемелер оңай басқарылады және жоғарыда аталған ашық көк түсті сызылған мәтіннен өзгереді. Мен әрдайым сілтемелерімнің асты сызылғанын қалаймын, бірақ егер сіз осы опцияларды бөлек орнатсаңыз басқа тәсілмен қаласаңыз. Мен сондай-ақ мастер стиліндегі параққа кірмеймін, себебі бұл дизайнға байланысты.
a, a: сілтемені, a: visited, a: active, a: hover {text-decoration: underline; }Суреттермен шекараларды өшіру маңызды. Көптеген браузерлер кәдімгі сурет айналасында шекараны көрсетпесе де, суретті байланыстыру кезінде браузерлер шекараны қосады. Мұны түзету үшін:
img {border: none; }Кестелер
Кестелер орналасу мақсаттары үшін енді пайдаланылмаса да, сіз оларды әлі де нақты таблиар деректеріне пайдалануыңыз мүмкін. Бұл HTML кестелерін тамаша пайдалану. Біз әдепкі мәтіндік өлшемдердің кесте ұяшықтары үшін бірдей екеніне көз жеткіздік, бірақ кестелердің бірдей болуын қамтамасыз ететін бірнеше басқа стильдер бар:
table {margin: 0; толтыру: 0; шекара: жоқ; }Формалар
Басқа элементтерге ұқсағандай, сіз өзіңіздің нысандарыңыздың шеттерін және шеттерін тазартыңыз. Мен ұнататын тағы бір нәрсе - бұл пішін тегін « ішкі » ретінде қайта жазу, ол тегті кодқа орналастыратын қосымша орынды қоспайды. Басқа мәтіндік элементтермен қатар, таңдаймын, textarea және жоғарыдағы кіріс үшін қаріп туралы ақпаратты анықтаймын, бұл менің мәтінімнің қалған бөлігі сияқты.
form {margin: 0; толтыру: 0; көрсету: inline; }Сондай-ақ, белгілеріңізге курсорды өзгерту идеясы. Бұл адамдар жапсырма оны басқан кезде бір нәрсе жасайтынын көруге көмектеседі.
белгі (курсор: көрсеткіш; }Жалпы сыныптар
Мастер стиль кестесінің бұл бөлімі үшін сізге түсінікті сабақтарды анықтау керек. Бұл мен жиі қолданатын кейбір сыныптар. Олар белгілі бір элементке орнатылмағанын ескеріңіз, сондықтан сіз оларды қажет нәрселерге тағайындай аласыз:
.clear {анық: екеуі де; } .floatLeft {float: сол; } .floatRight {float: оң; } .textLeft {text-align: left; } .textRight {text-align: оң; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * енін орнатуды есте сақтаңыз * / .bold {font-weight: bold; } .italic {font-style: курсив; }. {line-text-decoration: underline; } .сіз {margin-left: 0; толтыру-сол: 0; } .nomargin {margin: 0; } .nopadding {толтыру: 0; } .nobullet {list-style: none; list-style-image: none; }Есіңізде болсын, бұл сыныптар кез-келген басқа стильдерден бұрын жазылғандықтан және олар жай ғана сыныптар болғандықтан, олар кейінгі каскадта пайда болатын ерекше стиль сипаттары бар жазуларды жеңілдетеді. Егер сіз элементтің жалпы сыныбын орнатқаныңызды және ол күшіне енбейтінін байқасаңыз, сол элементке әсер ететін кейінгі стиль кестелерінің бірінде басқа стиль жоқтығын тексеру керек.
Толық Master Stylesheet
/ * Ғаламдық Әдепкі параметрлер * / html, body {margin: 0px; толтыру: 0px; шекара: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Тақырыптар * / h1, h2, h3, h4, h5, h6 {margin: 0; толтыру: 0; қаріптің салмағы: қалыпты; font-family: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, енгізу, select, textarea {margin: 0; толтыру: 0; Қаріп: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; толтыру: 1.25em} q {қаріп стилі: курсив; } акроним, abbr {курсор: help; төменгі шекара: 1px dashed; } кішкентай {font-size: .85em; } үлкен {font-size: 1.2em; } / * Сілтемелер мен суреттер * / a, a: сілтеме, a: барған, a: белсенді, a: hover {text-decoration: underline; } img {border: none; } / * Кестелер * / table {margin: 0; толтыру: 0; шекара: жоқ; } / * Формалар * / form {margin: 0; толтыру: 0; көрсету: inline; } жапсырма {курсор: көрсеткіш; } / * Common Classes * / .clear {clear: екеуі де; } .floatLeft {float: сол; } .floatRight {float: оң; } .textLeft {text-align: left; } .textRight {text-align: оң; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * енін орнатуды есте сақтаңыз * / .bold {font-weight: bold; } .italic {font-style: курсив; }. {line-text-decoration: underline; } .сіз {margin-left: 0; толтыру-сол: 0; } .nomargin {margin: 0; } .nopadding {толтыру: 0; } .nobullet {list-style: none; list-style-image: none; }Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard 10/6/17 жылы редакцияланған