CSS, без сумніву, одна з найважливіших мов розмітки, які ми використовуємо. І хоча HTML описує структуру документа, її поведінка може бути непередбачуваною, в залежності від версії браузера. CSS - це той інструмент, який дозволить нам виправити всі невідповідності у відображенні сторінки, а також оформити її зовнішній вигляд.
Цей приклад спрямований на поліпшення користувальницького інтерфейсу. Найчастіше в інтернеті, ми переходимо по посиланнях, абсолютно не знаючи куди вони ведуть. Наступний фрагмент коду використовується для відображення невеликих іконок поруч з посиланнями. Такі картинки будуть підказувати користувачу, що це зовнішнє посилання, електронна адреса, pdf-файл, картинка і т.д.
/* зовнішнє посилання */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* електронна пошта */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
Прозорість - це властивість, яке різним браузерам, призначається по-різному. За допомогою наступного фрагмента коду, ви зможете призначити прозорість всім браузерам відразу.
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}