Фильтр по:
  

Прочее на тему CSS

CSS. Каскадные таблицы стилей

  • Страница 1 из 1
  • 1
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » CSS. Каскадные таблицы стилей » Прочее на тему CSS
Прочее на тему CSS
Дата: Понедельник, 01.02.2010, 14:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Пишу я fflesh (Дата: Вторник, 12.01.2010, 10:10:18 | Сообщение # 66)

dubinsolla,

Quote (dubinsolla)
Joey, хотите совет? создайте отдельный файл со стилями (например style.css),перенесите в него все свои стили из my.css и впоследствии редактируйте всё в этом файле и ничего у вас слетать не будет wink только прописать его не забудьте в коде сраниц.

- ваще самый грамотный совет из всех, что давали товарищу Joey!

Я правда кое где сделал немного по другому, так как стили мини-чата почему то чётко к стандартной (ну или my.css) привязаны, а разбираться с мини-чатом, если честно, мне было лень...

Короче, к чему это я гоню. А вот к чему.

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

Проще будет самим разобраться, а то как ни гляну, почти у всех каша в CSS.

Например: CSS, отвечающая исключительно за внешний вид, оформление, сайта; CSS, отвечающая только за оформление материалов, переключателей кнопок и т.д., короче - за динамическую часть сайта. Ну и соответственно CSS, отвечаюшую за оформление самого текста, чистого контента, то есть.
Воть.

Чтобы не прописывать все эти стили вот так:

Code
<link rel="stylesheet" type="text/css" href="/main.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="/content.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="/formatting.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="/print.css"  media="print" />

лично я, прописываю их вот так:

Code
<link rel="stylesheet" type="text/css" title="myStyle" href="/_style/theme/style.css" media="screen" />

А сам файл, что style.css я организую вот так:

Code
@charset "utf-8";
/* CSS Document */
@import url("main.css");
@import url("content.css");
@import url("formatting.css");

Ну а файлик для вывода на принтер я подключаю обычным способом и только на страничках "материала и комментариев к нему".
Вот.

Да, и, кстати, перед внесением каких либо изменений в CSS, советую сохранять его копию, например вот так style-12.01.2010.css

P.S. Это я так.... Дополнительная инфа по теме...

P.P.S. Кстати, туда же, не использую и другим не советую русскую кириллицу в комментариях в самой CSS, т.к. бывали случаи неадекватного поведения некоторых браузеров, которые просто переставали воспринимать все классы, написанные после комментария на русском...
Воть.

P.P.P.S. Да, и, кстати, не забывайте о такой вещи как наследственность в CSS и приоритеты. Если одному и тому же классу прописаны разные свойства - применяться будет последнее, а если прописаны в HTML - то, то, что прописано в style="" ... кроме того всегда есть еще такая весчь, как ! important, которая переплюнет всё остальное... ;-)))
Да и ещё одно, id="" всегда выше по значению чем class=""!

 
Дата: Воскресенье, 22.08.2010, 17:33 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 Приветствую!
У меня такой вопрос по CSS возник, атрибут text-overflow вапще работает где-нибудь?
Да хотел бы чтобы в списке категорий категории не переносились на следующую строку, а автоматически обрубались.
Т.е. например:

Государство и
право //как обычно если текст не умещается по ширине

Государство и... //а хотелось бы чтобы он вот так обрезался


Прочитал про text-overflow, раскатал губу, что он сработает, но чето даже не в одном браузере не смог вызвать его действия. Вставлял в CSS так:
Code
.catsTd {text-overflow:ellipsis;-ms-text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

А вообще скриптом наверное такое нужно делать? Сильно сложный скрипт?

 
Дата: Воскресенье, 22.08.2010, 21:45 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff,
Quote (Komoff)
У меня такой вопрос по CSS возник, атрибут text-overflow вапще работает где-нибудь?

- да, как и написано:
Quote
Атрибут -ms-text-overflow для Internet Explorer 8 - это расширение CSS и может использоваться также как text-overflow в режиме IE8.

...
Quote (Komoff)

Прочитал про text-overflow, раскатал губу, что он сработает, но чето даже не в одном браузере не смог вызвать его действия. Вставлял в CSS так:

- обрезать-то можно ... а вот подставить троеточие ... проще - картинкой ... ヅ ... Или написать скрипт, который будет считать символы, лишние удалять и ставить троеточие...
Во всяком случае, на данный момент - других идей нет ... Это если используется стандартный вывод категорий ... через $CATEGORIES$ - с информерами проще.
...
Code
.catsTd {white-space:nowrap;overflow:hidden;}

- должен работать. У меня работает ... ヅ... Категории не переносятся, а просто скрываются ...
...
Quote (Komoff)
А вообще скриптом наверное такое нужно делать? Сильно сложный скрипт?

- да, нет ... обработчик содержимого ссылки ... и всё... в принципе... Может как нить займусь написанием, хотя, думаю, что наверняка что-то похожее уже есть ... ヅ его не может не быть ... ヅ


Flesh

 
Дата: Воскресенье, 22.08.2010, 23:14 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 Да кстати, мне как раз такое нужно с информером сделать. В информере обычная ссылка с заданными стилями через class. Код $CATEGORIES$ я для примера привел.

 
Дата: Понедельник, 23.08.2010, 02:19 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff, ???
Quote (Komoff)
Да кстати, мне как раз такое нужно с информером сделать.

- это тебе для информеров? - и чего - обрубай как хочешь ... Функции - есть ... Куча примеров - вот тут .. «Статистика форума для uCoz (юКоз)»

Code
<a href="$THREAD_URL$"><?substr($THREAD_TITLE$,0,27)?>...</a>

...
Flesh
Прикрепления: 5212812.png (3.1 Kb)

 
Дата: Понедельник, 23.08.2010, 06:38 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 Да в принципе это выход, я кстати, не знал что substr в информерах работает. Ещё бы сделать так, чтобы точки (...) подставлялись только к обрезанным словам.

 
Дата: Понедельник, 23.08.2010, 22:05 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff,
Quote (Komoff)
Да в принципе это выход, я кстати, не знал что substr в информерах работает. Ещё бы сделать так, чтобы точки (...) подставлялись только к обрезанным словам.

... Ну так проверяйте ... и подставляйте ... Е-моё - никакой фантазии ... ヅ
Quote
<?if(len($THREAD_TITLE$)>'27')?><?substr($THREAD_TITLE$,0,27)?>...<?else?>$THREAD_TITLE$<?endif?>

...

Flesh

 
Дата: Понедельник, 23.08.2010, 22:43 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline
Quote (likbezz)
Е-моё - никакой фантазии ... ヅ
да лано никакой фантазии, я и зашел чтобы сказать, что методом научного тыка нашел такое же условие.:))) Но ты меня опередил.

 
Дата: Вторник, 24.08.2010, 01:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff,
... ヅ ...
Ну ... молодца ... что ещё сказать ... ヅ

Quote (Komoff)
что методом научного тыка нашел такое же условие

- вообще-то э- это чистая логика ... biggrin «научный тык» - это другое ... biggrin

Quote (Komoff)
Но ты меня опередил.

- извините ... не хотел ... ヅ


Flesh

 
Дата: Вторник, 24.08.2010, 18:52 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline
Quote (likbezz)
извините ... не хотел ... ヅ
да нет, спасибо конечно, что сказал. А то ведь кто знает, может мне и впрямь фантазии не хватило.:)) Я про эти len, substr и strpоs мало чего знаю, ну кроме мало понятного описания в ПУ и простых операций. Кстати, это я в блоге системы начал ныть, что про них в ПУ мало инфы (ну конечно я не первый), после чего её там увеличили, но ясности внесли немного. biggrin
Ладно, а то это уже оффтопик.

 
Дата: Воскресенье, 12.02.2012, 09:12 |
rikulia
Подполковник
Группа: Пользователи
Сообщений: 105
Награды: 2
Репутация: 11
Статус: Offline


 Привет всем! у меня почему-то перестали отображаться стили переключателя, (везде, кроме ИЕ)
хотя они прописаны:


Code
.catPages1, .pagesBlockuz1, .pagesBlockuz2 {
   border: 0 none;
   color: #FFFFFF;
   margin-bottom: 8px;
   margin-top: 9px;
}
.catPages1 a:link, .pagesBlockuz1 a:link, .pagesBlockuz2 a:link, .catPages1 a:visited, .pagesBlockuz1 a:visited, .pagesBlockuz2 a:visited, .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover, .catPages1 a:active, .pagesBlockuz1 a:active, .pagesBlockuz2 a:active {
   background: none repeat scroll 0 0 #ABABAB;
   border-radius: 5px 5px 5px 5px;
   color: #000000;
   font-size: 10px;
   font-weight: bold;
   padding: 2px 8px;
   text-decoration: none;
}
.catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover {
   background: none repeat scroll 0 0 #EFEBE8;
   border-radius: 5px 5px 5px 5px;
   color: #000000;
   font-weight: bold;
}
.catPages1 b, .pagesBlockuz1 b, .pagesBlockuz2 b {
   background: none repeat scroll 0 0 #505050;
   border-radius: 5px 5px 5px 5px;
   color: #000000;
   font-size: 10px;
   padding: 2px 8px;
   text-decoration: none;
}


Ссылка на сайт

помогите разобраться, пож-та!

Сообщение отредактировал rikulia - Воскресенье, 12.02.2012, 09:13
 
Дата: Воскресенье, 12.02.2012, 10:09 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 rikulia,
Quote (rikulia)
Привет всем! у меня почему-то перестали отображаться стили переключателя, (везде, кроме ИЕ)

Типа, раньше отображались, а теперь перестали? Хм, странно )....
Ща гляну что это за таке...

Вот это исправьте:
Quote (CSS)
td.side-block a:hover {background: # ; color: # ;}

.calMday {background:#FFFFFF;color:#000000;}

.newThreadItem {padding: 0 0 0 8px; background: url(') no-repeat 0px 4px;}

Выделенное красным - удалить, синим - дописать - поставить решётку: #
...
И стили свои поправьте, border-radius - пишется полностью:
Quote (CSS)
.catPages1, .pagesBlockuz1, .pagesBlockuz2 {
border: 0 none;
color: #FFFFFF;
margin-bottom: 8px;
margin-top: 9px;
}
.catPages1 a:link, .pagesBlockuz1 a:link, .pagesBlockuz2 a:link, .catPages1 a:visited, .pagesBlockuz1 a:visited, .pagesBlockuz2 a:visited, .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover, .catPages1 a:active, .pagesBlockuz1 a:active, .pagesBlockuz2 a:active {
background: none repeat scroll 0 0 #ABABAB;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:10px;
border-radius:5px;
color: #000000;
font-size: 10px;
font-weight: bold;
padding: 2px 8px;
text-decoration: none;
}
.catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover {
background: none repeat scroll 0 0 #EFEBE8;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:10px;
border-radius:5px;
color: #000000;
font-weight: bold;
}
.catPages1 b, .pagesBlockuz1 b, .pagesBlockuz2 b {
background: none repeat scroll 0 0 #505050;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:10px;
border-radius:5px;
color: #000000;
font-size: 10px;
padding: 2px 8px;
text-decoration: none;
}


И тогда будет вот так:


...
Прикрепления: 3372359.png (0.9 Kb)

 
Дата: Воскресенье, 12.02.2012, 10:42 |
rikulia
Подполковник
Группа: Пользователи
Сообщений: 105
Награды: 2
Репутация: 11
Статус: Offline
Quote (likbezz)
Типа, раньше отображались, а теперь перестали?

likbezz, именно так!

Добавлено (12.02.2012, 10:42)
---------------------------------------------
likbezz, огромное спасибо, что бы я без вас делала kiss

Сообщение отредактировал rikulia - Воскресенье, 12.02.2012, 10:44
 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » CSS. Каскадные таблицы стилей » Прочее на тему CSS
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия