CSS Част 1

nma трудност:

видян: 8486

CSS е съкращение от Cascading Style Sheets и представлява отделен език, съдържащ множество "инструменти", с които може да се влияе на външния вид на HTML страниците. От определена гледна точка CSS е нещо като "надстройка" на HTML.

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

Ето един конкретен пример, чрез който ще изясним за какво става дума.
Да предположим, че имате сайт, съставен от 50 HTML страници. Ако ползвате тага <font> за да задавате вида на шрифта, големината и цвета му, вие ще трябва във всяка една html страница да пишете кодове от сорта на

<font face="arial, helvetica, sans-serif" size="-1" color="#cccccc">някакъв текст</font>

Също така ще се наложи за всяка една страница да дефинирате например цвета на фона чрез атрибута bgcolor на тага body:

<body bgcolor="#000000">

и т.н.

Ако някога решите да промените някои от тези параметри ще ви се наложи да отворите сорсовете на всичките 50 страници и да въведете промените във всеки един от тях. Цялото това усилие може да си го спестите като направите един CSS файл и разположите в него всички нужни параметри. След това трябва само да сложите по един линк към CSS файла във всяка от примерните 50 HTML страници, за да бъдат валидни зададените параметри за всяка една от тях.

Ще направим един най-прост CSS файл. Отворете някакъв текстов редактор, например Notepad и напишете в него следния код

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

След това съхранете файла като му зададете разширение css - например file.css

Сега остава във всяка HTML страница в секцията head да сложите следния код:
<link rel=stylesheet type="text/css" href="file.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-това е команда). Ако само това не си разбрал, то значи си добре.

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

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

реклама