Үлгі стилі парағы бар каскадты мәнерлер кестелеріне шолу
Веб-сайтты нөлден құрастырған кезде, анықталған негізгі мәнерлерден бастау керек. Бұл таза кенептен және жаңа қылшықтардан бастау сияқты. Веб-дизайнерлердің алдында тұрған алғашқы проблемалардың бірі - бұл веб-браузерлердің әр түрлі. Әдепкі қаріп өлшемі платформаға платформаға қарағанда ерекшеленеді, әдепкі қаріп тұқымдары әртүрлі, кейбір шолғыштар маржаны анықтайды және басқалар жасамайды, ал басқалары болмайды. Веб беттеріңіз үшін әдепкі мәнерлерді анықтау арқылы осы сәйкессіздіктерге айналаңыз.
CSS және таңбалар жиыны
Алдымен, біріншіден, CSS құжаттарының таңбалар жиынтығын utf-8-ге орнатыңыз . Сіз жасаған беттеріңіздің көбі ағылшын тілінде жазылған болса да, кейбіреулер әртүрлі лингвистикалық және мәдени контекст үшін бейімделуі мүмкін. Олар кезде utf-8 процесті жеңілдетеді. Сыртқы стиль кестесінде таңбалар жиынтығын орнату HTTP тақырыбынан артық болмайды, бірақ барлық басқа жағдайларда ол болады.
Таңбалар жиынын орнату оңай. CSS құжатының бірінші жолында:
@charset «utf-8»;Мәселен, мазмұн сипатында халықаралық таңбаларды пайдалансаңыз немесе сынып және идентификатор атаулары ретінде , мәнер парағы дұрыс жұмыс істей береді.
Бет бөлігін сәндеу
Келесі әдепкі стиль кестесінің мұқтаждықтары - шеттерін, толтырғыштарды және шекараларды нөлдеуге арналған стильдер. Бұл барлық браузерлердің мазмұнды бір жерде орналастыратынын және браузер мен мазмұн арасында ешқандай жасырын кеңістіктердің болмауын қамтамасыз етеді. Көптеген веб-беттер үшін бұл мәтіннің шетіне өте жақын, бірақ фондық суреттер мен орналасу бөлімдерінің дұрыс салынғаны үшін бастау керек.
html, body {margin: 0px; толтыру: 0px; шекара: 0px; }Әдепкі алдын-ала немесе қаріп түсін қара және әдепкі өң түсін ақ түске орнатыңыз. Бұл, ең алдымен, көптеген веб-беттер дизайны үшін өзгереді, алайда бұл стандартты түстер денеге орнатылады және алдымен HTML тегі бетті оңай оқып, жұмыс істейді.
html, body {түсі: # 000; фон: #fff; }Әдетті шрифт стилі
Қаріп өлшемі мен қаріп шоғыры дизайны орын алғаннан кейін сөзсіз өзгереді, бірақ 1 em әдепкі шрифт өлшемінен және Arial, Женева немесе әйнектің басқа қаріптерінің әдепкі қаріптерінен басталады. Ems-ді пайдалану бетті мүмкіндігінше қолжетімді етіп ұстап отырады, ал sans-serif қарібі экранда анық болады.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Мәтінді таба алатын басқа орындар болуы мүмкін, бірақ p , th , td , li , dd және dt негізгі қаріптің анықталуына жақсы бастама болып табылады. HTML және корпусты тек қана қосыңыз, бірақ HTML немесе корпус үшін қаріптерді анықтасаңыз, көптеген шолғыштар қаріп таңдауларын ауыстырады.
Тақырыптар
HTML тақырыптары сіздің сайтыңыздың құрылымына көмектесу үшін және іздеу жүйелерінің сіздің сайтыңызға тереңірек енуіне көмектесу үшін маңызды. Стильдер жоқ, олар өте нашар, сондықтан олардың барлығында әдепкі мәнерлерді орнатыңыз және қаріптер отбасын және әрқайсысының қаріп өлшемдерін анықтаңыз.
h1, h2, h3, h4, h5, h6 (font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Сілтемелерді ұмытпаңыз
Сілтеме түстерін жасау әрдайым әрқашан дизайнның маңызды бөлшегі болып табылады, бірақ әдепкі мәнерлерде оларды анықтамасаңыз, кем дегенде біреудің жалған сыныптарын ұмытыңыз. Оларды аздаған кішкене вариациялармен анықтап, оларды анықтаған сайт үшін түс бояғышты болғаннан кейін өзгертіңіз.
Көк түстердегі сілтемелерді орнату үшін, мынаны орнатыңыз:
- сілтемелерді көк түсте
- сілтемелерді көгілдір түсті ретінде көрді
- сілтемелерді ашық көк түспен апарыңыз
- тіпті көкіректің көк түстегі белсенді байланыстары
бұл мысалда көрсетілгендей:
a: link {color: # 00f; } a: барған {color: # 009; } a: hover {color: # 06f; } a: белсенді {color: # 0cf; } Сілтемелерді жеткілікті безумный түстік схемамен стильдеу арқылы сыныптардың ешқайсысын ұмытпаймын, сондай-ақ олар әдепкі көк, қызыл және күлгіннен әлдеқайда күшті етеді.Толық стильдер кестесі
Мұнда толық стиль кестесі:
@charset «utf-8»; html, body {margin: 0px; толтыру: 0px; шекара: 0px; түсі: # 000; фон: #fff; html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 (font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: барған {color: # 009; } a: hover {color: # 06f; } a: белсенді {color: # 0cf; }