Posts tagged "css"
Некоторые сокращения 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. $ — означает «вконце»    

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 элемент...

Css

Читаю интересную книгу про html5 и css. Вот так вроде столько времени этим занимаешься, но всегда вычитаешь много нового. Например это  <style type=»text/css»> @import url(css/styles.css); </style>    вот этого тоже не знала https://developers.google.com/fonts/docs/getting_started Можно добавлять шрифты из гугла к себе на сайт Типа так: <link href=»http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic» rel=»stylesheet»> а в css так: p { font-family: ‘Philosopher’,...