Шабакаи ноутбук веб саҳифа бо CSS шуд

01 аз 10

Сохтани лавҳаи style CSS

Ҳамин тариқ, мо файли алоҳидаи матнро барои HTML офаридаем, шумо барои сабти матн барои CSS эҷод мекунед. Агар шумо барои ин раванд Visuals лозим аст, лутфан як омӯзиши якумро бинед. Дар ин ҷо қадамҳои бунёдии варақаи CSS-и худ дар Насбкунӣ мебошанд:

1. Барои гирифтани равзанаи холӣ File> Навро дар хотир гиред
2. Файлро ҳамчун CSS сабт кунед бо тугмаи Файл <Нигоҳ кунед ...
3. Ба папкаи my_website дар диски сахтатон равед
4. Тағир додани "Наҷот ҳамчун навъ:" ба "Ҳамаи Муборак"
5. Номи файл "styles.css" -ро номбар кунед (истиноди квотаро истед) ва пахш кунед

02 аз 10

Варақаи CSS-ро ба HTML кунед

Пас аз як варақаи сабки шумо барои вебсайти шумо, шумо бояд онро ба он веб муайян кунед. Барои ин кор шумо аломати пайвандро истифода баред. Забони зеркашӣ дар ҳама ҷое дар дохили tags of document pets.htm кунед:

03 аз 10

Маркетинги саҳифаҳо

Вақте ки шумо XHTML барои браузерҳои гуногун нависед, як чизро омӯхтаед, ки онҳо ҳама чизро ба назар гиранд, ки чӣ гуна онҳо нишон медиҳанд. Беҳтарин роҳи боварӣ ҳосил кунед, ки сомонаи шумо дар ҳамон браузерҳо назар дорад, ки ба чизҳои монанди маржинҳо барои интихоби браузер имкон намедиҳад.

Ман мехоҳам, ки саҳифаҳои худро дар гӯшаи болоии болоии худ оғоз кунам, ки ҳеҷ чизи пурқувват ё маржеро дар атрофи матн намемонад. Ҳатто агар ман ба мундариҷа рафтан мехоҳам, ман сақфҳоро ба сифр гузоштам, то ки ман бо як шишаи бардурӯғ оғоз кунам. Барои ин корро ба ҳуҷҷатҳои styles.css нав кунед:

html, бадан {
margin: 0px;
padding: 0px;
сарҳад: 0px;
left: 0px;
top: 0px;
}}

04 аз 10

Тағйири Font дар саҳифа

Шабака аксар вақт як чизест, ки шумо мехоҳед дар саҳифаи Веб тағир диҳед. Шабакаи корношоям дар веб саҳифа метавонад зишт бошад ва дар ҳақиқат веб браузери худ бошад, пас агар шумо суроғаро муайян накунед, шумо ҳақиқат намедонед, ки саҳифаи шумо чӣ гуна хоҳад буд.

Одатан, шумо ҳарфро дар параграф, ё баъзан дар тамоми ҳуҷҷати худ тағйир медиҳед. Барои ин сайт мо ҳарфро дар сарлавҳа ва сатҳи параграф муайян мекунем. Ба ҳуҷҷатҳои styles.css сабт кунед:

П.,
font: 1em Arial, Helvetica, sans-serif;
}}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}}

Ман бо 1em чун андозаи пойгоҳи ман барои параграфҳо оғоз кардам ва рӯйхати ашёҳоро оғоз кардам, сипас онро барои тасвири миқёси ман дар сарлавҳаҳои ман истифода бурд. Ман интизори он нестам, ки сарлавҳаи тирезаро аз h4 истифода кунед, аммо агар шумо ба нақша гиред, мехоҳед, ки онро тарҷума кунед.

05 аз 10

Пайвастшавиҳои шумо бештар шавқовар

Рангҳои пешфарз барои пайвастҳо мутаносибан санги кабуд ва арғувонӣ мебошанд. Дар ҳоле ки ин стандарт аст, он метавонад ба ранги рангҳои саҳифаҳои шумо мувофиқат накунад, бинобар ин, биёед онро тағир диҳед. Дар файли styles.css шумо, инҳоро илова кунед:

a: link {
font-family: Arial, Helvetica, sans-serif;
ранг: # FF9900;
матн-декор;
}}
a: visited {
ранг: # FFCC66;
}}
a: hover {
background: #FFFFCC;
font-weight: bold;
}}

Ман се усули пайвастаро офаридем: a: link ҳамчун default, a: барои дидани он, ки ман ранги тағйир ёфтааст, ва як: hover. Бо як: hover ман пайвастшавиро рангчаи зеборо ба даст меорам ва диққат медиҳам, ки он пайвастшавиест, ки пайваст карда шудааст.

06 аз 10

Силсилаи Навигатсияро тартиб додан

Азбаски мо қаблан navigation (id = "nav") қисми аввалро дар HTML гузоштем, биёед аввал онро сабр кунед. Мо бояд нишон диҳем, ки то чӣ андоза васеътар ва дар паҳлӯи рости васеъ паҳн карда мешавад, то матни асосии он муқобилат накунад. Ман низ дар атрофи он сарҳадро гузоштам.

Ба CSS-ҳои зерин ба ҳуҷҷатҳои styles.css илова кунед:

#nav {
width: 225px;
margin-right: 15px;
сарҳад: миёна # 000000;
}}
#nav li {
Рӯйхати номуайян: none;
}}
.footer {
андозаи ҳарф: .75em;
равшан: ҳам ҳар ду;
width: 100%;
матн-хато: марказ;
}}

Рӯйхати стандартии номгӯи рӯйхат дар дохили қисмҳои паймоиш, барои нест кардани ададҳо ё рақамҳо, ва рангҳои .footer қисмати ҳуқуқи муаллифро хурдтар ва дар доираи он қисмат мекунад.

07 аз 10

Мавқеи ҷойгиршавии асосӣ

Бо ҷойгиркунии фасли асосии худ бо мавқеи мутлақ шумо метавонед боварӣ ҳосил кунед, ки он дар куҷо мехоҳед, ки дар саҳифаи веб боқӣ монед. Ман ба андозаи 800px васеътар барои мониторинги калонтарро эҷод кардам, вале агар шумо мониторинги хурдтар дошта бошед, шумо метавонед онро ба ҳадди аққал созед.

Дар поён ҳуҷҷати styles.css дар поён оварда шавад:

#main {
width: 800px;
top: 0px;
мавқеъ: мутлақ;
left: 250px;
}}

08 аз 10

Тартиб додани параграфи шумо

Азбаски ман аллакай параграфро дар боло номбар кардам, ман мехостам, ки ҳар як параграфро якҷоя кунам, то ки он беҳтар шавад. Ман инро бо роҳи гузоштани сарлавҳаи болоие, ки параграфро бештар аз танҳо ба танҳо тасвир карда буд, иҷро кардам.

Дар поён ҳуҷҷати styles.css дар поён оварда шавад:

.topline {
сатҳи сарҳадӣ: пурраи ғафс # FFCC00;
}}

Ман тасмим гирифтам, ки онро ҳамчун ҷудосозии "ҷамъомад", на танҳо ба ҳамаи параграфҳо муайян созам. Ин роҳи ман, агар ман тасмим бигирам, ки параграфи бе хатти зард дошта бошам, ман метавонам классификатсияро дар коғази "маҷмӯӣ" тарк кунам ва он сарҳадро дар бар намегирад.

09 аз 10

Шакли тасвирҳо

Тасвирҳо одатан дар гирду атрофи онҳо ҷой доранд, ин на ҳамеша намоён аст, агар тасвири пайвастшавӣ бошад, аммо ман мехоҳам, ки дар дохили CSS сабтҳои клавиатура, ки худкорро ба таври худкор барад. Барои ин сабт, ман синфи "номаҳдуд" -ро офаридаам ва аксарияти тасвирҳо дар ҳуҷҷат қисми ин синф мебошанд.

Дигар қисми махсуси ин тасвирҳо ҷойгиршавии онҳо дар саҳифа мебошанд. Ман мехостам, ки онҳо як қисми порчае бошанд, ки бидуни истифодаи ҷадвалҳо ба онҳо мувофиқ бошанд. Тарзи осонтарини ин кор аз он иборат аст, ки моликияти CSS-ро истифода барад.

Дар поён ҳуҷҷати styles.css дар поён оварда шавад:

#main img {
float: left;
margin-right: 5px;
margin-bottom: 15px;
}}
.noborder {
сарҳад: 0px none;
}}

Тавре ки шумо дидед, инчунин объектҳои маржае, ки дар тасвирҳо ҷойгиранд, мавҷуданд, боварӣ ҳосил кунед, ки онҳо дар муқоиса бо матн, ки дар бандҳои онҳо ҷойгиранд, нестанд.

10 аз 10

Акнун ба саҳифаи пурраи шумо нигаред

Пас аз CSS-и худро захира кунед, шумо метавонед саҳифаи pets.htm -ро дар веб браузер кунед. Саҳифаи шумо бояд ба ҳамон тасвире, ки дар ин тасвир нишон дода шудааст, монанд аст, бо тасвирҳо мувофиқат кунед ва пайраҳаи дурустро дар тарафи чапи саҳифа ҷойгир кунед.

Ҳамаи ин саҳифаҳоро барои ҳамаи саҳифаҳои дохилӣ барои ин сайт иҷро кунед. Шумо мехоҳед як саҳифаро барои ҳар саҳифае, ки дар навишти худ доред, дошта бошед.