Все ленты — последние статьи

Сбросить стили CSS css_reset.css

html

<link rel="stylesheet" href="/css/css_reset.css">

 

css_reset.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

CSS таблицы — красивые и стильные таблицы, Делаем округления в таблице на CSS

Оригинал тут http://html5book.ru/css3-tables/#part1

коды в статью  , не замарачиваюсь с картинками есть в оригинале.

http://codepen.io/nazarelen/pen/KLBnr

http://codepen.io/nazarelen/pen/YPZeOw

http://codepen.io/nazarelen/pen/vsbyx

http://codepen.io/nazarelen/pen/Ebulq

http://codepen.io/nazarelen/pen/DHAfp

http://codepen.io/nazarelen/pen/mvfCL

http://codepen.io/nazarelen/pen/rFJdg

http://codepen.io/nazarelen/pen/vIzAs

 

table {font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
width: 480px;
border-collapse: collapse;
text-align: left;
margin: 20px;}
th {
font-size: 14px;
font-weight: normal;
color: #039;
border-bottom: 2px solid #6678b1;
padding: 10px 8px;}
td {
color: #669;
padding: 9px 8px 0;}
tr:hover td{
color: #6699ff;
}

 

Подробнее: CSS таблицы — красивые и стильные таблицы, Делаем округления в таблице на CSS

*Практические CSS3 таблицы с закругленными углами

Источник http://codingtools.ru/lessons/2/109  Обратил внимание со стильным дизайном.

 

Существуют некие дискуссии о том, когда и как использовать таблицы в веб-разработке. Вывод один: когда мы имеем дело с табличными данными, таблицы просто необходимы.

Проектирование дизайна таблицы всегда является сложной задачей. Если ваша таблица трудно сканируется взглядом, как правило, раздражает пользователей, они теряют фокус и путаются в столбцах и строках.

Сегодня мы создадим красивую таблицу с иcпользованием CSS3. Так же будем использовать jQuery для совместимости с некоторыми браузерами.

 

Подробнее: *Практические CSS3 таблицы с закругленными углами

Кодировка UTF-8

UTF-8 (от англ. Unicode Transformation Format — формат преобразования Юникода) — в настоящее время распространённая кодировка, реализующая представление Юникода, совместимое с 8-битным кодированием текста. Нашла широкое применение в операционных системах и веб-пространстве.
Текст, состоящий только из символов Юникода с номером меньше 128, при записи в UTF-8 превращается в обычный текст ASCII. И наоборот, в тексте UTF-8 любой байт со значением меньше 128 изображает символ ASCII с тем же кодом. Остальные символы Юникода изображаются последовательностями длиной от 2 до 6 байт (реально только до 4 байт, поскольку использование кодов больше 221 не планируется), в которых первый байт всегда имеет вид 11xxxxxx, а остальные — 10xxxxxx.
Проще говоря, в формате UTF-8 символы латинского алфавита, знаки препинания и управляющие символы ASCII записываются кодами US-ASCII, a все остальные символы кодируются при помощи нескольких октетов со старшим битом 1. Это приводит к двум эффектам.
Даже если программа не распознаёт Юникод, то латинские буквы, арабские цифры и знаки препинания будут отображаться правильно.
В случае, если латинские буквы и простейшие знаки препинания (включая пробел) занимают существенный объём текста, UTF-8 даёт выигрыш по объёму по сравнению с UTF-16.[1][2]
На первый взгляд может показаться, что UTF-16 удобнее, так как в ней большинство символов кодируется ровно двумя байтами. Однако это сводится на нет необходимостью поддержки суррогатных пар, о которых часто забывают при использовании UTF-16, реализуя лишь поддержку символов UCS-2.[1]
Формат UTF-8 был изобретён 2 сентября 1992 года Кеном Томпсоном и Робом Пайком и реализован в Plan 9[3]. Сейчас стандарт UTF-8 официально закреплён в документах RFC 3629 и ISO/IEC 10646 Annex D.
Википедия.

Изменить кодировку документа на UTF-8

Часто случается так, что преобразовать документ в кодировку UTF-8, привычными способами не получается. Такие способы как например установка мета тега:
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
не возимеют должного результата. Тому причиной может служить настройки web-сервера, в данном случае Apache. Для того чтоб обойти или точнее сказать перенастроить для отдельной директории некие параметры, применяется специальный файл с именем .htaccess.
.htaccess (от. англ. hypertext access) — файл дополнительной конфигурации веб-сервера Apache, а также подобных ему серверов. Позволяет задавать большое количество дополнительных параметров и разрешений для работы веб-сервера в отдельных каталогах (папках), таких как управляемый доступ к каталогам, переназначение типов файлов и т.д., без изменения главного конфигурационного файла.

Википедия.
Выход довольно прост, для того что бы документ в кодировке UTF-8, корректно отображался:
  1. Нужно прописать мета тег <meta http-equiv="content-type" content="text/html;charset=utf-8"/> в теги head
  2. Создать файл .htaccess именно с точкой в начале. Это очень просто делается с помощью бесплатной програмки Notepad++
  3. И вписать в этот файл строку AddDefaultCharset UTF-8
При создание файла конфигурации в программе Notepad++, выбирете в меню пункт "Кодировки" -> Кодировать в UTF-8(без BOM). После чего, впишите строку AddDefaultCharset UTF-8 как содержимое файла и сохраните его под именем .htaccess, затем скопируйте файл в директорию, где находятся документы в формате UTF-8. После чего ваши кракозябры должны отображаться нормально (правильно).
И ещё важно сказать, что если вы меняете кодировку страницы на utf-8, а прежде она у вас была windows-1251 или ещё какая, то весь русский текст станет не читаем и вы не сможете его восстановить даже если обратно поменяете кодировку. Чтобы этого не произошло, меняйте кодировку осторожно, т.е. скопируйте код страницы и её содержимое, только после этого смените кодировку и сохраните файл. Затем вставьте, то что вы скопировали назад и сохраните. Таким образом вам не придётся вспоминать комменты к коду и восстанавливать русскоязычные пункты страницы. Если русского текста нет в коде странице, то меняйте смело кодировку.

Закруглённые края у div

Одно из самых простых и полезных свойств в CSS3 это border-radius. С помощью него, можно закруглить края у элементов, в частности у div.

Синтаксис


Синтаксис у этого свойства следующий:

1
border-radius: X;

где X — радиус закругления. Измеряемый в пикселях.
Например:

1
border-radius: 4px;

Подробнее: Закруглённые края у div