CSS 3

Какво ще научим в тази секция?

Какво е CSS и за какво се използва?

css-display

Вече разгледахме как и по какъв начин работи HTML кода. Сега идва ред на по-забавната част, а именно CSS оформлението на нашата уеб страница (независимо от това, дали тя е статична или динамична). CSS – Cascading Style Sheets – дава възможност да стилизираме съдържанието на нашият уеб сайт.

Примерен код на структурата на CSS:

css_code

Основното предназначение, поради което CSS се използва е:

  • Определяне на размери, пространство, шрифтове, цветове, разположение на елементите на HTML.
  • Подобряване на достъпността на елементите.
  • Подобряване на гъвкавостта на HTML кода.
  • Бърза и лесна поддръжка на кода.

Пояснения, касаещи CSS каскадните стилове

CSS може да бъде добавен към всеки XML документ, не се ограничава само в HTML/XHTML.

CSS се състоят от правила (rules), селектори (selectors), декларации (declarations), свойства (properties) и стойности (values).

Пример за тага <body>:

declaration_css

Ето и пример за „headers“ (заглавните тагове):

h1,h2,h3 { color: green; font-weight: bold; }

  • Наследяване на стилове в CSS

Всички елементи наследяват някакви стилове от техните родители  или си имат по-специфичен такъв за тях самите. Обикновено наследяваните стилове се отнасят за текстовите или лист елементите, като стилове за цвят (color), размер на шрифта (font-size), подравняване (text-align) и височина на линията (line-height) и др. Елементите, които не се наследяват са „box-related“ елементите, т.е. широчина (width), височина (height), рамка (border), отместване (margin, padding) и др.

  • <a> елементите не наследяват от CSS „color“ и „text-decoration“.
  • Правилото „!important“ показва, че нищо не е в състояние да замени този негов зададен стил и затова се използва понякога при кодиране на CSS.

Основни CSS селектори (Как да избираме елементи)

Селекторите определят на кои елементи да се зададат правила. Съществуват три основни типа селектори, които задават правила на:

1. Всички елементи от тип (tag):

  • h1 { font-family: verdana, sans-serif; }

2. Елементи от тип (id, class)

  • #element_id { color: #ff0000; }

3. Елементите от тип „class“ (само за HTML)

  • .myClass {border: 1px solid red}

Селекторите могат да бъдат изреждани със запетая, ако искаме да използваме стилове за повече от един. Ето и един пример как можем да наследим удебелен шрифт едновременно на <h1>, на класът .link и на id – top-link:

  • h1, .link, #top-link {font-weight: bold}

Вложени селектори – Те могат да се разглеждат по следния начин с примерът по-долу, имайки предвид всички хиперлинкове от тип <a> във всички параграфи <p>, които съществуват, да бъдат подчертани:

  • p a {text-decoration: underline}

Универсален селектор: * (Използвайте с повишено внимание) – Този селектор задава текущите стилове, които ще бъдат написани на всички подчинени на <p> елементи. Ето и пример:

  • p * {color: black}

Селектор „+“: Използва се рядко. Той селектира всички елементите, които са декларирани непосредствено след първия селектор. Примерът показва, че всички елементи от клас .link, които се намират след <img> тага, ще бъдат селектирани:

  • img + .link {float:right}

Селектор „>“: Селектира единствено директните подчинени на елементите „p“, в случая от клас .error:

  • p > .error {font-size: 8px}

Селектор със структура: .class1.class2 (без празен интервал между тях) – Някои елементи от HTML страницата ни могат да имат едновременно два класа. Тези от тях ще бъдат избрани, т.е. в примерът се има предвид: „Намери ми всички елементи от „p“, които имат клас .post-text и клас .special едновременно, и ги селектирай“.

  • p.post-text.special {font-weight: bold}

За да бъдат изяснени селекторите по-нагледно, ще разгледаме примерен код в раздел: CSS – Проекти, където ще можете да видите тяхното приложение.

Импортиране на CSS в HTML


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

1. Inline – чрез поставяне на кода в самия таг на елемента като атрибут:

  •  <p style=“color:black;“></style>

2. Embedded – чрез директно поставяне в HTML (в секция <head>) чрез таг:

  • <style type=“text/css“>…нашият стилизиращ код…</style>.

styles

3. External – чрез създаване на отделен файл с разширение .CSS. За да укажем къде точно се намира този файл, е нужно да го декларираме в нашия <head> таг със следния код: 

  • <link rel=“stylesheet“ href=“…“>

linkrel_css

4. @import – директива, която се вгражда в самия CSS файл. Може да се използва като средство за връзка към друг CSS файл.

css_import

Атрибут селектори (Attribute selectors)

Ролята на тези селектори е да изберат тези елементи, които имат зададен специфичен атрибут.

Като пример можем да кажем, че: Имаме следния таг: <a href=“#“ title=“link“ />, както и още един, но с тази разлика, че той няма атрибут: „title“. Искаме да селектираме само тези елементи, които имат такъв атрибут и да им зададем някакви стилове. Следователно ще имаме следния код:

  • a [title] {color:black;}

Какво ще стане обаче, ако искаме не само да зададем атрибут на тага <input>, но също така да укажем и точно какъв? Ето и резултата, ако искаме той да е равен на „text“:

  • input[type=text] { font-family:Consolas}

 Ако искаме да изберем тези елементи, които имат атрибут „title“, и той да е равен на специфично име, например „george“, тогава имаме следния синтаксис в CSS:

  • a[title*=logo] {border: none}

Псевдо-селектори (Pseudo selectors)

Псевдо-селекторите не се поддържат от всички браузъри все още и са въведени към версия CSS3, въпреки това те се използват сравнително често.

Псевдо-класовете определят състояние (state):

  • :hover (когато мишката е върху даден линк)
  • :visited (когато линкът е вече посетен)
  • :active (показва активния елемент)
  • :lang

Псевдо-елементите определят части от даден HTML елемент и генерират съдържание. Например имаме параграф <p>, на който искаме в началото и в края му да имаме ето този знак „>>“. Ето какъв код трябва да напишем:

  • <p>:before {content: „>>“}
  • <p>:after{content: „<<„}

Структурни псевдо-класове


Структурните псевдо-класове също не се използват много в практиката. Тяхното приложение се проявява в това, че чрез тях можем да посочим елемент от DOM дървото на HTML и след това да го стилизираме. Ето някои примерни класове:

  • :root
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)
  • E:nth-last-child
  • E:nth-first-of-type
  • E:nth-last-of-type
  • E:only-child
  • E:only-of-type
  • E:empty

За повече информация относно структурните псевдо-класове посетете: линк

Стойности на CSS свойствата (CSS values)

color-selection

Цветовете в CSS могат да се записват по няколко начина чрез различни формати:

1. RGB (red, green, blue) – Цветовете са представени чрез трите основни цвята: червен, зелен и син, като стойностите са им от 0 до 255. В примерът по-долу, цветът който съответства на три пъти 255 е бяло. Същото важи и за втория начин. Там цветът е показан в шестнайсетичен формат и също е бял.

  • color: rgb (255, 255, 255);
  • color: #ffffff;

2. RGBА

  • color: rgba (255, 255, 255, 0.1);  –> 0.1 – прозрачност (стойностите са от 0 до 1)

3. HSL (Hue, Saturation, Light) – Стойността на Hue се задава в градуси – от 0 до 360, а на Saturation  и Lightness – в проценти.

  • color: hsl (291, 85%, 89%);
  • color: hsla (291, 85%, 89%, 0.1);

Когато задаваме стойност за някакъв размер, например: width, height, font-size…, стойностите могат да се дадат в различни формати: пиксели (px), метричен формат (em), инч (inch), сантиметри (sm), милиметри (mm), проценти (%). 0 се използва за нулева стойност.

Напред към: CSS3 – Проекти