КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ Каскадные таблицы стилей (Cascading Style sheets - CSS) – это язык, определяющий набор свойств, которые описывают визуальное представление (внешний вид) документа HTML и его отдельных элементов Типы стилей: 1. Внутренние стили (inline styles) – задаются в непосредственно в элементах документа HTML (атрибут style) 2. Внешние стили (global style sheets) – задаются отдельно в начале документа HTML (тег STYLE) 3. Связанные стили (linked style sheets) – задаются в отдельном документе
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ <STYLE>. . . </ STYLE > - таблица глобальных стилей ЗАДАЕТ стили для элементов HTMLстраницы Размещается обычно в заголовке документа • TYPE =<Тип> (txt/css) • TITLE = <Заголовок> (Название списка стилей ) <тэг> { <атрибут>: <свойство> ; …. . ; <атрибут>: <свойство}
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ <HTML> <HEAD> <STYLE TYPE="text/css " > P { FONT-SIZE: 120%; TEXT-ALIGN: CENTER; BACKGROUND: YELLOW} </STYLE> </HEAD> <BODY> <P> Все параграфы будут иметь шрифт 120%, будут выровнены по центру и печататься на желтом фоне </P> </BODY> </HTML>
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ h 1 { color: #ff 0033; background: none; font-weight: bold; text-align: center } Element h 1
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ h 2 { color: #00008 b; background: none; font-weight: bold } Element h 2
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ h 3 { color: #006400; background: none; margin-left: 4%; margin-right: 4%; font-weight: bold } Element h 3
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ Element a
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ ul, ol, p { margin-left: 6%; margin-right: 6% } • Element ul • Element ol • Element p
ПСЕВДОКЛАССЫ Псевдокласс – это именованная группа элементов документа одного типа, для которых задается одинаковый набор свойств <тэг>. <имя класса> { <атрибут>: <свойство> ; …. . ; <атрибут>: <свойство}
Пример: <Html> <Head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <META NAME="Author" CONTENT=“Oleg Petrov"> <Title> atlasup </Title> <style> img. L{position: absolute; z-index: 1; top: 4; height: 23; width: 28} img. L 1{position: absolute; z-index: 1; top: 2; left: 10; height: 23; width: 28; left: 10; display: block} img. L 2{position: absolute; z-index: 1; top: 2; left: 40; height: 23; width: 28} img. L 3 {position: absolute; z-index: 1; top: 2; left: 60; height: 23; width: 28} </style>
Пример: <BODY BGcolor="#7 caf 9 d" > <IMG class=L 1 onclick=changebutton() alt=Увеличить engtitle=Zoom. Out src="images/atlasmen 8_plus_p. gif" width=28 border=0 name=btn_plus Tool > <a id='abtn_minus' target="maps"> <IMG class=L 2 onclick=changebutton() height=23 title="Уменьшить" engtitle="Zoom. In" rustitle="Уменьшить" src="images/atlasmen 8_minus. gif" width=28 border=0 name=btn_minus></a> <IMG class=L 3 onclick=changebutton() height=23 title="Легенда" rustitle="Легенда" engtitle="Legend" src="images/atlasmen 8_leg. gif" width=28 border=0 name=btn_leg> <span id='toolhelp' style="BORDER-RIGHT: solid 2 px white; BORDERTOP: solid 2 px white; BORDER-BOTTOM: solid 2 px white; BORDERLEFT: solid 2 px white; DISPLAY: block; FONT-SIZE: 13 px; COLOR: black; TEXT-DECORATION: blink; BACKGROUND: #fafad 2; POSITION: absolute; LEFT: 190 px; WIDTH: 200 px; TOP: 3 px; HEIGHT: 20 px " engtitle='Select a district!' rustitle='Выберите район на карте!'>Выберите район на карте!</span> </BODY>
ТАБЛИЦА ГЛОБАЛЬНЫХ СТИЛЕЙ a: link { color: #0000 ff; background: none; } a: visited { color: #800080; background: none; } a: active { color: green; background: #FFD 700 }
СВЯЗАННЫЕ СТИЛИ H 1 { font-family: Verdana, Arial, Helvetica, sans-serif; /* Default CSS Stylesheet for a new Web Application P { FONT-SIZE: 9 pt; font-size: 2 em; project */ FONT-FAMILY: verdana; font-weight: 700; font-style: normal; font-style: BODYtext-decoration: none; MARGIN-LEFT: 5 px; word-spacing: normal; { MARGIN-RIGHT: 5 px; letter-spacing: normal; BACKGROUND-COLOR: "#e 0 edfd"; margin-top: 5 px; none; text-transform: FONT-FAMILY: Verdana, Helvetica, sans-serif; margin-BOTTOM: 5 px; } FONT-SIZE: . 7 em; } { H 2 FONT-WEIGHT: normal; font-family: Verdana, Arial, Helvetica, sans-serif; H 1, H 2, H 3, H 4, H 5, THEAD, TFOOT font-size: 1. 75 em; LETTER-SPACING: normal; { font-weight: 700; TEXT-TRANSFORM: none; COLOR: #003366; font-style: normal; WORD-SPACING: normal } text-decoration: none; } word-spacing: normal; letter-spacing: normal; text-transform: none; }
СВЯЗАННЫЕ СТИЛИ <HEAD> <LINK REL=Style. Sheet HREF="basics. css" TITLE="Contemporary" TYPE="text/css"> </HEAD>
Скачать презентацию КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ Каскадные таблицы стилей Cascading Style
HTML5_STYLES.ppt