-
-
-

CSS для контент-менеджера

CSS для контент-менеджера - это как краски, для художника. И как наборный штамп для бухгалтера. И как обновление из облака для поставщика софта. И красоту можно навести и наштамповать эту красоту по всему сайту, и быстро изменить наштампованное тоже.

Общая информация

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

Файл с CSS можно написать в блокноте, сохранив его с расширением .css. В файле c HTML-кодом файл c CSS подключается с помощью тега <link>, который вставляется внутрь тега <head> (между <head> и </head>):

<link rel="stylesheet" href="/style.css" type="text/css" />

Атрибут тега <link> href задаёт ссылку на файл с CSS. Лучше заводить два файла CSS. Один для правил вёрстки, другой для оформления.

Синтаксис

Синтаксис обращения к элементам

Можно задать правила для типа тегов:

img {}

Для элемента с id. Например для <img id="pic1" src="/pic1.png"> правило будет задаваться так:

#pic1 {}

Для элементов принадлежащих одному классу. Например для <img class="pic_big" src="/pic1.png"> <img class="pic_big" src="/pic2.png"> правило будет задаваться так:

.pic_big {}

Для разных элементов можно задать одно правило, перечислив их через запятую:

#pic1, .pic_big {}

Для всех HTML-элементов:

* {}

Синтаксис для записи правил

Внутри скобок {} записывается правило. Например, для всех изображений мы хотим задать серую сплошную рамку шириной 2 пикселя:

img {border: #CCCCCC solid 2px;}

Комментарии

Прокомментировать что-то или сделать часть правил не активной можно с помощью последовательности символов:

/* комментарий: ниже правило для задания полей у изображения не будет исполнено браузером */
img {border: 0; /* margin: 5px; */}

Наследование

Каскадной таблица стилей называется потому, что правила заданные для родительского элемента HTML действуют и для всех элементов внутри родительского. Например, правило, заданное для тега <body>: body {font-family: arial, verdana;} - будет задано и для всех элементов внутри <body> (между <body> и </body>). Но если для тега <p> задать отличное правило: {font-family: tahoma, helvetica;} - шрифт текста внутри тега <p> будет отличаться от текста вне его.

Примеры использования

Как сослаться на столбец в таблице

table.table1 tr > *:first-child {} /* правило для первого столбца в таблице с классом table1 */
table.table1 tr > *:first-child + * {} /* правило для второго столбца в таблице с классом table1 */
table.table1 tr > *:first-child + * + * {} /* правило для третьего столбца в таблице с классом table1 */
table.table1 tr > *:first-child + * + * p {} /* правило для тега <p> в третьем столбце в таблице с классом table1 */

(синтаксис для css2. Воспринимается: Chrome, FF, Opera, Safari, IE8)

Благодарю Романа Комарова

Возможности CSS3

Искажение линии контура слоя

Записи по этим же темам

  • Новинки на сайте

    Нужно решить, кто инициализирует появление новинок на сайте и какую информацию о новинке он должен предоставить

  • ТЗ для импорта CSV в каталог

    Для создания или доработки импорта CSV на сайт нужно разово привлечь веб-разработчика. Основываясь на нашем ТЗ вы начнёте пользоваться импортом, учитывающем весь наш опыт работы с каталогами. А также экономить время, и нервы, сделав импорт простой и предсказуемой операцией.

  • Как проще поддерживать каталог товаров актуальным?

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

  • Иконка сайта

    Иконка сайта помогает найти его в результатах поиска и вкладках браузера. Ясная, подходящая к теме сайта иконка добавляет ещё один "плюс в карму" сайта ...

  • Готовим презентацию! Подготовка презентации по рабочей тетради.

    Иногда нам приходится покидать свой уютный домашний "Офис" и рассказывать другим людям: чем это мы вне их глаз занимаемся. Если расскажем красиво - сможем укрепить веру слушателей в эффективность удалённой работы. Предлагаю памятку для подготовки своего выступления.

-
-