01 з 10
Стварэнне CSS стыляў
Такім жа чынам мы стварылі асобны тэкставы файл для HTML, вы будзеце ствараць тэкставы файл для CSS. Калі вам патрэбныя візуальныя эфекты для гэтага працэсу можна знайсці першы падручнік. Вось крокі, каб стварыць свой CSS стыляў у нататніку:
- Выберыце Файл> Стварыць у нататніку, каб атрымаць пустое акно
- Захавайце яго CSS, націснуўшы Файл <Захаваць як ...
- Перайдзіце да my_website тэчку на цвёрдым дыску
- Змяніць "Тып Save As:" на "All Files"
- У назве файла «styles.css» (Перастаньце двукоссі) і націсніце кнопку Захаваць
02 з 10
Спасылка на CSS стыляў для вашага HTML
Пасля таго, як вы атрымалі табліцу стыляў для вашага вэб-сайта, вам неабходна звязаць яго з самай вэб-старонкі. Для гэтага выкарыстоўваецца спасылка тэг. Змесціце наступную спасылку тэг у любым месцы ў межах
тэгі вашага pets.htm дакумента:<Спасылка HREF = отн = тып "styles.css" "табліца стыляў" = "тэкст / CSS">
03 з 10
Замацаваць палёў старонак
Калі вы пішаце XHTML для розных браўзэраў, адна рэч, якую вы даведаецеся, што ўсе яны, здаецца, маюць розныя поля і правілы для таго, як яны паказваюць рэчы. Лепшы спосаб пераканацца, што ваш сайт выглядае аднолькава ў большасці браўзэраў, каб не дазволіць такіх рэчаў, як маржы па змаўчанні для выбару браўзэра.
Я аддаю перавагу, каб пачаць свае старонкі ў верхнім левым куце, без дадатковай пракладкі або краёў вакол тэксту. Нават калі я буду раздуць змесціва, я ўсталяваць поле да нуля, так што я пачынаю з тым жа чыстым лістом. Каб зрабіць гэта, дадайце наступныя радкі ў styles.css дакумента:
HTML, цела {
Маржа: 0px;
абіўка: 0px;
мяжы: 0px;
Злева направа: 0px;
топ: 0px;
}
04 з 10
Змена шрыфта на старонцы
Шрыфт часта першая рэч, якую вы хочаце змяніць на вэб-старонцы. Па змаўчанні шрыфта на вэб-старонцы можа быць пачварным, і на самай справе да самога браўзэра, так што калі вы не вызначыць шрыфт, вы сапраўды не ведаеце, што ваша старонка будзе выглядаць.
Як правіла, вы б змяніць шрыфт на абзацы, а часам і на самай ўвесь дакумент. Для гэтага сайта мы вызначым шрыфт на ўзроўні загалоўка і абзаца. Дадайце наступны радок у ваш styles.css дакумента:
р, Li {
шрыфта: 1em Arial, Helvetica, без засечак;
}
h1 {
Шрыфт: 2em Arial, Helvetica, без засечак;
}
h2 {
шрыфта: 1.5em Arial, Helvetica, без засечак;
}
h3 {
Шрыфт: 1.25em Arial, Helvetica, без засечак;
}
Я пачаў з 1em як мой базавы памер для параграфаў і пунктаў спісу, а затым выкарыстаў гэта, каб усталяваць памер для маіх загалоўкаў. Я не чакаю, каб выкарыстоўваць загаловак глыбей, чым h4, але калі вы плануеце вы хочаце стылізаваць яго.
05 з 10
Афармленне Спасылкі больш цікавым
Стандартныя колеру для спасылак сінія і фіялетавыя для ненаведванне і наведаных спасылак адпаведна. Хоць гэта стандарт, ён можа не адпавядаць каляровай гаме вашых старонак, таму давайце зменім яго. У файле styles.css, дадайце наступнае:
а: спасылка {
сямейства шрыфтоў: Arial, Helvetica, без засечак;
колер: # FF9900;
тэкст-аздабленне: падкрэсліць;
}
а: наведаў {
колер: # FFCC66;
}
а: завісаць {
фон: #FFFFCC;
напісанне шрыфта: тоўсты;
}
Я стварыў тры стылю лініі сувязі, а: спасылка як па змаўчанні, а: наведаў, калі ён быў наведваючы, змяніць колер, і: лунанне. З: висения ў мяне ёсць спасылка атрымаць колер фону і ісці адважна падкрэсліць, што гэта спасылка будзе націснутая.
06 з 10
Стылізацыя раздзел навігацыі
Так як мы змяшчаем навігацыі (ID = «нав») частка першай у HTML, давайце стыль яго першым. Нам трэба, каб паказаць, наколькі шырока яна павінна быць і паставіць больш шырокі запас на правай баку, так што асноўны тэкст не будзе удараць супраць яго. Я таксама пакласці мяжу вакол яго.
Дадайце наступны CSS да вашага styles.css дакумента:
#nav {
шырыня: 225px;
Маржа направа: 15px;
мяжа: сярэдні цвёрды # 000000;
}
#nav Li {
спіс-стыль: не;
}
.footer {
Памер шрыфта: .75em;
ясна: тое і іншае;
шырыня: 100%;
выраўноўвання тэксту: цэнтр;
}
Ўласцівасць спісу стылю ўсталёўвае спіс у раздзеле навігацыі, не мае маркераў ці нумары, а таксама стылі .footer ў раздзел аб аўтарскіх правоў будзе менш і па цэнтры ў межах падзелу.
07 з 10
Пазіцыянаванне Асноўны раздзел
Пазіцыянуючы свой асноўны раздзел Абсалютна размешчаны, вы можаце быць упэўнены, што ён будзе заставацца менавіта там, дзе вы хочаце, каб застацца на вашай вэб-старонцы. Я зрабіў маё 800px у шырыню, каб змясціць вялікія маніторы, але калі ў вас ёсць меншы манітор, вы можаце зрабіць гэта ўжо.
Змесціце наступнае ў вашым styles.css дакуменце:
#main {
шырыня: 800px;
топ: 0px;
пазіцыя: абсалютная;
Злева направа: 250px;
}
08 з 10
стылізацыя абзацаў
Так як я ўжо усталяваў пункт шрыфт вышэй, я хацеў бы даць кожнаму пункт трохі больш «удару», каб зрабіць яго вылучыцца лепш. Я зрабіў гэта, паставіўшы мяжу на вяршыні, што выдзеленая гэты пункта больш, чым проста толькі малюнкі.
Змесціце наступнае ў вашым styles.css дакуменце:
.topline {
мяжы зверху: тоўсты цвёрды # FFCC00;
}
Я вырашыў зрабіць гэта як клас пад назвай «Вядомы», а не проста вызначыць усе пункты ў гэтым шляху. Такім чынам, калі я вырашу, што я хачу мець пункт без верхняй жоўтай лініі, я магу проста сысці ад класа = "» верху ў пункце тэга, і ён не будзе мець верхнюю мяжу.
09 з 10
стылізацыя Выявы
Выявы звычайна маюць рамку вакол іх, гэта не заўсёды відаць, калі малюнак не з'яўляецца спасылкай, але я хацеў бы мець клас у маім CSS стыляў, які выключае мяжу аўтаматычна. Для гэтага табліцы стыляў, я стварыў клас «noborder», і большасць малюнкаў у дакуменце, з'яўляецца часткай гэтага класа.
Іншая асаблівая частка гэтых малюнкаў з'яўляецца іх размяшчэнне на старонцы. Я хацеў, каб быць часткай гэтага пункта яны былі ў без выкарыстання табліц для выраўноўвання іх. Самы просты спосаб зрабіць гэта, каб выкарыстоўваць ўласцівасць CSS з якая плавае кропкай.
Змесціце наступнае ў вашым styles.css дакуменце:
#main IMG {
плаваць: злева;
Маржа направа: 5px;
край дно: 15px;
}
.noborder {
мяжы: 0px няма;
}
Як вы можаце бачыць, ёсць таксама маржынальнасць ўласцівасці, устаноўленыя на малюнак, каб пераканацца, што яны не разбілі супраць перамяшчанага тэксту, які побач з імі ў пунктах.
10 з 10
Цяпер паглядзім на Запоўненая Старонка
Пасля таго, як вы захавалі ваш CSS вы можаце перазагрузіць старонку pets.htm ў вашым вэб-браўзэры. Ваша старонка павінна выглядаць так, як паказана на малюнку, з выявамі выраўнаваных і навігацыі размешчаны правільна на левай баку старонкі.
Выканайце тыя ж дзеянні для ўсіх вашых унутраных старонак для гэтага сайта. Вы хочаце мець адну старонку для кожнай старонкі ў навігацыі.