Кратък приложен CSS наръчник

99% от стилизирането може да се направи с тези 5% от CSS

автор
Веселин ·
 

Цветове


HEX - копиран от програма като Photoshop или взет от библиотека с цветове като http://colorlovers.com

#FF0000 - червено

  
Кратък формат на HEX кода:

color: #F19;

Което се превежда в #F01090 

RGBA - Идва от червено, зелено, синьо и прозрачност от 0.0 до 1.0

rgba(255, 0, 0, 0.5) - червено с прозрачност 50%

  

 

CSS в елементите

Най-лесния начин да променим стила на някой HTML елемент, е да сложим директно style="..." вътре в тага му.

<DIV style="width:400px; height:200px">

...

</DIV>

  
Обаче в HTML елементите се повтарят в 90% от случаите и ние ще трябва да copy/paste-ваме тези правила навсякъде, докато правим HTML-а си нечетлив, грозен и сложен за промяна.


 

Цвят на текст

color: #FF0000;

color: rgba(255,0,0,1);

  

 

Размери

font-size: 15px;

width: 200px;

  

Размерите в повечето случай се задават в пиксели. За повече информация виж 

http://photokie.com/kakwo-e-pt-px-i-em/

 

CSS в страницата

<HEAD>

   <STYLE>

   BODY {

     background-color: #443322;

     color: rgba(255,255,255,0.5);

   }

   #myid { color:rgba(255,0,0,1) }

   .orange { color:rgba(255,255,0,1) }

   </STYLE>

</HEAD>

Ако искаме да не повтаряме стиловете навсякъде вътре в HTML елементите, то ще сложим CSS правила в <STYLE>...</STYLE> който пък трябва да се намира на произволно място в <HEAD> .... </HEAD>


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


Обаче ако имаме няколко HTML страници, то ще е най-добре да извадим CSS правилата си в отделен файл (style.css). Тогава ще заменим <STYLE> със следното, като то също ще е в <HEAD>

<link rel="stylesheet" type="text/css" href="/style.css">


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

За да зададем такива правила обаче ще ни трябват селектори с които да укажем кои елементи ще придобият тези зададени свойства.

 

background-color | Цвят на фон

background-color: #000000;

  

Да се има в предвид, че ако има поставено свойство за фон картинка, тя ще бъде поставена над фона цвят

 

Файлове и пътища

background-image:url(/images/some.jpg)

Ще сложи картинка като я търси на абсолютния път http://domain.com/images/some.jpg

Ако пък CSS файла ни се намира на този път
http://domain.com/css/some/other/my.css
и зададем пътя по следния начин:

background-image:url(../images/some.jpg)

То ще търси картинката релативно спрямо позицията на CSS файла. Тоест на адреса - 
http://doma.com/css/some/images/some.jpg


 

text-align | Подравняване

text-align: center;

  

Възможните стойности са:

left, center, right, justify

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

ляво, център, дясно и разтеглено

 

Селектори

Селекторите са голяма част от CSS. Но в повечето случай ни трябва само малка част от тях.


Да речем искаме да стилизираме един DIV елемент, но от външен файл. Тогава ще трябва да добавим или class или id на този елемент.

<DIV id="john">Here I am</DIV>

 
Тогава със следния CSS може да го изберем

#john { color:rgba(255,255,255,1); }

Само че тогава имаме проблем, понеже id-тата HTML трябва да са уникални и няма да можем да направим това (поне ще е нелегално спрямо стандарта):

<DIV id="john">Here I am</DIV>

<DIV id="john">Here you are</DIV>

<DIV id="john">Here he is</DIV>

  
За да го направим както трябва, ще използваме class

<DIV class="person">John</DIV>

<DIV class="person">Peter</DIV>

<DIV class="person">Bogdan</DIV>


И CSS дефиницията ни ще е следната:

.person { color:#FF0000; }


Забележете: Kласовете се дефинират с точка, а id-тата с диес (#)


Ако обаче искаме да сме още по-оптимални, ще направим HTML-а да е следния

<UL class="people">

   <LI>John</LI>

   <LI>Peter</LI>

   <LI>Bogdan</LI>

</UL>

 
Тогава можем да селектираме така:

.people LI { color:#FF0000; }

  
Тези селектори може да стават все по сложни, но начина за разчитане е един и същ. Например:

#home .team-a .people LI { ..... }

Ще търси елемент с id 'home' в него ще търси елемент с клас 'team-a', а пък в него елемент с клас 'people', таговете вътре които са с LI ще бъдат прихванати от този селектор. Ако имаме LI тагове които не попадат точно в тази структура, а са извън нея, няма да бъдат прихванати и стилизирани от правилото.

Също така имаме и псевдо селектори от типа на 

LI:first-child { .... }

A:hover { .... }

A:visited { .... }

Те са малко по-напреднал CSS и няма да са ви нужни в повечето време. 

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

Когато сложите :hover на което и да е правило, то CSS свойствата в него, ще се активират когато мишката премине отгоре. Това е доста лесен начин да направите дизайна си по-интерактивен.

 

text-decoration

Най-често се използва когато искаме да премахнем подчертаването в хипер връзките.

text-decoration: none;

  

 

line-height | Височина на реда

Приема разстояние за стойност

При дълги текстове не е лошо да увеличим височината на реда и да вкараме малко въздух

font-size: 20px;

line-height: 40px;

Трябва да се отбележи, че font-size също променя височината на реда, спрямо това как е зададен в шрифта.  


 

Анимации

С това CSS свойство:

transition: all 0.5s ease;

ще накарате всякакви промени по елемента (с javascript или псевдо правила като :hover или :focus) да бъдат анимирани за половин секунда.

A {color:#000000; transition: all 0.5s ease;}

A:hover {color:#FF0000}

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

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

$(".someclass").addClass("animatedThings");

$(".someclass").removeClass("animatedThings");

 А CSS-а ни ще изглежда така:

.someclass {

  transition: all 2s ease;

  background-color:#FF0000;

}

.otherclass {background-color:#000000}

  

 

font-family | Фонт

font-family: verdana

  

Ще се опита да сложи фонтa Verdana и ако не стане, ще сложи този по подразбиране

font-family: verdana, arial, serif

  

Ако не намери Verdana, ще сложи Arial. Ако пък не намери и него, ще сложи serif фонта по подразбиране

Може да сложите и безплатните фонтове на Google, но ще трябва да бъдат инсталирани в страницата ви първо https://www.google.com/fonts

 

background | няколко един върху друг

Ако искаме да сложим няколко фона в един елемент, например повтаряща се хоризонтално картинка и една която е само в горния десен ъгъл и не се повтаря.

Тогава използваме същите правила, но добавяме със запетая вторите такива

background-image: url(/images/some111.jpg), url(/images/some222.jpg);

background-repeat: repeat-y, repeat-x;

background-position: left top, right top;

  

 

background

background-color: #000000;

background-image: url(/images/some.jpg);

background-repeat: no-repeat;

Други стойности: repeat-x, repeat-y, repeat

background-position: top center;

Други стойности: top, left, right, center, bottom


 

font-weight | Дебелина на фонт

font-weight: normal;

font-weight: bold;

  

 

font-style | Стил на фонта

font-style: normal;

font-style: italic;

  

 

Сянка на текст

text-shadow: 1px 2px 3px #990000;

Първите два параметъра са за хоризонтално и вертикално отстояние на сянката
Втория е за размиване 'blur'
Третия е цвета на сянката

 

Сянка на контейнер

-moz-box-shadow: 10px 10px 5px #888;

-webkit-box-shadow: 10px 10px 5px #888;

box-shadow: 10px 10px 5px #888;

Понеже броузърите не са стандартизирали това свойство, трябва да го зададем за всеки един по отделно

 

Display | Метод за подреждане

display: inline-block;

display: block;

display: inline;

Тази част от CSS е може би най-сложната за разбиране, но в момента в който я разберете, всичко ще си дойде на мястото.

Тези дисплей видове определят как нашия елемент се подрежда спрямо предните и следващите HTML елементи.

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

display:block;

font-weight:normal;

font-size:35px;

padding:20px;

margin:10px

Ще превърне нашия <B> елемент да изглежда по същия начин като <H1> (H1 - таг за заглавие на страницата)

display:inline;

font-weight:bold;

font-size:12px;

padding:0px;

margin:0px

Ако е поставен върху <H1> елемент, ще го направи да изглежда и работи като <B>


display: inline

Някои inline елементи : SPAN, I, B, A, INPUT, BUTTON

Inline елементите се подреждат вътре в същия ред в който се намират. Например елемента <B> няма да създаде нов ред, а просто ще направи текста bold на същия ред. Този тип елементи имат забранени свойства. Като например width, height, няма да работят, тъй като броузера ги оразмерява автоматично спрямо тяхното съдържание.

display: block

Някои block елементи : DIV, P, H1, H2, HR, UL, LI

Block елементите пък придобиват по подразбиране широчината на реда, като например H1 и DIV. Те могат да имат зададена ширина и височина, но ако зададем ширина която е например 300px, а пък ширината на контейнера в който ги слагаме е 1000px, то ще имаме 700px на същия ред, които няма да бъдат запълнени автоматично от нищо.

Единия вариант е да използваме float:left или float:right. Тогава съседните елементи ще запълнят празното пространство, но ще трябва да сложим (clearfix) на контейнера които съдържа нашия block елемент и всичките други. В противен случай елементите ни може да почнат да се наслагват един върху друг.

display: inline-block

Inline-block елементите пък са най-новото решение на горния проблем. Ако имаме няколко inline-block елемента със зададена ширина и височина. То те ще се подредят на един ред един след друг, докато не стигнат до края му, тогава ще преминат на нов ред.

Примерен inline-block CSS за няколко елемента които се подравняват отгоре с vertical-align

display:inline-block

vertical-align:top

width:300px

min-height:400px

  

 

Позициониране

position: absolute;

position: relative;

position: fixed;

left: 20px;

top: 20px;

z-index: 1000;

z-index: 1010;

При абсолютна, релативна или фиксирана (точни позиции) - ще може да управлявате позицията с left, top или right, и bottom.
При абсолютна, то ще променяте позицията спрямо най-близкия родителски елемент който има точна позиция. Ако няма такъв, то това ще е BODY (който има точна позиция по подразбиране) и

position:absolute;

left:0px;

top:0px;

ще е в горния ляв ъгъл на страницата. Интересното при абсолютните позиции, е че те не оставят 'следи' там където са били поставени в нормалния ред на HTML елементите, докато релативните, оставят.

position:relative

Ако искаме да направим някой от родителските контейнери начало на абсолютните позиции на вътрешните елементи, то просто слагаме position:relative в него. Това няма да го размести по никакъв начин.

Едно от най-честите приложения на това е:

display: block;

width: 900px;

margin: 50px auto;

position: relative;

Това ще направи контейнер с широчина 900 пиксела и ще го центрира в страницата ни, след което ще го направи начало на всички вътрешни елементи с позиция absolute.
Ако сложим в него елемент лого с този CSS:

position: absolute;

left: 10px;

top: 10px;

То той ще е позициониран с отстояние 10px от горния ляв ъгъл на нашия контейнер и при намаляване на страницата, ще си остава там, докато контейнера си остава в центъра.  


Ако един елемент излиза над друг елемент, а не искаме това да се случва. То им слагаме z-index, като на този който искаме да е отгоре, трябва да е с по голямо число.

position:relative;

z-index:100;

Но пък ако това е елемент без точна позиция, ние ще трябва да му сложим такава или z-index няма да работи

 

Padding | Вътрешни отстояния

padding: 10px 20px

Ще сложи вътрешно отстояние от 20px от ляво и от дясно, както и 10px от горе и от долу.


padding: 10px 20px 30px 40px

По часовниковата стрелка.
Горе - 10px
Дясно - 20px
Долу - 30px
Ляво - 40px

 

Margin | Отстояния и центиране

margin: 10px 20px

Ще сложи външно отстояние от 20px хоризонтално и 10px вертикално

margin: 10px auto;

width: 300px;

display: block;

Ще сложи вертикално отстояние от 10px и ще центрира блока отляво и отдясно. За да се получи центрирането е здължително елемента да e с display block и да има зададена широчина

margin: 0px 0px -50px 0px;

Margin може да има и отрицателна стойност, това може да вкара елемента вътре в границите на други такива или да го изкара от контейнера му.

 

Width, Padding, Margin

В картинката е показано как се наслагват вътрешно отстояние (padding), външно отстояние (margin), размери (width/height) и рамки (border).

Ще дам пример. Ако сложим на някой елемент

width: 200px


То съдържанието му ще е точно 200px и съседните елементи ще са долепени директно до него без дори 1px разстояние

Ако обаче добавим

margin:20px

ще имаме отстояние 20px от всяка страна между елемента ни и тези около него

Да речем искаме рамка и ще добавим

border: 4px solid #FF0000

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

padding:10px

и тогава ще имаме разстояние от всяка страна по 10px между съдържанието и рамката.

Това обаче леко ни подвежда, понеже сме сложили 200px ширина, а тя всъщност ще е 4px + 10px + 200px + 10px + 4px
И ако се опитваме да поместим 5 такива елемента на един ред в контейнер с ширина 1000px, то няма да можем, освен ако не намалим CSS свойството ширина на всеки елемент, така че крайната им такава да е 200px.

 

Border

border: 4px solid #FF0000;

Ще постави 4 пикселова рамка с червен цвят
Вместо solid може да сложите dashed или dotted. Така рамката ще стане на тирета или точки  


 

Border-radius | Заобляне

-webkit-border-radius: 12px; 

-moz-border-radius: 12px; 

border-radius: 12px;

Това ще заобли рамката с 12 пиксела отвсякъде.

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

border-radius: 0px 12px 0px 0px

  
Това свойство може да се използва и без да имате рамка (border). Тогава заоблянето ще повлияе на фона на елемента.

 

List-style | Стилизиране на булети

Когато стилизираме HTML лист като този:

<UL>

   <LI>Примерен елемент 1</LI>

   <LI>Примерен елемент 2</LI>

   <LI>Примерен елемент 3</LI>

</UL>


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

LI {

   list-style: none;

   padding: 0px 0px;

   margin: 0px 0px;

}

Може да сложим собствени булети с background-image и да контролираме местоположението им с background-position

 

Width и Height

width: 200px;

height: 300px;

Width (ширина) и Height (височина), както и другите свойства свързани с тях, могат да се задават единствено на елементи с display тип block или inline-block. Ако се опитате да го зададете на елемент с таг SPAN, B, I или A, то няма да има никакъв ефект докато не му сложите display:inline-block или само block. 

Когато поставим min-width, това значи, че минималната ширина на контейнера ще е посочена, но ако съдържанието е в повече, тя ще стане по-голяма. Останалите свойства работят по аналогичен начин.

min-width: 200px;

max-width: 250px;

min-height: 100px;

max-height: 350px;

 

Вертикално центриране

.container {

   height: 10em;

   display: table-cell;

   vertical-align: middle;

}

  

 

!important

color: #992200 !important;

width:  300px !important;

Реда на задаване на правила в CSS е от значение. 
Последното зададено влиза в сила. Ако няколко CSS правила прихващат един елемент и всички задават цвят, то последния такъв ще се ползва, спрямо подредбата на css файлове в HTML и css правила вътре във файла.
Но ако искаме да променим това и например 4-тото прихващащо правило да е от значение вместо последното. То тогава слагаме !important след стойността на свойството
Научи компютърните програми онлайн от топ експертите на България
Регистрацията в АУЛА ви дава:
  • 20 безплатни урока
  • Трикове и тънкости за софтуера
  • Отговори на вашите въпроси