Hallo Freunde,
ich arbeite in Moment mit CSS und habe da eine Frage:
Ist es möglich das aus einem Text bestimmte Wörter automatisch durch eine style.css Datei angepasst werden können?
Beisppiel Text:
Fischers Fritze, fischt frische Fische. Frische Fische, fischt Fischers Fritze.
Ich möchte, dass die CSS Datei automatisch erkennt: "Aha, da steht Fritze und Fritze muss ich rot und dick machen". Also Quasi das diese CSS Datei dann "Fritze" automatisch rot macht und auch dick. Weis jemand wie das geht?
Also mit Div wäre das doof, da würde es ja Probleme geben wie z.B:
|
Quellcode
|
1
2
3
4
5
|
<div class="newsitem">
<div class="title">BeispielText</div>
<div class="body"> <img src="img/somepicture.gif" width="120" height="120" class="left" alt=""/>Fischers Fritze, fischt frische Fische. Frische Fische, fischt Fischers Fritze.</div>
<div class="clearer"><span></span></div>
</div>
|
Also eigentlich habe ich davon keine Ahnung, darum die Frage an euch ob das geht!?
DIE CSS Datei wäre folgende:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
/* Standard element */
* {
margin: 0;
padding: 0;
}
body {
background: #999 url(img/bg.gif) repeat-y;
font-family: Tahoma,sans-serif;
font-size: 0.8em;
padding-left: 25px;
}
p {
margin-bottom: 1.2em;
}
ul {
margin: 0 0 10px 22px;
}
li {
list-style-image: url(img/li.gif);
}
/* misc */
.clearer {
clear: both;
}
div.quote {
border-left: 4px solid #36C;
clear: both;
color: #555;
display: block;
font: italic 1.1em Verdana,serif;
margin: 12px 0 12px 16px;
padding-left: 12px;
}
/* top & header */
.top {
background: url(img/top.gif);
color: #FFF;
height: 45px;
width: 939px;
}
.top h1 {
font: bold 2em sans-serif;
padding: 8px 16px 0;
}
.top h1 span {
font: normal 60% Verdana,sans-serif;
}
.header {
background: url(img/header.gif);
height: 101px;
width: 939px;
}
#thumbgallery {
clear:both;
padding:0 0 0 9px;
margin: 0 0 2px 0;
background:inherit;
}
.thumbs img{
position:relative;
padding:0;
margin:10px 2px 2px 2px;
border:2px solid #d3d3d3;
background:inherit;
}
.thumbs img:hover{
border:2px solid #5d7ca1;
}
/* menu */
div.menu ul {
float: left;
margin: 0 1px 0 0;
}
div.menu li {
list-style-image: none;
}
div.menu a {
background: #4B4B4B;
color: #DDD;
display: block;
font-family: sans-serif;
font-size: 85%;
padding: 5px 0 5px 8px;
text-decoration: none;
width: 180px;
}
div.menu a#current {
background: #666; color: #FFF;
}
div.menu a:hover {
background: #555; color: #FFF;
}
div.menu li {
list-style-type: none;
margin: 0 0 1px 0;
padding: 0;
}
/* left side */
div.content_left {
margin: 1px;
width: 593px;
}
div.date {
background: #0070CD url(img/bgdate.gif) repeat-x;
color: #FFF;
font-weight: bold;
padding: 10px;
}
div.newsitem {
background: #F0F0F0 url(img/bg_newsitem.png) repeat-x;
border: 1px solid #EEE;
border-color: #EEE #EEE #DDD #EEE;
clear: both;
color: #333;
line-height: 1.5;
margin: 6px;
padding: 10px;
}
div.newsitem img {
border: 3px double #CCC;
height: 120px;
margin: 6px 10px 10px 10px;
width: 120px;
}
div.newsitem img.left {
float: left;
}
div.newsitem img.right {
float: right;
}
div.newsitem .title {
color: #0066CC;
font: bold 1.2em Tahoma,sans-serif;
padding: 3px 4px;
}
div.newsitem .body {
font-family: "Trebuchet MS",Tahoma,sans-serif;
font-size: 0.9em;
text-align: justify;
color: #000099;
}
/* right side */
div.content_right {
width: 331px;
position: absolute;
top: 116px;
left: 620px;
}
div.links a {
background: url(img/bg_navitem.gif) repeat-x #FFF;
border-bottom: 1px solid #EEE;
display: block;
font: bold 0.8em Verdana,Tahoma,sans-serif;
padding: 6px 0 8px 8px;
text-decoration: none; color: #333;
}
div.links a:hover {
color: #0080DD; background-position: left bottom;
}
div.links div.line {
height: 1px; background-color: #EEEEF5;
}
div.links .title {
background: #333 url(img/bgsubtitle.gif) repeat-x;
color: #FFF;
font: normal 85% Tahoma,sans-serif;
padding: 5px 8px;
}
/* footer */
div.footer {
background: #F0F0F0 url(img/bgdate.gif) repeat-x;
border: 1px solid #EEE;
color: #FFF;
margin-left: 6px;
width: 581px;
}
div.footer .copyright {
padding: 6px 12px;
}
div.footer a {
color: #FFF;
font: bold 1em "Trebuchet MS",sans-serif;
text-decoration: none;
}
|
Danke im Voraus!