Въведение в CSS какво CSS

Част I. Какво е CSS
Малко по-малко за CSS

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

Пример HTML:
Някои текст

И ако този стил трябва да се използва повече от веднъж? Чрез primeru10-20? Това е мястото, където можем да помогнем и CSS. Има три вида на стилове:

  • Вътрешни Style Sheets
  • Глобални стилове маса
  • Свързани стилове

    Структурата и правилата

    Всеки елемент на HTML - това е възможно за избор на CSS. Селекторът свойства определят елемента стил, за който е определена.

    Всички елементи в документа ще H2 червен цвят, с размерите на 30 точки (PT, точка).

    Клас селектори (Клас селектори):

    КЛАС - елемент атрибут в HTML, определя своя клас. В CSS, можете да опишете вашите собствени стилове за различните класове едни и същи елементи.

    Всички елементи на H2 приписват КЛАС = "сините" са сини.

    Уроци също могат да бъдат описани, без изричното им обвързване с конкретни предмети.

    В този случай, всички елементи, с атрибут КЛАС = "зелените" ще светне зелено.

    ID селектори (ID селектори):

    ID - индивидуално име стил. С това може да ви помогне да създадете изключение чета стилистични елементи от един и същи клас.

    Indifikatory основно се използват за придаване на един или повече елементи от класа на отделните свойства. Да речем, че сте създали клас сини - сини курсив. Но ще трябва смело, подчертан текст в синьо курсив. Разбира се, можете да създадете нов клас, но защо? Просто опишете ID. Например "boldunderline". И всички елементи на клас синьо с ID "boldunderline" на стойност ще бъде подчертано с удебелен курсив сини. Няма да има, така да се каже на синтеза и свойствата на идентификатор на класа синьо boldunderline.



    например CSS



    Здравейте, това е моята страница.


    Тя все още е в процес на разработка.


    . Но скоро отворен



    Както се вижда от примера, лична атрибут може да се използва без да се посочи клас (последен параграф на пример Тогава точка ще има само имоти ID "boldunderline" (в този пример -. Bold, подчертан текст).

    Контекстуални селектори (контекстно селектори):

    Контекстуални селектори - това е комбинация от няколко обикновени селектори. Стил elemetnam дава само в определена последователност съгласно реда на каскадата.

    В този пример, всички елементи в рамките на елементи P EM ще имат предварително определен стил.

    Даване на няколко елемента идентични свойства:

    Да речем, че се нуждаете от инжектиране повече елементи на уеб страницата си идентични свойства. В този случай, при определяне на селектори perechislyautsya запетая пред блок свойства.

    Всички елементи, H1, H2, H3, р и силни ще бъдат зелени.

    Псевдо-класовете и псевдо-елементи.

    синтаксис:
    селектор: псевдо <свойства>
    selektor.klass: псевдо <свойства>
    селектор: псевдо <свойства>
    selektor.klass: псевдо <свойства>

    Псевдо-класове и псевдо - специални класове и елементи, присъщи на CSS и автоматично определя podderzhiveyuschimi CSS браузъри. Псевдо-класовете разграничаване на различните видове един елемент при определянето създаване на потребителски стилове за всеки от тях. Псевдо-елементи са части от други елементи, като иска тези части, различни от елемента като цяло стил.

    Списък псевдо и псевдо.

    Първа линия Псевдо-елемент - от първа линия. Това псевдо може да се използва с блоков елемент ниво (р, h1, и т.н.). Той се променя стила на първия ред от тези елементи.

    Първо Писмо Псевдо-елемент - първо писмо. Подобно на първа линия, но не се отразява на цялата линия, но само първия знак.

    В този пример, всички елементи за котви (връзки) са сини. Когато натиснете (активна) ще промени цвета си до червено. И обобщавайки курсора на мишката изчезва подчертае.

    Забележка. описват няколко свойства за селектор, селектор контекстуален класа, индивидуално име стил или група омнибус селектори са разделени с запетая ";".

    Вътрешни Style Sheets

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

    напред

    Пример INLINE Стил ЛИСТ:

    напред

    Както можете да видите, Inline Style Sheet код, за да получите повече от HTML. Затова МКС трябва да се използва само, ако искате да посочите конкретен елемент свой индивидуален стил, който съществува в класирането на CSS и нереализирани в HTML. Или, ако е необходимо, абсолютно pozitsionirovt този елемент.

    Глобални Style Sheets

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


    тук то Думата - синьо, а то - мазнини.

    В този пример, всички елементи H1 ще бъдат записани в курсив голям червен, всички елементи с съответния клас ще бъдат синьо BLUE. и всички елементи с идентификационния номер на идентификатор = "Bold" ще бъдат в удебелен шрифт. За простота, вместо