CSS

Определение приоритетов стилей css

Метод определения приоритетов css

1 условная  единица — селектор тегов (h1, p, a), псевдоэлементы (::first-child)

10 условных единиц — класс (a.linkwhite), псевдоклассы (:link)

100 условных единиц —  идентификатор  (#whitelink)

1000  условных единиц —  строчный стиль (<a style=»color:white;»>)

При двух стилях с одинаковым приоритетом будет применен последний стиль.

Для установления максимального приоритета используется метка !important. Оно приписывается к конкретному свойству. Но лучше избегать  использования метки.

a.link{

color: white !important;

}

Анимация css

timeline — тоесть шкала времени задается правилом @keyframes

@keyframes name
{
0% {}
25% {}
50% {}
100% {}

}

name — имя анимации

Свойство animation

Параметры анимации и значения по умолчанию

  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running

Краткая запись и синтаксис

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction ||
animation-fill-mode || animation-play-state

box-shadow

box-shadow: inset 4px 4px 8px rgba(0,0,0,.75);

Префиксы браузеров

-webkit- — применяется Chrome, Safari и другими браузерами на базе WebKit;
-moz- — используется Mozilla Firefox;
-o- — применяется Opera;
-ms- — используется Microsoft Internet Explorer.

Тени у текста, css

1 значение — смещение по горизонтали, 2 — по вертикали, 3 — степень размытости, 4 — цвет

text-shadow: -4px 4px 3px #666;

<h1 style=»text-shadow: -4px 4px 3px #666;»>text-shadow: -4px 4px 3px #666;</h1>

css font-variant: small-caps

<p style="font-variant: small-caps;">делает весь текст маленькими  прописными буквами. Не знаю, где нужен такой эффект. Главное, что б маркетологи не узнали.</p>

Ключевые слова свойства font-size

Собсвенно, известно, что размером по-умолчанию является 16 px. Это соотвествует medium.

Остальные выглядят так:

а еще они множатся.

<b style="font-size:1.5em"><span style="font-size:2em">куку 1.5*2em</span> куку 1.5em </b><span style="font-size:2em">куку 2em</span>

Значок pdf возле ссылки средствами css

Как прицепить значок pdf перед ссылкой на pdf-документ при помощи css:

a[href$='.pdf'] {
 background-image:url(../img/image_preview.png);
 background-repeat:no-repeat;
 padding-left:20px;
}

a[href$=’.pdf’]  — ищет ссылки, у которых в конце значения атрибута href есть .pdf.

$ — означает «вконце»

css и таблички

Продолжаю читать свою книжку по css. Нашла там интересный способ выделения строк таблицы цветом через одну:

table tr:nth-child(odd)

{
background-color: #eeeeee;
}

:nth-child(odd) — псевдоэлемент, выбирающий дочерние элементы. odd— нечетные, even — четные.

Чтобы  выделить опреденный столбец в таблице:

table tr td:nth-child(4n)
{

background-color: #c7f4ff;

}

:nth-child(4n) — 4n — выделить каждый 4 элемент

Или вот:

tr>td[align]:nth-child(2n)
{

background-color:#090;
}

Выделяет второй дочерний элемент, у которого есть атрибут align и раскрашивает в зеленый цвет:

А в красный верхнюю строчку я покрасила так:

table th

{
background-color: #ff0000;

}

Тут ничего сложного нет.

Этот код

#text li>a[href*=»n_id»]:after
{
content: » >>»;
}

цепляет вконце всех ссылок «Читать далее» которые содержат в ссылке n_id (ссылку на новость) символы » >>» Таким же способом можно прицеплять вначале всех ссылок на pdf маленький значок pdf.

Можно добавлять шрифты из гугла к себе на сайт

Типа так:

<link href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic" rel="stylesheet">

а в css так:

p

{

font-family: ‘Philosopher’, ‘Arial Black’, serif;

}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s