Высший пилотаж CSS

sl · December 11, 2007

Доброго дня, Уважаемые!

Наткнулся случайно на немецком сайте http://www.yaml.de на интересные вещи. Сразу скажу, некоторые я увидел впервые.

(рекомендую скачать примеры с их же сайта (вс? бесплатно) Download YAML )

А вот то до чего у меня не доходит или я просто шокирован таким применением...:

(куски из разных мест)

body { background: #4d87c7 url("../../../images/bg_blue.gif") repeat-x top left fixed; padding: 10px 0; }
*/  !компактно

#page_margins { min-width: 740px; max-width: 80em; margin: 0 auto; border: 0px #889 solid; }

*/mini-width - даже не видел в применении... 

#topnav { color: #aaa; background: transparent; }
*/ прозрачный? как?

  #nav_main ul li#current strong,
  #nav_main ul li#current a,
  #nav_main ul li#current a:focus,
  #nav_main ul li#current a:hover,
  #nav_main ul li#current a:active { color: #4D87C7; font-weight: bold }

/* поправте, если не так прочту:
* в элементе с ID nav_main есть тег конструкции списка (UL) с пунктом (LI), ID которого #current   а дельше — strong (т.е. <b>)? зачем?
*+
*тоже самое но тэг <a>
*+
* тоже самое но тег ссылка с фокус... 
*и ко всему этому делу мы применяем свет и толстый шрифт... уф... как правильно??? особо не ясно в конце *каждой строки (перед запятой).*/

позвольте продолжу:

css опять же файл:

@charset "UTF-8";
*/зачем, если в каждом html стоит <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> или это разные вещи?
@media all
{
....
}
*/и понеслось...

*/внутри вышеуказзаного расположены все свойства, а именно
* { margin:0; padding: 0 }
*/ зачем стоит "*" ? т.е. применить ко всему на свете? или вот:
  * html body * { overflow:visible; }
  * html iframe, * html frame { overflow:auto; }
  * html frameset { overflow:hidden; }
*/ прочитайте пожалуйста это дело правильно...

html { height: 100%; margin-bottom: 1px; }
*/ здесь то о ч?м все думают??? это ж вечная проблема? а здесь так просто...

body {
font-size: 100.01%;....}
*/ имхо, это уже изврат..!!! или есть смысл???

fieldset, img { border: 0 solid; }

*/"Элемент <FIELDSET> предназначен для группирования элементов формы. "   это цитата Уважаемого Влада М. но этот тег прекрасно и работает с обычным текстом и любыми другими элементами! (раньше не видет такого, очень полезно)

*/ очень часто применены:
@import url(screen/content.css);
*/ видимо для удобства... типа include из php...

Вот ещ? просьба: расскажите практическое различие, скажем margin: 0 0 1em 1em (зачем часть в px (я так понимаю, 0 - это по умолчанию 0- px, а остальные стороны в em единицах?)

И на последок, благодарю за ковыряние, но странички и правда смотрятся очень аккуратными и красивыми!

klierik · December 11, 2007

во-первых тему в "Для начинающих"

во-вторых 1/3 треть вопросов строиться просто на незнании для чего применяется то лии иное свойство.

настоятельно рекомендую почитать спецификацию по CSS 2+ и многое станет на свои места.

ну и так что б ответить оп теме.. к примеру тот же

* { margin:0; padding: 0 }

это надо для того что б обнулить все поля и отступы для всех элементов страницы

я в свою очередь туда еще добавляю border:none;

еще б рекомендовал изучить как правильно составлять css файл или как разбивать разнородные по типу css данные на разные файлы.

на все это вы найдете ответ пройдясь по соответствующим сылочкам у меня подписи.

D.S.Denton · December 11, 2007

топикстартеру - комментарии расставляешь некорректно:+) /* коммент */ а у тебя наоборот

ну а вообще - в принципе ничего необычного в файле, разве что во втором куске перед html * необязательна совсем, но хуже от этого не будет

sl · December 12, 2007

вс? же, прошу ответить на следующее:

body {

font-size: 100.01%;....}

* { margin:0; padding: 0 }

*/ зачем стоит "*" ? т.е. применить ко всему на свете? */

fieldset, img { border: 0 solid; }

*/"Элемент

предназначен для группирования элементов формы. " это цитата Уважаемого Влада М. но этот тег прекрасно и работает с обычным текстом и любыми другими элементами! */

Dimitry Wolotko · December 12, 2007

В лягушатник.

D.S.Denton · December 12, 2007

body {

font-size: 100.01%;....}

-- вопрос к авторам сайта

* { margin:0; padding: 0 }

-- читай внимательнее, уже ответили в посте #2

fieldset, img { border: 0 solid; }

-- ну понадобилось им убрать границу у филдсета и картинок. правда тут без слова solid все тоже бы прекрасно работало

этот тег прекрасно и работает с обычным текстом и любыми другими элементами! */

-- угу, и что особенного?

maddogrts · December 12, 2007

хмык высший пилотаж

strix · December 12, 2007

body {
font-size: 100.01%;....}
-- вопрос к авторам сайта

Гугл знает ответ и на этот вопрос

Век живи, век учись - не так давно у меня не получалось обойти баг с относительными единицами, а вс? оказалось так просто :-)

D.S.Denton · December 12, 2007

спасибо за линку

sl · December 12, 2007

в лягушатник или нет, вам решать, но сомневаюсь, что людей, что применяют столь правильно и много из css2 в одном файле много...

советую скачать пример из первого поста и глянуть на содержимое.

спасибо за коменты.

maddogrts · December 14, 2007

@charset "utf-8";
@namespace omf url(http://www.eee.com/2003/omf);
@namespace html url(http://www.w3.org/TR/REC-html40);
div.headers {/* Remove this rule if you want CSS-styled message headers, not toolbars */
	position: absolute;
	top: -60000px;
}
div+div.headers {
	margin: 10px 50px 0;
	border: 1px solid rgb(100,100,100);
	border-top-width: 3px;
	position: static;
}
div+div.headers+div {
	margin: 0 50px 10px;
	border: 1px solid rgb(100,100,100);
	border-width: 0 1px 3px;
}
div#qp_error {display: none;}
* {
	margin: 0;
	padding: 0;
}
object {
	width: 100%;
	height: -o-content-size;
	display: block;
}
@media screen, projection, tv {
	.attachments object {
		vertical-align: middle;	
		padding: 4px;
		width: auto;
		max-width: 98%;
		height: auto;
	}
	omf|mime {
		color: WindowText;
		background-color: transparent;
		display: block;
	}
	omf|headers {
		font: status-bar;
		color: ButtonText;
		background: ThreeDFace;
		padding: 4px;
		border: 1px outset ThreeDFace;
		width: 100%;
		table-layout: fixed;
	}
}
omf|headers {display: table;}
omf|hgrp {display: table-row-group;}
omf|hdr {display:none;}
omf|hdr[name="date"], omf|hdr[name="from"], omf|hdr[name="to"], omf|hdr[name="cc"], omf|hdr[name="bcc"], 
omf|hdr[name="newsgroups"], omf|hdr[name="followup-to"], omf|hdr[name="reply-to"], omf|hdr[name="subject"], 
omf|hdr[name="organization"], omf|hdr[name="resent-from"] {display:table-row;}
omf|n {
	font-weight: bold;
	vertical-align: top;
	padding-left: 4px;
	width: 8em;
	display: table-cell;
}
omf|n:after {content: ": ";}
omf|v {
	vertical-align: top;
	padding-left: 4px;
	display: table-cell;
}

omf|body, omf|div {
	margin: 0;
	display: block;
}
omf|div.plaintext {padding: 0 8px;}
omf|p {
	white-space: -o-pre-wrap;	
	padding: 0;
	margin: 0;
	display: block;
}
omf|l {
	padding: 0;	
	margin: 0;
	display: block;
}
omf|sig {
	font-style: italic;
	color: gray;
}
#flowed omf|ql {
	padding: 0 0 0.3em 0.4em;
	margin-left: -0.2em;
	border-left: 2px solid;
	display: block;
}
omf|ql.L0 {color: #000000;}
omf|ql.L1, omf|ql.L7, omf|ql.L13, omf|ql.L19, omf|ql.L25, omf|ql.L31 {color: #385FA3;}
omf|ql.L2, omf|ql.L8, omf|ql.L14, omf|ql.L20, omf|ql.L26 {color: #4FA729;}
omf|ql.L3, omf|ql.L9, omf|ql.L15, omf|ql.L21, omf|ql.L27 {color: #CC0000;}
omf|ql.L4, omf|ql.L10, omf|ql.L16, omf|ql.L22, omf|ql.L28 {color: #6D3420;}
omf|ql.L5, omf|ql.L11, omf|ql.L17, omf|ql.L23, omf|ql.L29 {color: #458183;}
omf|ql.L6, omf|ql.L12, omf|ql.L18, omf|ql.L24, omf|ql.L30 {color: #212326;}
#flowed omf|ql.L0 {border-left: none;}
#flowed omf|ql.L1, #flowed omf|ql.L7, #flowed omf|ql.L13, #flowed omf|ql.L19, #flowed omf|ql.L25, #flowed omf|ql.L31 {border-left-color: #385FA3;}
#flowed omf|ql.L2, #flowed omf|ql.L8, #flowed omf|ql.L14, #flowed omf|ql.L20, #flowed omf|ql.L26 {border-left-color: #4FA729;}
#flowed omf|ql.L3, #flowed omf|ql.L9, #flowed omf|ql.L15, #flowed omf|ql.L21, #flowed omf|ql.L27 {border-left-color: #CC0000;}
#flowed omf|ql.L4, #flowed omf|ql.L10, #flowed omf|ql.L16, #flowed omf|ql.L22, #flowed omf|ql.L28 {border-left-color: #6D3420;}
#flowed omf|ql.L5, #flowed omf|ql.L11, #flowed omf|ql.L17, #flowed omf|ql.L23, #flowed omf|ql.L29 {border-left-color: #458183;}
#flowed omf|ql.L6, #flowed omf|ql.L12, #flowed omf|ql.L18, #flowed omf|ql.L24, #flowed omf|ql.L31 {border-left-color: #212326;}
#flowed .flow {margin: -1em 0 1em 0;}
#flowed omf|l {display: inline;}
#wrapped .L1  omf|l:before {content: '> ';}
#wrapped .L2  omf|l:before {content: '>> ';}
#wrapped .L3  omf|l:before {content: '>>> ';}
#wrapped .L4  omf|l:before {content: '>>>> ';}
#wrapped .L5  omf|l:before {content: '>>>>> ';}
#wrapped .L6  omf|l:before {content: '>>>>>> ';}
#wrapped .L7  omf|l:before {content: '>>>>>>> ';}
#wrapped .L8  omf|l:before {content: '>>>>>>>> ';}
#wrapped .L9  omf|l:before {content: '>>>>>>>>> ';}
#wrapped .L10 omf|l:before {content: '>>>>>>>>>> ';}
#wrapped .L11 omf|l:before {content: '>>>>>>>>>>> ';}
#wrapped .L12 omf|l:before {content: '>>>>>>>>>>>> ';}
#wrapped .L13 omf|l:before {content: '>>>>>>>>>>>>> ';}
#wrapped .L14 omf|l:before {content: '>>>>>>>>>>>>>> ';}
#wrapped .L15 omf|l:before {content: '>>>>>>>>>>>>>>> ';}
#wrapped .L16 omf|l:before {content: '>>>>>>>>>>>>>>>> ';}
#wrapped .L17 omf|l:before {content: '>>>>>>>>>>>>>>>>> ';}
#wrapped .L18 omf|l:before {content: '>>>>>>>>>>>>>>>>>> ';}
#wrapped .L19 omf|l:before {content: '>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L20 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L21 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L22 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L23 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L24 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L25 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L26 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L27 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L28 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L29 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L30 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
#wrapped .L31 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
[class^="smiley"] {
	width: -o-skin;
	height: -o-skin;
}
.smiley-happy {background-image: -o-skin("Smiley Happy");}
.smiley-unhappy {background-image: -o-skin("Smiley Unhappy");}
.smiley-wink {background-image: -o-skin("Smiley Wink");}
.smiley-surprised {background-image: -o-skin("Smiley Surprised");}
.smiley-grin {background-image: -o-skin("Smiley Grin");}
.smiley-cool {background-image: -o-skin("Smiley Cool");}
.smiley-indifferent {background-image: -o-skin("Smiley Indifferent");}
.smiley-cry {background-image: -o-skin("Smiley Cry");}
.smiley-angry {background-image: -o-skin("Smiley Angry");}
.smiley-tongue {background-image: -o-skin("Smiley Tongue");}
.smiley-pacman {background-image: -o-skin("Smiley Pacman");}
.attachments a {
	font: status-bar; 
	text-decoration: underline;
	vertical-align: middle;
	color: blue;
	display: inline;
}
.attachments a.unknown::before {
	content: "";
	background-image: -o-skin('Attachment Documents');
	margin-right: 3px;
	width: 16px;
	height: 16px;
	display: inline-block;
}
@media print {
	div.headers {
		padding: 0 0 2mm;
		margin: 0 2mm 4mm;
		border-bottom: 1px solid black;
		position: static;
		display: block;
	}
	.L1  omf|l:before {content: '> ';}
	.L2  omf|l:before {content: '>> ';}
	.L3  omf|l:before {content: '>>> ';}
	.L4  omf|l:before {content: '>>>> ';}
	.L5  omf|l:before {content: '>>>>> ';}
	.L6  omf|l:before {content: '>>>>>> ';}
	.L7  omf|l:before {content: '>>>>>>> ';}
	.L8  omf|l:before {content: '>>>>>>>> ';}
	.L9  omf|l:before {content: '>>>>>>>>> ';}
	.L10 omf|l:before {content: '>>>>>>>>>> ';}
	.L11 omf|l:before {content: '>>>>>>>>>>> ';}
	.L12 omf|l:before {content: '>>>>>>>>>>>> ';}
	.L13 omf|l:before {content: '>>>>>>>>>>>>> ';}
	.L14 omf|l:before {content: '>>>>>>>>>>>>>> ';}
	.L15 omf|l:before {content: '>>>>>>>>>>>>>>> ';}
	.L16 omf|l:before {content: '>>>>>>>>>>>>>>>> ';}
	.L17 omf|l:before {content: '>>>>>>>>>>>>>>>>> ';}
	.L18 omf|l:before {content: '>>>>>>>>>>>>>>>>>> ';}
	.L19 omf|l:before {content: '>>>>>>>>>>>>>>>>>>> ';}
	.L20 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>> ';}
	.L21 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>> ';}
	.L22 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>> ';}
	.L23 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L24 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L25 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L26 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L27 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L28 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L29 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L30 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	.L31 omf|l:before {content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ';}
	omf|ql[class] {
		color: black !important;
		border: none !important;
	}
	[class^="smiley"] {
		background-image: none;
		width: auto;
		height: auto;
	}
	img[title] {content: attr(title);}
	.attachments a:before {
		content: "  " counter(attachment) ". ";
		counter-increment: attachment;
	}
	.attachments>a>img {display: none;}
}

maddogrts · December 14, 2007

хе хе

)) надеюсь вы так верстать не умеете

))

D.S.Denton · December 14, 2007

флудер)))

Sign In

Высший пилотаж CSS

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information