Стили границ css. Рамки и границы. Выравнивание содержимого ячеек

Помощь 14.03.2019

Помощь

Если вы читаете эту статью видимо вы знаете что такое CMS Drupal 7 и для чего она нужна. Если нет, тогда для начала почитайте статью как создать собственный веб сайт . Для остальных продолжаю.

Установка Drupal 7 на веб-хостинге не представляет ничего сложного с технической точки зрения, однако нужно понимать что такое хостинг-эккаунт, виртуальный или невиртуальный веб-сервер. Что где "лежит" на этом сервере и как туда попасть. Эта статья для тех кто это знает.

Подготовка к установке Drupal 7

Проверяем можно ли на ваш хостинг установить Drupal 7. Требования Drupal 7 к хостингу следующие:

Apache 1.3 (лучше если 2).
MySQL 5.0.15 (или выше). Можно использовать MariaDB, PostgreSQL или SQLite, но в наших краях это экзотика.
PHP 5.2.4 (или выше).

Если все это на вашем хостинг-эккаунте есть тогда двигаемся дальше. В настройках хостинг-эккаунта нужно проверить:

В Apache должен быть включен mod_rewrite.
В PHP должны быть подключены модули gd, pdo, filter, json.
В PHP опцию memory_limit установить как минимум в 32М, а лучше в 64М.

Установка Drupal 7

Создать пустую базу данных MySQL с кодировкой utf-8. Запомнить имя этой БД, имя пользователя и пароль для доступа к этой БД. Эта база данных будет использоваться для работы Drupal. Никаких таблиц в ней создавать не нужно!

Скачать архив дистрибутива Drupal 7 с сайта drupal.org и распаковать файлы в ту папку на вашем хостинге которая в настройках Apache указана как DocumentRoot для вашего сайта. На разных хостингах эта папка может называться по разному - htdocs, docs, www. Смотрите документацию по вашему хостингу.

Скачивать и закидывать файлы на сайт можно по разному. Можно зайти хостинг по SSH, затем wget и tar. Можно скачать архив на локальный компьютер, распаковать и потом закинуть по FTP. Дело вкуса. Однако учтите, что количество файлов в архиве более 1000 и по FTP они будут долго "заливаться". Возможны сбои при закачке. Поэтому предусмотрите какой-то инструмент для проверки того, что все файлы закачались. Что-то типа "синхронизация каталогов" в totalcmd.

Drupal 7 имеет русский язык интерфейса. Для русификации Drupal уже в процессе установки, нужно, после того как файлы дистрибутива закачаны на хостинг, опять же с сайта drupal.org , скачать файл русского языка drupal-7.16.ru.po (номер версии в названии файла может быть другой!). Это локализация интерфейса Drupal на русский язык. Этот файл также нужно закинуть на хостинг, в папку /profiles/standart/translations . Если это сделать тогда установка Drupal будет уже на русском языке и после установки Drupal будет русифицирован.

Теперь можно запускать установку. Для нужно открыть ваш сайт в браузере:

Если у вас не открылась такая страница, значит вы что-то сделали не так. А на этой странице нужно кликнуть на "Save and continue".

На второй странице "Russian" и опять "Save and continue". Примечание: если вы не скачали и не скопировали файл drupal-7.16.ru.po тогда опции "Russian" не будет!

На этой странице нужно заполнить поля "имя БД", "имя пользователя", "пароль" и "хост БД". Имена БД и пользователя вы получили когда создавали базу данных, а вот имя хоста нужно смотреть в документации к хостинг-эккаунту. Без правильного имени хоста установить не получится. Если это имя не найдете сами - обращайтесь в техподдержку хостинговой компании.

Теперь можно курить бамбук до тех пор пока не откроется следующая страница:

Поля "Имя пользователя" и "пароль" это данные авторизации для администратора системы. Пользователь с этими данными получает административные права и может рулить внутри Drupal. Так, что не нужно использовать имя вроде "admin" и пароль типа "12345". Не облегчайте жизнь взломщикам.

Сколько бы ни хвалились производители суперплоских мониторов, всегда есть сила, действующая в обратном направлении: это программисты, которые никак не могут примирится с двумерностью экрана и на каждом шагу скандируют: «даёшь 3D!».

Псевдотрехмерность окружает нас везде: где надо и не надо. Если, к примеру, button по определению должен выпирать из монитора, то в чем провинились безобидные hr и table ? Первый уже рассматривался в заметке № 12 , теперь поговорим о том, как на корню убить трехмерность последнего.

Задача : получить следующую таблицу:

Способ первый

Воспользуемся атрибутом cellspacing , создающим прозрачную рамку меж всех клеток таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это можно с помощью свойства bgcolor тэгов table и td:

Милостивый читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг tr , тем самым значительно сжав код? На что автор ответит: а потому, деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым цветом, и плакали наши вертикальные рамочки.

Тем не менее, код действительно получается громоздким, поэтому на подходе…

Способ второй

Идея подсмотрена в исходниках Студии Лебедева и принципиально не отличается от предыдущей: полностью включаем исходную таблицу во внешнюю, для которой и прописываем нужный bgcolor .

Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.

«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис , выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона . Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:

Способ третий

Действительно, что нам мешает указать каждой ячейке свойство border ?

td{
border: solid black 1px
}

А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации , эту проблему должно решать свойство border-collapse со значением collapse . В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…

Способ четвертый

По-научному это называется разделением труда:

table.border{
border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}

border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}

Всё просто до безобразия. Каждая ячейка отвечает только за верхнюю и левую рамки. Осталось лишь дорисовать длинные правую и нижнюю рамки. Это возложено на свойство border самой таблицы.

Примечание автора сайта . На самом деле, CSS свойство border-collapse полностью (значения separate и collapse) поддерживается IE5+, NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите только, что задавать свойство border-collapse необходимо при декларации тега table , в то время как бордер задаётся при описании ячеек:

table.border{
border-collapse:collapse
}

Table.border td, table.border th{
border:1px solid #CC0000

CSS свойства границы позволяют вам указывать стиль и цвет границы элемента.

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or thick (толстая).

Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

названия - укажите название цвета, например "red"
RGB - укажите RGB значение, например "rgb(255,0,0)"
Hex - укажите шестнадцатеричное значение, например "#ff0000"

Также вы можете установить цвет границы в "transparent".

Свойство "border-color" не работает, если используется в одиночку. Укажите сначала свойство "border-style", чтобы установить границы.

Граница - Индивидуальное оформление сторон

В CSS можно указать различные границы для разных сторон:

Пример выше можно переделать, используя одно свойство:

Свойство border-style может иметь от одного до четырех значений.

border-style:dotted solid double dashed;
- верхняя граница - из точек
- правая граница - сплошная
- нижняя граница - двойная
- левая граница - пунктирная
border-style:dotted solid double;
- верхняя граница - из точек
- нижняя граница - двойная
border-style:dotted solid;
- верхняя и нижняя границы - из точек
- правая и левая границы - сплошные
border-style:dotted;
- все четыре границы - из точек

Свойство border-style используется в примере выше. Однако, это также работает и со свойствами border-width и border-color.

Граница - Стенографическое (сокращенное) свойство

Как вы можете видеть в примерах выше, для границ имеется довольно много свойств.

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для свойств границы - "border":

При использовании свойства border, порядок значений таков:

border-width
border-style
border-color

Можно пропустить некоторые значения (хотя, свойство border-style все-таки необходимо), главное - сохранять указанный порядок.

Еще примеры

Все свойства верхней границы в одном объявлении
Этот пример демонстрирует стенографическое свойство для установки всех свойств верхней границы в одном объявлении.

Установка стиля нижней границы
Этот пример демонстрирует, как установить стиль нижней границы.

Установка ширины левой границы
Этот пример демонстрирует, как установить ширину левой границы.

Установка цвета четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Они могут иметь от одного до четырех цветов.

Установка цвета правой границы
Этот пример демонстрирует, как установить цвет правой границы.

Все CSS Свойства Границы

Свойство	Описание
border	Устанавливает все свойства границы в одном объявлении
border-bottom	Устанавливает все свойства нижней границы в одном объявлении
border-bottom-color	Устанавливает цвет нижней границы
border-bottom-style	Устанавливает стиль нижней границы

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

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая - 4px: */ border-width: 2px 4px; /* верхняя граница - 2px, левая и правая - 6px, нижняя - 3px: */ border-width: 2px 6px 3px; /* верхняя граница - 2px, правая - 3px, нижняя - 4px, левая - 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

thin - граница шириной 2px;
medium - граница шириной 4px;
thick - граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB - зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

Border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

Border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную - существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

solid - сплошная граница;
dotted - граница из точек;
dashed - пунктирная граница;
double - двойная граница;
groove - объемная граница-выемка;
ridge - объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
outset - выдавленная граница;
inset - вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль - например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую - двойными. Здесь уже все зависит лишь от фантазии.

Border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

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

Border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

border-top - стиль для верхней границы;
border-right - для правой границы;
border-bottom - для нижней границы;
border-left - для левой границы.

border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Итоги

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

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

Div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Но это слишком длинная запись. Всё это можно записать короче:

Div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }

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

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

Верхнюю и нижнюю границы сделайте сплошнымиsolid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
Левую границу сделайте пунктирнойdashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
Правую границу сделайте двойнойdouble , шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)