Xwab
Форумыnavigate_nextHTML/CSS

Полезные советы CSS
Сообщения
Татьяна

Оптимизация кода:
Если код вашего цвета выглядит так #ff0000, то его можно сократить до #f00 тоесть убираем из кода оттенки которые идут после основного цвета. Сделав это вы сократите вес стиля на 3 байта.

Перед завершающей скобкой } точку с запятой ставить не обязательно. Рто позволит вам сэкономить 7 байт
________________
В место
border-top : 3px double #000; -верхняя
border-left : 3px double #000; -левая
border-bottom : 3px double #000; -нижняя рамка
border-right : 3px double #000; -правая

Лучше писать border: 3px double #000;
Тоесть в место того чтобы описывать каждую сторону рамки (при том, что они одинаковы) быстрее и экономичнее будет написать border: толщина тип_рамки цвет.

В место margin: 5px 5px 5px 5px; (margin: верхний_отступ левый нижний правый)
Пишите margin: 5px

В место margin: 5px 2px 5px 2px
Пишите margin: 5px 2px

Если же связка верх-низ или лево-право имеет значение равное нулю margin: 5px 0px 5px 0px, то можно писать так: margin: 5px 0 тоесть нуль он и в Африке нуль (единица измерения ему не нужна)

05 Июн 2010, 14:16
Татьяна

полезная инфа для тех кто не знает как делаются рамки
_____________________

в коде страницы пишем:
<fieldset>
<legend>Заголовок блока</legend>
html-коды
</fieldset>
все гениальное просто)

цвет, размер, отступы и т.д. этой чудо рамки можно задовать в цсс)
например этот код сделает рамку точечной и красной:
fieldset{border: 1px dotted #ff000} где "fieldset" -стандартный элемент html (проще говоря -тег таблицы)

05 Июн 2010, 14:17
Татьяна

Овальные рамки делаются так:
В css пишем
b{color:#f0f}
.a1,.a2,.a3,.a4,.a5,.a1 i,.a2 i,.a3 i,.a4 i,.a5 i,.a1 b,.a2 b,.a3 b,.a4 b,.a5 b,.a1 q,.a2 q,.a3 q,.a4 q,.a5 q{height:1px;font-size:1px;overflow:hidden;border-style:ridge;border-width:0 1px;display:block}
.a1{margin:0 2px;background:#aaa;border:none}
.a1 b{margin:0 1px;background:#aaa;border-color:#aaa}
.a2{margin:0 1px;border-color:#aaa}
.a2 b{border-color:#aaa}
.a2 i{border-color:#aaa}
.a2 q{border-color:#aaa}
.a3{border-color:#aaa}
.a3 b{border-color:#aaa}
.a3 i{border-color:#aaa}
.a4{border-color:#aaa}
.a4 b{border-color:#aaa}
.a5{border-color:#aaa}
.a5 b{border-color:#aaa}
.b{border:1px ridge #aaa;border-width:0 1px;padding:0 12px}

А на странице
<div class="a1"><b></b></div><div class="a2"><b><i><q></q></i></b></div><div class="a3"><b><i></i></b></div><div class="a4"><b></b></div><div class="a5"><b></b></div><div class="b">

Здесь содержание блока

</div><div class="a5"><b></b></div><div class="a4"><b></b></div><div class="a3"><b><i></i></b></div><div class="a2"><b><i><q></q></i></b></div><div class="a1"><b></b></div>

05 Июн 2010, 14:17
Татьяна

Коментарии в цсс пишутся /*вот так*/
Тоесть в стиле вы можете оставлять себе "зарубки"
пример:
body{color: #f00} /*-цвет текста на странице*/

05 Июн 2010, 14:18
Татьяна

Еще можно задавать параметры через цсс любому html-тегу
например:
input{color: #f00;background: #00f} -сделает окна вода синими, а текст в них красный

form{margin: 0} -уберёт лишние отступы от формы (обычно всех раздражает нижний)

b{color: #f00} -сделает жирный текст красным

05 Июн 2010, 14:19
Татьяна

Сделать элемент невидимым можно с помощью {display:none}
Если скрываете картинку, то не забудте убрать весь текст из alt='от сюда'

05 Июн 2010, 14:25
Татьяна

Чтобы валидатор не ругался на параметор style="" в xhtml, нужно написать на странице мета тег <META HTTP-EQUIV="Content-Style-Type" content="text/css">

05 Июн 2010, 14:26
Татьяна

Параметры селекторов в цсс по умолчанию:

body, div, p, center, hr, h1, h2, h3, h4, h5, h6, address, blockquote, pre, ol, ul, dl, dt, dd, form, fieldset, object { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder }
i, cite, em, var,address { font-style: italic }
pre, code, kbd, pre { white-space: pre }
big { font-size: larger}
small { font-size: smaller}
hr { border: 1px inset }
ol { list-style-type: decimal }
u { text-decoration: underline }

05 Июн 2010, 14:27
Татьяна

допускается такая запись
{margin: 5 3}
как видите ед.измерения здесь не указаны.
по умолчанию в такой записи ед.измерения - px
_______________
на практике работает, но валидатор считает её ошибкой

05 Июн 2010, 14:30
Татьяна

классы в цсс можно писать и на арабском))

<style type="text/css">.ШЄ{color:green}.ЩЉ{color:red}</style>

Класс .<span class="ШЄ"><b>ШЄ</b></span>
Класс .<span class="ЩЉ"><b>ЩЉ</b></span>

05 Июн 2010, 14:30
Ответить на тему