Урок CSS – Част 1 – Въведение

intro-css-banner

Структурирали сме си правилно html документа – супер! Сега обаче искаме да го направим малко по – джиджан(за по – точна дума не се сетих). Следващите 3 или 4 урока ще бъдат предназначени за начинаещите и ще представляват въведение в стилизирането. След това ще има поне 6 поста за CSS3(за сега измислих толкова теми).

Днес ще се запознаем с по основните неща – както е това CSS. Как да го използваме правилно, как да си свържем css-а с html документа, кои са различните селектори. Различните пропъртита ще разгледаме в следващите постове.

Може би голяма част от нещата казани тук се припокриват с обясненията в „Web design терминология – Част 2: CSS” , но въпреки това, мисля че има достатъчно допълнителни неща, които си заслужават прочитането.

До колкото виждам от poll-а предпочитате видео уроците като начин за представяне на информацията и може би специално за уроците ще го имам предвид още от следващата част на този урок, но това така или иначе го написах, защо да не го прочетете…

Що е то?

От няколко стандарта насам е явен стремежа за разделение на съдържанието от презентацията на информацията. Както имам предвид – HTML трябва да се използва само за описване на структурата на документа, таговете да се използват само когато има нужда от тях и когато е необходимо да се зададе структурен смисъл. Самото стилизиране трябва да става чрез CSS. Например когато искаме нещо да е удебелено, да не го слагаме в b таг само защото искаме да е удебелено, а да използваме CSS за целта.

CSS не е онази знаменателна игра от миналото деситилетие, с добавено едно S за красота на края. CSS идва от Cascading Style Sheets. Използва се единствено и само за презентацията на документа. Чрез CSS можем да дефинираме размери, разстояния, отстояния, шрифтове, цветове, layout и т.н. на елементите от нашия документ. CSS ни дава възможност да увеличим достъпността на нашия документ – да направим едни елементи по – лесно открояващи се от други. Да направим текста по лесно четим за дадена аудитория и т.н.

По принцип CSS може да бъде добавен за стилизиране на всеки XML документ, не само за HTML документи, но в случая това нас не ни засяга толкова много. CSS ни дава възможност да кажем как бихме искали да изглежда нашата страница за различни устройства, за принтиране, за проектиране, ако се гледа през Брайлови четци и т.н.

Защо Cascading

Първо може би е добре да изясним как работи CSS. Най просто казано чрез него вие казвате вземи всички параграфи и ги направи с този шрифт или вземи всички елементи с този клас(спомнете си за атрибута class на таговете) и им сложи зелен background. Както може би вече някой от вас се питат – ами добре какво става ако зададем на всички параграфи един и същи клас и после в CSS-a сложим цвета на всички параграфи да е червен, а цвета на тези класове да е зелен? Кое от двете ще се изпълни? Имайте търпение – при CSS също има нещо като тежести, които ще обясним след малко.

Та на Cascading. CSS е такъв, защото при него имаме наследяване, или прехвърляне. Стилът който сме задали на родителя, се прехвърля на детето. Или с други думи казано – ако сме казали на един параграгф, че искаме да е с големина на шрифта 20px, то всички елементи, които се вложени в него автоматично също ще приемат тази големина на шрифта, освен ако изрично не е оказано друго. Това не важи за всички пропъртита, но е хубаво да го имате предвид. Например пропъртита които се наследяват са свързаните с текст – color, font-size, font-family, line-height, text-align, list-style и т.н. И без да даваме обяснение за всяко едно от тях, мисля че от имената им се досещате за какво става въпрос. За сега ги давам само като пример.

От друга страна така наречените блокови пропъртита (защото се използват за блоковите елементи) не се наследяват. Например – width, height, border, margin, padding, position, float.

Важно е да запомните, че линковете(a таговете) не наследяват цвят и оформление на текста – те трябва да бъдат изрично оказани.

Синтаксис

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

Описанието на стиловете се състои от селектори, пропъртита и стойности(най – общо казано). Селекторите посочват кой елемент искате да стилизирате(например параграф или заглавие). Пропъртитата посочват кое свойство на елемента искате да промените и стойностите са всъщност по какъв начин искате да промените това стойство. Декларационния блок(мястото където описвате свойствата, които искате да промените) започва винаги с отваряща „{” и завършва със затваряща „}”.  Нека вземем следния пример

p { font-size: 16px; }

В случая сме казали че искаме да променим големината на шрифта на всички параграфи. Започваме с елемента, които искаме да променим и добавяме промените, които искаме да изпълним в декларационния блок, като ги разделяме с точка и запетая една от друга. Т.е. ако в същия пример искаме да променим и цвета на всички параграфи ще го направим по следния начин:

p { font-size: 16px; color: Red; }

И така разделени със точка и запетая можем да изброяваме колкото на брой искаме свойства, които желаем да променим. Ако освен това искаме да направим цвета на всички h1 елементи зелен, просто го описваме по същия начин:

p { font-size: 16px; color: Red; }

h1 {color: Green; }

Селектори

Селекторите определят кой елемент искаме да стилизираме. Можем да стилизираме елементи по даден таг, по даден атрибут – id, class или по начина, по който са наследени. Ще разгледаме примери за всички варианти. Вече видяхме как можем да стилизираме елемент, използвайки неговият таг (не забравяйте че стилизирайки например <p> , това ще се отрази на всички параграфи във вашия документ). Ако искаме да стилизираме всички елементи с даден клас да речем cool, просто пишем името на класа, като слагаме префикс „.” Или ако искаме да сложим жълт цвят на всички елементи с клас cool, можем да го направим по следния начин

.cool { color: Yellow; }

Ако искаме да прихванем елемент с дадено id, го правим по подобен начин, но използваме за префикст символа “#”. Или ако искаме да направим цвета на елемент с id – best, да е бял, можем да го направим по следния начин:

#best { color: White; }

Друго важно свойство при селекторите е възможноста за изброяване. Ако искаме един и същи стил да бъде приложен на няколко емента можем да го направим просто като ги разделяме със запетая. Ако искаме всички параграфи, всички h1, елементи с клас cool и елемент с id best да са с размер на шрифта 20px и да са със син цвят, можем да го направим по следния начин:

p, h1, .cool, #best { font-size: 20px; color: Blue;}

Както споменах отначало имаме и други възможности да селектираме елементи. Например ако искаме да стилизираме всички линкове, които са вложени в параграфи, можем да го направим по този начин.

p a { font-size: 16px; }

Ако искаме да стилизираме всички линкове, който са вложени в спанове, които от своя страна са вложени в параграфи можем да го направим по този начин.

p span a { font-size: 20px; }

Имаме един специален селектор – „*” , който селектира всички елементи. Трябва да внимавате когато го използвате или се стремете, да не го използвате. Например ако искаме да селектираме всички вложени елементи в даден параграф го правим по този начин:

p * {font-size: 20px;}

Ако искаме да селектираме всички братя/сестри в йерархията на даден елемент, които са след него можем да го направим със знака „+”. Ако искаме да селектираме всички елементи с клас cool, които са на едно ниво в йерархията със img елемент, но се намират след него използваме:

img + .cool {font-size: 20px;}

Както знаете един елемент може да има много вложени в себе си елементи. Ако искаме да селектираме само преките наследници – или тези, които са едно ниво под елемента, го правим със знака „>”. Например ако искаме да хванем всички линкове, които са директни наследници на елементи с клас .cool го правим по следния начин:

.cool > a {font-size: 20px;}

Малко повече разяснения. Нека имаме следната структура:

<div class="”cool”">
   <a href="”#”">My first link</a>
   <a href="”#”">My second link</a>
   <div>
      <a href="”#”">My third link</a>
   </div>
</div>

Използвайки показания селектор ще прихванем само първите 2 линка, защото само те са директни наследници на елемент с клас cool. Третият линк не е директен наследник, а е внук на елемента с клас cool.

Следващия пример е малко по – сложен, но ще бъде обяснен по – подробно в следващи части. Той използва така наречените regular expression, чрез които се задава някакъв pattern, който трябва да бъде изпълнен(някаква комбинация). Само за пример ако искаме да селектираме всички img елементи, които имат зададен alt атрибут, и в стойността му има спомената думата logo, бихме могли да го направим по следния начин:

img[alt~=logo] { border: 0; }

Един елемент може да има няколко класа. Например ако искаме един див да има едновременно класовете cool и content ги изброяваме с интервал помежду им:

<div class="cool content"></div>

В CSS ако искаме да обхванем елементи, които задължително имат няколко класове, можем да го направим като ги изброим, без разделители:

.cool.content { width: 200px; }

Това ще ни избере само елементите, които имат и 2та класа – не само един от двата.

Вмъкване на CSS в документ

Има три различни начина, по които можете да приложите даден стил във вашия документ:

  1. Inline – този начин е хубаво да знаете че го има, но не е хубаво да го използвате(търсачките не се кефят особенно, прави кода ви не преизползваем).Как се осъществява – чисто и просто задавате пропъртитата в атрибута style на елемента, без да използвате селектори:
    <div style="background-color: #f00"></div>
    

    По този начин стилът, който сте описали ще се отрази само на този елемент, в който е описан.

  2. Embedded – този начин също е хубаво да знаете, че го има, но се стремете да го избягвате. Той се прилага, чрез използването на тага style във head частта на документа ви. Описвате селекторите и декларационния блок.
    <style>
    p {font-size: 20px;}
    div {width: 200px;}
    
  3. External – това е начина, който най – често би трябвало да използвате.Описвате стиловете си във отделен документ, със разширение .css (нищо по различно от начина, по който създавате обикновен текстов документ). Използвайки този начин напълно отделяте стила от структурата на документа си, правите стиловете си преизползваеми (можете да използвате един .css файл за няколко html документа), увеличавате скоростта на зареждане на страницата си (след като вече е била кеширана от браузъра). След като сте описали стиловете си, можете да ги приложите в документа си отново във head частта чрез тага link
     <link href="…" rel="stylesheet" />
    

    Като на мястото на href поставяте пътя до вашият css файл, по начина по който го правите с линковете и картинките.

    Хубаво е да имате предвид, че по – старите версии на IE могат да зареждат само до 32 css файла (пак си имат собствено мнение за нещата).

Примери

Inline

Here is some text
<p style="font-size: 20px;">Here is some more text</p>
<p style="font-size: 20px; color: red;">Even more text</p>

Embedded


<style type="text/css">
    em {background-color:#8000FF; color:white}
    h1 {font-family:Arial, sans-serif}
    p  {font-size:18pt}
    .blue {color:blue}
</style>

<h1 class="blue">A Heading</h1>
Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>


External

Това е цялото съдържание на css файла ни:

a { text-decoration: none }
li em { color: red; font-weight: bold }
ul { margin-left: 2cm }
ul ul { text-decoration: underline; margin-left: .5cm }

Ето и html документа ни:

<link href="styles.css" rel="stylesheet" type="text/css" />
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
 <li>Milk</li>
 <li>Bread
<ul>
 <li>White bread</li>
 <li>Rye bread</li>
 <li>Whole wheat bread</li>
</ul>
</li>
 <li>Rice</li>
 <li>Potatoes</li>
 <li>Pizza <em>with mushrooms</em></li>
</ul>
<a title="grocery store" href="http://food.com">Go to the Grocery store</a>

Заключение

Знам, че с до тук обясненото може би нещата са ви станали още по – неясни, но ми се скараха за размера на постовете ми, че трябвало да бъдат по кратки. Ако сте начинаещ, едва ли с наученото до тук ще можете да започнете да правите чудеса, но е все пак начало. От този пост се опитайте наистина да запомните начините за селектиране на различните елементи (при CSS3 имаме още няколко добавки, за които ще говорим).

Следващите постове ще разгледаме какви могат да ни бъдат различните пропъртита, какви мерни единици се използват са стойности, ще говорим за позициониране и за различията между browser-ите (и защо мразим IE). (По всяка вероятност ако тенденцията в гласуването се запази следващите части ще са под формата на видео уроци)

p.s. Специални благодарности за Marketing Team @ ISG technology за помощта


6 Responses to “Урок CSS – Част 1 – Въведение”

  1. Георги Янков says:

    “Ако искаме всички параграфи, всички h1, елементи с клас cool и елементИ с id best…” – Ясно е, че е техническа грешка множественото число при “елементИ” пред “id best”, но тъй като статията е за начинаещи има вероятност да се подведат, че може да има няколко елемента с една и съща стойност на атрибута “id” ;).

  2. Владимир Бакалов says:

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

  3. ta_da says:

    Благодаря, на мен ми беше много полезно.
    Имат си предимства статиите, но нека мнозинството реши : )

  4. Lubomir says:

    Браво Павка отлична статия, аз също съм се запалил по HTML и CSS даже на скоро записах безплатен курса по Web Front-End Development. Реших най-накрая да се науча как се правят уеб сайтове с Photoshop, HTML, CSS и JavaScript и как се ползват CMS системи като WordPress и Drupal.Смея да твърдя, че преподавателите са много добри специалисти в сверите в който работят и може да се много от тях. За напълно начинаещи курса е доста труден, но с повече труд и упоритост нещата се получават :) А най-хубавото е, че курсове всички Telerik са напълно безплатни !

  5. Nice blog here! Also your web site loads up fast! What
    web host are you using? Can I get your affiliate link to your host?
    I wish my website loaded up as quickly as yours lol

Leave a Reply to Pavel Kolev Cancel reply

Your email address will not be published. Required fields are marked *