Css - Урок 3

Да опитаме на практика. Отваряне на HTML-страницата и CSS-страницата, създадена в предишния урок. Да попитаме нашата страница на син фон. Както вероятно си спомняте, е отговорен за този етикет . След това отидете в style.css на страницата и напишете следния код:

Отворете HTML страници в браузъра и се уверете, че на фона стане син. Сега, нека да направи текста на белия страницата:

Актуализирайте своя HTML страници в браузъра (Ctrl + F5) и се уверете, че всички, че текстът е вече бяло. Сега да червения цвят от заглавието (за h1) и жълтият (за h2):

Отново обновете браузъра и се уверете, че всичко е както е предвидено.

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

CSS селектори

ID селектори

В нашия пример, селектори, използвани елементи на страницата: тяло, h1, h2. Но какво, ако има няколко идентични елементи (например, точки), а ние искаме да направим текста на параграфи беше черен, а един от тях в нашата HTML страници - розово. След това трябва да се уточни за уникален идентификатор на този раздел и да се създаде стил за нея.

идентификатор на елемент HTML се задава от идентификатор на параметър. като стойността на който показва уникално име. Например:

Секцията текст с идентификатор (ID).

Имената могат да се дават на всеки друг, отколкото запазена дума (това включва и имената на марката и параметрите на HTML и CSS елементи), например, не може да даде името на тялото на идентификатор. Нека добавим нашия HTML-страница на няколко точки, а един от тях, определен идентификатор:

Ето малко текст

Тази втора глава ниво

Ето малко текст

Преминаването идентификатор (ID)

Ако се вгледате в момента към нашата страница в браузъра, нашите пасажи са и двете бели. Добави в стила лист (style.css) стилове за нашите параграфи:

Ние идентифицирано за първи път да направи текста на всички точки от черно и абзаца с идентификатор "розово", за да се направи розово. Нашата селектор се състои в този случай на елемент (п), сепаратора (#) и идентификатор име (розов).

Важно е да се помни, че страницата може да бъде само един идентификатор (ID). Т.е. За нашия пример, не можете да създадете две точки с идентификатор "розово". секция с идентификатор може да бъде само един. Но всяка секция може да има собствена идентичност, например, можете да създадете точка с идентификатор = "зелен" и да зададете стил за този отдел в стилове.

селектори клас

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

Нека добавим нашия HTML-страница на няколко точки и възлага клас = "розово".

Ето малко текст

Тази втора глава ниво

Ето малко текст

идентификатор Passage

Passage с клас (клас) розов

Passage с клас (клас) розов

За да определите стила за този клас в стиловете, напиши правило, където селектор р елемент и розово име ще бъде използвано отново. но в този случай името на класа, така че точката ще се използва като разделител (.):

Параграфи с класа могат да бъдат неограничен брой.

Нека да Междинните резултати:
  • ако всички тези елементи (например, всички горни H1) трябва да имат един и същи тип, селектора състои само от този елемент (например, п)
  • ако елемента (или :. параграф, точка) трябва да е различен от всички останали, а след това се определя идентификатор (ID) и сепаратора в стиловете е знак лира (#), например, стр # розово.
  • Ако страницата ще бъде повече елементи с един и същи стил, можете получават клас (клас) и сепаратора в стила лист е точка (.), Например, p.pink.
  • ID има по-висок приоритет от този клас. Ето защо, ако за всеки елемент ще бъдат изброени и класа, както и ID (което не противоречи на принципите на CSS), се прилага към стила ID.

    • Както бе споменато по документи за самоличност и класове Можете да настроите и да е елемент HTML. Но често се случва, че искаме да се подчертаят няколко различни елементи в същия стил, например, зелени. В този случай може да се използва единна селектор. В тези селекции, името на елемент не е уточнено, показва точката или мрежа, като знак за класа или име и името. Например:

    По този начин, какво би било елемент не сме определен клас = "червените" (заглавие, параграф или връзка), цвета на текста, тя ще се превърне в червено. Един от елементите на страницата (има такива), можем да зададем идентификатор = "жълто" и цвета на текста на тази позиция ще се превърне в жълто.

    Нека да има HTML-страницата си с кода тук:

    Селектори за елемент

  • Този текст е в параграф

    Това е част от текста. Този текст е в курсив

    Този текст е в точка, но тази част е наклонен

    Искаме курса беше подчертана и в зелено. След това пишем селектор елемент стил лист, т.е.

    Сега нашата страница в браузъра изглежда така:

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

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

    Да предположим, че в допълнение към цветове, ние искаме да попитам нашата заглавна част. След това можем да добавим само в нашия стил лист:

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

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

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

    В този урок по селектори над. В следващия урок запознае с понятия като псевдо-и псевдо-класовете.

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