Памятка вебмастеру по CSS

Распечатать запись

Рубрика: Уроки CSS
Метки/Tags: Сборник, Таблица, Уроки CSS, Уроки DIV, Электронная книга

РЕКЛАМА отель таиланд по ссылке

Сборник параметров по CSS предназначен скорее для начинающих и содержит основные параметры для форматирования html-страниц с помощью таблиц стилей.

Сборник в разработке…

CSS - справочник
Что такое дивный дизайн
Уроки CSS для новичков
Видеоуроки

НОВОСТИ

Урок 4. Редактирование таблицы стилей

Распечатать запись

Рубрика: Уроки WordPress
Метки/Tags: WordPress, Блог, Таблица, Уроки CSS, Шаблон

В WordPress для “одушевления” темы используется файл style.css в нем указаны параметры темы и его создателя. Например, если запустить тему в том виде в каком она сейчас есть то получим вот такую картину:

Как видите тема не подписана, нет автора и не написано в какой папке хранятся ее файлы. Эта задача легко решаема, откройте файл style.css и сделайте следующую запись:

@charset “utf-8″;

Это задание кодировки для таблицы стилей.

Теперь напишем название темы и ее url:

@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
*/

Добавляем описание темы или любой текст который захотите:

@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
Description: Русская тема Free_subject от создателя <a href=/>ComputerLessons.ru</a> Другие темы для WordPress на сайте <a href=http://on-line-design.ru>On-Line-Design.ru</a>
*/

Осталось прописать автора темы и веб-адрес:

Итог работы:

В следующем уроке создадим скриншот для нашей самописной темы.

Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php

Как закруглить углы без использования графики

Распечатать запись

Рубрика: Создание сайтов
Метки/Tags: Создание сайта, Таблица, Уроки CSS, Уроки Dreamweaver

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

За пример возьмем теперь не таблицу, а слой, хотя и с таблицей можно сделать тоже самое.

Для ясности посмотрите на увеличенный угол слоя:

На самом деле мы будем использовать два слоя (окрашены в серый и черный цвета) и 7 блоков (цветные).

Для начала создайте слой в который вложите еще один в нем будет текст

<div id=”radius”>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

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

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }

Теперь над слоем text будем создавать шапку из блоков толщиной в 1 пиксель. Всего будет 7 блоков, можно использовать любое количество это зависит от радиуса закругления. Для создания блока можно использовать тег <div> или любой другой, но как правило используют устаревший тег <b>. Создадим первый блок:

<div id=”radius”>
<b class=”r1″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

В таблицу стилей пропишите параметры для нового блока:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }

Для блока мы задали отступы по 10 пикселей слева и справа, для следующих блоков эти параметры будут уменьшаться, закругляя таким образом угол:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }

Теперь добавим блоки в html-страницу:

<div id=”radius”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
<b class=”r5″></b>
<b class=”r6″></b>
<b class=”r6″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

6-й и 7-й блоки повторяются для более мягкого закругления угла. Теперь осталось скопировать блоки и вставить их в обратном порядке под слоем text и получим вот такой слой: