Блог на Ани Хаджийска: февруари 2018

неделя, 25 февруари 2018 г.

Усвояване на CSS background (част 1)

Свойството background е разделено на няколко части. Те са:

· background-color

· background-image

· background-repeat (втора част на урока)

· background-position (втора част на урока)

· background-attachment (втора част на урока)

· background (съкратено) (втора част на урока)

В този урок ще разгледаме подробно първите две свойства като към всяко ще приложа нагледен пример.

background-color

Това свойство определя цвета, който ще бъде използван за фон на избрания елемент.

За фон (background) на елемент се счита пространството, което се обхваща от ширината и височината на избрания елемент (независимо дали тези размери са фиксирани чрез ширина (width) и височина (height) или се определят от съдържанието на елемента).

Фона също включва и пространството обхванато от padding и border (повече за тях в бъдещи уроци).

Ако елемента няма размери (фиксирани или зависещи от съдържанието) то цвета няма да бъде видим. Също така, ако даден елемент съдържа други елементи, върху всички от които има проложен float (повече за това CSS свойство в някой от бъдещите уроци), то фона също няма да бъде видим, защото височината на този елемент е 0. Решение в този случай е добавянето на clear в края на тази група от елементи.

Ако искаш да промениш фона на цялата страница, то тогава трябва да приложиш background-color върху <body>.

background-color може да приеме 3 стойности:

· color - Стойноста тук може да бъде всеки валиден CSS цвят или ключова дума. Това може да бъдат:

· HEX стойности - Специален шестнадесетичен rgb (red, green, blue) цветови код (на английски hexadecimal color). Например #dd7319;

· RGB стойности - Специален десетичен rgb цветови код. Например rgb(255,0,0);

· Ключови думи, които на английски значат определен цвят. Например “red”, “green”, “blue” и други.

· transparent - Това е стойността по подразбиране. Ако не зададем никаква друга стойност на background-color, то неговата стойност ще бъде transparent. Transparent означава, че фона на конкретния елемент ще бъде прозрачен т.е. ако зад избрания елемент има друг елемент, то фона на втория елемент ще бъде видим.

· inherit - Когато приложим inherit върху определен елемент, това означава че стойността на background-color ще бъде същата като стойността приложена върху родителския елемент т.е. стойността ще бъде унаследена. Това свойство се използва рядко.

Пример

Стъпка 1

Създай нов xHTML документ, който да използва Strict Doctype и да съдържа едно h2 заглавие и кратък текстов параграф. Също така нека удебелим 2-3 думи от този текстов параграф чрез strong.

В това упражнение ще променим фона на страница, h2 заглавието и на текста, който е удебелен.

В браузъра ще видим следния резултат:

Стъпка 2

В кода от предишната стъпка можеш да забележиш, че използвам външен файл за съхранение на CSS кода. Тази техника я разгледахме в урока “Прилагане на CSS чрез външен файл”.

Създай нов документ, който ще използваш за CSS. Запази го при html файла под името “style.css”. Сега го отвори и въведи следния код:

Стъпка 3

Запази промените и отвори страницата в браузър.

Резултата не е от най-красивите, но определено ни дава добра представа за работата на background-color.

В този пример съм използвал трите възможности за задаване на цвят.

· Фона на body е шестнадесетичен rgb цветови код, който започва с #, последван от 6 символа представляващи цвета. Това могат да бъдат числата от 0 до 9 и буквите от “a” до “f”.

· Фона на h2 заглавието е английската дума “white”, която отговаря на “бял”.

· Фона на strong е зададен чрез десетичен RGB код, който започва с rgb(, последван от 3 стойности за всеки цвят разделени със запетайка. Цветовете се представят чрез цифрови стойности в обхвата от 0 до 255. Накрая се затваря скобата ).

· Фона на p е transparent. Това е стойността по подразбиране и няма нужда от повторното ѝ задаване. Когато даден елемент има background-color:transparent;, елемента който е зад него ще се вижда. В случая се вижда фона на страницата.

Подробно разгледахме как работи background-color. Надявам се, че всичко до тук е разбираемо и ясно. Ако имаш въпроси, сподели ги след урока.

background-image

Това свойство определя снимката, която ще бъде използвана за фон на избрания елемент.

Правилата, които важат за прилагане на фон чрез background-color, важат и тук. Прочети ги отново в предишната точка.

По подразбиране снимката използвана за фон започва от горния ляв ъгъл на страницата и се повтаря хоризонтално (x) и вертикално (y), докато стигне долния десен ъгъл на страницата. Не се безпокой, всичко това може да бъде контролирано чрез CSS. В следващия урок ще опиша подробно как става това.

Ако искаш да използваш снимка за фон на цялата страница, то тя най-често се прилага върху <body>.

background-image може да приеме 3 стойности:

· uri - Като стойност тук задаваме пътя до снимката, която ще използваме за фон. Имаме няколко възможности:

Когато файла се намира в същата папка, в която е css документа, тогава като стойност на uri изписваме единствено името на файла и неговото разширение.

Когато файла се намира в отделна папка, тогава задаваме пътя до файла включително и имената на всички папки, през които преминаваме. Например, ако файла се намира в папка images, то тогава стойността ще бъде “images/snimka.jpg”.

Ако файла се намира в директория, която е едно ниво по-високо от директорията, в която се намира css документа. Тогава стойността ще бъде “../snimka.jpg”, където “../” означава, че се изкачваме с една директория по-високо. Ако файла се намира две директории по-високо, тогава се изкачваме два пъти “../../ snimka.jpg” и т.н.

Когато файла се намира някъде в интернет, тогава като стойност можем да зададем пълния адрес то този файл, например “http://www.example.com/ snimka.jpg”.

В урока “Работа с изображения“ говорих за поддържаните файлови формати в Интернет. Това важи и тук. Опитай се да използваш снимки, които са в един от изброените формати.

background-image: последвано от “url(”, последвано от еденична (') или двойна (") кавичка, последвано от пътя до снимката, последвано от еденична (') или двойна (") кавичка и накрая затваряме скобата ). Двете кавички трябва да бъдат еднакви т.е. ако използваш еденична в началото, трябва да използваш еденична и в края.

· none – Това е стойността по подразбиране. Ако не зададем никаква друга стойности на background-image, то неговата стойност ще бъде none.

От друга страна, изричното поставяне на “none” ще предотвратипоказването на background-image.

· inherit – Тази стойност ще позволи на елемента да наследи стойността на background-image от родителския елемент. Този подход обикновено не се използва, защото фона на елемента и неговия родител ще се застъпят.

Как работи background-image?

Така изглежда визуално работата на background-image:

Нека предположим, че страницата ни е с размери 1300px (височина) на 1000px (ширина), а снимката, която ще използваме за фон, е с размери 450px (височина) на 350px (ширина). Виждаме, че размерите на снимката са значително по-малки от тези на страницата, затова когато я приложим като фон, тя ще се повтори многократно докато изпълни ширината и височина на цялата страница (виж фиг. 1).

Във фиг. 2 можеш да видиш реда, по който се прилага background-image. Снимката започва от горния ляв ъгъл (1) на страницата и свършва в долния десен ъгъл (9).

Ако искаш снимката на твоята страница да не се повтаря, имаш няколко варианта, един от които е да използваш снимка с размери по-големи от тези на страницата. Така обаче част от снимката може да остане невидима за посетителя.

Пример

Стъпка 1

Ще използваме същата страница, която създадохме по-рано. Единствената промяна ще бъде в CSS кода.

Създай нов html и css документ, ако не искаш да променяш предишните.

Избери снимка, която искаш да приложиш за фон.

Постави снимката в същата папката, в която се намират html и css докумените.

Стъпка 2

Отвори css файла и въведи следния код:

Стъпка 3

Запази промените и отвори страницата с браузър.

Резултата не е от най-красивите, но ясно можеш да видиш как функционира background-image.

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

четвъртък, 22 февруари 2018 г.

1 задача:

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

Първата ни задача е да прочетем двете числа. След което, чрез проста if-else конструкция, в съчетание с оператора за по-голямо (>), да направим проверка.

Серии от проверки

Понякога се налага да извършим серия от проверки, преди да решим какви действия ще изпълнява нашата програма. В такива случаи, можем да приложим конструкцията if-else if…-else в серия. За целта използваме следния формат:

if (условие)
{
    // тяло на условната конструкция;
}
else if (условие2)
{
    // тяло на условната конструкция;
}
else if (условие3)
{
    // тяло на условната конструкция;
}
…
else
{
    // тяло на else-конструкция;
}

Пример: число от 1 до 9 на английски

Да се изпише число в интервала от 1 до 9 с текст на английски език (числото се чете от конзолата). Можем да прочетем числото и след това чрез серия от проверки отпечатваме съответстващата му английска дума:

int num = int.Parse(Console.ReadLine());

if (num == 1)
{
    Console.WriteLine("one");
}
else if (num == 2)
{
    Console.WriteLine("two");
}
else if (…) 
{
    …
} 
else if (num == 9)
{
    Console.WriteLine("nine");
} 
else 
{
    Console.WriteLine("number too big");
}

Програмната логика от примера по-горе последователно сравнява входното число от конзолата с цифрите от 1 до 9, като всяко следващо сравнение се извършва, само в случай, че предходното сравнение не е било истина. В крайна сметка, ако никое от if условията не е изпълнено, се изпълнява последната else клаузa.

Диаграми упражнение

1. ЗАДАЧА:
1. Създайте таблица, описваща броя на оценките по математика в края на учебната година. Имайте предвид, че са получени следния брой оценки:
Слаб - 3 бр;
Среден - 5 бр;
Добър - 10 бр;
Много добър - 8 бр;
Отличен - 4 бр.
2. Сортирайте таблицата по брой оценки в низходящ ред.
3. Създайте правоъгълна диаграма, сравняваща различния брой оценки и задайте заглавие "Оценки по математика".
4. Създайте диаграма, която пропорционално да показва съотношението на броя оценки, задайте заглавие "Оценки по математика" и покажете процентния дял на всяка оценка.

2. ЗАДАЧА:
1. Създайте таблица, описваща видовете семейни разходи за един месец като имате предвид, че са заплатени за заем - 300 лв, за електричество - 25 лв, за парно - 45 лв, за мобилен телефон - 40 лв, за хранителни стоки - 400 лв, за гориво за автомобил - 120 лв, за развлечения - 600 лв, за други - 50лв.

2. Сортирайте таблицата по разходи във възходящ ред.

3. Създайте правоъгълна диаграма, сравняваща разходите и задайте заглавие "Месечни разходи".

4. Създайте диаграма, която пропорционално да показва съотношението на направените разходи, задайте заглавие "Месечни разходи" и покажете процентния дял на всеки вид разход.

3. ЗАДАЧА:
На конкурсен изпит по математика се явили 3600 кандидати.Резултатите от изпита са показани на кръговата диаграма. Създайте електронна таблица, с която да намерите броя на учениците, получили слаби, средни, добри, много добри и отлични оценки.

понеделник, 19 февруари 2018 г.

Текст и шрифтове

Контрола на текста в CSS се извършва чрез следните атрибути и съответните им стойности:

1. font-family - Задава шрифт на текста. Възможните му стойности са названието на един или няколко шрифта, отделени със запетаи (например font-family: arial, sans-serif, helvetica, verdana).

2. font-size - Задава големина на текста. Възможните му стойности са цифрови - в пиксели (px) или пойнтове (pt) (например font-size: 14px).

3. font-weight - Задава удебеляване или "изтъняване" на текста. Може да приема следните стойности:

normal - показва нормален текст

bold - удебелява текста

bolder - удебелява текста повече от bold

lighter - изтънява текста

100 - изтънява текста (същия ефект като lighter)

200

300

400 - прави текста какъвто е подразбиране (същия ефект като normal)

500

600

700 - удебелява текста (същия ефект като bold)

800

900 - удебелява максимално текста (същия ефект като bolder)

4. text-align - Задава позиционирането на текста в страницата. Възможните му стойности са:

left - подравнява текста вляво (същата е стойността по подразбиране)

right - подравнява текста вдясно

center - центрира текста

justify - подравнява текста едновременно вляво и вдясно

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

- чрез название: color: white

- чрез 16-тична стойност: color: #ffffff

- чрез RGB стойност: color: rgb(255,255,255)

6. background-color - Задава цвят за фон на текста. Възможните му стойности са цветове, описани чрез 16-тичната бройна система, чрез английските им названия или чрез RGB стойност, подобно на атрибута color.

7. text-decoration - Задава допълнителен ефект (украса) на текста. Възможните му стойности са:

underline - подчертава текста с долна черта

overline - подчертава текста с горна черта

line-through - зачертава текста

blink - кара текста да премигва

none - показва нормален текст, като премахва всички ефекти от текста (например премахва подчертаването на връзките)

8. letter-spacing - Задава разстояние между буквите на текста. Възможните му стойности са normal или зададено с цифри разстояние между буквите. Цифровите стойности могат да бъдат указани в пиксели (например letter-spacing: 5px) или сантиметри (например letter-spacing: 0.3cm). Тези стойности могат да бъдат и с отрицателен знак - в този случай буквите от текста се сбиват, тъй като разстоянието между тях се намалява (например letter-spacing: -2px).

9. word-spacing - Задава разстояние между думите в текста. Възможните му стойности са normal или зададено с цифри разстояние между думите. Цифровите стойности могат да бъдат указани в пиксели или сантиметри и да приемат отрицателен знак, подобно на стойностите на атрибута letter-spacing.

10. white-space - Задава дали текста да бъде показан точно както е написан в текстовия редактор, т.е. дали да се покажат всички "спейсове" и "ентери" - разстоянията между буквите, думите и редовете, както са написани например в Notepad или браузъра да игнорира оставените бели пространства в текста и да го покаже компактен. Възможните му стойности са:

normal - показва текста като игнорира оставените бели пространства

pre - показва текста точно както е написан в текстовия редактор, какъвто е ефекта от HTML тага <pre> </pre>

nowrap - не позволява текста да се пренесе на по-долен ред докато не се постави тага за прекъсване <br />. Ако текста е достатъчно дълъг в долната част на браузъра ще се появи лента за скролиране.

11. text-indent - Използва се при започване на нов абзац в текста. Оставя разстояние между лявата страна на страницата и началото на текста от първия ред на абзаца. Възможните му стойности са цифрови - в пиксели (px), сантиметри(cm) или проценти (%).

12. text-transform - Задава на текста главни или малки букви. Възможните му стойности са:

uppercase - задава на целия текст главни букви

lowercase - задава на целия текст малки букви

capitalize - задава като главна началната буква на всяка дума от текста

none - показва текста във вид по подразбиране

13. direction - Задава посоката, в която тече текста. Възможните му стойности са:

ltr - текста тече от ляво на дясно

rtl - текста тече от дясно на ляво

ПРИМЕР

Направете CSS файл (например myfile.css) със следното съдържание:

След това направете HTML страница, в която използвайте тага <h1> и напишете някакъв текст, за да видите декларираните ефекти, като не забравяте, че в head на HTML документа трябва да разположите връзката

неделя, 25 февруари 2018 г.