Термините, използвани в описанието на правилата на CSS.
Фиг.1. обичайното правило СГО.
Пример на правилата на CSS:
Фиг.2. Пример от правила, CSS.
Накратко за правилата на синтаксиса на CSS:
Качеството на селектори може да бъде всеки таг, също е за избор на клас или лична-селектори. Помислете за всичко в ред.
селектори тагове
Както бе посочено по-горе, всеки етикет може да бъде селектор на CSS правило. Помислете за пример.
Този стил на запис, еквивалентен на следния принцип групата:
потомък селектори
Можете да зададете елементи на правила за стил в зависимост от това дали елементът е вложен в другата. Ако един етикет е вложен в друг, вложени маркер, наречен потомък си. маркер, който е вграден в потомък на прадядото се обади. Например, трябва да укажете параграфите
във вътрешността на таблицата
червен текст. За да се реши този проблем в елементите на селектор са подредени в ред на вмъкване и са разделени с интервали. Това е наш проблем може да бъде решен, както следва:
Всички тагове
във всички таблици в документа ще бъде показано в червено. Моля, имайте предвид, че таг
във вътрешността на маркер
също показва текста в червено.
В действителност, вместо
можете да зададете маркер
. тъй като маркер
Той трябва винаги да съдържа маркер
.
За да се проучат допълнително CSS селектори, което трябва да овладеят няколко прости термини, свързани със структурата на документа.
дървото на документа
дървото на документа (на английски документ дърво.) - тази схема за изграждането на HTML документ, показващ реда на таговете и тяхното разполагане един в друг. Ето един пример на такава схема:
Ето един пример на кода, съответстващ на елементите на дърво диаграма с Фигура 1.
Така че има връзки между маркерите на един HTML документ. Те се изразяват в гнездовата реда на тагове един маркер в даден момент. Тези връзки се наричат родство. и да определи различни видове роднински използва термини като предшественик и наследник, майка и дъщерните елементи и други "семейни" термини.
А сега да разгледаме всички видове взаимоотношения.
Предци и потомци
Предшественици (предшественик) - елементи, които съдържат други елементи, т.е. елемент е предшественик на всички елементи, вградени в нея.
Потомците (потомък) - елементи, вложени в друг елемент.
Потомък селектори вече бяха обсъдени по-горе.
Родители и деца елементи
Майка (майка) - е прародител на първо ниво (непосредствен предшественик) на елемента. Дете елемент (дете - дете) - е потомък на първо ниво. Родител елемент може да има неограничен брой деца.
В нашето дърво елементи имат етикет
след дъщерните елементи:
.
.
и още
.
Братската или братя и сестри
Братската или братя и сестри. (роден братя -. братя), групата на елементи, имащи обща майка. Например, тагове
.
.
и на второ място
- сестра, тъй като те имат една обща майка
.
Още по темата
Свързани елементи - братски съседните елементи, т.е., елементи, които имат една и съща майка и ходене до дървесни елементи. В нашия пример, двойки от съседни елементи са:
и
.
и
.
и
.
Сега обратно към селектори.
селектори за деца
Когато не се интересуват от всички наследници, но само първото ниво на потомство, което е, деца елементи в CSS, използващи деца селектори. За да покаже, че правилото за стил определя само дете елемент, символ ">" се използва в селектора.
HTML код за този пример съвпада с примерен код за потомците селектор, се различава само по правилото за стил. В резултат на текст таблицата дъщерното селектор точка в контейнера
не е червено, тъй като този параграф таг
родителя и етикет
прародител.
Непосредствено (съседни) селектор
Селекторът избира съседен елемент член разположен непосредствено след друг предварително определен елемент. Синтаксисът на този селектор: селектор предишния елемент, а "+", последвана от селектора избира елемент.
Тук е HTML-кода с примера на работата на съседен елемент за селектор.
Друго име, свързани селектори: съседни селектори. Тук можете да прочетете повече за този тип селектори.
сродени селектори
Още селектор елемент, подобен на съседния избор, но се отнася до всички тези елементи следните избрани. Синтаксис свързани селектор: селектор предишния елемент, знакът "
"(Тилда) и зад селектора избира елементи.
Пример isolzovaniya селектор кърмене.
Примерът показва, че след
таг текст точка №3 също беше червено. Това е, за да зададете братя и сестри стил не трябва да върви след един на друг.
универсален селектор
Ако зададете герой в селектор CSS правило "*", това правило важи за всички елементи на страницата, без изключение. Трудно е да си представим един случай, в който такова правило има смисъл. Но има един случай, в който предприемачът иска да "изчисти" всички външни и вътрешни уплътнение. След това ще трябва да използвате този стил:
Но символа "*" може да се използва в съставните селектори.
Този код възлага червения цвят на потомци за елемента, за текст
.
Класове в CSS - най-добрият начин за присвояване стилови елементи rasrpostranonny група. Класът се използва, когато трябва да посочите различни стилови елементи на HTML документ, създаден от един маркер. клас синтаксис:
Първият селектора стил е написано десен етикет, а след това, през точка, определена име на клас. Името на класа трябва да започва с буква и може да съдържа тире (-) и долна черта (_).
Например, когато се използват класове: създаден с помощта на маркерите на сайта на върха, отстрани и долното меню
. тези три менюта, които трябва да се създадат три различни стилове. В CSS, създаване на три класа ul.menu-отгоре. ul.menu и ul.menu дъно.
Тялото на менютата на HTML-документи са създадени с обозначение на класа в атрибута клас:
.
.
.
Уроци - често се използват CSS инструменти. Той е удобен, а освен това прави кода по-лесно разбираемо.
Можете да създадете клас, които ще се прилагат към всеки маркер. За тази цел универсалната избор.
Този пост може да бъде намалена чрез премахване на символа "*".
ID селектори (идентификатори)
Идентификатори - видовете селектори уточняват уникално име на елемента. Уникален - тогава се събира веднъж код документ. С помощта на документи за самоличност можете да създадете стил, но тяхната основна цел - да се обжалва пред тях с помощта на скриптове.
Описвайки знак идентификатор хеш показва началото (#), следвана от името на идентификатор.
Както и името на класа, името на идентификатор трябва да започва с буква и може да съдържа тире (-) и долна черта (_).
атрибут селектори
В HTML, има няколко ключови думи, които, в зависимост от атрибута променят техните действия. Например, маркерът В зависимост от стойността на атрибута вид може да създаде поле на формуляр, бутон и да е друга форма елементи. Така че, ако приложите стил към входа за избор. тя ще се промени на всички елементи на формата, създадена от този маркер. За прецизен контрол на тези елементи съществуват в селектори CSS атрибут.
Умение селектори са различни. С помощта на атрибутите селектори, можете да зададете етикет стил, ако има определен атрибут или ако специфична характеристика таг има определена стойност.
Умение селектори - тема за друга голяма статия. само ще отбележим в тази статия, че са те.
псевдо
С помощта на псевдо-динамичен ефекти са създадени на страницата.
Той може да се прилага на псевдо-селектори или клас идентификатори (ul.menu:hover ).
За начинаещи, ще отбележа, че ако имената на класовете и identifikatov разработчик идва с себе си, имената на псевдо в CSS име - то е резервирано думи.
В: активен псевдо изпълнява правило за стил, ако елементът е активен. Например, да се свържат предизвикана кликване на мишката и да се насърчава. Псевдо-класа: навъртам - мишка просто се съсредоточи върху член, като линк.
Има много псевдо-класовете. Напълно разкрие псевдо-тема може да бъде в отделна статия. Тук сме се докоснали върху него само повърхностно.
псевдо
С помощта на псевдо-елементи могат да бъдат добавени към съдържанието на страницата допълнително съдържание, което не е в изходния код. Също така е възможно да се промени от страна на елемента, като първата буква в параграф. Това е sozdaval въображаем елемент HTML - първата буква от вашия стил на дисплея.
Синтаксисът на псевдо-елементи е същата като тази на псевдо-класове: