Агляд каскадных табліц стыляў з Sample Style Sheet
Пры стварэнні вэб-сайта з нуля, гэта разумна, каб пачаць з асноўнымі стылямі, пэўнымі. Гэта як пачынаючы з чыстым палатном і свежай пэндзлем. Адна з першых праблем , з якімі сутыкаюцца вэб - дызайнераў з'яўляецца тое , што вэб - браўзэры ўсе розныя. Памер шрыфта па змаўчанні адрозніваецца ад платформы да платформе, сямейства шрыфтоў па змаўчанні адрозніваецца, некаторыя браўзэры вызначаюць поля і водступы на бірцы цела ў той час як іншыя гэтага не робяць, і гэтак далей. Атрымаць вакол гэтых неадпаведнасцяў шляхам вызначэння стыляў па змаўчанні для вашых вэб-старонак.
CSS і набор сімвалаў
Першыя рэчы першае, усталяваць набор знакаў вашых CSS дакументаў UTF-8. Хоць цалкам верагодна, што большасць старонак праектуюць напісана на англійскай мове, некаторыя з іх могуць быць лакалізаваны прыстасаваныя для рознага лінгвістычнага і культурнага кантэксту. Калі яны, UTF-8 спрашчае працэс. Настройка набору знакаў у знешняй табліцы стыляў не будзе мець прыярытэт над загалоўкам HTTP , але і ва ўсіх іншых сітуацыях, гэта будзе.
Гэта лёгка ўсталяваць набор знакаў. Для першай лініі CSS дакумента пішуць:
@charset "UTF-8";Такім чынам, калі вы карыстаецеся міжнародныя сімвалы ва ўласцівасці кантэнту або ў якасці імёнаў класаў і ID, табліца стыляў будзе па- ранейшаму працаваць правільна.
Стылізацыя старонку Body
Наступная рэч, стыль па змаўчанні ліста патрэбы стылі абнуліць поля, водступы і межы. Гэта гарантуе, што ўсе браўзэры змясціць змесціва ў тым жа месцы, і няма ніякіх схаваных прастор паміж браўзэрам і зместам. Для большасці вэб-старонак, гэта занадта блізка да краю для тэксту, але вельмі важна, каб пачаць там так, што фонавыя малюнкі і макет падраздзялення выстройваюцца правільна.
HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; }Ўстаноўка пярэдняга плана па змаўчанні ці колер шрыфта на чорны і колер фону па змаўчанні на белы. Хоць гэта, хутчэй за ўсё , змена для большасці вэб - старонкі канструкцый, якія маюць гэтыя стандартныя колеру , устаноўленыя на целе і HTML тэга ў першы робіць старонку лягчэй чытаць і працаваць з.
HTML, цела {колер: # 000; фон: #fff; }Стылі па змаўчанні шрыфта
Памер шрыфта і сям'я то , што непазбежна будзе мяняцца , як толькі дызайн зачне , але пачаць з памерам шрыфта па змаўчанні 1 эм і сямейства шрыфтоў па змаўчанні Arial, Жэнэва, або якім - небудзь іншым шрыфтам без засечак. Выкарыстанне СЭМ захаваць старонку як мага больш даступнымі, і сечаны шрыфт больш разборлівым на экране.
HTML, цела, р, й, тд, Li, дд, Да й {шрыфта: 1em Arial, Helvetica, без засечак; }Там могуць быць і іншыя месцы , дзе вы маглі б знайсці тэкст, а р, й, тд, літый, дд, і Да й з'яўляюцца добрым пачаткам для вызначэння базавай шрыфта. Ўключыць HTML і цела на ўсялякі выпадак, але многія браўзэры перавызначыць выбар шрыфта , калі вы толькі вызначыць свае шрыфты для HTML або цела.
апошнія навіны
HTML загалоўкі важна выкарыстоўваць, каб дапамагчы вашаму сайту схему, і хай пашукавікі глыбей у ваш сайт. Без стыляў, усе яны даволі выродлівыя, таму набор стыляў па змаўчанні на ўсіх з іх і вызначыць сямейства шрыфтоў і памер шрыфта для кожнага.
h1, h2, h3, h4, h5, h6 {сямейства шрыфтоў: Arial, Helvetica, без засечак; } H1 {памер шрыфта: 2em; } H2 {памер шрыфта: 1.5em; } H3 {памер шрыфта: 1.2em; } H4 {памер шрыфта: 1.0em; } H5 {памер шрыфта: 0.9em; } H6 {памер шрыфта: 0.8em; }Don & # 39; т Забудзьцеся спасылкі
Стылізацыя колеру спасылак амаль заўсёды з'яўляецца важнай часткай дызайну, але калі вы не вызначылі іх у стылі па змаўчанні, хутчэй за ўсё, вы забудзецеся пра тое, па меншай меры, адзін з псеўда-класаў. Вызначце іх з некаторым невялікім змяненнем на сінім, а затым змяніць іх, як толькі вы каляровую палітру для сайта вызначаны.
Для таго, каб усталяваць сувязь у адценнях сіняга, набор:
- спасылкі як сіні
- наведаныя спасылкі , як цёмна - сіні
- парыць спасылкі як светла - блакітны
- актыўныя спасылкі , так як нават бялейшы сіні
як паказана ў наступным прыкладзе:
а: спасылка {колер: # 00f; } А: наведаў {колер: # 009; } А: завісаць {колер: # 06F; } А: актыўны {колер: # 0cf; } Па стылізацыі спасылкі з даволі бяскрыўднай каляровай гаме, што гарантуе, што я не забуду ні аднаму з класаў, а таксама робіць іх няшмат менш гучным, чым па змаўчанні сіні, чырвоны і фіялетавы.Поўны ліст Стыль
Вось поўная табліца стыляў:
@charset "UTF-8"; HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; колер: # 000; фон: #fff; } HTML, цела, р, й, тд, Li, дд, Да й {шрыфта: 1em Arial, Helvetica, без засечак; } H1, h2, h3, h4, h5, h6 {сямейства шрыфтоў: Arial, Helvetica, без засечак; } H1 {памер шрыфта: 2em; } H2 {памер шрыфта: 1.5em; } H3 {памер шрыфта: 1.2em; } H4 {памер шрыфта: 1.0em; } H5 {памер шрыфта: 0.9em; } H6 {памер шрыфта: 0.8em; } А: спасылка {колер: # 00f; } А: наведаў {колер: # 009; } А: завісаць {колер: # 06F; } А: актыўны {колер: # 0cf; }