55 lines
1.8 KiB
Markdown
55 lines
1.8 KiB
Markdown
---
|
||
title: Introduction to CSS
|
||
localeTitle: Введение в CSS
|
||
---
|
||
## Введение в CSS
|
||
|
||
### Что такое CSS?
|
||
|
||
Каскадные таблицы стилей (CSS) описывают, как должен отображаться html на странице.
|
||
|
||
Прежде чем разработчики CSS будут применять стили с использованием атрибутов или специальных тегов на каждом узле страницы. Это сделало разметку повторяющейся и подверженной ошибкам.
|
||
|
||
CSS позволяет селекторам описывать, как должна выглядеть каждая часть соответствующего содержимого.
|
||
|
||
```CSS
|
||
body {
|
||
font-size: 15px;
|
||
}
|
||
|
||
a {
|
||
color: rebeccapurple;
|
||
text-decoration: underline;
|
||
}
|
||
```
|
||
|
||
### Использование CSS
|
||
|
||
**Внешние таблицы стилей** позволяют многим страницам использовать одни и те же стили.
|
||
|
||
```HTML
|
||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||
```
|
||
|
||
**Внутренние таблицы стилей** применяют CSS ко всем соответствующим тегам на странице.
|
||
|
||
```HTML
|
||
<style>
|
||
h1 {
|
||
font-family: sans-serif;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
**Встроенные CSS** применяют стили к одному тегу.
|
||
|
||
```HTML
|
||
<img src="..." style="border: 1px solid red;" />
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [W3Schools](https://www.w3schools.com/css/css_intro.asp)
|
||
* [CSS-Tricks Альманах](https://css-tricks.com/almanac/)
|
||
* [Sitepoint](https://www.sitepoint.com/html-css/?ref_source=github) |