Что нового

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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
В этой теме будем обсуждать вопросы касающиеся веб-технологий (желательно в заимодействий с AutoIt-кодингом) и всего что связанно с данной темой (html, css, js, php).
По мере появления вопросов буду сюда писать, если и у вас есть подобные вопросы, пишите, будем верстать как сможем :read_this:.

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

:beer:
 

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

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

Например, имеем такой код:
XML:
<font style="color:#FF0000;"><a href="http://autoit-script.ru" style="font-weight: bold; color:blue;">Click Me!</a></font>
тут в первую очередь отображается стиль заданный в элементе <a>, а мне нужно чтобы стиль брался из <font>, который снаружи. Т.е нужно проигнорировать стиль тега <a> и/или поставить приоритет на тег <font>.

Знаю что можно поменять теги местами, но мне нужно узнать как это сделать не меня их местами.


Добавлено:
Сообщение автоматически объединено:

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

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

El Panda

Продвинутый
Сообщения
101
Репутация
59
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

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

Можно, в файл, между тегами <head></head> поставить стиль :
Код:
<style>
	a{color:#FF0000 !important;}
</style>
 
Автор
CreatoR

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
Re: Обсуждение веб-кодинга и всего что с этим связанно

El Panda [?]
Селектор по классу всегда приорететнее селектор по тэгу
Я это уже заметил, спасибо :smile: - Но как мне решить мою проблему, желательно на примере.

Garrett [?]
<font></font> Это устаревший тег
Это всего лишь пример, не в этом же проблема (я в реальности использую span).

Можно, в файл, между тегами <head></head> поставить стиль :
Но это глобально ко всему коду, а мне нужно для конкретных случаев.



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

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
Re: Обсуждение веб-кодинга и всего что с этим связанно

Garrett
Garrett сказал(а):
Оно не работает на тегах которые расположенны снаружи?

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

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

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

#AutoIt3Wrapper_Au3Check_Parameters = yes

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

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]
чтобы цвет и шрифт для всего что находится между наружными тегами span заменяли остальные классы.
!important - он переопределяет стиль автора на стиль пользователя, для указанного tedclass`а или 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]


Добавлено:
Сообщение автоматически объединено:

[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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

Код:
<span class="S1">#AutoIt3Wrapper_Au3Check_Parameters<span class="S2"> = yes</span></span>


<span id="S2">yes</span>
последний span должен подсвечивать красным.
 

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

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


Добавлено:
Сообщение автоматически объединено:

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

Код:
<span class="S1">#AutoIt3Wrapper_Au3Check_Parameters<span class="S2"> = yes</span></span>


<span id="S2">yes</span>
последний span должен подсвечивать красным.
[box title=Попробуйте так:]
/* определяем стиль для id="S1" и тегу <span> внутри селектора 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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
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

Мой Аватар, он лучший самый
Команда форума
Глобальный модератор
Сообщения
4 020
Репутация
622
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
Re: Обсуждение веб-кодинга и всего что с этим связанно

CreatoR [?]
P.SКстати для css-кода можно подсвечивать так:
|code=css||/code|
Да я в курсе. Спасибо! Но больно неказисто выходит :( Вот если бы настроить?!
 

Redline

AutoIT Гуру
Сообщения
506
Репутация
369
Re: Обсуждение веб-кодинга и всего что с этим связанно

Рад появлению темы :D.
[js] Есть ссылка такого вида:
Код:
<a href="telnet://10.10.10.10">
возможно ли сделать так, что при клике по этой ссылке с зажатым Ctrl (можно любое другое сочетание) протокол менялся с telnet на http?

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

Garrett

Модератор
Локальный модератор
Сообщения
3 999
Репутация
964
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

CreatoR

Must AutoIt!
Команда форума
Администратор
Сообщения
8 470
Репутация
2 401
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

AutoIT Гуру
Сообщения
506
Репутация
369
Re: Обсуждение веб-кодинга и всего что с этим связанно

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

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