Шпаргалки по CSS

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Я тоже делал для себя некоторое кол-во шпаргалок по CSS. В этом и следующих сообщениях поделюсь ими.
Первая шпаргалка так же по селекторам.
Код:
//////////////////////////////////////
//Селекторы
//////////////////////////////////////
!Селекторы не чувствительны к регистру
!Рекомендуется использовать строчное написание
!Перечисление через запятую означает использование
сразу нескольких селекторов, к которым будут применены
одинаковые свойства/значения
!Несколько слов в названии лучше разделять дефисом

элемент.class - все заданные элементы, принадлежащие данному классу
элемент#id - все заданные элементы, принадлежащие данному id
!такой записи лучше избегать, потому что
на странице возможен только один элемент с данным id
ex: h2.list or ul#list

ex: * - означает применение ко всем элементам на странице

ex: ul * - все элементы внутри ul

ex: .list li - все элементы li внутри элемента с классом list

//////////////////////////////////////
//Комбинаторы
ex: .list>li - выделение элементов li только с наследованием первого уровня

ex: h4 + li - только первые элементы li, стоящие после h4

ex: h4 ~ li - все элементы li до конца родительского списка, стоящие после h4

//////////////////////////////////////
//Псевдоклассы

Псевдоклассы ссылок:
:link - все ссылки, которые не были нажаты
:visited - все ссылки, которые уже были нажаты

Псевдоклассы действий пользователя:
:hover - при наведении мыши
:active - активные элементы
:focus - форматирование, когда курсор находится в поле ввода

ex: a:hover {
    background: #000;
    cursor: pointer;
} задание фона ссылкам при наведении мыши и смена указателя

Структурные псевдоклассы:
:nth-child - все n-ые эдементы внутри родительского элемента
ex: li:nth-child(2n+1) {
    color: red;
} выделятся цветом только нечетные элементы li
(odd/even) четные/нечетные
ex:li:nth-last-child(3) - нумерация с конца списка
:first-child - первый элемент внутри родительского
:last-child - последний элемент внутри родителького

::before добавить содержимое до элемента
::after добавить содержимое после элемента

///////////////////////////////////
//Селекторы по атрибутам


ex: a[title] - - все элементы a, у которых есть атрибут title
ex: a[title="my-title"] - все элементы a, у которых есть атрибут title со значением my-title
ex: a[title~="my-title"] - элемент с атрибутом, значения которого разделены пробелом, где одно из значений является my-title
ex: a[title|="my-title"] - те элементы a, у которых значение атрибута title начинается с my-title и дальше либо ничего не идет, либо идет - и дальше что угодно xD (Sorax загнул)
ex: a[href^="https://"] - все элементы a, у которых атрибут href начинается со строки https://
ex: a[href$=".jpg"] -  все элементы a, у которых атрибут href заканчивается строкой .jpg
ex: a[href*=".jpg"] - все элементы a, у которых атрибут href содержит где либо строку .jpg

ex: a[href$=".jpg"]::after {
    content: (jpg);
    font-size: 10px;
    color: #888;
} - добавляет обозначение формата для файлов формата jpg
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Вторая шпаргалка про Позиционирование элементов
Код:
//////////////////////////////////////////
//Позиционирование элементов
//////////////////////////////////////////

///////////////
//Размеры
!применяется к блочным элементам
!значения в px
width: - ширина
height: - высота
!блочные элементы всегда отображаются друг под другом
!строчные элементы отображаются в строчку
max-width - максимальная ширина
min-width - минимальная ширина
max-height - максимальная высота
min-height - минимальная высота

//////////////
//Строки и блоки
display: block/inline/inline-block/none;
block - отображать как блок
inline - отображать как строчку
inline-block - отображать блоки в строчку(свойства блоков сохраняются)
none - полность скрыть элемент

//////////////
//Отступы
!значения в px
margin: сверху справа снизу слева; - внешние отступы
or
margin-top: - сверху
margin-right: - справа
margin-bottom: - снизу
margin-left: - слева
margin:auto; - отступ высчитывается автоматически(по центру, относительно родительского элемента)

padding: сверху справа снизу слева; - внутренние отступы
or
padding-top: - сверху
padding-right: - справа
padding-bottom: - снизу
padding-left: - слева

/////////////////////////////
//Позиционирование
position: relative/absolute/fixed;
!отсутсвие position:relative; означает позиционирование относительно элемента body
relative - определяет родительский элемент, внутри которого будет использоваться позиционирование
absolute - абсолютное позиционирование
fixed - зафиксирует элемент относительно окна

!указывать значения в px
!можно указывать отрицательные значения
bottom: - отступ снизу
top: - отступ сверху
left: - отступ слева
right: - отступ справа

z-index: 1; - сделает элемент поверх других элементов
!стандартное значение 0, таким образом можно регулировать порядок расположения элементов(какой элемент под каким находится)

!свойство overflow регулирует то, как будет вести себя содержимое контейнера, которое не вмещается в него полностью
overflow:visible/hidden/scroll/auto;
visible - показывать содержимое поверх контейнера
hidden - скрыть сожержимое, которые не влазит в контейнер
scroll - прокрутка сожержимого, котоыре не влазит в контейнер(по X и по Y)
auto - автоматически добавляет нужный скроллинг(X и Y, только X или только Y)
!overflow-X и overflow-Y применяют к содержимому свойства overflow по X и по Y соответственно
overflow-X: scroll; - добавляет прокрутку по X
overflow-Y: scroll; - добавляет прокрутку по Y
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Третья шпаргалка по Работе с текстом
Код:
///////////////////////////////////////
//Работа с текстом(оформление текста)
///////////////////////////////////////

!font-family указывает шрифты
!лучше указать несколько шрифтов через запятую
font-family: "PT Sans", Arial, Verdana;

font-size: px/pt/em/%; размер шрифта

em - относительно размера шрифта родителького элемента строит новый размер в больщую или в меньшую сторону
ex: font-size: 1.3em; - увеличит шрифт

font-weight: bold; - сделать шрифт жирным

font-style: italic; - сделать шрифт курсивным

font-variant: small-caps; - меняет стиль шрифта

text-decoration: line-through/underline/overline;
line-through - зачеркнутый текст
underline - зачеркнутый текст
overline - надчеркнутый текст

text-transform: lowercase/uppercase/capitalize; - регистр
lowercase - строчные
uppercase - заглавные
capitalize - каждая первая буква слова заглавная

text-align: center/right/left/justify; выравнивание текста
center - по центру
right - по правому краю
left - по левому краю
justify - по ширине

text indent: px/%; - отступ текста(красная строка)

line-height: px/%; - высота строки

word-spacing: px/%; - расстояние между словами

letter-spacing: px/%; - расстояние между буквами

text-shadow: отступ_по_горизонтали отступ_по_вертикали размытие цвет_тени; - тень для текста
!можно указывать через запятую сразу несколько теней
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Четвертая шпаргалка по Работе с цветами. Маленькая =)
Код:
////////////////////////////////
//Цвета
////////////////////////////////

background-color: rgb()/rgba()/hsl()/#000000/yellow; - цвет фона

color: rgb()/rgba()/hsl()/#000000/yellow; - цвет текста

rgba() - rgb с альфа каналом, который указывает прозрачность, четыре значения через запятую
! .5 - наполовину прозрачный текст
#000000 - шестнадцатеричный способ задания цвета
!можно сокращать до трех символов
yellow - цвет можно прописать словами
rgb() - обычный rgb стандарт от 0 до 255 три значения через запятую
hsl() - не используется обычно
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Пятая шпаргалка про Рамки в CSS
Код:
/////////////////////////////////
//Рамки
/////////////////////////////////

border: ширина_рамки тип_рамки цвет_рамки; - добавить рамку
типы рамок:
solid - сплошная
dashed - пунктир
dotted - точки
inset - псевдообъемная
!те, что ниже, практически не используются, вместо них можно делать различные рамки для всех границ
groove
double
hidden
inherit
medium
none
outset

!Ниже отдельное использование некоторых свойств(если хотим что либо переназначить)
border-top: ширина_рамки тип_рамки цвет_рамки; - верх
border-right: ширина_рамки тип_рамки цвет_рамки; - правая граница
border-bottom: ширина_рамки тип_рамки цвет_рамки; - нижняя граница
border-left: ширина_рамки тип_рамки цвет_рамки; - левая граница

border-width: px; - ширина рамки
border-style: - стиль рамки(используются те, что описаны выше)
border-color: #000000/rgb()/rgba()/hls()/yellow; - цвет рамки

border-bottom-color: ...;
border-right-style: ...;
и так далее...
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Шестая шпаргалка посвящена свойству CSS3, которое позволяет делать закругленные углы, не используя картинок. border-radius
Код:
/////////////////////////////////////
//Закругленные углы
/////////////////////////////////////

border-radius: px/%; - позволяет делать закругленные углы для блочных элементов

border-radius: левый_верхний правый_верхний правый_нижний левый_нижный;

!можно расписать свойства для каждого угла отдельно
border-bottom-right-radius: px/%;
border-bottom-left-radius: px/%;
border-top-left-radius: px/%;
border-top-right-radius: px/%;

Литические радиусы:
border-bottom-right-radius: высота ширина;
border-bottom-left-radius: высота ширина;
border-top-left-radius: высота ширина;
border-top-right-radius: высота ширина;

border-radius: 50%; - идеальный круг
border: 10px solid #888; - рамка для круга

////////////обязательно нужно писать с префиксами браузеров///////////////
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Девятая шпаргалка демонстрирует работу со спрайтами.
CSS
Код:
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.buttons li {
    background: url(sprite.png) no-repeat;
    display: inline-block;
    width: 123px;
    height: 32px;
    cursor: pointer;
}

.buttons .button1:hover {
    background-position: 0 -32px;
}

.buttons .button1:active {
    background-position: 0 -64px;
}

.buttons .button2 {
    background-position: -130px 0;
}

.buttons .button2:hover {
    background-position: -130px -32px;
}

.buttons .button2:active {
    background-position: -130px -64px;
}

.buttons .button3 {
    background-position: 0px -102px;
}

.buttons .button3:hover {
    background-position: 0px -134px;
}

.buttons .button3:active {
    background-position: 0px -166px;
}
html
Код:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="9.css(спрайты).css">
    <title>Document</title>
</head>
<body>
    <ul class="buttons">
        <li class="button1"></li>
        <li class="button2"></li>
        <li class="button3"></li>
    </ul>
</body>
</html>
sprite.png
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Практическая шпаргалка, демонстрирующая работу с тенями
CSS
Код:
body {
    background: url(bg.jpg);
}

.button {
    display: inline-block;
    margin: 40px;
    width: 100px;
    height: 100px;
    background: url(bg.jpg);
    cursor: pointer;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -weblit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
    -moz-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
    -ms-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
    -o-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);

}

.button:active {
    box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
    -ms-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
    -o-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
}

.button::after {
    content: '';
    width: 100px;
    height: 100px;
    display: block;
    opacity: .7;
}

.btn-photo::after {
    background: url(MD-camera-photo_0.png) center no-repeat;
}

.btn-settings::after {
    background: url(settings.png) center no-repeat;
}

.btn-tag::after {
    background: url(tag.png) center no-repeat;
}

.button:active::after {
    background-position: center 52%;
}
html
Код:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="button btn-photo"></div>
    <div class="button btn-settings"></div>
    <div class="button btn-tag"></div>
</body>
</html>
extra_clean_paper.png MD-camera-photo_0.png tag.png settings.png
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Всплывающие подсказки на CSS
CSS
Код:
.container {
    width: 150px;
    height: 80px;
    background: #444;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}

.container:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 10px solid #444;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    bottom: -10px;
    left: 65px;
}
html
Код:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>
 

Mr__Mess

Moderator
Модер
23 Авг 2015
35
85
33
27
Объемный куб на CSS3, jquery только для привязки мышки. Лучше всего работает в хроме.
CSS
Код:
body {
    background-color: #fff;
    font: 1em Tahoma, Arial;
}

#wrapper {
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    margin: 150px;
}

#cube {
    position: relative;
    width: 300px;
    height: 300px;
    -webkit-transform-origin: 50% 50% -150px;
    -moz-transform-origin: 50% 50% -150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.side {
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,.3);
    background: -webkit-radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
    background: -moz-radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
    position: absolute;
    border: 10px solid #fff;
    border-radius: 10px;
    font-size: 5em;
    color: #fff;
    line-height: 300px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 0 6px rgba(0,0,0,.5);
    -webkit-transform-origin: 50% 50% -150px;
    -moz-transform-origin: 50% 50% -150px;
}

#side1 {
    background: rgba(45,3,3,.3);
}

#side2 {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    background: rgba(45,3,3,.4);
}

#side3 {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    background: rgba(45,3,3,.5);
}

#side4 {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    background: rgba(45,3,3,.6);
}

#side5 {
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    background: rgba(45,3,3,.7);
}

#side6 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    background: rgba(45,3,3,.8);
}
html
Код:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="wrapper">
        <div id="cube">
            <div class="side" id="side1">1</div>
            <div class="side" id="side2">2</div>
            <div class="side" id="side3">3</div>
            <div class="side" id="side4">4</div>
            <div class="side" id="side5">5</div>
            <div class="side" id="side6">6</div>

        </div>
    </div>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
            $(document).mousemove(function(e){
                $('#cube').css({
                    '-moz-transform':'rotate('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
                });
            });
        });
    </script>
    <script>
        $(function(){
            $(document).mousemove(function(e){
                $('#cube').css({
                    '-webkit-transform':'rotate('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
                });
            });
        });
    </script>
</body>
</html>
P.S. обязательно подключите в html файле библиотеку jquery. Я использовал jquery-1.7.1.min.js
Под другие версии не пробовал
 

georg

Новичок
18 Фев 2017
16
0
1
43
Попробовал воспроизвести куб, получилось интересно, спасибо.