MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Learn web development

Основи CSS

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код, що використовується для стилізації сайту. В Основах CSS надається інформація про стилізацію для початківців. Ми відповімо на такі питання, як: яким чином зробити текст чорним чи червоним? Як розмістити контент саме у тому місці, де ми хочемо його бачити на сторінці? Як задавати фонові кольори та зображення?

Що таке CSS насправді?

Як і HTML, CSS не є справжньою мовою програмування. Це лише мова таблиць стилів, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати усі параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:

p {
  color: red;
}

Давайте спробуємо: вставте ці три строки CSS у новий файл у вашому редакторі коду, та збережіть файл як style.css у вашій теці styles.

Окрім того, нам необхідно приєднати CSS до вашого HTML документу, інакше стилі CSS не вплинуть на те, як браузер відобразить HTML документ. (Якщо ви щойно приєдналися до нашого проекту, прочитайте Роботу з файлами та Основи HTML щоб дізнатися, що необхідно зробити на початку.) Відкрийте ваш файл index.html та вставте наступну стрічку кудись у head, між тегами <head> і </head>:

  1. <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Збережіть index.html та відкрийте його у вашому браузері. Ви побачите щось на зразок наведеного зображення:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Якщо текст ваших параграфів став червоним, вітаємо! Ви щойно написали ваш перший CSS!

Анатомія правила CSS

Подивимось на попередній CSS більш детально:

Вся структура називається "rule set" — "набір правил" (частіше, скорочено, "правило"). Його частини також мають свої назви:

Selector — Селектор
Назва елементу HTML на початку правила. Селектор вибирає елемент чи елементи, які будуть стилізовані (у нашому випадку, елементи p). Для стилізації інших елементів просто змініть селектор.
Declaration — Визначення (декларація)
Одне правило на зразок color: red; вказує, яку з властивостей елементу ви бажаєте стилізувати.
Properties — Властивості
Шляхи, якими ви можете стилізувати даний HTML елемент. (У цьому випадку, color — це властивість елементів p). У CSS ві обираєте властивості, які хочете змінити у вашому правилі.
Property value — Значення властивості
Праворуч від властивості, після двокрапки, ми вказуємо значення властивості, обираючи з багатьох можливих значень для наданої властивості (є багато іншіх значень властивості color окрім red).

Зверніть увагу на інші важливі частини синтаксису:

  • Кожен набір правил (окрім селектора) повинен бути оточений фігурними дужками ({}).
  • У кожному визначенні використовується двокрапка для відокремлення властивостей від їх значення.
  • У кожному наборі правил використовується крапка з комою для відокремлення декларацій від наступних.

Отже, для того, щоб змінити декілька значень властивостей одночасно, їх достатньо записати, розділяючи крапкою з комою, наприклад:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Вибір багатьох елементів одночасно

Ви також можете вибрати декілька типів елементів та застосувати один набір правил для них усіх. Додайте декілька селекторів, розділяючи їх комою, наприклад:

p,li,h1 {
  color: red;
}

Різні типи селекторів

Є велика кількість різних типів селекторів. Вище ми розглянули лише селектори елементів, які вибирають всі елементи заданого типу у наданих HTML документах. Але ми можемо застосовувати більш специфічні селектори. Подивіться на найбільш розповсюджені типи селекторів:

Назва селектору Що він вибирає Приклад
Селектор елементу (іноді називають селектором тегу) Всі HTML елементи даного типу p
Вибирає <p>
Селектор по ID Елемент на сторінці, який має заданий ID (на HTML сторінці не може бути елементів з однаковими ID). #my-id
Вибирає <p id="my-id"> чи <a id="my-id">
Селектор по класу Елементи на сторінці, які мають задані класи (на сторінці можуть бути елементи з однаковими класами). .my-class
Вибирає <p class="my-class"> та <a class="my-class">
Селектор по атрибуту Елементи на сторінці із вказаним атрибутом img[src]
Вибирає <img src="myimage.png"> але не <img>
Селектори псевдокласів Вказані елементи, але тільки тоді, коли вони знаходяться у вказаному стані, наприклад, коли на них наводять курсор миші. a:hover
Вибирає <a>, але тільки коли курсор миші вказує на посилання.

Інші селектори ви можете побачити на сторінці Selectors guide.

Шрифти та текст

Дослідивши деякі основи CSS, давайте додамо більше правил та інформації в файл style.css, щоб зробити наш приклад більш привабливим. Для початку покращимо вигляд наших шрифтів та тексту.

  1. В першу чергу, знайдіть збережений вами вивід з сайту Google Fonts, який ви зберегли раніше. Додайте елемент <link ... > у head файлу index.html (будь-куди між тегами <head> та </head>). Елемент буде виглядати приблизно так: 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. Видаліть правило, яке зараз знаходиться у вашому файлі style.css. Це був гарний приклад, але червоний текст виглядає не дуже файно.
  3. Додайте наступні строки до вашого файлу стилей, замінивши placeholder на строку font-family, що ви отримали з сайта Google Fonts. (font-family означає шрифти, які ви застосуєте для вашого тексту). Це правило встановить глобальний базовий шрифт і його розмір для всієї сторінки (так як <html> — це батьківський елемент всієї сторінки, всі елементи у ньому успадкують однаковий font-size та font-family): 
    html {
  font-size: 10px; /* px означає 'пікселі': базовий розмір шрифта встановлюється рівним 10 пікселів заввишки  */
  font-family: placeholder: замініть цей плейсхолдер на строку із сайту Google fonts
}

    Примітка: Я додав коментар із поясненням, що означає "px". Все у CSS документі, що знаходиться  між /* та */ — це коментар CSS, який ігнорується браузером. Коментарі застосовують для приміток та пояснень, що допоможуть вам в роботі.

  4. Встановимо розміри шрифта для елементів, що містять у собі текст всередині HTML body (<h1>, <li>, та <p>). Також відцентруємо текст нашого заголовку та встановимо висоту строки і проміжок між літерами нашого контенту, щоб зробити його зручнішим для читання. 
    h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}

Ви можете змінювати числа як завгодно, щоб ваш дизайн виглядав так, як ви хочете. Загалом він буде виглядати так:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Boxes, boxes, it's all about boxes

One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.

a big stack of boxes or crates sat on top of one another

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

  • padding, the space just around the content (e.g., around paragraph text)
  • border, the solid line that sits just outside the padding
  • margin, the space around the outside of the element

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In this section we also use:

  • width (of an element)
  • background-color, the color behind an element's content and padding
  • color, the color of an element's content (usually text)
  • text-shadow: sets a drop shadow on the text inside an element
  • display: sets the display mode of an element (don't worry about this yet)

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

Changing the page color

html {
  background-color: #00539F;
}

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

Sorting the body out

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Now for the body element. There are quite a few declarations here, so let's go through them all one by one:

  • width: 600px; — this forces the body to always be 600 pixels wide.
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented here.
  • background-color: #FF9500; — as before, this sets the element's background color. I used a sort of reddish orange for the body as opposed to dark blue for the html element. Go ahead and experiment. Feel free to use white or whatever you like.
  • padding: 0 20px 20px 20px; — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.
  • border: 5px solid black; — this simply sets a 5 pixel wide solid black border on all sides of the body.

Positioning and styling our main page title

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
  • The fourth value sets the base colour of the shadow.

Again, try experimenting with different values to see what you can come up with.

Centering the image

img {
  display: block;
  margin: 0 auto;
}

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The body element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

Note: Don't worry if you don't yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

 

Мітки документа й учасники

Мітки: 
 Зробили внесок у цю сторінку: Ahineya
 Востаннє оновлена: Ahineya,