CSS Таблицы стилей. CSS Стиль — это набор
CSS Таблицы стилей
CSS Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей
HTML документ
h1{color:blue;font-size:14px} STYLE.CSS
Цвет и фон (COLOR ) цвета в CSS указываются так же, как и в html. #ff3355 или green Свойство COLOR Задает основной цвет(цвет переднего плана) того или иного элемента. Пример: H1 { color: red ; } P { color: green ; }
Цвет и фон (BACKGROUND-COLOR) Свойство BACKGROUND-COLOR фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др Пример: BODY {background-color : #FFEE8C ;} H1 {color: red ;background-color :blue ;} P {color: green ;}
Цвет и фон (BACKGROUND-IMAGE) Свойство BACKGROUND-IMAGE Данное свойство используется для задания фонового изображения Пример: BODY { background-color : #FFEE8C ; background-image : url(smile.png) ; }
Цвет и фон (BACKGROUND-REPEAT) Свойство BACKGROUND-REPEAT фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали Пример:BODY { background-image : url(smile.png) ; background-repeat: repeat-x;}
Цвет и фон (BACKGROUND-ATTACHMENT) Свойство BACKGROUND-ATTACHMENT будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано Пример: BODY {background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: scroll ;} BODY {background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed ;}
Цвет и фон (BACKGROUND-POSITION) Свойство BACKGROUND-POSITION Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Пример: BODY {background-image : url(smile.png) ; background-repeat: no-repeat; background-position: top right;} BODY {background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 300px 500px ;} BODY {background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 75% 25%;}
Сокращенная форма записи - BACKGROUND Порядок свойств этого элемента: background-color background-image background-repeat background-attachment background-position Пример: BODY {background-color:#ffee8c ; background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed; background-position: top right;} BODY {background: #ffee8c url(smile.png) no-repeat fixed top right ;}
Шрифты (FONT-FAMILY ) Свойство FONT-FAMILY определяет гарнитуру шрифта
Пример: h1 {font-family: verdana, arial, sans-serif;} p {font-family: "Times New Roman", serif;} h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif
Шрифты (FONT-STYLE ) Свойство FONT-STYLE задает стиль шрифта Пример: h1{font-family: verdana, arial, sans-serif; font-style:normal;} h2{font-family: verdana, arial, sans-serif; font-style:italic ;} h3{font-family: verdana, arial, sans-serif; font-style:oblique;}
Шрифты (FONT-VARIANT ) Свойство FONT-VARIANT для выбора варианта написания букв нижнего регистра Пример: h1{ font-family: verdana, arial, sans-serif; font-variant:small-caps; }
Шрифты (FONT-WEIGHT ) Свойство FONT-WEIGHT определяет насыщенность шрифта Пример: P {font-family: arial, verdana, sans-serif;} DIV { font-family: arial, verdana, sans-serif; font-weight: bold; }
Шрифты (FONT-SIZE ) Свойство FONT-SIZE регулирует размер шрифта Пример: h1 { font-family: arial, verdana, sans-serif; font-size: 18px; } h2{ font-family: arial, verdana, sans-serif; font-size: 36px; color: red; }
Сокращенная запись - FONT Порядок свойств этого элемента: font-style font-variant font-weight font-size font-family Пример: P{font-style: italic; font-variant: normal ; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;} P{ font : italic normal bold 30px arial,sans-serif; }
Текст (TEXT-ALIGN ) Свойство TEXT-ALIGN выравнивание текста, аналогичное атрибуту ALIGN Пример: h1{ text-align:center;} h2 {text-align:left;} h3 {text-align:right;} p {text-align:justify;}
Текст (TEXT- DECORATION ) Свойство TEXT- DECORATION оформляет текст определенным образом Пример: h1 {text-align:center; text-decoration:underline;} h2 {text-align:center;text-decoration:overline;} h3 {text-align:center; text-decoration:line-through;}
Текст (TEXT-INDENT ) Свойство TEXT-INDENT для создания отступов первой строки Пример: h1{text-align:center;} p {text-indent: 40px;} h1{text-align:center;} p {text-indent: 20%;}
Текст (TEXT-TRANSFORM ) Свойство TEXT-TRANSFORM видоизменяет текст
Текст (LETTER-SPACING ) Свойство LETTER-SPACING изменяет расстояние между буквами. Значение лучше указывать в пикселях. Пример: h1 { letter-spacing: 10px;} p{ letter-spacing :4px; }
Текст (WORD-SPACING) Свойство WORD-SPACING изменяет расстояние между словами. Значение также лучше задавать в пикселах. Пример: h1 { word-spacing: 20px;} p{ word-spacing :10px; }
Списки (LIST-STYLE-TYPE ) Свойство LIST-STYLE-TYPE Позволяет определять вид маркера элементов списка Пример: ol {list-style-type:square;} ul {list-style-type: upper-roman;}
Списки (LIST-STYLE-POSITION) Свойство LIST-STYLE-POSITION определяет положение маркера
Списки (LIST-STYLE-IMAGE) Свойство LIST-STYLE-IMAGE поставить вместо маркера любое изображение Пример: ul {list-style-image: url(galka.gif);}
Сокращенная форма LIST-STYLE Пример: ul { list-style-type:square; list-style-position: inside; list-style-image: url(galka.gif); } ul {list-style:square inside url(galka.gif) }
Ссылки А : ИМЯ ПСЕВДОКЛАССА { ...стиль ...} A:link { ... стиль оформления обычной ссылки... } A:active { ... стиль оформления ссылки в момент нажатия... } A:visited { ... стиль оформления посещенной ссылки... } А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }
Пример: a:link { color: blue ; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; font-weight:bold; } a:active { color:green; text-decoration:none; text-transform:uppercase; } Пример: a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;} a {color:black; text-decoration:none;}
Типы селекторов Селектор по элементу P { font-family: arial, verdana, sans-serif; font-size: 12px }
Селектор по классу .green { font-family: arial, verdana, sans-serif; font-size: 12px; color:green; } P.green {color:green;} HTML документ
... текст параграфа ...
Селектор по id выделить один единственный элемент H1#firstheader { color: red; font-weight: bold; text-align: center } HTML – документ <Н1 id="firstheader"> Первый заголовок на странице
Контекстный селектор p strong {color:green } td p strong {color:red;}
Блоковая модель
Рамки Свойство BORDER-WIDTH задает толщину рамки thin (2px) , medium(4px) и thick(6px) Свойство BORDER-COLOR определяет цвет рамки #ff3344, gold
Рамки (BORDER-STYLE) определяет какого вида будет рамка минимальная ширина рамки типа double должна равняться 3 px Пример: h3 {border-width: 16px; border-style: double; border-color: green;}
Сокращенная форма - border Порядок свойств этого элемента: border-width border-style border-color Пример: h1 {border-width: 30px; border-style:outset ; border-color: red;} h2 {border-width: 20px; border-style: dashed; border-color: gold;} h3 {border-width: 16px; border-style: double; border-color: green;} p {border-width: 1px; border-style: dotted; border-color: blue;} h1 {border:30px outset red;} h2 {border:20px dashed gold;} h3 {border: 16px double green;} P {border:1px dotted blue}
top, right, bottom, left - регулирование параметров рамки с разных сторон Пример: h1 {border-top-width: 30px; border-top-style:solid ; border-top-color: red; border-right-width: 20px; border-right-style:dashed ; border-right-color: gold; border-bottom-width: 10px; border-bottom-style:dashed; border-bottom-color: green; border-left-width: 40px; border-left-style:solid ; border-left-color: blue;} h1 {border-top: 30px solid red; border-right: 20px dashed gold; border-bottom: 10px dashed green; border-left: 40px solid blue;}
Поля (margin) и отступы (padding) MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа. PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.
.p1 {background-color : #FFE446; border:1px solid red; margin:70px;} .p2 {background-color : #FFE446; border:1px solid red; padding:70px; } .p3 {background-color : #FFE446; border:1px solid red; margin:50px; padding:20px;} p {margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:150px;} p {margin:50px; margin-left:150px;} p {margin: 50px 50px 50px 150px;}
В каких случаях лучше пользоваться отступами, а в каких полями? Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами; Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.
Высота(height) ширина(width) блоков HEIGHT - высота блока WIDTH - ширина блока .box1 {width: 300px; border: 1px solid red; background: #FFE446;} .box2 {height: 300px; border: 1px solid red; background: #FFE446;} .box3 {width: 300px; height: 600px; border: 1px solid red; background: #FFE446;} .box4 {width: 300px; height: 300px; border: 1px solid red; background: #FFE446;} поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Позиционирование блоков Абсолютное позиционирование (POSITION:ABSOLUTE;) top, right,bottom,left бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется.
.smile{border: 1px solid red; position:absolute; top:100px; right:100px;} .smile{position:absolute; bottom:300px; left:100px;} .smile{position:fixed; bottom:300px; left:100px;} HTML – документ
Относительное позиционирование (POSITION:RELATIVE; ) бокс смещается, но его прежнее место ничего не заполняет .smile{ border:1px solid red; position:relative; top:200px; left:100px; }
Плавающие блоки Свойства FLOAT определяет, будет ли блок плавающим и в какую сторону он будет перемещаться
.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left;} box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left;} .box3 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left;} HTTML-документ
.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left;} .box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left; clear:both;} html-код
Слои (Z-index) .desatka_buba {position: absolute; left: 200px; top: 200px; z-index: 1;} .valet_buba {position: absolute; left: 215px; top: 215px; z-index: 2;} .dama_buba {position: absolute; left: 230px; top: 230px; z-index: 3;} .korol_buba {position: absolute; left: 245px; top: 245px; z-index: 4;} .tuz_bubna {position: absolute; left: 260px; top: 260px; z-index: 5;} html код 
