Блокнот системного администратора

**UKsystem** » 14 июл 2016, 00:20

CSS Zen Garden: The Beauty of CSS Design
Большая книга CSS, 4-е издание Файлы примеров к книге

/* Комментарий */

Вложение (inline)
<p style ="color:green; background:#FF0000;>Селектор ТЭГа</p>

Встраивание (embedding)
<style type="text/css">
p { color:green; background:#FF0000; }
</style>

Связывание (linking) File.css
p { color:green; background:#FF0000; }
...
p { color:green; background:#FF0000; }

<head>
<link rel="stylesheet" href="File.css"/>
</head>

Единицы измерения
Относительные
px
%
em - относительно размера шрифта
ex
Абсолютные
cm, mm, in, pt, pc

...
<style>
.pampam {color:green;} /* Селектор */
h3.pampam {background:gold;} /* Составной селектор */
#date {color: blue;} /* Селектор ID*/
div > p {color: blue;} /* Только прямое наследование */
div p {color: blue;} /* Любой p в div */
div + p {color: blue;} /* Сосед p верхний или левый div (закрытый) */
div > p em
div[align] {color: blue;} /* Селектор атрибута */
div[align="center"] {color: blue;} /* Селектор атрибута со значением*/
a[href^="http://"] {color: blue;} /* Селектор атрибута со значением которое начинается с ... */
a[href$=".com"] {color: blue;} /* Селектор атрибута со значением которое заканчивается на ... */
a[href*="yandex"] {color: blue;} /* Селектор атрибута со значением которое содержит ... */
div[class~="content"] {color: blue;} /* Селектор атрибута со одним из нескольких значений*/
div[class|="side"] {color: blue;} /* Селектор атрибута, где значение содержит дефис */
* {color: #000} /* Все элементы вообще */
/* группировка селекторов */
h1. h2, h3 {color: red;}
</style>
...
<p class="pampam">Селектор класса .pampam</p>
<h3 class="pampam">Селектор класса .pampam и составной селектор</h3>
<p id="date">14/07/2016 - Селектор id</p>
</body></html>

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

Псевдоклассы:
a:link {color:blue;}
a:active {color:red;}
a:visited {color:green;}
a:hover {color:yellow;}
div:hover {color:yellow;}
p:first-child {color:yellow;}
p:last-child {color:yellow;}
и псевдоэлементы:
p:first-letter {color:yellow;}
p:first-line {color:yellow;}
p:after {content: "The end.";}
p.new:before {content: "New.";}

Свойства шрифтов
font-style: normal | italic
font-variant: normal | small-caps
font-weight: normal | bold /* (а эти уже не используются: bolder | larger) */
font-size: 12px /* xx-small | x-small| small | medium | large | x-large | xx-large | smaller | lager */
font-family: Arial, Geneva, sans-serif /* font-family: семейство шрифта|тип шрифта */
Можно использовать так:
font: style | variant | weight | size family /* Порядок обязателен, первые 3 можно опустить, пример: */
font: bold, 12px, Arial !important

Свойства текста
text-align: left | right | center | justify
text-decoration: none | overline (|) underline (|) line-through
text-indent:20px /* Смещение вправо - красная строка */
text-transform: none | capitalize | uppercase | lowercase
latter-spacing: normal | XYZpx /* Расстояние между букв */
word-spacing: normal | XYZpx /* Расстояние между словами */
vertical-align: sub | super /* верхний и нижний индекс */
line-height: normal | value | % /* Расстояние между строками*/
white-space: normal | pre | nowrap

Свойство цвета и фона:
color: цвет
background-color: цвет | transparent
background-image: none | url("path\to\file\fon.jpg");
background-position: top | bottom | left | right | center | value | %
background-repeat: repeat | repeat-x | repeat-y | no repeat
background-attachment: scroll | fixed
background: color (|) image (|) repeat (|) attachment (|) position

Списки UL ненумерованный:
list-style-type: disc | circle | square | none
list-style-position: outside | inside
list-style-image: none | url("image.gif");

Списки OL нумерованный:
list-style-type: decimal | lower-alpha | upper-alpha | lower-roman | upper-roman

Список определений:

Таблицы:
table {
border: 1px solid red;
width: 100%;
margin: 1 px; /* Внешний/Наружный отступ (у td и th только padding) */
padding: 1px; /* Внутренний отступ */
border-spacing: 1px; /* Отступ между ячейками */
empty-cells: show | hide /* Показывать или нет бордюр пустой ячейки */
border-collapse: separate | collapse /* единый бордер у ячеек */
}
caption {
caption-side: top | bottom |left |right /* Последние 2 не рекомендуется*/
}

:nth-of-type (odd | even | value | expression)
:nth-last-of-type (odd | even | value | expression)
tr:nth-child(odd | even | value) {background: red} /* Нечетные и четные строки или значение строки и отсчет сначала*/
tr:nth-last-child(odd | even | value) {background: red} /* Четные и нечетные строки или значение строки - отчет с конца*/
tr:nth-child(n+2) {background: red} /* Все строки кроме первой, т.к. n=0 в цикле закраски */
tr:nth-child(2N) {background: red} /* Четные, т.к. n=0 в цикле закраски, можно использовать любые выражения */
tr:nth-child(2N+5) {background: red} /* Каждая вторая после 5ой*/

<span>Любой текст</span> /* такой же как и DIV только для inline-элементов (текста) */

**UKsystem** » 20 мар 2017, 15:50

BORDER

border: величина & тип & цвет
border: 1px solid black

border-width: величина | % | (thin | medium | thick)
border-style: none | solid| dotted | dashes | double | groove | ridge | inset | outset
border-color: цвет

border-top-[width | style | color]
border-right-[width | style | color]
border-left-[width | style | color]
border-bottom-[width | style | color]

border-top-left-radius: величина | %
border-top-right-radius: величина | %
border-bottom-left-radius: величина | %
border-bottom-right-radius: величина | %

border-radius: величина | %
border-radius: 20px 10px /* Два значения для разных диалонолей - углов; 3 значения: левый верхний, диагональ, правый нижний; 4 значения: по часовой с верхнего левого по левый нижний */

**UKsystem** » 20 мар 2017, 16:04

PADDING

padding-top: величина | %
padding-right: величина | %
padding-bottom: величина | %
padding-left: величина | %

padding: 10px
padding: 10px 20px /* первое вертикаль top и bottom, второе горизонталь left и right */
padding: 10px 20px 30px /* первое top, второе горизонталь left и right, третье bottom */
padding: 10px 20px 30px 40px /* первое top, второе right, третье bottom, четвертое left */

**UKsystem** » 20 мар 2017, 16:14

MARGIN

margin-top: величина | % | auto
margin-right: величина | % | auto
margin-bottom: величина | % | auto
margin-left: величина | % | auto

margin: 10px
margin: 10px 20px /* первое вертикаль top и bottom, второе горизонталь left и right */
margin: 10px 20px 30px /* первое top, второе горизонталь left и right, третье bottom */
margin: 10px 20px 30px 40px /* первое top, второе right, третье bottom, четвертое left */
margin: 10px auto

margin: 0 auto /* Фактически разместить элемент по-центру и вычесть 1/2 его размера*/

overflow: visible | hidden | scroll | auto
overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto

**UKsystem** » 20 мар 2017, 19:01

Позиционирование элемента

float: left /* выбивает из потока и прибивает к левому верхнему краю родителя*/
float: right /* выбивает из потока и прибивает к правому верхнему краю родителя*/
float: none /* Обтекание элемента не задается*/
float: inherit /* Наследует значение родителя */

clear: left | right | both /* запрещает обтекание элемента выбитого из потока (левого | правого | с двух сторон)*/

position: static | relative | absolute | fixed
/* static - по умолчанию */
/* relative - смещение относительно своего местоположения */
/* absolute - смещение от родителя, если родитель тоже позиционирован, а если нет, то относительно родителя - родителя если он позиционирован и так до BODY */
/* fixed - смещение в любую точку относительно видимой части браузера и не прокручивается */

left: величина | % | auto
top: величина | % | auto
right: величина | % | auto
bottom: величина | % | auto

z-index: число | auto /* Позиционирование элемента относительно оси "Z" - меньше число - сзади, больше число - спереди */

**UKsystem** » 20 мар 2017, 20:09

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

visibility: hidden /* Прячет элемент, но место зарезервировано */ | visible

display: none /* Вообще не отрисовывает */ | block | inline | inline-block | inline-table

**UKsystem** » 21 мар 2017, 19:37

CURSOR

cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]

Значения
url /* Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором*/
auto /* Вид курсора по умолчанию для текущего элемента */
inherit /* Наследует значение родителя */

**UKsystem** » 21 мар 2017, 19:47

Внешние объекты

OBJECT

<object width="ширина" height="высота"></object>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег OBJECT</title>
</head>
<body>
<p><object type="application/x-shockwave-flash"
data="images/mouse.swf" width="400" height="300">
<param name="quality" value="high">
<param name="wmode" value="opaque">
</object></p>
</body>
</html>

EMBED
<embed width="..." height="..."></embed>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег EMBED</title>
</head>
<body>
<embed src="images/mouse.swf" width="400" height="300"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</body>
</html>

AUDIO

<audio src="URL"></audio>
<audio> <source src="URL"></audio>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>

VIDEO

<video><source src="URL"></video>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
<a href="video/duel.mp4">Скачайте видео</a>.
</video>
</body>
</html>

Блокнот системного администратора

CSS

CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Re: CSS

Кто сейчас на конференции