CSS-файлы

Да гэтуль мы з Вамі даведаліся, што CSS можна пісаць у тэге style. Але магчыма ў Вас узьнікне правільнае пытаньне: ці не парушае гэта якую-небудзь канцэпцыю модульнасьці або ці не стварае такі падыход якіх дададковых праблем? Адказам будзе: так, парушае, і, так, стварае.

Калі Вы пішаце css у тэге style, Вам прыйдзецца дубляваць гэты код для кожнага html-файла. А што калі файлаў некалькі тысяч?

Існуе вырашэньне гэтай праблемы – можна стварыць css-файл, у які будуць вынесеныя ўсе Вашыя стылі.

Давайце створым тэчку css, а ў ёй створым новы файл styles.css. У гэты файл перакіньце ўсё, што знаходзіцца ў тэге style Вашага html-файла. Павінна атрымацца нешта такое:

styles.css
h1 {
  color: blue;
  text-align: center;
}

h2 {
  font-style: italic;
  text-align: center;
}

p {
  font-family: sans-serif;
}

ul {
  font-size: 20px;
  line-height: 30px;
}

А ў тэг head дадайце наступны элемент, які будзе казаць браўзеру, дзе знаходзіцца файл са стылямі:

Стылізаваньне класамі

Давайце створым старонку з двумя тыпамі паграфаў: звычайнымі параграфамі і параграфак з краткім зместам:

favorite-things.html
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>Michael's favorite things</title>
    </head>

Абнавіце старонку. Ці нічога не зламалася?

paragraphs.html
<!DOCTYPE html>
    <html>
    <head>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <title>Paragraphs!</title>
    </head>
    <body>
        <h1>Paragraphs of text</h1>
        <h2>Plus an intro at the top!</h2>

        <p>Here is an intro. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <p>And here is the full version. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

        <p>Here is a bit more stuff. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>

        <p>And, this is the end. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Here is a bit about the author at the end. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
    </body>
    </html>

Тэкс, які Вы бачыце ў прыкладзе вышэй завецца Lorum Ipsum. Ён выглядая як тэкс на лацінскай, але насамрэч гэта проста набор выдуманых словаў. Lorem Ipsum часта выкарыстоўваецца як “заглушка” замест рэальнага тэксту пры распрацоўкі дызайна; Вы можаце пашукаць онлайн lorem ipsum і знайсьці шмат сайтаў, дзе Вы яго зможаце знайсьці.

Старонка ў прынцыпе выглядае нармалёва, але я хачу каб першы параграф выглядаў больш як краткі змест. Я хачу каб ён быў напісаны курсівам і быў трохі больш зграбным за астатнія параграфы. Вось як гэта зрабіць, не зьмяняя іншыя параграфы. Спачатку мы дадаем атрыбут “класс” тэгу <p> які зьяўлецца першым:

paragraphs.html
<p class="intro">Here is a summary. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Потым мы створым css-правіла для тэгаў <p> з класам intro:

styles.css
p.intro {
        width: 50%;
        font-style: italic;
    }

Паглядзіце што атрымалася. Зараз наш параграф напісаны курсівам і мае шырыню 50%, у той час як астатнія параграфы засталіся такімі жа.

Гэтак жа мы можам стварыць клас для параграфа з інфармацыяй пра аўтара:

paragraphs.html
<p class="author">Here is a bit about the author at the end. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>

І стылізаваць яго наступным чынам:

styles.css
p.author {
    width: 75%;
    font-style: italic;
    font-weight: bold;
}

Вы можаце прымяняць класс для некалікіх тэгаў. Напрыклад (новы файл):

fido.html
<!DOCTYPE html>
    <html>
    <head>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
        <title>How to take care of Fido</title>
    </head>
    <body>
        <h1>Instructions for Fido's babysitter</h1>

        <p>Thanks so much for watching Fido this weekend! Here's everything you need to know while I'm gone.</p>

        <p>Here's a bit of history about Fido. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <p class="important">Fido is alergic to a lot of foods. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Fido likes to play. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

        <p>Here are a list of things that you should do with Fido every day:</p>

        <ul class="important">
            <li>Walk him</li>
            <li>Feed him</li>
            <li>Pet him</li>
        </ul>

        <p>If you have any questions while I'm out of town, I <strong class="important">won't have cell service</strong>, but you can <a href="mailto:test@example.com" class="important">email me</a> if you need anything.</p>

        <p>Thanks again!</p>
    </body>
    </html>

Мы дадалі класс important да параграфа, несартаванага сьпіса і тэга <strong>. N Каб стылізаваць якія заўгодна элементы класам important паспрабуйце наступнае:

fido-styles.css
.important {
    color: red;
}

Звярніце ўвагу на тое, як я зрабіў спасылку на імэіл: <a href="mailto:test@example.com">.

Пагуляйце з класамі самастойна:

  • У файле my-first-webpage.html абярыце тры найбольш важных элемента, дайце ім класс flashy і прыдумайце такія CSS-правілы для яго, каб элементы найбольш выдзяляліся.
  • Стварыце файл boring-lecture.html які будзе зьяўляцца артыкулам па якому-небудзь вельмі сумнаму прадмету. Выкарыстоўвайце lorem ipsum каб запоўніць старонку. У пачатку старонкі стварыце сэкцыю са скарочаным зместам: уключыце падзагалоўкі ў сэкцыю, некалькі параграфаў і малюнак. Кожнаму з элементаў дайце клас intro. Стыварыце асобныя правілы для ўсіх элементаў: h2.intro, p.intro і img.intro.

Групуючыя элементы

Класы – гэта крутая штука для выбарачнага прымяненьня стыляў асобным элементам на старонцы. Але часам у Вас будзе зьяўляцца сітуацыя, калі стылі трэба прымяніць да цэлай сэкцыю на старонцы, а дадаваньне класа на кожны элемент пачынае раздражняць. Паглядзіце на новую старонку пра рыбку. Звярніце ўвагу на тое, які некалькі элементаў запар маюць адзін і той жа класс:

<!DOCTYPE html>
    <html>
    <head>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
        <title>Everything about fish</title>
    </head>
    <body>
        <h1>Everything about fish</h1>

        <p>Here is everything you need to know about fish. First, the important stuff:</p>

        <h2 class="important">Types of fish</h2>

        <p class="important">There are many types of fish. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <p class="important">Here are some types of fish:</p>

        <ul class="important">
            <li>Goldfish</li>
            <li>Catfish</li>
            <li>And lots, lots more!</li>
        </uL>

        <h2 class="important">Other important stuff</h2>

        <p class="important">Here is some other really important stuff about fish. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        <p>Now, for some less important stuff about fish.</p>

        <h2 class="unimportant">Fish like to play golf</h2>

        <p class="unimportant">Little-known fact: fish like to play golf. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

        <h2 class="unimportant">Fish are not mammals</h2>

        <p class="unimportant">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </body>
    </html>

Давайце зараз дададзім тэг, які ўсё гэта вельмі моцна спрасціць – тэг <div>.

fish.html
<!DOCTYPE html>
    <html>
    <head>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <title>Everything about fish</title>
    </head>
    <body>
        <h1>Everything about fish</h1>

        <p>Here is everything you need to know about fish. First, the important stuff:</p>

        <div class="important">
            <h2>Types of fish</h2>

            <p>There are many types of fish. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <p>Here are some types of fish:</p>

            <ul>
                <li>Goldfish</li>
                <li>Catfish</li>
                <li>And lots, lots more!</li>
            </uL>

            <h2>Other important stuff</h2>

            <p>Here is some other really important stuff about fish. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>

        <p>Now, for some less important stuff about fish.</p>

        <div class="unimportant">
            <h2>Fish like to play golf</h2>

            <p>Little-known fact: fish like to play golf. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

            <h2>Fish are not mammals</h2>

            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
    </body>
    </html>

Зараз мы можам стылізоўваць цэлыя сэкцыі старонак класамі .important і .unimportant, напрыклад:

styles.css
.important {
    font-size: 120%;
}

.unimportant {
    font-size: 80%;
}

Тэг <div> самастойна нічога не робіць: ён існуе толькі для таго, каб групаваць элементы. Вельмі частая практыка прымяняць стылі выкарыстоўваючы тэг <div> каб падзяляць змест Вашай старонкі. Звычайна Вы нават ня будзеце спазначаць селектар я селектар для <div>; т.б. Вы напішаце .important замест div.important.

Ці памятаеце Вы тое, што добры код – гэта той код, які лёгка зьмяняць? Дык вось, мы толькі што пабудавалі наш код такім чынам, што яго робіцца лягчэй зьмяняць: калі мы хочам зьмяніць імя класу, нам трэба зьмяніць толькі адзін <div> замест усіх элементаў, якія знаходзяцца ўнутры. Клева, так?

Для радковых элементаў існуе падобны тэг – <span>:

fish.html
<p>There are many types of <span class="highlight">fish</span>. For example, there are <span class="fish-type">red</span> fish, <span class="fish-type">green</span> fish, <span class="fish-type">one</span> fish, and <span class="fish-type">two</span> fish. There are also <span class="highlight">more types of fish than you could possibly imagine</span>.</p>

І мы можам стылізаваць гэтыя элементы класамі .highlight і .fish-type.

Вышая чарга:

  • У файле boring-lecture.html pвыдаліце класс intro з усіх элементаў, і стварыце <div> з класам intro і элементамі ўнутры.
  • У блоге коціка выкарыстайце <div>ы каб групаваць і стылізаваць кожны асобны пост.

Лева/права

Дагэтуль, усё што мы рабілі, выглядала даволі проста: зверху ўніз для блочных элементаў, злева направа для радковых. Але вельмі часта нам трэба каб, напрыклад, тэкст абгарнаў малюнак, альбо на старонке было бакавое мень, альбо існавала некалькі калонак. Усё гэта робіцца з дапамогай float-уласьцівасьці.

Ніжэй прыклад таго як тэкст можа “абцякаць” малюнак. Спачатку пра маржэй:

walrus.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>The Walrus: a strange and noble creature</title>
</head>
<body>
    <img src="img/walrus.jpg" alt="A walrus basking on a rock.">
    <p>The walrus is truly a majestic animal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>

And then the CSS magic:

styles.css
img {
    float: left;
}

Паглядзіце: малюнак "плыве (floats)" ўлева, а тэкст абгортвае яго. Вы канешне можаце зрабіць так, каб малюнак адлюстроўваўся з правага боку, калі Вам так больш падабаецца. Карыстайцеся класамі, калі трэба каб толькі канкрэтны малюнак “плыў”.

Зараз давайце скарыстаемся float для стварэньня левага меню:

walrus.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>The Walrus: a strange and noble creature</title>
</head>
<body>
    <h1>All about walruses</h1>
    <div class="sidebar">
        <h2>IRL</h2>
        <p>Want to see walruses in real life? Here are some places to check out:</p>
        <ul>
            <li>The beach</li>
            <li>The ocean</li>
            <li>The bay</li>
            <li>Rocks</li>
        </ul>
    </div>

    <div class="main">
        <p>The walrus is truly a majestic animal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</body>
</html>

І зараз CSS:

styles.css
.sidebar {
    width: 30%;
    float: right;
    background-color: yellow;
}

Ці Вы пачынаеце разумець як гэта працуе? Давайце яшчэ паспрабуем з калонкамі:

columns.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
    <title>Columns</title>
</head>
<body>
    <h1>Check out these columns</h1>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</body>
</html>

CSS:

styles.css
.column {
    width: 300px;
    float: left;
}

Вуаля! Маем калонкі.

  • У блоге коціка стварыце “sidebar” з інфармацыяй пра коціка.
  • Перэдызайніце старонку з Вашымі ўлюбёнымі рэчам выкарыстоўваючы калонкі. Кожная рэч – калонка з малюнкам.

Box-мадэль

Апошняя вельмі важная частка HTML і CSS, якую мы павінны разглядзець – гэта box-мадэль. Кожны элемент на старонцы займае нейкае месца, якое апісваецца з дапамогай box-мадэлі. Давайце пачнем з нестылізаванага HTML і потым дададзім CSS каб праілюстраваць box-мадэль:

box-model.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
    <title>Box model</title>
</head>
<body>
    <div class="my-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</body>
</html>

Зараз дададзім мяжу вакол тэкста:

styles.css
.my-class {
    border: 2px solid green;
}

Вось як павялічыць прастранства паміж <div>‘ам і мяжой:

styles.css
.my-class {
    border: 2px solid green;
    padding: 4px;
}

І, нарэшце, вось як павялічыць дыстанцыю паміж элементам і ягонымі суседзямі (якія ў гэтым выпадку проста края старонкі):

styles.css
.my-class {
    margin: 12px;
    border: 2px solid green;
    padding: 4px;
}

Дададзім яшчэ коляр фона, каб разумець што адбываецца з элементам:

styles.css
.my-class {
    margin: 12px;
    border: 2px solid green;
    padding: 4px;
    background-color: orange;
}

Коля дадаецца да самога зместа і прастранства паміж зместам і межамі.

Прасьцей зразумець мадэль з дапамогай малюнка:

З box-мадэльлю Вы будзеце сустракацца вельмі часта будуючы старонкі, таму зрабіце акцэнт на вывучэньні яе.

Некалькі практыкаваньняў каб Вам лепей разбірацца з margin, border і padding:

  • Да сайдбару ў блоге коціка дадайце коля фону, мяжу, ўнутраныя і знешнія водступы, каб Вам падабалася як знешне выглядае старонка.
  • У блоге коціка дадайце margin-top і margin-bottom да кожнага посту, каб паміж імі было больш свабоднага месцу.

Cascading

У папярэдніх занятках Вы магчыма звярнулі ўвагу на тое, што мы вызначылі стыль для <ul> і ён прымяняўся да элементаў <li>. Гэта завецца успадкаваньне (inheritance): так як тэгі <li> знаходзяцца ўнутры тэгаў <ul>, тэгі <li> успадкоўваюць стылі якія мае <ul>.

Такім чынам можна ўсталяваць шрыфт усіх элементаў, якія знаходзяцца на старонцы:

body {
    font-family: sans-serif;
}

Вы таксама можаце вызначыць як нейкія канкрэтныя дзіцячыя элементы стылізуюцца. Напрыклад Вы маеце наступны html:

digital-vs-analog.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>Digital vs Analog</title>
</head>
<body>
    <h1>Digital vs Analog: The Showdown</h1>

    <p>Welcome to the ultimate face-off between digital and analog products. May the best one win!</p>

    <div class="digital">
        <p>Here's the good stuff about digital. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <p>Find out more about digital <a href="http://www.example.com/digital.html">here</a>.</p>
    </div>

    <div class="analog">
        <p>Here's the good stuff about analog. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Find out more about analog <a href="http://www.example.com/analog.html">here</a>.</p>
    </div>

    <p>Now: YOU pick the winner!</p>
</body>
</html>

Вось як стылізаваць параграфы для лічбавых і аналагавых прадуктаў па-асобку:

styles.css
.digital p {
    background-color: red;
}

.analog p {
    background-color: yellow;
}

Гэта дасьць чырвоны фон параграфам, якія знаходзяцца ўнутры тэга з класам digital і жоўты коляр, параграфам унутры analog.

Вось прыклад як звяртацца да элементаў, якія знаходзяцца яшчэ глыбей па герархіі:

styles.css
.digital p a {
    font-weight: bold;
}

.analog p a {
    font-style: italic;
}

Колькасьць узроўняў селектара нічым не абмежавана.

Як Вы думаеце што будзе пры наступнай сітуацыі:

styles.css
.digital p a {
    font-weight: bold;
}

a {
    font-weight: normal;
}

У прыкладзе вышэй больш дакладны селектар перамагае: спасылка унутры параграфа з класам digital будзе тлустай, таму што селектар .digital p a больш спецыфічны чым селектар a.

Апошняе правіла, якое варта разумець пра CSS: калі два селектара маюць аднолькавую “спецыфічнасьць” перамагае той, які знаходзіцца апошнім – іншымі словамі, чым далей у CSS-файле тым галоўней.

І, аднойчы, Вы сустрэнеце вось такі HTML:

inline-style.html
<img style="float: left" src="cute-kitten.jpg">

Тут стыль ўстаўлены ў HTML. Гэта завецца inline style, і гэта дрэнна! Вы згубляеце ўсю моц CSS: больш перавыкарыстаць стэлі нельга і ўсе яны знаходзяцца ў розных месцах. Проста ведайце, што калі Вы сустракайце inline-стыль, ён мае большы прыярытэт, чым стылі вызначаныя ў файле CSS.

Папярэдні занятак Наступны занятак