| PC Help | | | уроци | | | софтуер | | | хардуер | | | речник |
| решения на проблеми | | | връзки | |||||||
| |||||||||
| Каскадни стилови множества - Cascading Style Sheets (CSS) Можете да създадете стил за повече от един селектор наведнъж. Има три случая, в които може да се използва това. Когато модифицирате група селектори, когато задавате ID вместо да създавате клас и когато модифицирате контекстов селектор или вложени елементи. За да дефинирате група елементи. Напишете в секцията <style> елементите отделени със запетая, например: h1, h2, h3, h4, h5, h6, {color: blue} и всички заглавия ще са сини. Ако искате да добавите допълнителни атрибути към някой от елементите, например h2, трябва да го дефинирате допълнително h2 {font-family: Arial}. В Dreamweawer трябва да напишете това в кода. Предефинирайте единия елемент както бе описано на предишната страница и след това добавете на ръка останалите. Дефиниране на ID. Защо се използва ID вместо клас? Някои функции на Java Script разчитат на атрибута ID. ID също се използва и за именуване на слоеве (layers). Стилово форматиране приложено за леър обикновенно използва ID. Контекстови стилови дефиниции. Използват се при вложени HTML елементи. Например, ако искате определена комбинация от курсив и получер шрифт да се оцвети синьо, трябва да приложите в <style> b i {color:blue}. Тогава текста между <b><i> Text<i/></b> ще е син, и то само когато е между такава комбинация от тагове. В Dreamweawer пишете на ръка. Създаване на клас. Клас създаваме така: Пишем в секцията <style> .name name-името на класа, пред него се поставя точка. След това пишете дефинициите като при другите начини. Псевдокласове за цвят на връзки. Ако предефинирате елемента <a>, като му зададете цвят, предефинирането ще запази връзките от смяна на цвета, когато станат активни или посетени. За да избегнете това трябва да използвате псевдокласове a:link, a:active, a:visited, a:hover - променя цвета на връзката когато мишката мине от горе. Ако искате да няма подчертаване на връзките предефинирайте <a> така: a { text-decoration: none}. Всички псевдокласове за връзки ще приложа към свързано стилово множество за да го демонстрирам. Също там слагам и форматирането на неподредения списък от предишната страница. Свързани(външни) стилови множества.Свързано стилово множество се прави по следния начин: отваряте Notepad или друг текстов редактор и пишете стилово множество, спазвайки правилата, за които говорихме до сега. Пишете без да използвате <style><!-- --></style>, директно описанието на стиловете. След това запомняте документа като обикновен текст и сменяте разширението на css. В <head> пишете <link rel="stylesheet" href="links.css" type="text/css"> като пътя до файла се задава по стандартния начин. Това е файла, който съм създал за връзките в този документ. Удобството при външните стилове е, че можете да ги напишете веднъж и след това трябва само да ги свържете с много документи. Ако ви хрумне в един момент да промените нещо по форматирането, ще направите промени само във файла, и те ще се приложат към всички страници, които го използват. Накрая, защо каскадни? Защото те се разполагат каскадно: Свързани> вътрешни> локални. Колкото по-конкретно е едно правило, толкова по-силно е то. Т.е. колкото по-близо (физически) е стилът до елемента, толкова по-силен е. Това значи, че ако имате форматиран примерно за <p> за цялата страница, а за елемент от <p> например <b> приложите локален стил (например червен цвят) локалния стил ще отмени глобалния. Смятам, че това е накратко описанието на CSS. В този материал съм използвал само форматиране със CSS. Само форматирането на Bold и Italic е HTML форматиране. Можете да прегледате кода за повече информация. Всички примери, които съм дал са извадени от кода.
| |
