CSS
(Endurbeint frá Cascading Style Sheets)
| CSS (Cascading Style Sheets) | |
|---|---|
 Dæmi um CSS skjal. | |
| Skráarending: | .css |
| MIME-gerð: | text/css |
| Hönnun: | W3C |
| Tegund forsniðs: | Stílmál |
| Staðall: | W3C 1,0 (Tilmæli) W3C 2,0 (Tilmæli) W3C 2,1 (Í vinnslu) |
CSS (af Cascading Style Sheets; oft hreinlega kallað stílsnið) er mál sem notað er til að skilgreina útlit skjala, oftast vefsíðna. CSS segir vafranum hvar kassar eigi að vera og hvernig texti eigi að líta út, sá texti er settur fram í HTML.
Munur á gömlu HTML og XHTML/HTML og CSS
[breyta | breyta frumkóða]Í eldri útgáfum HTML var hægt að skilgreina rauðan texta svona:
<p color="red">Rauður Texti</p>
Í útgáfu 4.01 t.d. og öllum útgáfum XHTML þykir eðlilegra að skilgreina útlit textans í sérstakri CSS-skrá með eftirfarandi hætti:
p { color: red; }
Og stiklutextinn sjálfur lítur einfaldlega svona út:
<p>Rauður Texti</p>
Til að tengja skjölin tvö saman þarf að vísa í CSS skjalið innan <head> hluta (X)HTML skjalsins.
<link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css" />
Einnig er hægt að hafa stílreglurnar í <head> hluta HTML skjals, innan í <style> marki.
{
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Mobile-friendly input handler for Enter key
document.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
e.preventDefault();
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Search button click handler
document.addEventListener('click', e => {
const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]');
if (searchButton) {
e.preventDefault();
const searchForm = searchButton.closest('form');
if (searchForm) {
const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
}
});
});