Тема: Обсуждение Web-кодинга и всего что с этим связанно (Прочитано 6145 раз)

CreatoR · « **Создано:** Апрель 05, 2010, 17:25:09 »

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

.

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

Garrett

Ну вот! Как говорил ослик Иа: "Мой любимый цвет…"

html, css, js, php - близкая мне тема!

CreatoR

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

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

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

Код: (xml) [Выделить]

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

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

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

Добавлено: Апрель 05, 2010, 20:12:12

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

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

El Panda

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

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

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

Код: [Выделить]

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

CreatoR

El Panda [?]

Цитата

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

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

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

Garrett [?]

Цитата

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

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

Цитата

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

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

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

Garrett

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

Garrett

Цитата: Garrett от Апрель 05, 2010, 22:30:40

!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

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

CreatoR

Garrett [?]

Цитата

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

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

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

#AutoIt3Wrapper_Au3Check_Parameters = yes

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

Garrett

CreatoR [?]

Цитата

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

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

!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

Добавлено: Апрель 10, 2010, 19:00:54

!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;
}

CreatoR

Так не годится

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

Код: [Выделить]

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

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

Garrett

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

Добавлено: Апрель 10, 2010, 20:08:52

Цитата: CreatoR от Апрель 10, 2010, 19:19:32

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

Код: [Выделить]
#AutoIt3Wrapper_Au3Check_Parameters = yes yesпоследний span должен подсвечивать красным.

Попробуйте так:/* определяем стиль для 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;
}

CreatoR

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>
<br>
<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

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

Русское сообщество AutoIt

Новости:

Автор Тема: Обсуждение Web-кодинга и всего что с этим связанно (Прочитано 6145 раз)

CreatoR [?]

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

Garrett [?]

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

CreatoR [?]

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

El Panda [?]

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

Garrett [?]

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

CreatoR [?]

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

Garrett [?]

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

CreatoR [?]

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

Garrett [?]

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

CreatoR [?]

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

Garrett [?]

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

CreatoR [?]

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

Garrett [?]

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

CreatoR [?]

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

Kaster [?]

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