Въведение в CSS - уроци за XHTML/CSS

Въведение в CSS

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

CSS (Cascading Style Sheets) организира кода ви така, че в самия HTML документ да имате по-изчистен код (което прави всяка страница да зарежда по бързо). Има три начина на използване на CSS.
Първият е да използвате външен CSS файл. В този случай всичкият CSS код се пише във външен файл, към който по-късно се дава линк във HTML страницата. Този начин обикновено се ползва, когато са налице по-дълги и по-обемни CSS кодове.
Вторият начин е да използвате извадени CSS кодове, които да бъдат поставени в HTML файловете ви. Това означава, че всяка страница има свой собствен CSS код, който се намира в нея. Къде се поставя е обяснено малко по-нататък.
И третият начин е да се използва CSS директно на местата където ви трябва, директно при останалия HTML код.

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

Ето и подробни обяснения за всеки един от изброените начини.

Първи начин - външни CSS файлове.

Външният CSS файл е с разширение .css (например: style.css). В него вие слагате всичкия ви нужен CSS код, който после можете да ползвате в HTML страниците.
За да се чете този код, трябва да поставите линк към CSS файла. Това става с тага <link>, който се поставя в HEAD частта на една страница (тоест между таговете <head> и </head>)

Първо да разгледаме синтаксиса на CSS, за да имате някаква представа какво пишем.
Ето един примерен CSS код:

Код

селектор {
    свойство: стойност;
    свойство: стойност;
    .
    .
}

селектор {
    свойство: стойност;
    свойство: стойност;
    .
    .
}

Ето пример:

Код

body {
    font-family: verdana, arial, serif;
    font-size: 11px;
    color: #000000;
}

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

Ето и как работи цялата система с външен CSS файл.

style.css

Код

body {
    font-family: verdana, arial, serif;
    font-size: 11px;
    color: #000000;
}

index.html

Код

<html>
<head>
  <title>Remote CSS Test</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  I'm testing remotely linked cascading style sheets!
</body>
</html>

Обърнете внимание на тага <link> в HTML кода. Чрез него се осъществява връзката между HTML и CSS!

Предимството на този начин е, че можете да използвате един CSS файл за няколко (или множество) HTML файлове. Когато се наложи да редактирате CSS кода вие ще го редактирате само веднъж!

Втори начин - CSS в самия HTML файл.

Ако използвате този начин, вие ще поставяте CSS код в началото на всеки файл.

Ето пример за вграден CSS:

Код

<html>
<head>
	<title>My First CSS site</title>
	<style type="text/css">
		body {
	    font-family: verdana, arial, serif;
	    font-size: 11px;
	    color: #000000;
		}
	</style>
</head>
<body>
Text
</body>
</html>

Ако пробвате ще видите, че текстът в BODY секцията ще бъде 11px Verdana. Така се ползва CSS директно в HTML файла. Забележете, че синтаксисът е абсолютно същия!

Третият начин - поставяйте CSS само където ви трябва

С този начин вие въвеждате CSS само да определени места. Ето пример:

Код

<html>
<head>
  <title>Testing in-line styles</title>
</head>
<body style="background-color: #D5D5D5;">
	<p style="font-size: 18pt;">
	I'm testing in-line styles!
	</p>
	<p>
	<span style="color: #0000CC;">
	This text is blue!
	</span><br />
	This text is not!
	</p>
	<p>
	<span style="color: #CC0000;">
	This text is red!
	</span><br />
	Hey look! This text isn't!
	</p>
</body>
</html>

Както виждате на места е въведен CSS код, който променя определените части от HTML файла. Тук са поставени само свойствата и техните стойности. Селектори не се ползват, защото селекторът определя за коя част от HTML ще важи CSS кода, докато по този начин вие го определяте, като слагате CSS кода където е нужен.

Обобщение

Това е началото на CSS. След като знаете как да ползвате кода, можете да пристъпите към същинската част - самия код.
Надявам се, че този урок е полезен. Може да не е бил много интересен, понеже практически все още не можете да работите с CSS, но така се почва!

Back to ...