Для чаго css?

Css адказны за стыль элементаў. Напрыклад, колер фону элемента header зробім жоўтым.

 
 header {
     background-color: yellow;
 }

Таксама, стыль уключае ў сябе памеры і пазыцыянаванне. Паставім нашаму элементу вышыню(height) роўную 200px і зафіксуем пазацыю fixed.

 header {
     height: 200px;
     position: fixed;
     background-color: yellow;
 }

 

У прыкладзе вышей, разбяром структуру стыля. header – гэта селэктар(selector). Браўзер абірае элементы падпаючыя пад селектар(тут усе header на старонке), прымяняюць уласцівасці ў фігурных дужках {}. height – гэта ўласцівасць, 200px – гэта значэнне ўласцівасці.

Падключаем css

Дзе пісаць наш css? Існуюць 3 спосабы:

Першы. Тэг style – месціцца ў head старонкі. Адразу на прыкладзе

 <html>
     <head>
         <style>
             div {
                 background: yellow;                 
                 height: 200px;
             }             
         </style>
     </head>
     <body>
         <div></div>
        <div></div>
         <body>
    </html>

Усе элементы div падпалі пад селектар і сталі жоўценькамі. Мінус гэтага падыхода, што мы пішам кожны раз стыль пад новую старонку. То бок будзе 10 старонак, будзе 10 стылей.

Другі. Inline стыль. У html элементаў ёсць атрыбут style, у якім мы можам пісаць стылі “па-месцу”. Селектары, зразумела не патрэбныя. Напрыклад.

 <body>
    <div style="background: yellow; height: 200px;">
    <div style="background: yellow; height: 200px;">
 </body>

Ну як? Дрэнна ці добра? Ня гледзячы на тое, што ня трэба парыцца з селектарамі – проста пішацца па месцу. Атрымалі 2 жырныя мінусы – прадублявалі наш код, абсалютна пазбавіліся семантыкі, якую нясуць селектары класы. Вынік – дрэнны спосаб.

Трэці. Правільны спосаб. Асобны файл css. Ствараем файл, напрыклад style.css, пішам там наш css і падключаем яго на нашу html старонку. Змест файла style.css

div {
    background: yellow;                 
    height: 200px;
}

І падключаем на нашу старонку ў тэгам link з двумя атрыбутамі rel(тып файлу) і href(шлях да файлу)

 <html>
     <head>
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
         <div></div>
         <div></div>
     </body>
 </html>

Выдатна. Можам пісаць 1 раз стыль і падключаць файл на 10 старонак. Для зручнасці файлы css месцяцца у тэчкі css(адпаведна не забудзце змяніць шлях да файла. href=”css/style.css”)

Тыпы селектараў.

Чым адрозніваюцца селектары header, .warning-section, #sidebar? Першы. header – гэта селектар тэгаў. Хочам абраць элементы па тэгам каб прымяніць уласцівасці. Карыстаем селектар тэгаў.

    header { background: yellow;}
    p { background: blue }
    div { background: red; }
    section { background: green;}

Вынік. Усе элементы header стануць – жоўценькімі, параграфы p – блакітнымі і г.д. То бок пад селектар тэгаў падпаюць усе тэгі, так? А як абраць элементы больш выбарачна? Напрыклад мы хочам каб толькі 1 ці 2 section сталі чырвонымі а астатнія не?

Другі. .warning – селектар класа. Напрыклад напішам наступны css.

     .warning-section {
         background:red;         
     }

Напішам html код. Будзе 5 секцый і толькі 2 будуць чырвоныя. Дададзім класс патрэбнаму html элементам.

 <body>
     <section>I'm normal section</section>
     <section class="warning-section">I'm danger section</section>
     <section>I'm normal section</section>
     <section>I'm normal section</section>
     <section class="warning-section">I'm danger section</section>
    </body>

Другая і пятая секцыя маюць атрыбут клас з значэннем “.warning”. Адпаведна гэтыя элементы стануць чырвонымі. Звярніце ўвагу, што ў css селектар класа пачынаюцца з кропкі “.”

Трэці. #sidebar – селектар ідэнціфікатар(id). Пад селектар id падпадзе толькі 1 элемент на старонке. Таму што ідэнціфікатар не паўтараецца на старонке. Пішам наступны css

    #sidebar {
        background: blue;
    }

Каб наш элемент стаў блакітным, мы павінны дадаць яму id. Пішам html.

 <div id="siderbar"> I'm alone sidebar on page</div>

То бок селектар id абіраем, калі хочам прымяніць уласцівасці толькі для аднаго элемента на старонке. Тое ж самое можна дабіцца і класам(проста дадаць клас аднаму элементу). Прымяняць клас ці id – рашаць вам.

Магчымасці селектараў

Selector1, selector2. Селектары можна пералічаць праз коску. Напрыклад хочам каб section і p мелі аднолькавы водступ

    section, p {
         margin: 10px;
    }

 

selector1 selector2. Напрыклад, мы хочам каб p якія знаходзяцца толькі ўнутры элементаў з класам .happy-container, сталі жоўценкімі. Для гэтага паставім праблем паміж селектарамі, наступным чынам.

    .happy-container p {
         background: yellow;
    }

У наступным html жоўценкія стануць параграфы толькі ўнутры .happy-container. Пішам html.

 <section class="happy-container">
    <p>happy paragraph</p>
    <p>happy paragraph</p>
    <div><p>happy paragraph<p></div>
</section>

<p>usual paragraph</p>

Адзначым, што толькі параграфы якія знаходзяцца ў .happy-container сталі жоўтыя. Па-за .happy-container мы бачым звычайны параграф(usual paragraph).

selector1 > selector2. Тут жоўтымі стануць параграфы, для якіх .happy-container будзе бацькам, а не дзедам. То бок unhappy paragraph будзе не жоўтым

. Глядзім.

 <section class="happy-container">
    <p>happy paragraph</p>
    <p>happy paragraph</p>
    <div><p>unhappy paragraph<p></div>
</section>

<p>usual paragraph</p>

selector1+selector2. Суседзі. Уласцівасці прыменяцца толькі элементу суседу.

Хатняе заданне.
Зрабіць селектар які складаецца з 7 селектараў(тэгі, класы, id) і выкарыстоўваецца прабелы, > і +.
Заверстаць/разабраць макет .
Вызначыцца з курсавым праектам: знайсці макет(малюнак) для сябе і пачаць верстаць.
1. Можна знайсці модны дызайн на дрыбле, ўкантакце 2. Знайці на фрыланс біржах https://www.odesk.com/o/jobs/browse/?q=psd+to+html http://www.freelancer.com/jobs/PSD-to-HTML/
3. Знайсці ў сяброў.

Наступны занятак