CSS Част 1

nma трудност:

видян: 19712

ПРИМЕР:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Заглавие на страницата</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<meta name="description" content="описание на страницата" />
<meta name="ключови, думи" />
<meta name="robots" content="index, follow" />
<link rel=stylesheet type="text/css" href="file.css" />
</head>

<body>

Някакъв текст<br>
Някакъв текст

</body>
</html>

Сега страницата ще се покаже с параметрите, които сте задали, а именно - черен фон на страницата и светлосив текст. Всички страници, в които сложите кода <link rel=stylesheet type="text/css" href="file.css" /> ще имат същия външен вид. Ако желаете да промените цвета на фона или някои от параметрите на текста ще трябва да направите промените единствено в CSS файла и те автоматично ще се отразят във всички HTML документи, в които има връзка към файла file.css

За да работи този ефект, както е направен линка към file.css в примера, е нужно CSS файла да се намира в същата директория (папка), в която се намират и HTML страниците. В противен случай трябва да се укаже пътя до CSS файла, например ако HTML страницата е в някаква вътрешна папка, а file.css е в основната директория линка ще бъде

<link rel=stylesheet type="text/css" href="../file.css" />

и т.н.

Както се вижда, структурата на CSS файла включва название на елемента, за който ще се задават параметрите - в случая това е body, и след това самите параметри, които се ограждат в големи скоби - { }. Когато в големите скоби се поставят няколко параметъра (както е в случая), те се отделят един от друг чрез точка и запетая. В примера скобите и зададените параметри са поставени на отделни редове, но това е само за прегледност, иначе кода на CSS файла може да изглежда и така:

body {
background-color:#000000;
font-family:arial, sans-serif, helvetica;
font-size:12px;
color:#cccccc;
}

Когато се задава числова стойност на някакъв атрибут, например font-size: 16px, можете да оставите стъпка разстояние между двоеточието и цифрите (: 16), но не отделяйте цифрите от техните параметри, т.е. правилно е да се напише "16px", а не "16 px". Във втория случай кода няма да бъде разчетен от всички браузери, само InternetExplorer6 ще покаже ефекта.

Когато стойността на някакъв атрибут е съставена от две и повече думи, например sans serif, тези думи трябва да са свързани с тире (sans-serif) или трябва да се поставят в кавички ("sans serif").

Съществуват няколко вида CSS записи. Записа който направихме в горния пример се нарича външен стил (External Style Sheet) и се използва, както беше описано, когато трябва да се контролират множество HTML документи, като нужните параметри се задават във външен файл (в примера - file.css).

Съществува и вътрешен за HTML документа стил (Internal Style Sheet), който се използва за да се зададе вида на един отделен HTML документ, като нужните параметри се задават със специални тагове и атрибути в секцията head на HTML страницата.

Inline Styles - вътрешни за HTML таговете стилове - се използват, като специални CSS атрибути се разполагат директно в HTML таговете и имат ефект за определено място от страницата. Конкретната употреба на тези видове ще бъде обяснена по-нататък в материалите за CSS.

Понякога се налага да се използват всички видове CSS и в такъв случай първо се изпълнява ефекта от Inline Style (вътрешните за HTML таговете стилове), след тях на 2-ро място по приоритет са
Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл.

Страници: «1 2

Сподели урока:

Коментари (4)

sericsson на 20.08 2007 в 15:25ч.

Преди да започнете да се занимавате с CSS, трябва да сте поне малко наясно с HTML. Както виждате и за това доста хора са се потрудили. Ако наистина сте решили да програмите и да си направите добър и истински web site трябва да започнете от самото начало - а именно HTML. След което продължете с CSS. Тогава със сигурност ще разбирате всичко, което се пише и обяснява в тези уроци!

sericsson на 21.08 2007 в 09:47ч.

Хей dichy, хората и за това са измислили едно много добро и практично решение. Нарича са Dreamweaver. Ако си решил да пишеш кодовете, вместо да използваш дизайнерската част, поне можеш да се възползваш от допълнителната част за въвеждане на кодове. В случая с цветовете и аз не ги знам наизуст, но, когато стигна до този момент програмата ми помага. Пробвай и ще разбереш. Ако толкова много ти харесва определен цвят - просто си запиши кода му на лист хартия - и в един момент без дори да се замисляш ще си го научил. Хайде, наслука :)

SU.FMI на 25.08 2007 в 15:00ч.

"Хора, човека си е обяснил нещата перфектно. За тези, които казват, че не разбират нищо имам съвет - Преди да започнете да се занимавате с CSS, трябва да сте поне малко наясно с HTML. Както виждате и за това доста хора са се потрудили." - sericsson
Точно така си е и, мога да ви кажа, урокът е супер - поднесено е най-разбираемо какво представлява CSS и какви са най-първите и елементарни неща в CSS. А тези, които не го разбират, най-вероятно си нямат и понятие от HTML, така че, за да учите CSS, минете първо през HTML писането.

swords на 06.11 2007 в 21:31ч.

background-color:#000000 - Това е цвета на фона, а кода срещу него не е нещо сложно. Този код се среща и в Photoshop и в Dreamwaever и в куп други програми

font-family:arial, sans-serif, helvetica - Това са видове шрифтове(освен font-това е команда). Ако само това не си разбрал, то значи си добре.

П.П. Много добър урок!

CSS Част 1

Коментари (4)

Регистрирайте се, за да добавите коментар