- Базовые стили и полезные CSS-сниппеты
- 1. Базовая HTML5 конструкция
- 2. Сброс стандартных стилей браузеров
- 3. CSS3 градиенты
- 4. CSS3 Transform
- 5. Свой @font-face
- 6. Мета-теги адаптивной верстки
- 7. HTML5-медиа
- 8. Классы для упрощения верстки
- 9. Сниппеты дизайна
- 10. Сниппеты разработки
- 11. Подготовка страницы для печати
- 43 CSS Tables
- Table of Contents:
- Related Articles
- Tables
- Author
- Links
- Made with
- About a code
- Zigzag Table
- Author
- Links
- Made with
- About a code
- Table with Pagination
- Author
- Links
- Made with
- About a code
- Table with Frozen Table Header and Left Column
- Author
- Links
- Made with
- About the code
- Sort Table Rows By Table Headers
- Author
- Links
- Made with
- About the code
- Responsive Tables Using li
- Author
- Links
- Made with
- About the code
- Responsive Table HTML and CSS Only
- Responsive Table With Flexbox
- CSS Responsive Table Layout
- Fixed Table Header
- Responsive Table
- Pure CSS Table Highlight
- Author
- Links
- Made with
- About the code
- Sticky Table Headers by position: sticky;
- Responsive Table
- CSS Responsive Table & Detail View
- Author
- Links
- Made with
- About a code
- CSS Table
- Responsive Table
- Author
Базовые стили и полезные CSS-сниппеты
В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
1. Базовая HTML5 конструкция
Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.
2. Сброс стандартных стилей браузеров
один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.
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; outline: none; >html < height: 101%; >/* always display scrollbars */ body < font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >input < outline: none; >table < border-collapse: collapse; border-spacing: 0; >img < border: 0; max-width: 100%; >a < text-decoration: none; >a:hover
3. CSS3 градиенты
Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000);
4. CSS3 Transform
Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.
-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg);
5. Свой @font-face
Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.
6. Мета-теги адаптивной верстки
Важные мета-теги для корректной работы адаптивного макета
7. HTML5-медиа
Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)
8. Классы для упрощения верстки
Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:
.float-left /* Or whatever name you like */ < float: left; >.float-right /* Or whatever name you like */
Или отображением элементов:
9. Сниппеты дизайна
Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.
10. Сниппеты разработки
Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:
Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:
.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >/* IE6/7 support */ .clearfix
Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:
Переносы текста в теге pre:
11. Подготовка страницы для печати
Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:
@media print < * < background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ >a < text-decoration: underline; >a[href]:after < content: " (" attr(href) ")"; >a[href="#"], a[href="javascript:"] < content: ""; >>
43 CSS Tables
Collection of free HTML and CSS table code examples: simple, responsive, pricing, periodic, etc. Update of May 2020 collection. 6 new item.
Table of Contents:
Related Articles
Tables
Author
Links
Made with
About a code
Zigzag Table
A table formatted in a zigzag diagonal layout.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Table with Pagination
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Table with Frozen Table Header and Left Column
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Sort Table Rows By Table Headers
Sort table rows by table headers — ascending and descending.
Author
Links
Made with
About the code
Responsive Tables Using li
Author
Links
Made with
About the code
Responsive Table HTML and CSS Only
HTML table made responsive only with CSS. On mobile the header row is fixed to the left, and the content is scrollable horizontally.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive Table With Flexbox
The idea was to create a nice working table which is working on smaller screens also.
Made by Matys
April 6, 2017
CSS Responsive Table Layout
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made by Luke Peters
February 21, 2017
Fixed Table Header
Fixed table header with simple jQuery code.
Made by Nikhil Krishnan
November 3, 2016
Responsive Table
CSS tricks method responsive table.
Made by Alico
April 11, 2016
Pure CSS Table Highlight
A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
Made by Alexander Erlandsson
March 22, 2016
Author
Links
Made with
About the code
Sticky Table Headers by position: sticky;
Trying out to make a sweet table with sticky table headers if their table is in the viewport (like the iOS names list names beginning capital letter).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive Table
Responsive table with rwd-table-patterns.
Made by SitePoint
April 15, 2015
CSS Responsive Table & Detail View
An example table and detail view scenario.
Made by Heather Buchel
June 29, 2014
Author
Links
Made with
About a code
CSS Table
Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive Table
Table collapses into a «list» on small screens. Headers are pulled from data attributes.
Made by Geoff Yuen
March 25, 2014