css – Блог Stafox'a https://stafox.cc О программировании и веб-разработке Fri, 22 Jul 2016 14:00:24 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.2 Less кэширует импортируемые файлы https://stafox.cc/less-caches-imported-files/ https://stafox.cc/less-caches-imported-files/#respond Sat, 11 Apr 2015 17:08:39 +0000 http://stafox.ru/?p=2457 Столкнулся с проблемой кэширования при использовании less. Речь идет об использовании less.js для компиляции на лету. Конкретно проблема состоит в том, что файлы, которые подключаются через @import кэшируются особенным образом – очистка кэша (или отключение кэширования в браузере) никак не решает проблему. Как оказалось, хранится все это в window.localStorage. В LESS уже вприцнипе все предусмотрели,

Сообщение Less кэширует импортируемые файлы появились сначала на Блог Stafox'a.

]]> less-cache-import
Столкнулся с проблемой кэширования при использовании less. Речь идет об использовании less.js для компиляции на лету.

Конкретно проблема состоит в том, что файлы, которые подключаются через @import кэшируются особенным образом – очистка кэша (или отключение кэширования в браузере) никак не решает проблему.
Как оказалось, хранится все это в window.localStorage. В LESS уже вприцнипе все предусмотрели, и для того чтобы отключить кэширование достаточно установить окружение как development, а делается это следующим образом:

[js] var less=less||{}; less.env=’development’;
[/js]

Хочу отметить, что этот код должен располагаться до подключения less.js

Сообщение Less кэширует импортируемые файлы появились сначала на Блог Stafox'a.

]]> https://stafox.cc/less-caches-imported-files/feed/ 0 Рейтинг на CSS https://stafox.cc/raiting-na-css/ https://stafox.cc/raiting-na-css/#respond Fri, 10 Aug 2012 19:46:36 +0000 http://stafox.ru/?p=1626 Не так давно пришлось заняться реализацией возможности оставлять отзывы с выставлением оценки. Своего рода рейтинг. Расскажу как это можно сделать легко, красиво, функционально. Что нам потребуется? Две картинки (пустая звезда и заполненная) и немного CSS. А теперь, расскажу немного о функциональности. Данный пример позволяет реализовать не только 5 бальную систему оценок, но и 7, 10,

Сообщение Рейтинг на CSS появились сначала на Блог Stafox'a.

]]>

Не так давно пришлось заняться реализацией возможности оставлять отзывы с выставлением оценки. Своего рода рейтинг. Расскажу как это можно сделать легко, красиво, функционально.

Что нам потребуется? Две картинки (пустая звезда и заполненная) и немного CSS. А теперь, расскажу немного о функциональности. Данный пример позволяет реализовать не только 5 бальную систему оценок, но и 7, 10, 20, и даже 100. Данный пример удобно использовать с каким нибудь динамическим языком программирования, например PHP. Для начала нам понадобится html-страничка со следующим кодом.

[html] <!DOCTYPE html>
<html>
<head>
<title>RateThis</title>
</head>
<body>
<div class="testimonial-rating">
<div class="testimonial-rating-stars">
<div class="testimonial-realrating" style="width:85%;"></div>
</div>
<div class="testimonial-numerical-rating">4.25 / 5</div>
</div>
</body>
</html>
[/html]

Структура есть. Перейдем к стилям.

[css] .testimonial-rating {
width:200px;
height:24px;
line-height: 24px;
}
.testimonial-rating-stars {
background:url("img/star_empty.png") repeat-x;
width:120px; /* Ширина звезды * желаемое число звезд */
height:24px; /* Высота звезды */
float:left;
}
.testimonial-realrating {
background:url("img/star.png") repeat-x;
height:24px; /* Высота звезды */
}
.testimonial-numerical-rating {
width:70px;
padding-left:10px;
float:right;
font-size: 14px;
text-align: left;
}
[/css]

О том как подключить css-стили Вы можете прочитать во второй лекции “CSS с нуля”.  Вот в принципе и все. Любезно предоставляю Вам исходники и демо.

Сообщение Рейтинг на CSS появились сначала на Блог Stafox'a.

]]> https://stafox.cc/raiting-na-css/feed/ 0 CSS с нуля. Лекция 2 https://stafox.cc/css-s-nulya-lektsiya-2/ https://stafox.cc/css-s-nulya-lektsiya-2/#comments Fri, 27 Jul 2012 13:18:33 +0000 http://stafox.ru/?p=1583 Во второй лекции мы немного глубже копнем CSS и познакомимся. Рассмотрим способы добавления стилей на страницу. Способы добавления стилей Исходя из подзаголовка, Вы наверняка догадались, что количество таких способов больше чем один 🙂 Рассмотрим первый, он же, самый популярный. Добавление стилей на сайт производится указанием местоположения файла стилей c помощью тега <link>. [html]<link rel="stylesheet" href="css/style.css"

Сообщение CSS с нуля. Лекция 2 появились сначала на Блог Stafox'a.

]]>

Во второй лекции мы немного глубже копнем CSS и познакомимся. Рассмотрим способы добавления стилей на страницу.

Способы добавления стилей

Исходя из подзаголовка, Вы наверняка догадались, что количество таких способов больше чем один 🙂 Рассмотрим первый, он же, самый популярный.
Добавление стилей на сайт производится указанием местоположения файла стилей c помощью тега <link>.

[html]<link rel="stylesheet" href="css/style.css" />[/html]

Вы заметили, что в примере был указан относительный путь? Также можно  подключить стили со стороннего сайта, указав прямой путь к файлу стилей:

[html] <link rel="stylesheet" href="http://example.stafox.ru/style/default.css" />
[/html]

И не забывайте, что тег <link> должен располагаться между <head> и </head>
Стили, подключенные таким способом, получили название связанные.

Второй способ, не очень популярен, и я его использую крайне редко.

[html] …
<head>
<style>
p {
color: #333;
background:#ddd;
}
</style>
</head>
…
[/html]

Стили объявляются в  html-документе, главное не забыть “обвернуть” их в тег <style>.

Третий способ, применяется очень часто, особенно, когда лень-матушка одолевает 🙂 Он позволяет применить стиль к любому элементу:

[html] <p style="color:#369;font-style:italic;">CSS с нуля – это просто!</p>
[/html]

Как Вы уже заметили, для этого применяется универсальный атрибут style, значением которого и является желаемый набор css-свойств, разделенных точкой с запятой.

Ну, и остается последний, четвертый способ. Он позволяет подключать стили в стилях. Я бы рекомендовал использовать этот способ, именно так как в примере. Предположим что у нас есть некий style.css, который содержит в себе следующие строки:

[css title=”style.css”] @import ("css/header.css");
@import ("css/body.css");
@import ("css/footer.css");
@import ("css/comments.css");
@import ("css/article.css");
@import ("css/sidebar.css");
@import ("css/menu.css");
@import ("css/admin.css");
[/css]

И так, Вы уже наверняка догадались, что с помощью @import можно импортировать (подключать) различные css файлы. А теперь для чего я советую именно так использовать этот способ? Когда Вы будете писать БОЛЬШОЙ и жирный проект, стилей будет очень много, и файл будет содержать огромную кучу строк. Чтобы не тратить время на поиск, когда придётся что-то “допилить”, советую разбивать на несколько небольших файлов. Теперь, если Вам нужно будет изменить цвет сайдбара, Вы сразу увидите что Вам стоит заглянуть в файл sidebar.css, в котором будет гораздо меньше строк, а значит Вам будет легче в нем ориентироваться. Ну, а чтобы подключить сам файл style.css, Вы можете воспользоваться первым способом.

Сообщение CSS с нуля. Лекция 2 появились сначала на Блог Stafox'a.

]]> https://stafox.cc/css-s-nulya-lektsiya-2/feed/ 10 CSS с нуля. Лекция 1 https://stafox.cc/css-s-nulya-lekciya-1/ https://stafox.cc/css-s-nulya-lekciya-1/#comments Mon, 25 Jun 2012 22:35:25 +0000 http://stafox.ru/?p=1570 Приветствую всех, кому еще интересны эти статьи, и вообще этот блог в целом:) Так получилось, что я очень долго не писал. Оправдываться сейчас не буду, для этого я чуть позже выделю отдельную статью. А сейчас по многочисленным просьбам “CSS с нуля: первая лекция”.Давайте для начала расскажу, что предстоит Вам узнать из этой лекции: “что такое

Сообщение CSS с нуля. Лекция 1 появились сначала на Блог Stafox'a.

]]>
Приветствую всех, кому еще интересны эти статьи, и вообще этот блог в целом:) Так получилось, что я очень долго не писал. Оправдываться сейчас не буду, для этого я чуть позже выделю отдельную статью. А сейчас по многочисленным просьбам “CSS с нуля: первая лекция”.Давайте для начала расскажу, что предстоит Вам узнать из этой лекции: “что такое CSS?”, “для чего он нужен?”, “как его использовать?”.

Что такое CSS?

CSS – это язык стилей, отвечающий за отображение элементов, причем не только в html-документе (например, CSS используется при определении свойств элементов в Qt). Помните лекции “HTML с нуля”? Так вот, если Вы выучите CSS на должном уровне, у Вас полностью пропадет надобность в использовании дополнительных атрибутов для элементов. Кстати, раз уж Вы решили учить CSS, неплохо бы знать, что это аббревиатура, и расшифровывается она как Cascading Style Sheets. CSS является неотъемлемой частью блочной верстки, о которой я упоминал в последней лекции HTML с нуля.

Для чего служит CSS?

Служит CSS для придания индивидуальности странице, ну, или если говорить глобально, то сайту. CSS помогает оптимизировать структуру сайта, уменьшить вес страниц, а также облегчит изменение внешнего вида сайта (все доводы и факты этого приведу в следующей лекции).

Как использовать CSS?

В топе странные запросы: “Как установить CSS?”, “Как создать CSS?”, расслабьтесь, CSS создали и без нас, а устанавливать ничего не придется 🙂 Все проще чем может показаться. Берем простую HTML страницу:

[html] <!DOCTYPE html>
<html>
<head>
<title>Страница с CSS</title>
<style>
* {
background:#333;
color:#fff;
}
</style>
</head>
<body>
Simple Text
</body>
</html>
[/html]

Все проще, чем могло показаться, правда? А все потому, что CSS интегрирован во все современные браузеры.  CSS очень простой и наглядный, что позволяет быстро привыкнуть к нему и влюбиться 🙂

Я думаю это неплохое легкое начало, которое не в коем случае не отпугнет Вас от изучения CSS. На этом все, подписываемся на RSS ленту, чтобы не пропустить следующую лекцию, надоедаем в комментариях, чтобы ускорить процесс 🙂

Сообщение CSS с нуля. Лекция 1 появились сначала на Блог Stafox'a.

]]> https://stafox.cc/css-s-nulya-lekciya-1/feed/ 24 HTML с нуля. Лекция 4 https://stafox.cc/html-s-nulya-lekciya-4/ https://stafox.cc/html-s-nulya-lekciya-4/#comments Thu, 26 Jan 2012 00:35:38 +0000 http://stafox.ru/?p=1460 Приветствую Вас, мои дорогие читатели и случайные прохожие! В четвертой лекции мы поговорим о списках и отдельно о теге <div>, который имеет намного большее значение, нежели Вам может показаться на превый взгляд. Списки Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка,

Сообщение HTML с нуля. Лекция 4 появились сначала на Блог Stafox'a.

]]>
Приветствую Вас, мои дорогие читатели и случайные прохожие! В четвертой лекции мы поговорим о списках и отдельно о теге <div>, который имеет намного большее значение, нежели Вам может показаться на превый взгляд.

Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> – его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, – типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

[html] <ul type="circle">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>
[/html]

Который выглядит следующим образом:

  • Первый элемент списка
  • Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

  • type – Устанавливает вид маркера списка.
  • reversed – Нумерация в списке становится в обратном порядке (3,2,1).
  • start – Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

[html] <ol type="a">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
[/html]
  1. Первый
  2. Второй
  3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания “да таблицами я хоть черта сверстаю”, да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!

“А как же таблицы?” – спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS – вот мой последний аргумент: предположим, что сайт – это квартира, HTML – это стены, благодаря которым у Вас получаются комнаты, а CSS – это двери, обои, краска, картины, мебель, ковры – т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям – сделайте его уникальным, и в этом Вам поможет CSS.

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

Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.

Сообщение HTML с нуля. Лекция 4 появились сначала на Блог Stafox'a.

]]> https://stafox.cc/html-s-nulya-lekciya-4/feed/ 29 Платное бесплатно. Выпуск 7 https://stafox.cc/platnoe-besplatno-vypusk-7/ https://stafox.cc/platnoe-besplatno-vypusk-7/#respond Sat, 26 Nov 2011 23:11:56 +0000 http://stafox.ru/?p=1286 Пришло время очередного выпуска рубрики “Платное бесплатно”. В седьмом выпуске Вас ждёт 6 бесплатных “вкусняшек”. И так встречайте: PHP Style Switcher PHP Style Switcher – это замечательный PHP-скрипт для быстрой смены стилей. Вам никогда не приходил в голову вопрос “Как изменить стиль страницы при нажатии на ссылку?”, если приходил, то вот оно, решение! Не требует

Сообщение Платное бесплатно. Выпуск 7 появились сначала на Блог Stafox'a.

]]> Закрыто
Пришло время очередного выпуска рубрики “Платное бесплатно”. В седьмом выпуске Вас ждёт 6 бесплатных “вкусняшек”.
И так встречайте:

PHP Style Switcher

PHP Style Switcher – это замечательный PHP-скрипт для быстрой смены стилей. Вам никогда не приходил в голову вопрос “Как изменить стиль страницы при нажатии на ссылку?”, если приходил, то вот оно, решение!

  • Не требует редактирования PHP кода!
  • Установка в 3 шага
  • Создан для дизайнеров
  • Поддерживает нескольких CSS-файлов для одной HTML-страницы
  • Идеально подходит для демонстрации работы с несколькими цветовыми схемами
  • Быстрее, чем JS свитчеры
  • В отличие от JS свитчеров не склонен к ошибкам

Как установить?

  • Скопируйте switcher.php в папку с CSS-стилями
  • Замените тег подключающий файл CSS-стилей новым:
    [html]<link rel=”stylesheet” href=”css/switcher.php?default=mystyle.css” type=”text/css” />[/html]
  • Создайте несколько ссылок для переключения стиля:
    [html]<a href=”css/switcher.php?style=new-style.css”>Сменить стиль</a>[/html]

Tejas – Premium HTML5 Video Player

Неплохой видео плеер на HTML5 и jQuery. Вы сможете редактировать и изменять код по своему усмотрению, вплоть до создания нового графического интерфейса.

Skrool CSS Scrollbar Manager

Skrool – это мини-IDE, которая используется для создания CSS прокрутки. Она включает в себя несколько примеров полосы прокрутки, присутствует возможность создавать свои собственные полосы прокрутки. Скрипт позволяет выбрать, какие цвета изменить, одним кликом по нужной области.

XHTML/CSS Simply Template – 4 Skins

Это простой и xHTML Strict валидный шаблон. 7 страниц с контентом. Более 50 psd-шаблонов, что поможет Вам изменить любой элемент. И самое главное – это 4 стиля оформления!

Galleria – Photography and Portfolio Template

Красивый шаблон для портфолио или фотогалереи. Включает в себя 2 разных галереи изображений на JavaScript и 12 цветовых схем.

Slideo Business Template Available in 7 colors

Slideo – это шаблон галереи бизнесс класса, который выполнен в 7 цветовых схемах.

UPD рубрика закрыта

Вы когда-нибудь задавались вопросом “Как собрать самодельный умный дом?” Теперь можете даже не думать об этом, теперь всё сделают за Вас!

Сообщение Платное бесплатно. Выпуск 7 появились сначала на Блог Stafox'a.

]]> https://stafox.cc/platnoe-besplatno-vypusk-7/feed/ 0