Коротко о CSS

« Назад

Коротко о CSS

Методы включения внутренних каскадных таблиц стилей в HTML-документы

Таблица стилей может находиться в отдельном файле, который подключается следующим способом:

</head>
</html>
...

или находится на самой html странице так:

h4 {font-weight:bold; color:red;text-align:center;}

</style>
</head>

или так:

<h4 style="color:red; font-weight:bold;text-align:center;">Красный жирный заголовок </h4>

Красный жирный заголовок

div {width: 300px; height: 100px; background: red; transition: width 2s; -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */}
div:hover {width: 800px;} }

Этот текст нельзя выделить
<div style='-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;'>Этот текст нельзя выделить</div>

p {word-spacing:20px}

Это пример текста

h4 {letter-spacing:10px}

Это пример текста

h4 {text-decoration: underline line-through;text-decoration-color:red;}

Это пример текста

.upper {vertical-align:100%}

Это пример текста

h3 {text-transform:uppercase}

Это пример текста

h3 {text-transform:capitalize}

Это пример текста

p {text-transform:lowercase}

Это пример текста

p {text-align:justify} // выравнивание текста по ширине
p {text-indent:12px} // text-indent используется для формирования отступа красной строки
p {line-height:50%} // line-height задает высоту строки символов
p {white-space:nowrap;} // задается режим отображения без автоматических переносов.

В данном примере для заголовков первого уровня (тег h4) задана ширина в 100 пикселей. Все что, не умещается в этот диапазон, будет усечено с добавлением троеточия.
Работает только если задана высота.

h4 {width:120px;height:20px;overflow:hidden; text-overflow:ellipsis;} Render an ellipsis ("...") to represent clipped text

Render an ellipsis ("...") to represent clipped text

Для параграфов (тег p) задан разрыв слов для переноса.
p {word-wrap:break-word;} В следующем примере для параграфов (тег p) задается, с помощью свойства text-align:right, выравнивание по правому краю
p {text-align: right;}

Это пример текста

В следующем примере для параграфов (тег p) задается, с помощью свойства writing-mode, направление письма, используемое в Восточной Азии:
h4 {writing-mode: tb-rl;}

Это пример текста

В следующем примере для заголовков тег h4 свойством color задается красный цвет: h4 {color:red;}

Это пример текста

Свойство background-color устанавливает цвет фона: h4 {background-color:green;color:white;margin:20px;height:30px;}

Это пример текста

Свойство background-image определяет графический ресурс:

div {background-image:url(wall.jpg);width:300px;height:75px;text-align:center;color:white;}

Это пример текста

Если указано свойство background-image то значение свойства background-repeat указывает будет ли повторятся графический элемент

div {background-image:url(wall.jpg);width:300px;height:75px;text-align:center; background-repeat:no-repeat;color:red;}

Это пример текста

div {width:300; height:80; overflow-y:scroll; background-attachment: fixed; background-image: url(wall.jpg);color:white;}

Это пример текста
Это пример текста
Это пример текста
Это пример текста
Это пример текста
Это пример текста
Это пример текста

Скользящее изображение на обоях:

body {background: url("images/image.png"); background-attachment: fixed;background-repeat:no-repeat;background-position: 80% 200px;}

Открыть модальное окно

<a href="#" onclick="window.open('test','','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0, Scrollbars=0,Resizable=0,Width=550,Height=400');">
Открыть модальное окно </A>

Открыть модальное окно