style – Блог Stafox'a https://stafox.cc О программировании и веб-разработке Fri, 22 Jul 2016 14:00:24 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.2 Рейтинг на 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