Posts tagged "css"

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

Метод определения приоритетов css 1 условная  единица — селектор тегов (h1, p, a), псевдоэлементы (::first-child) 10 условных единиц — класс (a.linkwhite), псевдоклассы (:link) 100 условных единиц —  идентификатор  (#whitelink) 1000  условных единиц —  строчный стиль (<a style=»color:white;»>) При двух стилях с одинаковым приоритетом будет применен последний стиль. Для установления максимального приоритета используется метка !important. Оно...

Селекторы — примеры использования

Селектор  :not() Выбрать все ссылки, ведущие на внешние сайты (тоесть не на домен mysite.com) a[href^="http://"]:not([href*="mysite.com"]) Сброс значений отступов *{ padding: 0; margin: 0; }

Селектор :target

Селектор :target используется с внутренними ссылками. В примере при нажатии на ссылку, появится форма.   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #hello { display: none; } #hello:target { display: block; } </style> </head> <body> <a href="#hello">Подписаться на рассылку</a> <form action="" id="hello"> <label for="email">Укажите ваш адрес...
Некоторые сокращения EMMET для CSS

Некоторые сокращения EMMET для CSS

EMMET наиболее удобен для быстрого написания css стилей. Некоторые стили довольно сложные и труднозапоминаемые, с помощью EMMET достаточно лишь запомнить короткое сокращение. fz20 font-size: 20px; fwb font-weight: bold; bgc background-color: #fff; bg background: #000; c color: #000; m0 margin: 0; p0 padding: 0; w100 width: 100px; h100 height: 100px; mw100 min-width: 100px; dn display: none;...

Новый имидж сайта туристической выставки

Вид работ: разработка макета, верстка    

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

text-shadow: -4px 4px 3px #666; 1 значение — смещение по  горизонтали, 2 — по вертикали, 3 — степень размытости, 4 —  цвет <h1 style=»text-shadow: -4px 4px 3px #666;»>text-shadow: -4px 4px 3px #666;</h1>

css font-variant: small-caps

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

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

Собсвенно, известно, что размером по-умолчанию является 16 px. Это соотвествует medium. Остальные выглядят так:   В единицах измерения em:   а еще они множатся. Например   <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> первое «куку» будет не 2em, а 3em, потому что 1.5*2 — 48px

Селекторы

Селекторы, которые я не использовала ни разу, а наверное полезная штука: h1+p — выделяет абзац, следующий сразу за заголовком. Это работает только с сестринскими тегами, не с потомками. p * — все теги, вложенные в p (например strong, em, span, a)    

Значок 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. $ — означает «вконце»