Cs-Bulgaria.Com WWW.Cs-Bulgaria.Com • Виж темата - Въведение в CSS

Въведение в CSS

Изображение Всички свързано с програмните езици, както и тяхната структура и понятия ще намерите тук.

Въведение в CSS

Мнениеот noconnectbg » Вто Май 26, 2015 12:27 pm

Въведение в 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

Надявам се урока да ви хареса!

[Nick, Skype]

NoConNecT_BG == noconnectbg



Cs-Bulgaria - Изиграй скуката при нас.
Изображение
Аватар
noconnectbg
В.И.П
В.И.П
 
Мнения: 277
Регистриран на: Вто Авг 25, 2015 12:11 pm
Местоположение: Бургас

Re: Въведение в CSS

Мнениеот SeeKeR » Съб Юни 13, 2015 1:00 am

Много добро,браво !
Аватар
SeeKeR
Потребители
Потребители
 
Мнения: 35
Регистриран на: Чет Май 28, 2015 5:09 pm

Re: Въведение в CSS

Мнениеот laijen » Нед Авг 02, 2015 5:31 pm

Браво, добър урок ;)
Аватар
laijen
Потребители
Потребители
 
Мнения: 91
Регистриран на: Пон Юли 27, 2015 11:28 am


Назад към HTML / CSS

Кой е на линия

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