Въведение в CSS

Аватар
Nixe
Активен
Активен
Мнения: 274
Регистриран на: 09 Ное 2017, 14:25
Ник в играта: Psych0_91
Скайп профил: live:nixe21
Вашият пол е: Мъж
Местоположение: Antwerpen, Belgium
Обратна връзка:

Въведение в CSS

Мнение от Nixe »

Въведение в 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 файл.

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, но така се почва!


Автор: NoConNecT_BG
Източник cs-bulgaria.com

Надявам се урока да ви хареса!
Публикувай отговор

Обратно към “CSS”

Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 1 гост