CSS менен Notepad Created Желе Page Styling

01 10

CSS стилдер жадыбалы түзүү

CSS стилдер жадыбалы түзүү. Атайга Kyrnin

Биз HTML үчүн өзүнчө тексттик түзүлгөн эле, сиз CSS үчүн тексттик түзөт. Эгер бул иш үчүн көрүнөө керек болсо биринчи куралы кара. Бул жерде Нотпадда сиздин CSS стилдер жадыбалы түзүү кадам болуп саналат:

  1. Тандоо File> Нотпадда Болумушту бош терезени алуу
  2. сиздин катуу дисктин my_website куржунга өтүү
  3. "Save катары Түрү:" өзгөртүү үчүн, "Бардык Files"
  4. Сиздин Имя "styles.css" (Тырмакчаларды токтотуп) жана Сактоо

02 10

Сиздин HTML үчүн CSS стилдер жадыбалы -га шилтеме берген барактар

Сиздин HTML үчүн CSS стилдер жадыбалы байланыштыруу. Атайга Kyrnin

Эгер сайттан үчүн стилдер жадыбалы бар болсо, сиз Желе баракчасы өзүнө шерик керек. Сиз шилтеме теги пайдаланууга Бул үчүн. <Башына> ичинде каалаган төмөнкү шилтеме теги жерге pets.htm документтин Tags:

<Шилтеме Гуппи "styles.css" Отчёттун = "стилдер" түрү = "текст / CSS">

03 10

Page Чектерди Fix

Page Чектерди Fix. Атайга Kyrnin

Эгер башка браузерлер учун XHTML жазып жатабыз, бир нерсе, алар бардык нерсени чагылдыра үчүн ар кандай чектерин жана эрежелери бар окшойт деп билебиз. силердин сайт жолу экенине көзүбүз жеткидей болушу үчүн, көпчүлүк интернет-браузерлерде эле карап Талаалар сыяктуу нерселер браузер тандоо демейки жол бербешибиз керек.

Мен текстти курчап турган эч кандай кошумча толтургучтар же айырма менен, жогорку сол бурчунда менин беттерин баштоо үчүн көрүшөт. Мен мазмунун аянтка бара жатам да, мен бир эле бош орундукка баштап жатам деп нөлгө чектерин койду. Бул үчүн, styles.css документ төмөнкүдөй толукталсын:

HTML, дене {
margin: 0px;
толтургучтар: 0px;
Чек ара: 0px;
сол: 0px;
топ: 0px;
}

04 10

Page боюнча Font өзгөртүү

Page боюнча Font алмаштыруу. Атайга Kyrnin

арип көбүнчө Желе-беттеги өзгөртүү келет биринчи нерсе. Желе-беттеги жарыяланбаган арип суук, ал эми интернет браузер өзү чейин иш жүзүндө эмес болушу мүмкүн, ошондуктан арип аныктама жок болсо, анда силер чын эле сенин бет көрүнөт билбей калат.

Адатта, сен-пункттарында боюнча арип, же кээде бүт документтин өзүнө өзгөрмөк. Бул сайт үчүн биз баш жана пункт деъгээлинде арип аныктоого болот. Сиздин styles.css документ төмөнкүдөй кошуу:

б, ли {
арип: 1em Arial, Helvetica, Sans-Serif;
}
h1 {
арип: 2em Arial, Helvetica, Sans-Serif;
}
h2 {
арип: 1.5em Arial, Helvetica, Sans-Serif;
}
h3 {
арип: 1.25em Arial, Helvetica, Sans-Serif;
}

Пункттарында жана тизме заттар үчүн базалык өлчөмү катары 1em менен баштаган, андан кийин менин аталыштар үчүн өлчөмүн коюуга үчүн колдонгон. Мен гезити H4 да көптү пайдалануу деп күтпөйбүз, бирок сиз пландап болсо, ошондой эле аны стилдештирүүнү келет.

05 10

Даярдоо Сиздин Links More Кызыктуу

Сиздин Links More Кызыктуу даярдоо. Атайга Kyrnin

шилтемелери үчүн демейки түстөр жараша басылган жана байланыш үчүн ачык көк, ачык кызыл, кочкул болуп саналат. Бул типтүү болуп саналат да, ал беттен түс схемасын дал келбеши мүмкүн, ошондуктан, аны өзгөртүп көрөлү. Сиздин styles.css делосуна төмөнкүдөй толукталсын:

шилтеме {
арип-үй-бүлө: Arial, Helvetica, Sans-Serif;
түс: # FF9900;
текст кооздугу: белгилейт;
}
а: барган {
түс: # FFCC66;
}
а: үстүнө {
маалымат: #FFFFCC;
арип өлчөмү: тайманбастык менен;
}

Мен үч шилтеме образын түзүү, аны: абалкы катары шилтемени, бир: ал келип калган учурда келип, мен түсүн өзгөртүп, жана: Hover. Менен: тамдын Мен шилтеме арткы түсүн алууга жана баскандыгы үчүн шилтеме экенин баса белгилөө үчүн тайманбастык менен бара бар.

06 10

Багыттоо Рубрика Styling

Багыттоо Рубрика Styling. Атайга Kyrnin

Биз өтүү (ID = "Nav") HTML биринчи бөлүмүн көчүргөндүктөн, стили биринчи көрөлү. негизги текст ага каршы чалынбайт, деп Биз ал кандай болушу керек экенин, туурасы көрсөтүп турат жана оң жагына көбүрөөк чектен керек. Мен да аны тегерете чек койду.

Сиздин styles.css документ төмөнкү CSS кошуу:

#nav {
туурасы: 225px;
маржа-оң: 15px;
Чек ара: орто катуу # 000000;
}
#nav Ли {
тизме стилиндеги: эч ким;
}
.footer {
арип өлчөмү: .75em;
түшүнүктүү: экөө тең;
жазылыгы: 100%;
текстти тегиздөө: борбору;
}

тизме стилиндеги мүлк эч кандай ок же сандардан бар багыттоо бөлүмгө ичинде тизмесин белгилейт, жана .footer образын кичирээк жана бөлүмүнүн тартуучу борбор болорун белгиледи укук бөлүмүн.

07 10

Негизги Рубрика жайгаштырабыз

Негизги Рубрика жайгаштырабыз. Атайга Kyrnin

шартсыз жайгаштыруу менен негизги көрүү абалын менен ал аны Желе-беттеги калууну каалаган жерде так калып калат деп ишенсек болот. Мен көп байкоочулары келтиришсин кең 800px, ал эми силер бир аз мониторду бар болсо, тар экенин чыгарууга умтулушу мүмкүн болду.

Сиздин styles.css документте төмөнкүлөрдү:

#main {
туурасы: 800px;
топ: 0px;
орду: абсолюттук;
сол: 250px;
}

08 10

Styling Сиздин-пункттарында

Сиздин пункттарында Styling. Атайга Kyrnin

Мен жогоруда пункт арип койдук болгондуктан, ар бир пунктун жакшы чыгып үчүн бир аз кошумча "тээп" берип келген. жалгыз гана сүрөтү караганда пункту баса үстүнө бир чек коюу менен, бул мен.

Сиздин styles.css документте төмөнкүлөрдү:

.topline {
чек-ара-топ: коюу катуу # 00EAEA;
}

Мен ошол эле жол менен бардык пункттары аныктоо эмес, тескерисинче, "төштүү" деп аталган бир класска муну чечтим. Мына ушундай жол менен, мен жогорку сары сапта бир пункт бар үчүн чечип, мен жөн гана абзац тег менен класс = "төштүү" токтотуп жана жогорку чек ээ эмес болот.

09 10

Images Styling

Images Styling. Атайга Kyrnin

Images, адатта, аларды тегеректеп турган чек бар, бул сүрөт шилтеме болсо, ар дайым көзгө анчалык эмес, бирок, мен дароо чек өчөт менин CSS стилдер ичинде бир класс үчүн жагат. Бул стилдер үчүн, мен "noborder" классты, жана документке сүрөттөрдүн көпчүлүк бул тобуна бир бөлүгү болуп саналат.

бул сүрөттөлүштөрдүн жана башка атайын бөлүгү беттеги алардын жайгашкан жери болуп саналат. Мен алардын түздөп, үстөлдөрүн колдонбостон эле пункттун бир бөлүгү болуп келген. Бул эмне үчүн жөнөкөй жолу жадымда CSS мүлктү колдонуу болуп саналат.

Сиздин styles.css документте төмөнкүлөрдү:

#main IMG {
сүзүп: сол;
маржа-оң: 5px;
маржа-Төмөндө: 15px;
}
.noborder {
Чек ара: 0px жок;
}

Көрүнүп тургандай, алар-пункттарында алардын жанындагы калкып текст каршы талкалап жок кылыш үчүн эмнелерди кылсак болорун, ошондой эле сүрөттөр коюлган маржа касиеттери бар.

10 10

Азыр Толтурулган Page карагыла

Азыр бүткөн Page карагылачы. Атайга Kyrnin

Эгер CSS сакталган кийин сиздин браузерде pets.htm баракты алат. Сиздин бет түздөлгөн буркандары менен сүрөттө көрсөтүлгөндөй, бири, жана беттин сол жагына туура жайгаштырылган багыттоо окшош болушу керек.

Бул сайт үчүн ички баракчалардын ичиндеги баарын үчүн ушундай кадамдар керек. Сиз багыттоо ар бир барактын бир барак бар.