CSS менен Fancy Бөрк жасоо

Колдонуу Fonts, чектерди, сүрөт үчүн Decorate кабарлар

Жалпы маалыматтардын саны көпчүлүк интернет-беттердеги кездешет. Чынында эле, сен окуп эмне деген наамга билүү ушунчалык сулуу кандайдыр бир тексттик документ, жок эле дегенде, бир кабарында ээ кылат. Бул гезити HTML карай элементтерин колдонуу жолу бар - h1, h2, h3, h4, h5, жана h6.

Сиз айрым сайттардан гезити бул элементтерин колдонуу жок код деп табышы мүмкүн. Анын ордуна, гезити атайын класстык атрибуттары аларга кошулуп, же бөлүмдөрдүн класстык элементтери менен пункттары пайдалана алат. Мен бул туура эмес иш-аракеттер жөнүндө угуп себеби дизайнер "аталыштар карап жаккан жок" деп турат. Алыдын ала, баш тамга менен көрсөтүлгөн жана алар Барактын күндүн эс алуу алда канча көп, ариптин өлчөмүнө жана өзгөрүүлөр, өзгөчө h1 жана h2 элементтери, өлчөмү ири болуп саналат. Муну эске алганда гана демейки бул элементтердин туралуу болгула! CSS менен, бирок сиз каалаган карап багыт бере алат! Сиз, Тамганын көлөмүн кайраттуу алып өзгөртө аласыз, жана дагы көп. Айдарлар беттеги баш код туура жол болуп саналат. Бул жерде эмне үчүн бир нече себептер бар.

Эмне үчүн ат Тескерисинче DIVs жана Styling караганда Tags

Издөө Engines сыяктуу ат Tags


Бул аталышын пайдалануу жана туура үчүн аларды пайдалануу үчүн жакшы негиз болуп (башкача айтканда h1, анда Н2, анда h3 ж.б..) Болуп саналат. Издөө каражаттары бул тексттин семантикалык мааниси бар, анткени жогорку салмак теги көздөй ичинде камтылган текст берем. Башка сөз менен айтканда, сиздин барак аты h1 жатышса, ошол беттин # 1 басым экенин издегич жөргөмүштүн айтып коёюн. H2 аталыштар, ошондой эле № 2 басым, жана бар.

Дон & # 39; Сиз Жүргөн үчүн Сиздин кабарлар аныктагыла кандай класстар унутпашыбыз керек

бардык Желе барактар ​​калын арип менен болгон 1-жарым жылдыгы үчүн болуп жатканын билсек, 2em, сары, анда сиз салынган бир жолу экенин аныктоо жана эмне кылсак болот. 6 ай өткөндөн кийин, дагы бир барагына кошуп турабыз, сен жөн гана беттин башына h1 теги кошуу, сиз башкы аныктоо сиз колдонгон кандай стилдеги ID же класс үчүн, билиш үчүн башка барактарда кайтып барып, жок, кабарында, жана суб-башчылары.

Алар бекем Page планын берүү

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

Сиздин Page Атүгүл менен Адыг мааниге ээ болот өчүрүлгөн

ар бир көрүү же стилдерди пайдалана алышат эмес (жана бул # 1 кайрылып келгенде - издөө, сенин эмес, стили барактар ​​мазмуну (текст) көрүү). Эгер баш-теги, анда гезити бир DIV теги жок, маалымат менен камсыз кылып, анткени барактар ​​жеткиликтүү кылып жатабыз.

Бул жардам үчүн Screen Окурмандардын Ошондо сайт мүмкүнчүлүгү бар

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

Сиздин саны жөнөтүү жана арип стили

алыс теги баш болгон "чоң, эр, жана жагымсыз" кыйынчылыктан көчүп жагы Тексти сен аларды карап каалагандай стилдештирүүнү болуп саналат. Чынында, мен жаңы сайт чыгаруунун үстүндө иштеп жатам, мен адатта пункту, h1, h2 жана h3 образын биринчи нерсе жаз. Мен, адатта, жөн гана арип үй-бүлөсү жана көлөмү / салмагы менен биригет. Мисалы, бул жаңы сайт үчүн алдын ала стилдер жадыбалы болушу мүмкүн (бул колдонулушу мүмкүн эле бир мисал стилдери бар):

орган, HTML {margin: 0; толтургучтар: 0; } Б {арип: 1em Arial, Лион, Helvetica, Sans-Serif; } H1 {арип: тайманбастык 2em "Times New Roman", Times, Serif; } H2 {арип: тайманбастык 1.5em "Times New Roman", Times, Serif; } H3 {арип: тайманбастык 1.2em Arial, Лион, Helvetica, Sans-Serif; }

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

h1 {арип: Bold Italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; маржа: 0; толтургучтар: 0; түс: # e7ce00; }

Borders кабарлар кийинип жатат

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

h1 {арип: Bold Italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; маржа: 0; толтургучтар: 0; түс: # e7ce00; чек ара-топ: Катуу # e7ce00 орто; чек-ара-Жыйынтык: Dotted # e7ce00 жука; туурасы: 600px; }

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

Сиздин саны таржымалы сүрөттөрдү кошуу үчүн да Pizazz

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

h1 {арип: Bold Italic 3em / 1em "Times New Roman", "MS Serif", "New York", Serif; маалымат: #fff нускага ( "fancyheadline.jpg") төмөнкү X-кайталап; толтургучтар: 0.5em 0 90px 0; текстти тегиздөө: борбору; маржа: 0; чек-ара-Төмөндө: катуу # e7ce00 0.25em; түс: # e7ce00; }

Бул баш сөздүү кабарында үчүн куулук Мен сүрөтү 90 пиксел бийик болуп билбейбиз. Мен 90px-жылдын баш сөздүү кабарында, түбүнө чейин төшөмө менен кошо (толтургучтар: 0.5 0 90px 0P;). Аны каалаган жерде так көрсөтө Сиз үчүн баш сөздүү кабарында, тексти үчүн кырлары, сап-бийиктикте жана толтургучтар менен ойной алат.

Сүрөттөрдү пайдаланып жатканда бир нерсени эстеп, ошол сен болсо деп жооп сайты (сиз керек) экран өлчөмдөрүн жана түзмөктөр негизинде өзгөрүп долбоор менен, сага баш сөздүү кабарында дайыма бирдей боло бербейт. Эгер так болсун үчүн баш керек болсо, бул көйгөйлөргө алып келиши мүмкүн. Алар кээде көрө алат эле салкын, мен көбүнчө баш сөздүү кабарында өбөлгөлөрү сүрөттөрдү качуу себептеринин бири болуп саналат.

Саны менен алмаштыруу Image

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

Атайга Krynin тарабынан Original макалада. Jeremy Джирард тарабынан 9/6/17 күнү өзгөртүлдү