Какво е CSS ? Това е набор от общи правила които контролират оформлението на текста, цветовете, разположението на изображенията и голям брой други характеристики на HTML документа. CSS (стилове) са лесни за дефиниране и могат да бъдат приложени към всички ваши документи. Нещо повече - ако желаете да промените изгледа на вашите документи, е необходимо да промените само CSS, и промените ще се приложат към всичките ви документи. Една от характеристиките, които CSS добавят към HTML, е възможността за по-добър контрол върху позиционирането на елементите на страницата.
В този материал ще опиша накратко видовете стилове, начина на работа и синтаксиса им. Ще се спра на CSS в общ план и в частност как да създадем и приложим стилове с помоща на Dreamweawer.
Първо ще дам няколко дефиниции за да избегнем недоразумения в хода на изложението.
Текстовият блок е част от текст който в HTML обикновенно е следван от прекъсване за параграф. Елементите от блоково ниво включват параграфи <p>, блокови цитати <blockquoe>, Заглавия <hn> и предварително форматиран текст <pre>.
Елементите подобни на блоковите включват списъци, таблици и форми, които са един вид самостоятелни структури които съдържат група елементи на ниво ред.
Елемента <div> e създаден във връзка със стиловите множества. Подобен е на блоковите елементи.Можете да поставите <div> около неограничен брой елементи от блоково или редово ниво и да приложите определен стил към отделната част.
Елемента <span> действа като модифициращ символа елемент. Той не поставя нито край на реда нито край на параграф, но може да се използва при форматирането по блоков начин, тъй като съдържанието на <span> се третира като кутия - можете да прилагате box атрибути към <span>. Обикновенно се използува при вградени елементи.
Родителски елементи са елементите около даден обект например <body>. Непосредствените родители са елементите които са най близо до текста който ще се модифицира.
Създаване на стилове
Стилът е изграден от име на елемент ( hn, p, body и т.н.т.) и една или повече дефиниции. Името на елемента се нарича селектор, а дефинициите - декларации. Например:
h2 { font-family: "Times New Roman", Times, serif; font-size: 20pt; color: #000000; text-align: center}.
Декларациите се заграждат с фигурни скоби и се отделят една от друга с ;(точка и запетая). Всяка дефиниция съдържа свойство, последвано от двоеточие и една или повече стойности, така например, за да промените свойството цвят (color) със стойност #000000 дефиницията ще изглежда така color: #000000 - примера по горе. Точно този стил съм използвал за първото заглавие.
Описанието на стиловете обикновенно се поставя в секцията <head> на HTML документа между таговете <style> и </style> самото описание трябва да се огради като коментар, за не се изведе на екрана от по старите браузъри - преди версии 4. Това изглежда така:
<style> <!-- описание на стиловете--></style>.
Стилове могат да се задават и локално т.е. в самия HTML елемент. Например:
<body style="background: blue">.
Когато се използват локално дефиницията се загражда с кавички, а не с фигурни скоби.
Видове стилове
Съществува четири вида стилови множества, които могат да бъдат използвани:
Предефиниране на HTML елемент - включваме нови характеристики на елемента като запазваме старите. Описанието в предишния параграф например е Предефиниране на HTML елемент.
Клас - в този случай давате име и дефинирате стил, който после се задава на текстов блок или където е нужно.
Третия и четвъртия вид са - свързани или внесени стилови множества. Това е отделен документ, който дефинира вашите стилове. В самите WEB страници вие свързвате към или внасяте стиловото множество. Свързаните и внесените стилове могат да съдържат първите два вида.
Предефиниране на HTML елемент - За да предефинирате един HTML елемент направете следното: Запишете в секцията <style> елемента например h5 { и изреждате дефинициите отделени с ; (точка и запетая).
Това е заглавие h5
h5 { font-family: Arial; font-size: 14px; font-style: normal; background-color: #99FF99; margin-left: 100px; font-weight: 700; text-align: left}
Да разгледаме примера
font-family: Arial - задава вида на шрифта, могат да се зададат и повече от един шрифт.
font-size: 14px - големината на шрифта. може да е пиксели px, точки pt, инчове in, сантиметри cm, милиметри mm и разни други странни мерки.
font-style: normal - стила на шрифта normal, italic, oblique.
font-weight: 700 - отнася се за тежестта на шрифта, font-weight: има повече стойности: normal, bold, bolder, lighter или числа от 100 до 900 през 100 които задават тежестта на шрифта т.е. колко да е удебелен. За момента браузерите разпознават тежестта както им дойде, обикновено се разпознава над 600.
background-color: #99FF99 - може да зададете и фон зад елемента, цвят или картинка.Картинката може да се повтаря по х, по y, или и по двете оси.
margin-left: 100px, text-align: left - първото задава отстоянието на елемента от края на прозореца. Може само от единия край може и от всичките заедно, но не точно при това заглавие. Ако на този пример зададете top и bottom например по 100 px, то ще се отмести на по 100 px от своето естествено разположение в документа, т.е. спрямо редовете преди и след него. Left и right заедно могат да се използват примерно при слоеве и таблици ако искате да няма празно разстояние между тях и края на прозореца и от двете страни.
По този начин можете да предефинирате всеки един HTML елемент.
За използващите Dreamweawer. Отваряте CSS Styles Inspektor от Window -> CSS Styles
От иконката New Style долу в дясно отваряте нов прозорец и в него избирате Redefine HTML Tag. Елемента, който преди това сте маркирали на страницата, се появява в текстовото поле. Давате ОК и пред вас се отваря прозорец Style Definition. От него избирате дефиниции и стойности за избрания селектор. Всички селектори които сте избрали се появяват в Edit Style Sheets.От там по всяко време можете да промените който искате от тях.
Страница 2
Назад
