Special for few my sites developed social buttons.
Мітки: css
Кушування браузера
Кеш браузера – класна штука, але бувають моменти, коли кеш заважає побачити реальну картину.
Наприклад, коли ми працюємо над великим проектом і під-час наступного апдейта будуть модифіковані css і/або js файли.
Ми робимо апдейт і заливаем нові файли.
Звичайно браузер закешував ресурси і щоб побачити зміни потрібно почистити кеш.
Але я пропоную дещо інше.
Замість того щоб писати:
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="/css/style.css" /> <script type="text/javascript" src="/js/script.js"></script> |
пишемо:
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="/css/style.css?13" /> <script type="text/javascript" src="/js/script.js?13"></script> |
reset css
Пост присвячений верстальщикам.
Файл reset.css – це обнулятор стилів.
У кожного браузера є свої настройки для різних тегів, наприклад для параграфів чи інпутів. А підключивши reset.css можна полегшити процес верстки.
Отже, є багато варіантів.
Особисто я завжди використовував
|
1 2 3 4 |
* { margin: 0; padding: 0; } |
Але цього мало 🙁
YUI 2
reset.css від yahoo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } |
meyers css
reset.css від meyer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } |
Вибираємо для себе підходящий.
Як прибити футер до низу сторінки?
Сьогодні зіткнувся з проблемою розташування футера.
Задача полягала в тому щоб виставити відповідний блок внизу вікна.
Багато переглянув прикладів з position: absolute, але це все не те.
Вихід знайшов, причому, як завжди, надзвичайно простий.
Ось приклад html-коду:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <title>footer panel</title> <style> .header { height: 50px; border:dotted 1px silver;} .content { height: 100px; border:dotted 1px blue;} .footer { height: 30px; border:dotted 1px black; width: 100%; position: fixed; bottom: 0;} </style> </head> <body> <div>header</div> <div>content</div> <div>footer</div> </body> </html> |
В результаті, футер буде постійно знизу.
пріоритети стилів або ієрархія в CSS
Питання на засипку:
Якого кольору буде текст? якщо:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <style type="text/css"> .text_class {color: Red;} #text_id {color: Green;} div {color: Blue;} </style> </head> <body> <div id="text_id" class="text_class"><b>CSS Specificity</b></div> </body> </html> |