CSS обзорная экскурсия

Форум » » CSS обзорная экскурсия » Ответить

CSS обзорная экскурсия

Esty: Учебник по CSS Cascading Style Sheets(CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. Особо важно правильно использовать синтакисис в CSS, вот о нёи и поговорим вначале нашей экскурсии! Существуют три способа применения стилей в документе HTML. 1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта. [pre] <p style="color: red"> текст красного цвета </p> [/pre] 2. Embed, обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля. [pre] <html> <head> <style> <! -- p{color: red} --> </style> </head> <body> <p>текст красного цвета</p> </body> </html>[/pre] 3. Link стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах. [pre] <html> <head> <link rel="stylesheet" href="style.css" type="text/css" > </head> <body> <p>текст красного цвета</p> </body> </html>[/pre] style.css должен содержать: p{color: red} Селекторы Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY: body { color: blue} Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми: h1, p, h2{font-size: 12px} Вместо селекторов можно использовать маску * . В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам: * { font-size: 14pt} Другим символом маски является знак > . Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL: [pre] ol > li {list-style-type: decimal} [/pre] Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue": [pre] h2.mybule {background-color: bule}[/pre] [pre] <h2 class="mybule">у этого заголовка синий фон</h2> [/pre] Селекторы также можно определять с помощью атрибута id, используя для этого символ # . В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie" [pre] #ducie {border-color: yellow}[/pre] Селектор A[att] соответствует любому элементу А, у которого задан определенный атрибут, не зависимо от его значения (не работает в IE). [pre] table[border]{ border:1px solid red;} [/pre] Селектор A[att=”val”] соответствует любому элементу А, определенный атрибут которого имеет заданное значение (не работает в IE). [pre] input[type=”submit”] {background-color :red;} [/pre] Селектор А[lang|=”val”] соответствует любому элементу А, который имеет заданное значение в качестве одного из значений атрибута lang (не работает в IE). [pre] P[lang|=”en”]{text-align:left;}[/pre] Псевдоклассы. Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс :first-letter, в котором устанавливаете различные стили: [pre] p:first-letter { float: right; font-size: 2em; color: red;} [/pre] В CSS2 (гарантий адекватного отображения всеми браузерами нет! )определяются следующие псевдоклассы: :first-child -первый дочерний элемент другого элемента; :link - еще не посещенные ссылки; :visited - посещенные ссылки; :hover - элемент, над которым в настоящее время находится курсор; :active - активный в данный момент элемент ; :focus - элемент, имеющий фокус ввода; :lang - этот псевдокласс определяет текущий язык; :first-line - первая формированая строка абзаца; :first-letter - первая буква абзаца; :before - определяет содержимое перед элементом; :after - определяет содержимое после элемента.

Ответов - 8

Esty: начнём с начала, т.е с <STYLE type=text/css></STYLE> тэги стиля ставятся после<TITLE></TITLE> и перед закрытиам тега</HEAD> для начала опишем тело документа и полосу прокрутки: body { тут должны быть параметры body, т.е цвет, фон, отступы, шрифт и описание полосы покрутки} Свойства полоса прокрутки (Их можно применять к таких элементов как: BODY, TEXTAREA, IFRAME и другим, которые имеют полосу прокрутки (корме SELECT).) scrollbar-3dlight-color Устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки. scrollbar-arrow-color Устанавливает цвет стрелок на кнопке со стрелками. scrollbar-base-color Устанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color. scrollbar-darkshadow-color Устанавливает цвет тени для ползунка и кнопок со стрелками. scrollbar-face-color Устанавливает цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки. scrollbar-highlight-color Устанавливает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол. scrollbar-shadow-color Схоже с scrollbar-darkshadow-color. scrollbar-track-color Устанавливает цвет дорожки для ползунка. Значения: любые соответствующее стандарту значение цветов

Esty: body { тут должны быть параметры body, т.е цвет, фон, отступы, шрифт и описание полосы покрутки} полосу прокрутки мы описали, теперь распишем остальные параметры body color Определяет цвет текста. background-color Определяет цвет фона. background-image Определяет фоновое изображение элемента. [pre]background-image: url(картинка.тип файла)[/pre] background-repeat Определяет направление, по которому экран будет заполняться копиями фонового изображения. Значение: repeat - фоновое изображение повторяется по горизонтали и по ветикали (по умалчанию). repeat-x - фоновое изображение повторяется только по горизонтали. repeat-y - фоновое изображение повторяется только по вертикали. no-repeat - фоновое изображение не повторяется. background-attachment Определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом. Значение: scroll - фоновое изображение прокручивается вместе с документом (по умолчанию) fixed - фоновое изображение фиксируется в окне браузера. background-position Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов. Значение: Первое стандартное значение длины - расстояние по горизонтали от левого края элемента до изображения. Допускаются и отрицательные значения. Второе, соответствующее стандарту значение длины - расстояние по вертикали от левого края элемента до изображения. Допускаются и отрицательные значения. Первое, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображение от левого края по горизонтали к длине содержащего его элемента. Значение по умолчанию 0%, что равносильно верхнему левому углу. Второе, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображения от левого края по вертикали к высоте содержащего его элемента. top - размещение фонового изображение по верхнему краю center - размещение фонового изображение по центру содержащего его элемента. bottom - размещение фонового изображения по нижнему краю. left - размещение фонового изображение по левому краю. right - размещение фонового изображение по правому краю. можно объединять все свойства фона background Если какие либо параметры будут пропущены, то берутся их значения по умолчанию. Значение: background-color - значение цвета фона. background-image - значение фонового изображения. background-repeat - значение повторения фонового изображения. background-attachment - значение фиксации фонового изображения. background-position - значение положения фонового изображения. [pre]body{background:#000000 url(картинка.тип) center no-repeat;}[/pre] margin Удобное свойство для установки ширины полей сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем полям. Если два значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если же три, то первое значение присваивается верхнему полю, второе - левому и правому, а третье - нижнему. Значение: margin-top - ширина верхнего поля. margin-right - ширина правого поля. margin-bottom - ширина нижнего поля. margin-left - ширина левого поля. [pre]margin: 20px 30px 5px [/pre] подробнее о краях и отступах почитайте тут

Esty: Шрифты (сложновато, но ооочень важно!) font-family Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке. Значение: имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки. например: "Lucida Grande" имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce. отделяются , например: "Lucida Grande", Verdana, sans-serif; [pre]p {font-family: "Lucida Grande", Verdana, sans-serif;}[/pre] font-style Определяет начертания шрифта, такие как курсив или наклонное. Значение: normal - обычное начертание (по умолчанию). italic - курсив. oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив. inherit - применяется значение родительского элемента. [pre] p{font-style: italic; }[/pre] font-variant Определяет, будет ли шрифт выведен в виде малых прописных букв. Значение: normal - обычное начертание (по умолчанию). small-caps - выводит шрифт в виде малых прописных букв. inherit - применяется значение родительского элемента. [pre] p {font-variant: small-caps }[/pre] font-weight Определяет толщину выводимого шрифта. Значение: normal - обычное начертание (по умолчанию). bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании. bolder - жирный шрифт. lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид. 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder. [pre] p {font-weight: bold;}[/pre] font-stretch Определяет толщину шрифта. Значение: normal - обычная ширина (по умолчанию) wider- увеличение текущей ширины. narrower - уменьшает текущую ширину на единицу. ultra-condensed - наименьшее значение ширины. extra-condensed - значение большее, чем предыдущее condensed - значение большее, чем предыдущее. semi-condensed - значение большее, чем предыдущее. semi-expanded - значение большее, чем при обычной толщине. expanded - значение большее, чем предыдущее. extra-expanded - значение большее, чем предыдущее. ultra-expanded - максимальное значение ширины. [pre] body{ font-stretch: condensed }[/pre] font-size Определяет кегель (высоту символов) шрифта. Значение: абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше), любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается. любое соответствующее стандарту процентное значение. предпочтение лучше отдавать размеру в абсолютных величинах! [pre] p{font-size: 20px}[/pre] font Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию. Значение: font-style - начертание. font-variant - значение, определяющее вывод шрифта в виде малых прописных букв. font-weight- толщина. font-size - кегль. line-height - интерлиньяж. font-family - семейство шрифтов. [pre]body {FONT: normal 12px 'Lucida Grande', Verdana, sans-serif; COLOR: #3362f2d font-weight:normal [/pre]

Esty: Итоги наших изысканий (код взят с этого форума!!!) body {SCROLLBAR-FACE-COLOR: #f9edd3; SCROLLBAR-HIGHLIGHT-COLOR: #b4a48b; SCROLLBAR-SHADOW-COLOR: #635a4a; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #00000; SCROLLBAR-TRACK-COLOR: #f9edd3; SCROLLBAR-DARKSHADOW-COLOR: #000000; scrollbar-darkshadow-Color:#000000; FONT: normal 12px 'Lucida Grande', Verdana, sans-serif; COLOR: #3362f2d font-weight: normal ; BACKGROUND-IMAGE: url(http://адрес картинки); margin:10px 10px;}

Esty: Слегка повоюем с таблицами Как мы уже знаем у таблиц есть class="Стилевой класс" и id="Имя" - название слоя - адекватно воспринимается не всеми браузерами, поэтому будьте осторожны в использавании Именно поэтому мы будем говорить о "Стилевых классах" и правилах их записи в CSS ниже приведён пример правильной записи и применения стилевых классов: [pre]<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <div class="all" > <div class="b" > </div> <div class="a" > </div> <div class="c"> </div> </div> </body> </html>[/pre] Это пример уже рассматривался на этим форуме в теме про ХТМЛ и DIVы Посмотрим какие параметры можно вписать в стилевой класс таблицы и её элементов на первом месте всякие бордючики и и рамочки border-top-width, border-right-width, border-bottom-width, border-left-width Устанавливает ширину рамки для определенной стороны (соответственно верхней , правой, нижней и левой). Рамка проходит между полем и основной частью элемента. Значение: thin - рамка в виде тонкой линии. medium - рамка в виде линии средней толщены. (по умолчанию) thick - рамка виде толстой линии. или абсолютная величина в px [pre] border-top-width: 5px [/pre] border-width свойство для установки ширены рамки сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки. Значение: border-top-width - толщина верхней стороны. border-right-width - толщина правой стороны. border-bottom-width - толщина нижней стороны. border-left-width - толщина левой стороны. inherit - применяется значение родительского элемента. [pre]border-width: 2px,2px,1px,1px[/pre] border-top-color, border-right-color, border-bottom-color, border-left-color Устанавливает цвет рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента. Значение: любое соответствующее стандарту значение цвета. [pre]border-top-color: #f9edd3[/pre] border-color свойство для установки цвета рамки сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки. Значение: border-top-color -цвет верхней стороны. border-right-color - цвет правой стороны. border-bottom-color - цвет нижней стороны. border-left-color - цвет левой стороны. [pre]border-color: #3362f2d, #000000, #b4a48b, #635a4a[/pre]

Esty: Теперь настало время украсить бордюрчик border-top-style, border-right-style, border-bottom-style, border-left-style Устанавливает стиль рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента. Значение: none - линия отсутствует. hidden - линия тоже отсутствует, но для таблицы это значение действует по другому dotted - пунктирная линия. dashed - штрихпунктирная линия. solid - сплошная непрерывная линия. double - двойная сплошная линия. groove - трехмерная борозда. ridge - трехмерный гребень. inset - трехмерная вырезка. outset - трехмерный орнамент. [pre]border-top-style: double;[/pre] border-style свойство для установки стиля рамки сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки. Значение: border-top-style - стиль верхней стороны. border-right-style - стиль правой стороны. border-bottom-style - стиль нижней стороны. border-left-style - стиль левой стороны. [pre] border-style: double, solid[/pre] border-top, border-right, border-bottom, border-left свойство для установки нескольких свойств линии рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Каждое отдельное свойство применяется к указанной для него стороне. следующие определения относятся к верхней стороне. Значение: border-top-width - ширина верхней рамки. border-top-style - стиль верхней рамки. border-top-color - цвет верхней рамки. [pre]border-top: 1px solid red;[/pre] border свойство для определения рамки сразу со всех сторон элемента. Значение устанавливается одинаковыми для всех его сторон. Значение: border-width - толщина границ. border-style - стиль границ. border-color - цвет границ. [pre]border:1px solid red;[/pre]

Esty: поговорим об элементах таблиц, они опять таки имеют class="Стилевой класс" Особо нам важен стилевой класс такого элемета как <td> описание стилевого класса может включать в себя положение, размер, отступы (на какую величину будет отодвинут от краёв текст и графика), виды и размер шрифта, фон, бордюры, может определятся количество соединяемых строк и ячеек column-span Определяет количество соединяемых (span) столбцов. Значение: любое соответствующее стандартам число - количество соединяемых столбцов. По умолчанию это 1. inherit - принимается значение родительского элемента. [pre] td {column-span: 3} [/pre] row-span Определяет количество соединяемых (span) строк. Значение: любое соответствующее стандартам число - количество соединяемых строк. По умолчанию это 1. inherit - принимается значение родительского элемента. [pre] td {row-span: 3}[/pre] padding-top Задает расстояние между элементом страницы и верхней границей. [pre]pading-top: {Y}|{Y}%;[/pre] Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Значение по умолчанию 0, для тега <TD> 1. padding-right Задает расстояние между элементом страницы и правой границей. [pre]padding-right: {X}|{X}%;[/pre] Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0, для тега <TD> 1. padding-bottom Задает отступ между элементом страницы и нижней границей. [pre]pading-bottom: {Y}|{Y}%;[/pre] Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Значение по умолчанию 0, для тега <TD> 1. padding-left Задает расстояние между элементом страницы и левой границей. [pre]pading-left: {X}|{X}%;[/pre] Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0, для тега <TD> 1. padding Удобное свойство для установки ширины промежутка сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем полям. Если два значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если же три, то первое значение присваивается верхнему полю, второе левому и правому, а третье - нижнему. [pre]padding: 5px 5px 3px[/pre]

Esty: Полупрозрачный фон в CSS (Opacity)в опере не работает 1. Прозрачность фона и всего блока в целом. В css вставить строчку: opacity:0.65; Например, надо сделать фон для div полупрозрачным: .myclass { background: #b2b2b2; opacity:0.55; } В общем, чтобы это заработало в IE 6 и 7, добавляем: filter:alpha(opacity=55); 2. Прозрачный фон и непрозрачные внутренности .myclass { background-color: rgba(178,178,178,0.5); } Цвет здесь задается в формате RGBа. Последняя цифра 0,5 - процент прозрачности. Как обычно для IE специальная строка: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50b2b2b2, endColorstr=#50b2b2b2); Задаем цвета градиента: начальный (startColorstr) и конечный (endColorstr) - я указала один цвет (#b2b2b2). Здесь немного наоборот, прозрачность определяют первые две цифры (50). Вот только не знаю, как будет работать в 8 версии.

полная версия страницы