Обсуждение Web-кодинга и всего что с этим связанно

CreatoR · 5 Апр 2010

В этой теме будем обсуждать вопросы касающиеся веб-технологий (желательно в заимодействий с AutoIt-кодингом) и всего что связанно с данной темой (html, css, js, php).
По мере появления вопросов буду сюда писать, если и у вас есть подобные вопросы, пишите, будем верстать как сможем :read_this:.

P.S
Если обсуждение будет активное, возможно отведём для этого новый раздел.

:beer:

Garrett · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Ну вот! Как говорил ослик Иа: "Мой любимый цвет…" :laugh:
html, css, js, php - близкая мне тема! ;D
:beer:

CreatoR · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Вопрос первый (по html+стили):

Возможно ли указать приоритет тегам, чтобы теги с определёнными стилями (точнее классами) имели приоритет отображения?

Например, имеем такой код:

XML:

<font style="color:#FF0000;"><a href="http://autoit-script.ru" style="font-weight: bold; color:blue;">Click Me!</a></font>

тут в первую очередь отображается стиль заданный в элементе <a>, а мне нужно чтобы стиль брался из , который снаружи. Т.е нужно проигнорировать стиль тега <a> и/или поставить приоритет на тег .

Знаю что можно поменять теги местами, но мне нужно узнать как это сделать не меня их местами.
Добавлено:
Сообщение автоматически объединено: 5 Апр 2010

Вопрос второй (по html+стили):

В IE (7), почему то при копирований текста который обрамлён тегом , добавляется пробел на конце каждой строки.
Как обойти данную проблему?

El Panda · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]

Вопрос первый (по html+стили):

Селектор по классу всегда приорететнее селектор по тэгу.
Еще больший приоритет у селектора по идентификатору.
Если существуют два одинаковых селектора, то приоритет будет иметь последний.

Специфичность вложенных селекторов требует некоторых расчетов. Все id селекторы (#something) приравниваются к 100, селекторы класса (.something) равны 10, а каждый HTML элемент равен 1.
p — имеет специфичность равную 1 (один HTML элемент);
div p — имеет специфичность равную 2 (два HTML элемента);
.tree — имеет специфичность равную 10 (один селектор класса);
div p.tree — имеет специфичность равную 12 (два HTML элемента и один селектор класса);
#baobab — имеет специфичность равную 100 (один id селектор);
body #content .alternative p — имеет специфичность равную 112 (два HTML элемента, один id селектор и один селектор класса).

Наибольший приоритет имеют инлайновые стили (атрибут style) и приравниваются к 1000.

Garrett · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

1. Это устаревший тег, его не рекомендуется использовать, хотя все браузеры его понимают.
2. Этот тег распространяется только на текст, заключённый в него, но не распространяется на теги, коим является тег <а>

Можно, в файл, между тегами <head></head> поставить стиль :

Код:

<style>
	a{color:#FF0000 !important;}
</style>

CreatoR · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

El Panda [?]

Селектор по классу всегда приорететнее селектор по тэгу

Я это уже заметил, спасибо :smile:

- Но как мне решить мою проблему, желательно на примере.

Garrett [?]

Это устаревший тег

Это всего лишь пример, не в этом же проблема (я в реальности использую span).

Можно, в файл, между тегами <head></head> поставить стиль :

Но это глобально ко всему коду, а мне нужно для конкретных случаев.

Ещё вопрос: Возможно ли задать длину табов в определённом элементе, например в pre?

Garrett · 5 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]

Но это глобально ко всему коду, а мне нужно для конкретных случаев.

Если документ формируется вами, на стадии наполнения, то лучше сразу позаботится о CSS и определить селекторы. Если же вы хотите сделать изменения в готовом документе, то лучше его прогнать через скрипт на Autoit`е, используя IE.au3, и заменить нужные вам стили.

Можно ещё такой вариант, отдельно для каждой ссылки:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<title>Title</title>
<style>
	#link_2{color:green !important;}
	#link_3{color:gray !important;}
</style>
	</head>
<body>
<pre>
 <span style="color:#FF0000;">Link [Blue]  - <a id="link_1" href="http://autoit-script.ru" style="font-weight: bold; color:blue;">Click Me!</a></span>
 <span style="color:#FF0000;">Link [Green] - <a id="link_2" href="http://autoit-script.ru" style="font-weight: bold; color:blue;">Click Me!</a></span>
 <span style="color:#FF0000;">Link [Gray]  - <a id="link_3" href="http://autoit-script.ru" style="font-weight: bold; color:blue;">Click Me!</a></span>
</pre>
</body>
</html>

CreatoR · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Garrett

Garrett сказал(а):
!important;

Оно не работает на тегах которые расположенны снаружи?

XML:

<head>
<style type="text/css">
.S1
{
	font-style: italic !important;
	color: #A00FF0 !important;
}

#S1
{
	font-style: italic;
	color: #A00FF0 !important;
}

.S2
{
	font-weight: bold;
	color: #FF0000;
}
</style></head>

<span id="S1">#AutoIt3Wrapper_Au3Check_Parameters<span class="S2"> = yes</span></span>

класс "S1" должен иметь наивысшый приоритет, чтобы цвет и шрифт для всего что находится между наружными тегами span заменяли остальные классы.

Garrett · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Вот что у меня показывает:
---
#AutoIt3Wrapper_Au3Check_Parameters = yes
---
это так и должно быть! Здесь всё правильно работает!
Какая цель стоит у вас?

CreatoR · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Garrett [?]

Какая цель стоит у вас?

“класс "S1" должен иметь наивысшый приоритет, чтобы цвет и шрифт для всего что находится между наружными тегами span заменяли остальные классы”.

Т.е должно выглядеть так:

#AutoIt3Wrapper_Au3Check_Parameters = yes

расстановка тегов должна оставаться текущей.

Garrett · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]

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

!important - он переопределяет стиль автора на стиль пользователя, для указанного ted`а class`а или id!

[box title=!important]
.S1{
font-style: italic !important;
color: #A00FF0 !important;
}
#S1, .S2{ - переопределяем стиль .S2
font-style: italic;
color: #A00FF0 !important;
}
.S2{
font-weight: bold; - остаётся прежнем
color: #FF0000;
}
Было у вас:
#AutoIt3Wrapper_Au3Check_Parameters = yes
Стало:
#AutoIt3Wrapper_Au3Check_Parameters = yes
[/box]
Добавлено:
Сообщение автоматически объединено: 10 Апр 2010

[box title=!important]
/* определяем глобальный стиль для всех SPAN */
span{
font-style: italic;
color: #000;
}
/* определяем стиль для id="S1" */
#S1{
color: #A00FF0;
}
/* определяем стиль для class="S2" */
.S2{
font-weight: bold;
color: #FF0000;
}
/* переопределяем стиль для class="S2" */
.S2{
font-weight: normal !important;
color: #A00FF0 !important;
}
[/box]

CreatoR · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Так не годится :(, мне стиль изменить нужно только для этой конкретной строчки, дальге если нет внешнего стиля S1 то должно быть красным:

Код:

<span class="S1">#AutoIt3Wrapper_Au3Check_Parameters<span class="S2"> = yes</span></span>


<span id="S2">yes</span>

последний span должен подсвечивать красным.

Garrett · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Так у вас же два разных селектора id="S2" и class="S2"! Задайте им разный стиль. Или не задавайте стиль для class="S2" и тогда он примет стиль class="S1"
P.S. Можно весь HTML приатачить?
Добавлено:
Сообщение автоматически объединено: 10 Апр 2010

CreatoR сказал(а):
Так не годится :(, мне стиль изменить нужно только для этой конкретной строчки, дальге если нет внешнего стиля S1 то должно быть красным:

Код:

#AutoIt3Wrapper_Au3Check_Parameters = yes yes

последний span должен подсвечивать красным.

[box title=Попробуйте так:]
/* определяем стиль для id="S1" и тегу внутри селектора id="S1" */
.S1, .S1 span {
font-style: italic;
font-weight:normal;
color: #A00FF0;
}
/* определяем стиль для class="S2" */
.S2 {
font-weight: bold;
color: #FF0000;
}
/* определяем стиль для id="S2" */
#S2 {
font-weight: bold;
color: #FF0000;
}
[/box]

CreatoR · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Garrett [?]

Попробуйте так

Супер, то что и требовалось:

XML:

<head>
<style type="text/css">

/* определяем стиль для class="S1" и тегу <span> внутри селектора class="S1" */
.S1, .S1 span {
    font-style: italic;
    font-weight:normal;   
    color: #A00FF0;
}

.S2 {
    font-weight: bold;
    color: #FF0000;
}

</style></head>

<span class="S1">#AutoIt3Wrapper_Au3Check_Parameters<span class="S2"> = yes</span></span>


<span class="S2">yes</span>

P.S
Кстати для css-кода можно подсвечивать так:

[code=css][/code]

Вот:

CSS:

/* определяем стиль для class="S1" и тегу <span> внутри селектора class="S1" */
.S1, .S1 span {
    font-style: italic;
    font-weight:normal;   
    color: #A00FF0;
}

.S2 {
    font-weight: bold;
    color: #FF0000;
}

kaster · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

OffTopic:
почему-то блоки кодов в фаерфоксе выглядят не так, как в том же самом IE :(

Garrett · 10 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]

P.SКстати для css-кода можно подсвечивать так:
|code=css||/code|

Да я в курсе. Спасибо! Но больно неказисто выходит :( Вот если бы настроить?!

Redline · 12 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Рад появлению темы :D.
[js] Есть ссылка такого вида:

Код:

<a href="telnet://10.10.10.10">

возможно ли сделать так, что при клике по этой ссылке с зажатым Ctrl (можно любое другое сочетание) протокол менялся с telnet на http?

PS: ip-адресов слишком много, поэтому нет возможности сделать таблицу соответствия ip-адрес/протокол.

Garrett · 12 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Redline
А без Hotkey не пойдёт?

HTML код тестовой страницы:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<title>Replacement protocol links</title>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td><a href="telnet://10.10.10.10">Click 1</a></td>
				<td>discription</td>
				<td>size</td>
				<td>img</td>
			</tr>
			<tr>
				<td>2</td>
				<td><a href="telnet://10.10.10.11">Click 2</a></td>
				<td>discription</td>
				<td>size</td>
				<td>img</td>
		</table>
	</body>
</html>

Код подмены ссылок при загрузке страницы:

Код:

#include <IE.au3>
$oIE = _IECreate(@ScriptDir & "\change_a.html")
$oLinks = _IELinkGetCollection ($oIE)
$iNumLinks = @extended
;~ MsgBox(0, "Replacement protocol links", "Найдено ссылок: " & $iNumLinks)
For $oLink In $oLinks
	$oLink.href = StringReplace($oLink.href, "telnet", "http")
Next

CreatoR · 12 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Redline [?]

возможно ли сделать так, что при клике по этой ссылке с зажатым Ctrl (можно любое другое сочетание) протокол менялся с telnet на http?

Вот так примерно:

XML:

<script language="javascript">
	document.onkeydown = checkKeycode
	
	var Keycode;
	
	function checkKeycode(e) {
		if (window.event)
			{Keycode = window.event.keyCode}
		else if (e)
			{Keycode = e.which};
		}
	
	function changeURL(oURL) {
		var sURL = oURL.href;
		if(Keycode == 17) {oURL.href = sURL.replace(/telnet/i, "http")};
	}
</script>

<a href="telnet://10.10.10.10" onClick="changeURL(this);">Click</a>

17 это Ctrl, полный список есть тут.

Redline · 14 Апр 2010

Re: Обсуждение веб-кодинга и всего что с этим связанно

Garrett мне нужно что бы по одной ссылке была возможность уйти на telnet и http :smile:

, прошу прощения если неправильно растолковал суть задачи.

Creatorу спасибо - именно то что было нужно :laugh:

Автор темы	Похожие темы	Форум	Ответы	Дата
M	Обсуждение безопасности Autoit'а в целом	Общие вопросы по AutoIt	2	27 Дек 2023
	Что происходит с проектом и как это решить (обсуждение)	Общение	7	31 Июл 2019
	Обсуждение AutoIt 3.3.14.2/3/4/5 - Финал	Общие вопросы по AutoIt	13	27 Мар 2019
A	Обсуждение тем оформления	О проекте и форуме	46	30 Апр 2014
	Обфускация кода - Обсуждение проблем	Общение	7	24 Сен 2012

Обсуждение Web-кодинга и всего что с этим связанно

Must AutoIt!

Модератор

Must AutoIt!

Продвинутый

Модератор

Must AutoIt!

Модератор

Must AutoIt!

Модератор

Must AutoIt!

Модератор

Must AutoIt!

Модератор

Must AutoIt!

Мой Аватар, он лучший самый

Модератор

AutoIT Гуру

Модератор

Must AutoIt!

AutoIT Гуру