Поредица от статии «HTML5 и CSS3 - че е време да се насладите на"

Продължаването на тази статия, ние се насърчават CSS3

Сега ние сме готови да мръсни ръце в печатарското мастило. Почувствайте своя словослагател в отпечатването на средата на 20 век. Художествена шум на печатарски машини, миризмата на прясно печат кликвания се избутва в място bukovok месинг. Големи рулца от девствен вестникарска хартия, които чакат да получат част от информацията лотария. И вие седите на наборен машина, поставя на правилното място информационен блок на ...

Това беше добре, че дойде с компютрите. Можете да създадете подходяща атмосфера, за да започнете в спокойна атмосфера да се създаде. Всъщност, ние ще направим точно сега.

За изпълнение на работата ви трябва (да бъде причина за ъпгрейд):

Софтуер или Resource

В този уроци, ние ще:

За да работите, че ще бъде достатъчно, за да се създаде един HTML-faylindex.html и един CSS-faylstyles.css. Страницата на курсовите задачи ще бъде скриптове, така че бъдете готови да, че браузърът ви ще ви предупреди за това. Ще бъде необходимо да се даде възможност за изпълнение на скриптове на страницата.

Подготовка на скелета на страницата

Продължи. Създайте своя собствена папка на работния плот, тя ще се основава на нашето мило няколко HTML и CSS файлове. Създаване на обикновен текстов файл файл index.html, в UTF-8 кодиране. Това кодиране на знаците отдавна е стандарт за всички не са на английски текстове.

Първият ред - писане на вида на документа.
Вторият - отваря основният маркер всички HTML документи и да посочите параметъра Ланг, писане там е основен език страница - български.
Ние се обръщаме към титлата.
Първото нещо, което спомена - кодова таблица на документа.
После се отправи към прозореца на браузъра.
След това, без колебание, свържете файл стил.
И в края на краищата, добавете празен документ контейнер тяло.

Всичко, което сме описали тук, в Обява №1:

Обява 1. Основната структура на HTML5 документ

Обръщаме внимание на факта, че голяма част от етикетите вече не е толкова дълго, колкото преди. свободен край нищо повече е необходимо в допълнение към Ланг. За мета достатъчно, за да напише набор от знаци. В допълнение към маркера на връзката не е необходимо да се определи видът.

Рамката е готова, но страницата в браузъра все още е твърде рано да ни постави. Хайде по-нататък - семантичните елементи на страницата.

Осъществяване маркирането съдържание

Поставете върху рамката семантични единици

Нека сега да се определи по-точно факта, че ние ще се поставят в страницата. Ние изхождаме от следното: ние трябва да се възползват максимално от новите семантични елементи в HTML5.

Нашата страница ще служи за показване на пълния текст на новини за компанията, която е посветена на сайта. На него ще бъде преход от началната страница, която съдържа най-актуалните новини или новини архив.

Поставете блок в контейнер . Ние ще се придържа към следната последователност от елементи:

- глава
- - hgroup
- навигация
- статия
- - глава
- - "съдържание"
- - раздел
- - - глава
- - - "съдържание"
- долния

Всичко, което ние сме тук, описан е показана на Обява №2. Ние не даваме пълния код на страницата, а само нещо, което трябва да бъде между таговете ... .

Обявата 2. Поставяне HTML5 семантичните единици

Сега можете да видите на страницата в браузъра. Въпреки това, тя все още изглежда занемарено. Но ние не сме напразно вече се погрижа за него и е свързана с досието на стилове.

боя на фасадата

Нашите докато страницата е тъпа и не привлекателен. Meykap го направя. Ние го продават в нашите файлови стилове styles.css първото нещо, което направихме - това е определяне на шрифта, за целия документ. Ако някой не знае, например, проведено проучване, което шрифта се възприема по-добре от екрана, се оказа, - този, който няма серифи. Тези шрифтове се наричат ​​безсерифни - без сериф. Те включват, например: Arial, Helvetica, Verdana. Хайде, ние ще в реда за определяне на правилата за изпълнение на всички елементи на нашата страница. За да избегнете твърде много напред, ние ще използваме до няколко чипове - сенки и заоблени ръбове в блокове.

Повечето от това, което имаме тук nakodil е на разположение в началото на стандартите CSS. Чисто нови функции, които описват.

кутия сянка
Този параметър е посочен за блоков елемент на страницата, и създава сянка около него. Първите четири цифри са линейни сенки параметри съответно показват един пиксел пиксела. или други линейни единици (ем. т), или без тях, в случай на размер нула. Първото число представлява - Хоризонтална капка сянка в дясно, която искате да напусна - сложи отрицателно число. Следваща - вертикално надолу, за да компенсирате - сложи отрицателно число. По-нататък - замъгляване сянка стойност, а след това - промяната на сянка. След линейните размери на цвета на сянка е посочено, и ако искате вътрешната сянка тази ключова дума добавям. Ако имате малко сянка, която изпълнява своята тъмна фантазия, разделени със запетая.

текстови сянка
Този параметър в настройки, като предишния, с изключение, че липсата на разсейване сянка и вътрешна сянка. И тъй като никой притеснява да мечтаеш за сметка на броя на сенки, разделени със запетая.

гранично-радиус (-moz гранично-радиус, -webkit гранично-радиус)
Радиусът на закръгляне в блокове. Ъгли в блока могат да бъдат четири, съответно, и елементи в този параметър могат да бъдат еднакви. Изброени по часовниковата стрелка от горния ляв ъгъл. Като се има предвид име в скоби параметри, използвани в Mozilla семейни браузъри и двигател Webkit (Chrome, Safari). Така че дублира настройките в правилото, определено за гранично-радиуса и повече в тези два параметъра.

Измислено и кодиран дизайн контакт ще изглежда както е показано на Обява №3. Този код, трябва да се постави в файл styles.css.

Обява 3. CSS за семантични елементи новия HTML5

Ако отворите вашия индекс страница сега, тя ще трябва да не изглежда толкова тъжно, погледнете фигура 1. В сравнение с предишния изглед, това е просто супер

Фигура 1. Преглед на стилизирана страница

Ако страницата изглежда по различен начин, а след това не сте го отвори в браузъра. Под "в грешка" Искам да кажа, браузър, различен от Mozilla4 +, + Chrome11.0, Opera11.10 +, те показват една и съща страница - това е проверено.

И накрая, не мога да пиша отговор, нещо, палави рутери по пътя от мен към сайта.
1. За сметка на близък или не да се затвори: сега има всичко свързано с културата на налагане, макар и все още можете да добавите, че строго затварящи тагове, които създавате, XHTML, и да се оставят някои от таговете не са затворени създавате HTML.
2. Прочетете "Готвене страница кадър»
3. статия> правило раздел дизайн кандидатства за раздела за деца разположен директно в статията в контейнер на първо ниво.

Здравейте!
кажи ми, и как да се направи съдържанието на сайта в рамка? например като в този сайт, само че той не е бил избран, но точно както беше в блока 🙂 претакане главата ми не мога да направя)

Александър, аз се надявам любимия си браузър не е IE 🙂
Ако искате да ме хареса, а след това ние можем да погледнем в оформлението.
F12 Хромираната
раздела елементи
Той разкрива тяло и Разделение
изберете Разделение и потърсете графата дясната (стилове)
за вас ще се интересуват от клас дива wrapperPage, обвивка, съдържанието, страничната лента

Главата го е написал като теб. Тялото написа: Здравейте!.
Браузъри (резултат тест):
- Хром 26 (468 точки)
- Opera 12.15 (404 точки)
- Yandex Browser 1.5 (434 точки)
- Safari 5.1.7 (278 точки)
- Firefox 20.0 (394 точки)
- Explorer 9.0 (138 точки).
Всички, с изключение на операта покаже упс, боклук. Файлове, записани в UTF-8 кодиране. В HTML посочено Lang = »ЖП» и мета набор знаци = »UTF-8" (всичко, колкото пише в този урок).
❓ Как да направите така, че всички браузъри разпознават кирилицата?