Големина на текста:
Упражнение 3 CSS – въведение, форматиране на текст
Основи на CSS
I. Въведение в CSS
Задача 1. Отворете директория CSS_11_css_introductionzad_1.
В нея се съдържа два варианта на една и съща уеб страница
(CSS_11_css_introductionzad_1) – с използване на css (template_css)
и без използване на css (template_no_css). Отворете index.html на
двата уеб сайта и ги разгледайте с браузър. По какво се различават
двете страници? С този пример се показва какво е предназначението
на html (определя структурата и съдържанието на страницата) и css –
определя оформлението на страницата.
Разгледайте следния уеб сайт http://www.csszengarden.com, който
съдържа множество примерни страници, които демонстрират
възможностите на css. Всички страници използват един и същ html –
документ, а дизайна се променя с използване на възможностите на
css.
Предимства на използване на CSS
Целта на използване на CSS e опростяване на HTML кода, оставяйки
го чист и разбираем. Предимствата са:
? По-голяма достъпност на различни видове устройства
(браузери)
? Лесно обновяване на уеб сайта – актуализране на css файла, а
не всички html файлове
? По - малък размер на изходния файл и следователно по -
бързо зареждане
? По – малкият размер на кода позволява много по – лесна
обработка и обновяване
? Повече контрол над кода
Пример, който показва какво е селектор, декларация, свойство и
стойност:
img {border: none;}
img { border: none };
селектор декларация
свойство стойност
При задаване на стойност на свойство, символа за мерна единица
трябва да следва стойността без празна позиция:
Правилно: { margin: 2em; }
Неправилно: { margin: 2 em; }
При стойност 0 може да се пропусне мерната единица:
{ margin: 0; }
Упражнение 3 CSS – въведение, форматиране на текст
Блок от декларации
Пример:
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 100%;
line-height: 1.25em;
color: #bbb;
}
Групиране на селектори
Пример:
h1, h2 и h3 имат едни и същи
свойства и стойности
Групирани селектори
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
h2 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Задача 3. Отворете файла CSS1_css_introductionzad_3orange.html с
браузър за да видите как изглежда.
Отворете същия файл с Notepad и добавете в секцията head следния
код и запишете файла под име orange_css.html. Сравнете двата файла
(orange.html и orange_css.html)
<style type="text/css">
h1 {
color: green;
}
p {
font-size: small;
Упражнение 3 CSS – въведение, форматиране на текст
font-family: sans-serif;
}
</style>
Отворете страницата с браузър и вижте резултата от промяната.
? Добавете правило, което да оцветява тага h1 в червен цвят, а
h2 в син.
? Добавете 100px отстояние отляво на таговете за параграф p
като използвате следната декларация и я добавите към
съществуващото правило p:
margin-left: 100px;
? Добавете 100px отстояние отляво на таговете h2
? Добавете червена рамка с дебелина 1px под тага h1 като
използвате следната декларация:
border-bottom: 1px solid red;
? Преместете изображението в дясно и укажете изливане на
текста с правилото float като използвате следната
декларация:
img {
float: right;
margin: 0 12px;
}
Запазете промените във файл с ново име, разгледайте страницата с
браузър и сравнете с първоначалната страница. Този пример показва
използване на вложен css стил . Свойствата, които участват в
примера ще бъдат разгледани по – подробно напред в упражненията.
Задача 4. Отворете файла CSS1_css_introductionzad_3orange.html с
Notepad. Намерете в секцията body заглавието “Цитросови плодове” и
добавете следния код:
<h1 style="color: green; margin-top: 2em" >Цитросови
плодове</h1>
Оцветете заглавието Персийски портокал в синьо. Запишете файла с
ново име и вижте резултата от промяната с браузър. Защо се променя
само едното заглавие?
С този пример се показва използване на вътрешни css стилове .
Външните css стилове ще бъдат разгледани по - подробно с
примери напред в упражнението.
Свързване на стилове с HTML – документ
В предишния пример беше използван вграден стил в HTML –
документа с използване на style. Това е един от трите начина за
прилагане на стил към (X)HTML – документ. Следва кратко описание:
Външен стил (External) - това е отделен файл с разширение .css,
който съдържа стилови правила. Този файл се прикрепя или
импортира към един или повече (X)HTML – документа (това ще бъде
разгледано по – подробно в друго упражнение). По този начин всички
файлове в един уеб сайт ще споделят един и същ стил. Това е най –
предпочитания начин за прилагане на стилове към съдържание.

Това е само предварителен преглед

За да разгледате всички страници от този документ натиснете тук.

CSS-форматиране на текст

Предимствата са: по-голяма достъпност на различни видове устройства (браузери); Лесно обновяване на уеб сайта – актуализране на css файла, а не всички html файлове и др...
Изпратен от:
Ун
на 2014-07-03
Добавен в:
Упражнения
по Визуално програмиране
Статистика:
24 сваляния
виж още
 
 

CSS-форматиране на текст

Материал № 1110933, от 03 юли 2014
Свален: 24 пъти
Прегледан: 24 пъти
Предмет: Визуално програмиране
Тип: Упражнение
Брой страници: 22
Брой думи: 5,109
Брой символи: 29,716

Потърси помощ за своята домашна:

Имаш домашна за "CSS-форматиране на текст"?
Намери бързо решение, с помощтта на потребители на Pomagalo.com:

Последно видяха материала
Сродни търсения