23 Мая 2019

Справочник по CSS

CSS - это аббревиатура Cascading Stile Sheets (каскадные таблицы стилей).
Он используется для управления отображением HTML. В данный момент актуальная версия 3.

Стили - это набор свойств.
Свойство имеет свое имя и значение.

Базовый синтаксис CSS

basic.png
body { /* Семейство шрифтов */
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}

Способы добавления стилей на страницу

Существует 3 способа применения CSS.
  1. In-lain (внутренний, вложенный) - стили применяется непосредственно к тэгу -
    <p style="color:red;">текст</p>
  2. Embedding (глобальный, встраиваемый) - стили указываются в рабочей области <head>  -
    <style>декларации;</style>
  3. Linking (связанный) - все стили находятся в отдельном файле (style.css) и подгружаются в HTLM специальной командой расположенной в <head> -
    <link rel=stylesheet href=style.css/>

Комментирование кода

/*-------------------------------------*/


Каскадирование

Применяются те стили, которые ближе к тэгу. 
css001.JPG


Наследование

css002.JPG


Селектор тэга и класса

Для применения стилей к нескольким объектам, эти объекты объединяют в классы - <div class="green">
css003.JPG


Селекторы конкретного элемента

Для выделения конкретного элемента используется атрибут - <div id="green">  Значение атрибута ID  должно быть уникально. Не может быть на странице два одинаковых ID.
По приоритету еще выше чем class.
css004.JPG


Псевдо: классы и элементы.

css005.JPG

Свойства шрифтов

font-family: Arial, Geneva, san-serif - задает семейство шрифта и тип шрифта.
font-size: 12px - задает размер шрифта. Можно указать единицы измерения (опускаются в %), ключевыми словами - xx-small, x-small, small, medium, large, x-large, xx-large или smaller, larger
font-weight:bolt - толщина шрифта - normal, bold
font-style - стиль шрифта - normal, italic
font-variant - маленькие заглавные буквы - normal, small-caps

Сокращенная запись, при использовании сразу нескольких значений (порядок указывания обязателен weight-size-family ):
font: bold 12px Arial

Свойство текста

text-align: left; выравнивание текста по горизонтали - left, right, center, justify.
text-decoration:none; декорация текста - none, overline, underline, line-through
text-indent: 20px; красная строка - величина в пикселах
text-tratsform:capitalize; изменение текста - первая буква каждого слова заглавная, верхний регистр, нижний регистрnone, capitalize, uppercase, lowercase
letter-spacing: 20px; расстояние между буквами
word-spasing: 20px; расстояние между словами
vertical-align: sub; выравнивание по вертикали - используется для написания формул и степеней sub, super
line-height: 140%; межстрочный интервал

Свойства цвета и фона

color:red; Цвет текста в любом допустимом формате.
background-color: red; Цвет фона в любом допустимом формате. transparent -
background-image: url("pic.png") Картинка фоном.
background-position: toop left Положение фоновой картинки. tpo, bottom, left, right, center
background-repeat: no-reprat; Повторяемость картинки no-repeat, repeat-x, repeat-y
background-attachment: fixed;Мобильность фоновой картинки fixed, scroll

Сокращенная запись - порядок указывания значений обязателен color image, repeat, attachment, position
background: yellow url("pic.png") repeat-x


Использование CSS для макетирования.

Границы элемента
css010.JPG

Оформление границ

<style type="text/css">
	div#a{border: 1px solid red} /*Сокращенная форма записи*/

	div#b{border-width: 1px; /*Полная форма записи*/
		  border-style: solid; /*none, dotter, dashed, double, groove, ridge, inset, outset*/
		  border-color: green;}

	div#c{border-top-width: 1px; /*Полная форма записи*/
		  border-top-style: solid;
		  border-top-color: red;}

	div#d{border-top: 2px solid black; /*Сокращенная форма записи*/
		  border-right: 1px solid green;
		  border-bottom: 2px double red;
		  border-left: 1px dotter blue;}

</style>
Внутренний отступ

<style type="text/css">
	div#a{ padding: 10px; } /*Сокращенная форма записи*/
	div#b{ padding: 10px 10px 10px 10px; } /*top right bottom left*/
	div#c{ padding-top: 10px; /*Полная форма записи*/
		   padding-right: 10px; 
		   padding-bottom: 10px;
		   padding-left: 10px; }
</style>
Внешний отступ

<style type="text/css">
	div#a{ margin: 10px; } /*Сокращенная форма записи*/
	div#b{ margin: 10px 10px 10px 10px; } /*top right bottom left*/
	div#c{ margin-top: 10px; /*Полная форма записи*/
		   margin-right: 10px; 
		   margin-bottom: 10px;
		   margin-left: 10px; }
</style>
Всеобщее обнуление

<style type="text/css">
	* { margin:0px;
           padding:0px; } /*Убирает все отступы во всем документе*/
</style>
Выравнивание контейнера по центру относительно body

<style type="text/css">
        div { width: 300px; /*задаем размер контейнера*/
                border 3px dotten red; 
                margin-left: auto;
                margin-right: auto;} 	
</style>
Размеры элементов

<style type="text/css">
    p { border 3px dotten red;
        padding: 10px;
        width: 300px; /*задаем ширину контейнера*/
        height: 100px; /*задаем высоту контейнера*/
        overflow: hidden;} /*visible(по умолчанию) hidden sctoll auto*/
        overflow-x: hidden;} /*visible(по умолчанию) hidden sctoll auto - по горизонтали*/
        overflow-y: hidden;} /*visible(по умолчанию) hidden sctoll auto - по горизонтали*/
        white-space: nowrap; /* Запрещаем перенос строк */
</style>

Плавающие элементы

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    width: 40%; /* Ширина блока */
   }
  </style>
 </head> 
 <body> 
  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
 </body>
</html>
{ float: left | right }
 { clear: left | right | both }

Команда - clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Видимость элемента

С помощью свойства display можно отключить блок, а так же изменить тип элементов - блочный в строчные, а строчные в блочные.
 display: none | block | inline