Любомир Милев блог дизайн

Разделено съдържание представено от CSS (Cascading Style Sheets)

Този пост е опит да се насърчи правилното CSS използване за отделяне на формата и съдържанието, като хвърля светлина върху това какви са точните предимствата на отделяне на съдържанието , които предлага на дизайнери, разработчици и посетителите на един уеб сайт.

Разделено съдържание представено от CSS (Cascading Style Sheets)

Въпреки огромни ползи за потребителите, дизайнерите и разработчиците, заедно с храбри усилия на организации като The World Wide Web Consortium, The Web Standards Project и CSS Zen Garden няма съмнение (непрекъснато се потвърждава от на наскоро създадени уебсайтове) някои уеб дизайнери и разработчици показват как преминаването към CSS става все по-невероятно..

Този пост е опит да се насърчи правилното CSS използване за отделяне на стил и съдържание, като хвърля светлина върху това какво точно отделяне на стил и съдържание в условията на CSS и предимствата, които предлага на дизайнери, разработчици, и посетители..

Различаване на представянето и съдържанието

Най-често срещаният термин за проектиране / разработване концепция е "разделяне на формата и съдържанието му", но каква точно е разликата между представяне от съдържание?

Съдържание се отнася до информацията, както и неговата структура. Докато структура може да изглежда като едното и другото, то представянето се обезсмисля без структура и по този начин структурни елементи, като например div, име, клас или идентификатор трябва да принадлежи на съдържанието.

Представянето се отнася за всичко, свързано с начина на представяне на"съдържанието" (или структура). Размер, цвят, полетата, граници - всичко, което се отнася до начина, по който се появява съдържанието а не това, което всъщност се състои в самата презентация.

Какво е CSS

CSS е начин за уеб дизайнерите и разработчиците, за да добавят STYLE (цветове, шрифтове, граници, маржовете и т.н.) към уеб страниците.Най-важното обаче е, че CSS е начин за дизайнерите / програмистите да запази стила информация отделно от действителното съдържание на сайта. CSS е идеален за потребителски уеб дизайн проекти.

Добре известно е, че CSS отдавна е препоръчителният начин да добавите стил към уеб страници. Но философията на разделяне на съдържанието и стила са истинската сила на CSS и често остава неразбрана и по този начин много хора не се е възползват от..него

Има няколко начина на оформяне на документ с помощта CSS, всички с различни нива на отделяне от съдържанието, като стайлинг. Включил съм няколко примера, които демонстрират това, което се опитвам да постигна:

Примери за различни степени на разделение между презентация CSS и съдържание

В дните преди да бъде използван CSS стил, чрез прилагане на HTML тагове и коригиране на стойностите по подразбиране Properties '. Не само, че нямаше разделение, но в следващият момент беше отхвърлен като невалиден HTML.

<body bgcolor="#000000">
    <div border="1" bordercolor="red">
        <p><font face="verdana" color="red">some red text in verdana</font></p>
    </div>
</body>


Използване на CSS стил на HTML код можем също по много подобен начин, с помощта на валидна "стил" опция. Въпреки, че това очевидно е по-добре, отколкото отхвърлени HTML атрибути, стилът все още е еднакво вкоренен в съдържанието.

<body style="background-color:#000000">
    <div style="border:1px red">
        <p style="font-family:verdana; color:red">some red text in verdana</p>
    </div>
</body>


С използване на CSS можем да разделяме напълно информация от съдържание. Силата на отделяне на представянето от съдържанието започва да става ясно с всеки "DIV" елемент "P" например ще придобие информация за стила от CSS в заглавната си част.

<head>
    <style type="text/css">
        body { background-color:#000000; }
        div { border:1px red; }
        p { font-family:verdana; color:red; }
    </style>
</head>
<body>
    <div>
        <p>some red text in the font verdana</p>
    </div>
</body>


Накрая, чрез свързване към външен стил CSS лист, можем да видим как множество документи, съдържащи само съдържание можгат да бъдат оформени с един единствен, отделен лист стил. (Стилът "styles.css" съдържа информация за стила в заглавната част на примера по-горе)

<head>
    <link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
    <div>
        <p>some red text in the font verdana</p>
    </div>
</body>

Предимства на стила, отделен от съдържанието

Като презентационна информация, отделно от съдържанието на дадена уеб страница или уеб сайт предлага много преки ползи, включително:

Добавяне на единнен, външен стил, използвайки клиент и / или скриптове от страна на сървъра, лесно да редуваме различни стилове CSS в зависимост от много фактори, включително:

...and many more.

публикуван Май. 30, 2013 at 6:48 pm във: изработване на уеб сайт, css

Comments

Richard, Jan. 28, 2012 at 1:08 pm
Thanks for a very nice concise explanation. My web-site's a complete disaster, this is going to take some work...
Напиши коментар!