CSS

Введение

Элементы html

Подключение

Стиль подключается из внешнего файла (ниже "mystyle.css") или описывается в любом месте html-файла:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">    <!-- стили в файле "mystyle.css" -->
 
   <style type="text/css">                                       <!-- стили описываются здесь -->
       canvas {background-color:#fff; border:1px solid black; }
   </style>
</head>
Кроме этого, стиль можно переопределить непосредственно в конкретном теге (центрированный красный текст):
<p style="text-align: center; color: red;">
    Hi! I will be in center and red.
 </p>

Hi! I will be in center and red.

(далее результаты примеров приводятся справа и жёлтый прямоугольник с розовой рамкой символизирует окно браузера).

Каждый следующий стиль переопределяет предыдущий. Если сначала подключен внешний файл, а затем идут теги style с другими параметрами, то они пербъют стили файла.

Что переопределяем

Переопределять можно стандартные теги html:

p {
    text-align: center;
    color: red;
}
Через class можно переопределять конкретный тег:
p.center {
    text-align: center;
    color: red;
}
p.large {
    font-size: 300%;
}
Затем в теге задём имя класса или несколько классов через пробел::
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
Класс можно не привязывать к тегу и использовать в любом элементе html-страницы:
.center {
    text-align: center;
    color: red;
}

Уникальные (единожды встречаемые на странице id-шники) описываются так:

#para1 {
    text-align: center;
    color: red;
}
и затем:
<p id="para1"> Hi! I will be in center and red. </p>

Несколько одинаковых стилей для различных тегово можно задавать через запятую

h1, h2, p {
    text-align: center;  /* Комментарий */
    color: red;
}

Блочный элемент div

Элемент <div> является универсальным блочным элементом и предназначен для группирования элементов документа. Чтобы видеть, где элемент <div> находится, зададим ему ненулевые размеры и огружающую рамку.

<div style="width:100px; height:25px; border: 1px solid;">Abc</div>
<div style="width:150px; height:25px; border: 1px solid;">123</div>
Abc
123

Как и при использовании других блочных элементов (типа <table>, <p>), содержимое <div> всегда начинается с новой строки. Для изменения этого поведения служит свойство position:

В качестве примера, в стилях определим класс box для прямоугольника размерами 81x50 (золотое сечение) и вставим в html-страницу код:
<style>
   div.box  {  width:  81px;  height: 50px;  border: 1px solid; }
   div.g2   {  border: 2px solid green; }
   div.b2   {  border: 2px solid blue;  }
</style>
<div class="box">1</div>
<div class="box">2</div>
<div class="box b2" style="position:relative; top:-25px;  left:81px;">3
   <div class="box g2" style="position:absolute; top:10px; left:10px;">4</div>
   <div class="box g2" style="position:absolute; top:20px; left:20px;">5</div>
</div>
1
2
3
4
5
Элемент <div> ящика 4 находится внутри <div> ящика 3, поэтому его координаты верхнего левого ула идут относительно контента внутри 3-го <div> (т.е. сразу после цифры 3)

В отличии от <div>, тег <span> предназначен для определения строчных элементов документа. С его помощью можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы: <span style="color:red; font-size:1.5em">В</span>

Цвет и фон

Цвета задаются одним из следующих способов: red, rgb(255, 0, 0), #ff0000 или #f00.

body{
   background-color: lightblue; /* цвета фона всей страницы */
   color:            yellow;    /* цвет текста на всей странице */
}
h1{
   background-color: #CFC;     /* цвет фона под текстом в теге  h1  */
}

Заголовок

Это текст
Фон можно залить и картинкой. По умолчанию она тайлится вертикально и горизонтально (этим можно управлять при помощи свойства background-repeat):
body {
    background-image: url("paper.gif");
 
    background-repeat: no-repeat;   /* если не надо, чтобы тайлилась */
    background-repeat: repeat-x;    /* тайлится только горизонтально (но не вертикально) */
 
    background-position: right top; /* куда прижать картинку */
 
    background-attachment: fixed;   /* фиксированное положение, не скролится со страницей */
}
Можно всё это объеденить одной строкой:
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Бордюр

Бордюр любого элемента: блока <div>, параграфа <p> и т.п. задаётся стилями:

border-style: solid; /* dotted; dashed; solid; double; groove; ridge; inset; outset; none; hidden; */
border-width: 5px;                        /* толщина рамки */
border-color: red;                        /* цвет рамки    */
 
border-top-style:    dotted;              /* для каждой стороны своя линия */
border-right-style:  solid;
border-bottom-style: dotted;
border-left-style:   solid;
 
border-style: dotted dashed solid double; /* аналогично сверху, по часовой стрелке */
 
border: 5px solid red;                    /* одной строкой */
Примеры:
div { /* слева красная жирная полоска */
    border-left: 6px solid red;
    background : lightgrey;
}
div {    /* закруглённый уголок */
    border: 2px solid red;
    border-radius: 10px;
}
div{
    width:100px; height:50px;
    border: 2px solid black;
    outline-style: double;
    outline-color: green;
    outline-width: 10px;
}

Текст

h1 {
    color: red;                 /* цвет текста */
    text-align: center;         /* позиционирование по горизонтали: center, left,  right, justify */
    direction: rtl;             /* многострочный текст прижимается вправо */
 
    text-decoration: overline;  /* подчеркивание: overline, line-through,  underline */
    text-transform: uppercase;  /* преобразование: uppercase lowercase, capitalize */
    text-indent: 50px;          /* сдвиг первой строки (русские абзацы) */
    letter-spacing: 3px;        /* расстояние между буквами */
    line-height: 1.8;           /* высота линии (шире чем обычно) */
 
    word-spacing: -5px;         /* расстояние между словами */
 
    font-family: Georgia, Arial, Helvetica, Sans-Serif; /* по очереди предпочтений */
    font-size: 14px;
    font-style: italic;         /* наклон: italic, normal */
    font-weight: bold;          /* жирность: bold, normal */
}

Отступы

Свойство margin создаёт отступы вокруг элементов:
div.margin {
    margin-top   : 40px;
    margin-right : 20px;
    margin-bottom: 30px;
    margin-left  : 10px;
 
    border: 1px solid black;
    background-color: lightblue;
}
Затем можно написать два вложенных div, причём внутренний будет иметь отступы от внешнего, а внешний - относительно страницы:
<div class="margin">
   <div class="margin">
     This div element has a top margin of 40px, a right margin of 20px,
     a bottom margin of 30px, and a left margin of 10px.
   </div>
</div>
This div element has a top margin of 40px, a right margin of 20px, a bottom margin of 30px, and a left margin of 10px.
Задание отступов можно объеденять в одной строке:
margin: 100px 150px 100px 80px; /* top right bottom left */
margin: 25px 50px;              /* top and bottom = 25px, right and left = 50px */
margin: 25px;                   /* all four margins are 25px */
 
margin: auto;                   /* horizontally center the element within its container */

Аналогично свойство padding создаёт пространство вокруг контента внутри объекта (например, делает отступы для текста внутри рамки):

p {
    padding-top:    50px;
    padding-right:  30px;
    padding-bottom: 50px;
    padding-left:   80px;
}
margin
padding
content
bordure

Размер

Задание размеров объекта может быть в процентах, пикселях или em-ах. Размер 1em равен размеру текущего шрифта (если шрифт = 16px, то 1em=16px).

div {
    height: 100px;
    width : 50%;     /* % of the containing block */
}
Если надо, чтобы при уменьшении окна бразузера ширина объектка тоже уменьшалась (если она не помещается) то,:
div {
   max-width: 500px;
}
Можно использовать функцию calc:
width: 90%;               /* для браузеров не поддерживающих calc() */
width: calc(100% - 80px);
Внимание: ширина блока получается сложением значений width, padding, margin и border. Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>.
<div style="width:500px; background:#FFA;">
   <div style="width:100px; background:#AAF;"> width:100px </div>
   <div style="width:100px; background:#AAF; padding:0px 30px;"> width:100px + padding</div>
</div>
width:100px
width:100px + padding

Центрирование

Для центрирования объекта по горизонтали (div-ка относительно страницы) используем стиль margin:auto. При этом центрируется сам блок, а не его содеримое (для центрирования текста надо использовать text-align:center):
<div class="box" style="margin: auto;">Abc</div>
<div class="box" style="margin: auto; text-align: center;">123</div>
Abc
123

Для центрирования объекта по вертикали (с div не работает):
<br>
123
<span style="border:1px solid; vertical-align:middle; font-size:2em;">A</span>
vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы).

123 A

Ещё пример вертикального позиционирования span-элементов:

<div style="font-size: 2em">
  T<span style="vertical-align: sub">E</span>X
и L<span style="vertical-align: 5px; font-size: 0.8em">A</span>
  T<span style="vertical-align: sub">E</span>X
</div>
TEX и LA TEX

Для центрирования div-ки надо делать что-то типа:
div.cntr {
   height  : 100px;         /* фиксировать её высоту */
   position: relative;
   margin  : auto;          /* центр по ширине */
   top: calc(50% - 50px);   /* центр по высоте, где 50px = height/2 */
}
<div style="width:182px; height:120px; border:1px solid;">
   <div class="cntr" style="width:100px; border:1px solid">A</div>
</div>
A

Хотя можно в контейнере написать:
style = "display: flex; justify-content:center; align-items:center; "
<div style="width:182px; height:120px; border:1px solid; display: flex; justify-content:center; align-items:center; ">
   <div style="width:100px; height:50px; border:1px solid; max-width:20%; max-height:20%;">A</div>
</div>
A

Свойство "overflow"

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину. (Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.)
Определим класс:
div.overflow {
   overflow: hidden;
   width: 200px;
   height: 80px;
   border: 1px solid black;
}
и вставим код:
<div class="overflow">
  ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>
hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу

Можно также указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

div.scroll {
    height: 100px;
    border: 1px solid black;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}
По вечерам над ресторанами
Горячий воздух дик и глух,
И правит окриками пьяными
Весенний и тлетворный дух.

Вдали над пылью переулочной,
Над скукой загородных дач,
Чуть золотится крендель булочной,
И раздается детский плач.

И каждый вечер, за шлагбаумами,
Заламывая котелки,
Среди канав гуляют с дамами
Испытанные остряки.

Над озером скрипят уключины
И раздается женский визг,
А в небе, ко всему приученный
Бесмысленно кривится диск.

И каждый вечер друг единственный
В моем стакане отражен
И влагой терпкой и таинственной
Как я, смирен и оглушен.

div {
    overflow: hidden; /* прячем оба скрола */
}

Плавающие объекты

Свойство float определяет, по какой стороне родителя прижимается блок. Остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

  • Обтекание картинки:
    • img.right {
        float:  right;    /*  wrap text around images */
        margin: 5px 5px 5px 10px;
    }
    <img class="right" src="galaxy.jpg">
    И каждый вечер, в час назначенный ...
    И каждый вечер, в час назначенный (иль это только снится мне?), девичий стан, шелками схваченный, в туманном движется окне. И медленно, пройдя меж пьяными, всегда без спутников, одна, дыша духами и туманами, она садится у окна.

    "Блоки после плавающего блока будут плавать вокруг него. Для избежания этого используют свойство clear в котором указывается с какой стороны блока плавания не будет."

    Например, для "цитаты" справа над началом текста (как выше), делаются три абзаца:

    <p style="width:50%; float:right;"> Цитата...</p>
    <p style="clear:right">
    </p><p> ... собственно текст ... </p>

  • Если надо расположить два блока (второй справа от первого), то:
    • <div style="overflow:auto;">
       <div style="width:50%; float:left;"> <!-- первый блок --></div>
       <div style="width:50%; float:right;"><!-- второй блок --></div>
    </div> <!-- contaner -->
    Если у блоков есть рамки, то надо чуть меньше 50%, так как их реальной ширине добаляется 2px рамок.

  • Панель навигации <nav> ... </nav> слева, а справа произвольное число блоков <section> ... </section>.
    • Определяем стили:
    nav {
        float: left;
        width: 48%;
        border: 1px solid #73AD21;
    }
    section {
        float:right;
        width:50%;
        border: 1px solid red;
    }
    Вставляем разметку:
    <div style="overflow: auto;">
       <nav>Меню nav</nav>
       <section> sec1 </section>
       <section> sec2 </section>
    </div>
    sec1
    sec2

    Блоки в строку

    При помощи display: inline-block; можно делать прилипающие друг к дугу блоки:
    .floating-box {
        display: inline-block;
        width: 250px;
        height: 25px;
        margin: 10px;
        border: 3px solid #73AD21;
    }
    .after-box {
        border: 3px solid red;
    }
    Затем:
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="after-box">after the floating boxes...</div>
    Floating box
    Floating box
    Floating box
    Floating box
    after the floating boxes...

    Впрочем, тоже можно сделать "по-старинке" при помощи float: left; и clear: left;

    .floating-box {
        float: left;
        width: 150px;
        height: 75px;
        margin: 10px;
        border: 3px solid #73AD21;
    }
    .after-box {
        clear: left;
    }

    Ссылки

    a {
        text-decoration: none;
    }
    a:link {                      /* unvisited link */
        color: red;
    }
    a:visited {                   /* visited link */
        color: green;
    }
    a:hover {                     /* mouse over link */
        color: hotpink;
        background-color: lightgreen;
        text-decoration: underline;
     
        padding: 14px 25px;
        text-align: center;
        display: inline-block;    /* внутри прямоуголька цвета  background-color */
    }
    a:active {                    /* selected link */
        color: blue;
    }

    Таблицы

    Прижать текст всех колонок таблицы вправо, а таблицу по центру:
    <style>
       table.border      {   border-collapse: collapse;  }
       table.border th,
       table.border td   {  border: 1px solid #000; padding: 0 3px; }
       table.center      {  margin:auto}
       table.right tr td { text-align: right; }
    </style>
     
    <table class="border center">
       <tr> <th> Заголовок </th>   <th> Ещё     </th> </tr>
       <tr> <td>       abc </td>   <td> 3.14159 </td> </tr>
       <tr> <td>        ab </td>   <td>      12 </td> </tr>
    </table>
     
    <table class="border center right">
       <tr>  <td rowspan="2">  <td colspan="2">хорьки  
       <tr>  <td>вес           <td>размер              
       <tr>  <td>самцы         <td>1.5 кг   <td>до 70см  
       <tr>  <td>самки         <td>1.0 кг   <td>до 40см  
    </table>
    Заголовок Ещё
    abc 3.14159
    ab 12

    хорьки
    вес размер
    самцы 1.5 кг до 70см
    самки 1.0 кг до 40см

    См. примеры оформления таблиц на css.

    CSS и JavaScript

    Свойство element.style возвращает объект, который дает доступ к стилю элемента на чтение и запись. С его помощью можно изменять большинство CSS-свойств, например element.style.width="100px" работает так, как будто у элемента в атрибуте прописано style="width:100px". Имена свойств через тире именуются так: elem.style.backgroundColor вместо background-color и т.д. Исключение - свойство float, для которого elem.style.cssFloat. Чтобы сбросить поставленный стиль, присваивают пустую строку: elem.style.width="". Свойство style содержит лишь тот стиль, который указан непосредственно в атрибуте элемента, без учёта каскада CSS.

    Специальные символы

    Специальные символы html не относятся к css. Тем не менее, ниже приведены наиболее полезные из них.
    Пробелы:   &nbsp;   &ensp;   &emsp;
    Операции: · &middot; × &times; ÷ &divide; < &lt; > &gt; ± &plusmn; ≤ &le; ≥ &ge; ≈ &asymp; ≠ &ne;
    Логика: ∨ &or; ∧ &and; & &amp; ≡ &equiv; ∀ &forall; ∃ &exist; ∈ &isin; ∉ &notin;
    Стрелки: ← &larr; ↑ &uarr; → &rarr; ↓ &darr; ↔ &harr; ↕ &#8597; ⇐ &lArr; ⇑ &uArr;

    Большую подброку можно найти тут.

    Примеры

    Поле ввода

    Красивое поле ввода с рамочкой только при фокусе: (кликни сюда: ). Переопределяем стиль:
    input[type=text], textarea {
       outline: none;
       padding: 2px;
       margin:  5px;
       border:  0px;
       border-bottom: 1px dotted blue;
    }
    input[type=text]:focus, textarea:focus {
       border-color:#56b4ef;
       box-shadow:         inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
       -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
       -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
    }
    Теперь:
    <input type="text" name="x" value="137" style="width:1.5em; text-align:center; font-size:1em;">

    Информация