Основи на CSS - 20-те най chastoispolzuemyh стилове

В своята работа по оформлението на сайтове, аз използвам само общо 20 основни CSS стилове. Знаейки ги, вие ще бъдете в състояние да наложи доста сложно оформление на сайта.

Позволете ми да ви запозная с тях.

Стилове използват за форматиране на текста

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

Пример за използване на стилове:

шрифт семейство: (без сериф), Arial, Helvetica, безсерифен;

шрифт семейство: (серифен шрифт), "Times New Roman", Times, сериф;

шрифт семейство: (Непропорционални шрифт), "Courier New", Courier, Непропорционални;

За да видите списък на шрифтовете, използвани трябва да е в този ред. За по-добро разбиране на уеб типография основи предлагам да прочетете статията Уеб типография днес.

Този стил се определя цвета на текста. За да зададете цвят може да се използва като шестнадесетичен цвят стойност (цвят: #fff), както и редица от ключовите думи (цвят: черен, цвят:. Червен)

Този стил определя подравняването на текст в рамките на родителското устройство. Може да има останали стойностите, надясно, център.

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

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

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

Стойността на този комплекс се определя като процент, фактор (1 - подразбиране водеща, 1.5 - увеличава с половината) (100%, 150%). (. 10px, 1.5 ем) или точната стойност на пиксела.

Inter-разстоянието между символите. Стойността на този комплекс показва в единици за дължина (пиксели инча, PT) или относителни единици - тях.

Ако е необходимо, да направи текста получер блок - използване стил шрифт тегло: удебелен шрифт. И обратно, ако искате да премахнете Дързост - всичко е просто шрифт тегло: нормално

позициониране елементи

Този имот дърпа единица (приложен е необходимо да блокира Разделение собственост) от нормалното протичане на една страница. И по-нататък единица е позиционирана по отношение на горната част на браузъра, като се посочва процент лява и топ имоти или пиксела.

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

Използването абсолютно позициониране, за да се избегнат непредвидени обстоятелства, е необходимо да се уточни ширината и височината блок в пиксели (ширина свойства и височина).

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

Ако родителското устройство Настройте позицията на стил: роднина. вместения блок със споменатата позиция стил: абсолютен да се измества спрямо горния ляв ъгъл на родителското устройство.

Ако Разделение на две пресечки в един ред трябва да бъде поставен един след друг, в първия блок показва поплавък стил: ляво (това означава, че лявата му граница на блока трябва да се придържаме към предишния блок в потока). Първият блок е натиснат, например, до левия край на прозореца на браузъра. Ако следващия блок в потока, за да определите една и съща стойност в стиловете, на двата блока ще бъдат показани на една и съща линия. Първият блок ще се придържаме към левия край на екрана, а на второ място, лявата му граница до дясната граница на предишния блок.

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

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

В резултат на това браузърът ще ни направи точно такава картина.

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

Този имот образува вдлъбнатината в рамките на блок (пиксел стойност) на

Задава вдлъбнатината на границите на блока

Това ще го дам по-ясна картина:

Какво е подложка и марж

На заден план, можете да зададете Kartika: фон изображение; или просто казано фонов цвят: фон-цвят.

Модела може да се повтори (в X ос или Y) - фон-повторение.

И тъй като на фона може да бъде изместен - фон-позиция.

Това е всичко от често използваните стилове. За повече подробности относно всеки един от тях може да се прочете на сайта htmlbook.ru