Усвояване на CSS оформление на страницата

* Преместване на курсора на мишката да направите пауза превърта.

Усвояване на CSS: оформлението на страницата

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

Изглежда, че всеки уеб разработчик има свои собствени методи и техники, CSS шаблони за оформление на и начинаещите уебмастъри често използват някои техники, без да разбират как работи. Този подход в съответствие с "черна кутия" с използването на CSS помага, разбира се, да получите резултати бързо, но в крайна сметка пречи на растежа на разбиране на езика на разработчика.

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

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

Центриране използване автоматичен външен отстъп

Да предположим, че се изправят един типичен проблем в хоризонталния център на DIV контейнер с идентификатор обвивка ( "обвива").

За да постигне това, на практика, просто трябва да се определят Разделение обвивка на ширина и настройте хоризонталната външен подложка в автомобил.

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

Този метод работи във всички съвременни браузъри, но не и в IE 6. За щастие, IE неправилно тълкува имот текст подравняване: център. привеждането в центъра на всичко, а не само на текста. Можете да използвате тази в своя полза, като центриране всичко, което е в тялото на маркер. включително Разделение обвивка. преназначаване след това заминава за привеждане в съответствие на съдържанието блок обвивка.

Използването на текст подравняване имот по този начин е по същество една рана, но това е абсолютно безвреден и не влияе неблагоприятно въздействие върху вашия код. Сега нашата блок обвивка центрира в IE 6, както и в други браузъри, които са по-добри приятели с спецификацията.

Центриране дизайн с позициониране и отрицателни маржове

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

Започваме, както в предишния пример - на ширината на инсталация обвивка. След това настройте позиция собственост на опаковката и относителната стойност в ляво имот до 50%. Това ни позволява да поставите в левия край на блока обвивка в центъра на страницата.

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

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

Шаблоните на базата на дебита

Има няколко начина за създаване на CSS шаблони, включително абсолютно позициониране и отрицателни маржове. Мисля, че методът на най-лесният за използване на базата на потока на някои други елементи. Както подсказва името, в този вид шаблон просто настроите ширината на позиционирани елементи, а след това ги помолете да се пренесе на наляво или надясно.

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

Две колона шаблон с дебит

За да създадете две колона като се използва модел на потока, като се започне с основната структура (X) HTML. В нашия пример (X) HTML кадър се състои от зони: брандинг, съдържание области за навигация и долния. Всичко това структура е затворена в "обвивка" - обвивка. който е подравнен хоризонтално с един от методите, описани по-горе.

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

Това може да се случи в IE, защото в IE основа на "размер" на съдържанието и не съдържа съдържанието на елемент. В браузъри, които се придържат към стандартите, ако съдържанието не се вписва в полето, той просто излиза извън него. В IE, обаче, ако съдържанието не се поставя в съдържанието е това "се простира" елемент за увеличаване на размера му. Ако се появи такова нещо в гъсти, слепени елементи от дизайна тогава няма повече място за престой близо един до друг, и един от тях, така да се каже, "пада", а другият е по-долу.

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

Сега, ако един от елементите незначително (в рамките на няколко пиксела), ще се увеличат по размер, вместо да унищожи целия дизайн, измествайки един от блоковете под друга, няма да има "naplyvanie" единица в "виртуален полето".

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

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

Base Case готов. Добавете няколко удара. Празно горната и долната част за целия блок на корабоплаването и пълнеж от ляво и от дясно на списък с елементи в менюто за навигация.

Остави като вдлъбнатината на правото в областта на съдържанието:

Това е всичко, сега ние сме подготвили една проста оформление две колони на CSS.

Три-колона модел с помощта на потока

HTML-рамка за шаблон с три колона е много подобен на този, който ние използвахме с две колони, с единствената разлика, че в него има две допълнителни Разделение блок: един за основното съдържание, а друг - за допълнително.

Използване на едни и същи правила за CSS, както в случая на две колони шаблон, който можем да дадем на устройството основната поплавъка съдържание: ляво. и още един елемент - поплавък: прав. Всичко това ще се проведе в рамките на вече правилната позиция основното съдържание тяло. Така се разделят на втория съдържанието на две колона, за да се получи оформление три-колона.

Както и преди, CSS код е много проста. Ти просто трябва да се уточни желаната ширина за всеки от блоковете и да даде на всеки от опаковката й.

Можете да почисти малко на един модел чрез премахване на вътрешната облицовка на блок съдържание. го прилагат директно към съдържанието блок secondaryContent.

По този начин, ние да ви тук е сладко оформление на три колони.

Анди Бъд, Камерън Moll и Саймън Колисън: "CSS майсторство: Разширено уеб стандарти Solutions"
webreference.com
Превод - Дмитрий Naumenko