CSS

CSS
Cascading Style Sheets
Web-Browser
The main purpose of the browser is to display
web resources.
To do this, a request is sent to the server, and
the result is displayed in the browser window.
Under the resources are basically meant HTMLdocuments, but it can also be a PDF-file, picture
or other content.
The main components of the web browser
User interface
Display module (web browser engine) - responsible
for displaying the requested content on the screen
Network components - designed to perform network
calls such as HTTP requests
The executive part of the user interface is used to
draw the main widgets (form elements)
JavaScript interpreter - used to parse and execute
JavaScript code
A data warehouse is necessary for the persistence of
processes.
Display Modules
Trident - proprietary engine Microsoft Internet Explorer; Is used by
many programs for Microsoft Windows.
Gecko - open engine project Mozilla; It is used in a large number of
programs based on Mozilla code (Firefox browser, Thunderbird mail
client, SeaMonkey suite of programs).
KHTML - developed within the framework of the KDE project, used in
the Konqueror browser and served as the basis for WebKit.
WebKit - engine for the browser Apple Safari, included in the
operating system Mac OS X, and the browser Google Chrome. Built-in
Qt library.
Presto - proprietary engine, developed by Opera Software; Was the
base for Opera browser before the transition to Blink, and also
licensed for use by a number of third-party companies.
Blink - Google Chrome browser engine with 28 versions and Opera
15. Is a reworked WebKit.
Edge is the new engine from Microsoft for its new Edge browser.
Cascading Style Sheets
CSS is a style language that defines the display of HTML
documents.
CSS allows you to work with:
• fonts;
• color;
• fields;
• lines;
• height;
• width;
• background images;
• positioning of elements
• many other things.
CSS using benefits
• managing the display of multiple documents using a
single style sheet;
• more precise control over the appearance of the
pages;
• various representations for different media (screen,
printing, etc.);
• sophisticated and well-designed design technique.
CSS Rules
CSS rules contain style definitions for an element or
group of elements. They use the following syntax:
selector {
property: value;
property: value;
property: value;
}
Selector defines to which HTML tag (tags) the
property is applied
Method 1: Through the style attribute
<html>
<head>
<title>Example</title>
</head>
<body>
<p style="color: #FF0000;">This is a red text</p>
</body>
</html>
Method 2: Internal style
<html>
<head>
<title>Example</title>
<style type=“text/css”>
p {
color: #FF0000;
}
</style>
</head>
<body>
<p>This is a red text</p>
</body>
</html>
Method 3: @Import
• @import url("имя файла") [types];
<html>
<head>
<title>Example</title>
<style type=“text/css”>
@import url(styles.css) all;
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
1. Not supported by all browsers;
2. Slows down the download page.
Method 4: External
(Link to the stylesheet)
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>This is a red text</p>
</body>
</html>
Absolute dimensions
in (inches) - inches (1 inch = 2.54 cm)
cm (centimeters) - centimeters
mm (millimeters) - millimeters
pt (points) - point (1 point = 1/72 of an inch)
pc (picas) - peak (1 peak = 12 counts)
px (pixel units) - pixels (1 pixel = 1/96 inch = 0.26
mm)
Relative dimensions
% - percentage of the sizes specified for the parent element
Em - the measured value depends on the font size of the
current element (it is set through the font-size attribute).
When it is not explicitly specified, the size of the text that is
embedded in the browser is used. Therefore, 1em is initially
equal to the font size set in the browser by default.
Ex - this argument is defined as the height of the character "x"
in lowercase. Ex is bound to the size of the font specified in
the browser by default, if the parent element has the attribute
"font-size", then it is bound to it.
Hierarchical Selectors (1)
E1 E2 {...} for the element / class / identifier E2 located in
the element / class / identifier E1 (any level of
nesting);
E1>E2 {...} for the element / class / identifier E2 located in
the element / class / identifier E1 (the first level
of nesting);
Hierarchical Selectors (2)
E1~E2 {...} for the element / class / identifier E2 following
the element / class / identifier E1;
E1+E2 {...} for the element / class / identifier E2
immediately following the element / class /
identifier E1;
Priorities of the rules
(in decreasing order)
span { color: yellow !important; }
#news
div p .news
div .news
span.news
.news
div .header span
div p span
.header span
div span
span
*
Pseudo-classes
div: hover {...} - the appearance of the element
when the mouse pointer is over;
input: focus {...} - the type of the element when
it receives focus;
img: first-child {...} - the kind of picture that is
the first child of its parent element
img: last-child {...} - the kind of picture that is
the last child of its parent element
Pseudo-elements
p:fist-letter {...}, p::fist-letter {...} - form of the first
letter of the paragraph;
p:first-line {...}, p::first-line {...} - the form of the first
line of the paragraph;
div:before {content: "..."; ...}, div::before {content:
"..."; ...} - adds a pseudo-element as the first child of
the div element;
div:after {content: "..."; ...}, div::after {content: "...";
...} - adds a pseudo-element as the last child of the div
element;
Properties specifying color and
background
color - describes the foreground color of the element;
background-color - describes the background color of the element;
background-image - used to insert a background image;
background-repeat - repeating the background image;
background-attachment - fixes the background image;
background-position - position the background image;
background
background-color: #FF0000 [rgb(255,000,000)];
background-image: url(“image.png");
background-repeat: no-repeat [repeat-x | repeat-y];
background-attachment: fixed [scroll];
background-position: right bottom [top | left];
background: #FF0000 url(“image.png") no-repeat fixed
right bottom;
Color in CSS
• By name. English-language color names are used, for
example blue or red;
• In hexadecimal RGB (for example, # 71C354 or # 3C9).
This method is widely used in HTML;
• In the decimal RGB format (for example, rgb (126, 6,
9)), where the value of each color component can vary
from 0 to 255;
• In RGB format with percentages, for example, rgb
(30%, 40%, 70%)), where the value of each color
component can vary from 0 to 100.
p {color: lime}
p {color: rgb(0,255,0)}
p {color: #0f0}
p {color: #00ff00}
p {color: rgb(0%, 100%, 0%)}
Font Families
Serif
• Times New Roman
• Garamond
• Georgia
Monospace
• Courier
• Courier New
Sans-serif
• Trebuchet
• Arial
• Verdana
Fonts
• font-family - indicates the priority font list
• font-style - font style [normal | Italic | oblique];
• font-variant - used to select between normal and small-caps options. The
small-caps font uses small caps instead of lower case letters.
• font-weight - describes how fat the font should be displayed. The font can
be normal or bold. Some browsers support numeric values of 100-900 to
describe the weight of the font.
• font-size - font size. Different units of measure are used (for example,
pixels and percentages) to describe the font size.
• font - shortcut
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
p { font: italic bold 30px arial, sans-serif; }
Text
• text-indent - sets the indent for the first line of the
paragraph;
• text-align - align text [left | right | center | justify];
• text-decoration - allows you to add various "decorative
effects" [underline | overline | line-through;]
• letter-spacing - interval between letters in pixels,
points, in relative units em - relative unit of length
equal to the size of the current font;
• text-transform - text transformation [capitalize |
uppercase | lowercase | none]
Links
A pseudo-class allows you to take into account various
conditions or events when defining the properties of an
HTM tag.
The syntax of the selector is: selector: pseudo-class
(Example: a: link)
Pseudo-classes for references:
:link - used for links to pages that the user has not yet
visited;
:visited - used for links to pages that the user visited;
:hover - used for links above the mouse pointer;
:active - used for active links.
Identifying and grouping elements
(class and id)
• class - specifies a style class that allows you to associate
a specific tag with a style design. In the meaning it is
allowed to specify several classes at the same time,
separating them among themselves by a space.
• id - specifies the style identifier, the unique name of the
element, which is used to change its style and access to
it through scripts. The identifier in the document code
must be in a single instance, in other words, only occur
once.
<ul>
<li
<li
<li
<li
</ul>
class="class1">CLASS1</li>
class="class1">CLASS1</li>
class="class2">CLASS2</li>
id="id1" class="class2">CLASS3 + ID</li>
.class1 {
color: red;
}
.class2 {
color: yellow;
}
#id1 {
color: blue;
}
Frames
• border-width - The thickness of the border, the property can have
values of thin, medium and thick, or a numeric value in pixels.
• border-color - specifies the color of the border. Values are normal
color values, for example: "# FF0000", "rgb (255,000,000)" or "red";
• border-style - types of frames;
• border – abbreviated entry
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
Block model
The block model in CSS describes the blocks
generated for HTML elements. The block model also
has detailed options for defining the fields, frames, fill
and content of each element.
Fields and filling (width and height)
#block_id {
height: 150px;
width: 150px;
margin: 20px 15px 10px 5px;
}

150px
150px
#block_id {
height: 150px;
width: 150px;
padding: 20px 15px 10px 5px;
}

180px
170px
CSS: box-sizing
content-box - by default, the content inside the block will
be displayed in the old way; As in the example above:
instead of 150x150 will be 180x170
border-box allows the padding and border values to be
subtracted from the width and length of the block, i.e. In
our example, the block will remain with fixed parameters,
but for the content there will be 120x130 px.
div {
width: 150px;
height: 150px;
padding: 20px 15px 10px 5px;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
120px
130px
Float elements
An element can float to the right or left using the float
property. That is, a block with its contents can pop up
to the right or left in the document window (or
containing a block) [left | Right | None]
<style>
#any_text {
float: left;
}
</style>
<div id="any_text">
<img src="220px-Jan_van_Eyck_061.jpg“>
</div>
<p>Text</p>
The clear property - controls the behavior of a
sequence of document popups. [left | right | both |
none]
The principle is that if clear, for example, has a value
of both for the box, then the upper edge of the frame
of this box will always be under the bottom edge of
the field of possible pop-up boxes.
Positioning
Sets the way the element is positioned relative to the browser
window or other objects on the web page.
Position: [absolute | fixed | relative | static | inherit]
Absolute positioning (absolute)
Indicates that the element is absolutely positioned, with other
elements displayed on the web page as if absolutely positioned
element and not.
The position of the element is set by the properties left, top,
right, and bottom, and the value of the position property of the
parent element also affects the position.
So, if the parent has the position value set to static or there is no
parent, the coordinates are read from the edge of the browser
window.
If the parent position is specified as fixed, relative, or absolute,
then the coordinate is counted from the edge of the parent
element.
Positioning
Fixed positioning (fixed)
By its action this value is close to absolute, but unlike absolute
positioning it is bound to the specified properties left, top, right and
bottom point on the screen and does not change its position when
scrolling the web page.
Relative positioning (relative)
The position of the element being placed relatively is calculated
relative to its original position in the document. This means that you
move the element to the right, left, up or down. Thus, the element
still occupies the space in the document after positioning.
Static positioning (static)
Elements are displayed as usual. Using the properties left, top, right,
and bottom does not result in any results.
Inherited positioning (inherit)
Inherits the value of the parent.
Layering with z-index
Any positioned elements on a web page can overlap each other in a certain
order, thereby simulating a third dimension perpendicular to the screen. Each
element can be located below and above other objects of the web page, their
placement on the z-axis and is controlled by the z-index. This property only
works for elements whose position is set to absolute, fixed, or relative.
The values are integers (positive, negative, and zero). The higher the value, the
higher the element is compared to those in which it is smaller. With an equal
value of z-index, in the foreground is the element that is described in the HTML
code below.
z-index: number | auto | inherit
!important
If to the property-value pair, assign the
!important declaration, then this CSS property
value will get the highest priority in the cascade
of styles. Simply put, this declaration will work
for the item, regardless of the existence of other
CSS rules for the same element.
p {font-size: 0.625em !important;}
CSS3: border radius
• border-radius: Sets the radius of the curvature of the
corners of the frame. If the frame is not specified, the
rounding also occurs with the background.
• border-radius: 5px;
• -moz-border-radius: 5px;
• -webkit-border-radius: 5px;
Value
Result
1
The radius is indicated for all four corners.
2
The first value specifies the radius of the upper left and lower right corner, the second
value of the upper right and lower left corner.
3
The first value specifies the radius for the upper left corner, the second for the upper right
and lower left, and the third for the lower right corner.
4
In turn, sets the radius for the upper left, upper right, lower right and lower left corner.
CSS3 - Transparency
In web design, the translucency is also applied and is
achieved due to the opacity or RGBA color format, which
is set for the background.
opacity: [0..1] - The main feature of this property is that
the transparency value acts on all the child elements
inside, not just the background.
rgba - Usually the design is semi-transparent only the
background of the element, and the text is opaque to
preserve its readability. It is best to use the RGBA format,
of which the alpha channel is a part or in other words the
transparency value.
red
green blue transparency
background: rgba(237, 28, 36, 0.5)
CSS3 - Gradient
A gradient is a smooth transition from one color to another, and the colors
themselves and the transitions between them can be several.
1. Linear gradient
position
initial color
final color
background: linear-gradient(top,
#000,
#fff);
To record a position, the keywords top, bottom and left, right, and their
combinations are used. The order of words is not important, you can write
left top or top left.
Instead of a keyword, it is allowed to use the slope angle, which indicates the
direction of the gradient. First, a positive or negative angle is written, then
deg is added to it.
angle
initial color
final color
background: linear-gradient(-45deg,
#000,
#fff);
To create complex gradients of two colors will already be insufficient, the
syntax allows you to add their unlimited number, listing the colors through a
comma.
CSS3 - Gradient
Position
Angle
Description
top
270deg From top to bottom
left
0deg
From left to right.
bottom
90deg
From bottom to top.
right
180deg From right to left.
top left
-45deg
top right
225deg From the upper right corner to the bottom left.
bottom left
45deg
From the upper left corner to the right bottom
corner
From the bottom left to the right upper
bottom right -225deg From the bottom right to the top left
Appearance
CSS3 - Gradient
Firefox 3.6+
background: -moz-linear-gradient(top, #fefcea, #f1da36);
Chrome 1-9, Safari 4-5
background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36));
Chrome 10+, Safari 5.1+
background: -webkit-linear-gradient(top, #fefcea,
#f1da36);
Opera 11.10+
background: -o-linear-gradient(top, #fefcea, #f1da36);
IE10
background: -ms-linear-gradient(top, #fefcea, #f1da36);
CSS3
background: linear-gradient(top, #fefcea, #f1da36);
CSS3 - Gradient
2. The radial ones are similar in principle to linear gradients,
but one color goes to the other not along a straight line, but
like circles on water around a point. The radial gradient is
created using the background or background-image property
with the radial-gradient parameter, which, like the linear
gradient, has its own variations for each browser, they differ
only in prefixes. In the simplest case, only two parameters are
required to specify a radial gradient: the initial and final
colors. By default, the starting point is located in the center.
position
initial color
final color
background: radial-gradient(top right, #000,
#fff);
The position of the point is written by keywords or available
units of measure such as pixels or percentages.
CSS3 - Gradient
•
•
•
•
•
•
top left = left top = 0% 0% (in the upper left corner);
top = top center = center top = 50% 0% (centered above);
right top = top right = 100% 0% (in the upper right corner);
left = left center = center left = 0% 50% (left and center);
center = center center = 50% 50% (center, default value);
right = right center = center right = 100% 50% (right and
center);
• bottom left = left bottom = 0% 100% (in the lower left corner);
• bottom = bottom center = center bottom = 50% 100%
(centered below);
• bottom right = right bottom = 100% 100% (in the lower right
corner).
There are two forms of a radial gradient - a circle and an ellipse,
which differ in their appearance. The default is an elliptical
gradient.
Circular gradient
gradient type
background: radial-gradient(circle,
initial color
final color
#000,
#fff)
Elliptic gradient
CSS3 - Gradient
The size of the gradient, which depends on the keywords used. The size
is written after a space after the gradient type (circle or ellipse).
Value
Code
Description
Form gradient coincides with the
background: radialnearest thereto unit side (for a circle) or
gradient(30px 20px,
contain
simultaneously coincide with the
circle contain, #fff,
nearest horizontal and vertical sides
#000);
(the ellipse).
background: radialThe shape of the gradient is calculated
gradient(30px 20px,
closest-corner
from the distance information to the
circle closestnearest corner of the block.
corner, #fff, #000);
background: radialSimilar to its effect on contain, but the
gradient(30px 20px,
farthest-side
gradient spreads to the far side of the
circle farthest-side,
block.
#fff, #000);
background: radialThe shape of the gradient is calculated
gradient(30px 20px,
cover
from the distance information to the far
circle cover, #fff,
corner of the block.
#000);
View
CSS3: Shadows
box-shadow - used to add a shadow that has six values, of which only
two are required. The figure shows the box-shadow property with all
possible values, they are numbered for their identification.
1
2
3
4
5
6
box-shadow: inset 5px 5px 10px 3px #ccc
1. The inset keyword sets the shadow inside the element;
2. Shadow shift horizontally (5px - to the right, -5px - to the left);
3. Vertical shift (5px - down, -5px - up);
4. Radius of the blur of the shadow (0 - sharp shadow);
5. Stretching of the shadow (5px - stretching, -5px - compression);
6. Color of the shadow.
CSS3:
Text
Effects
in
CSS3
text-shadow - adds a shadow to the text, and also sets its parameters: the
color of the shadow, the offset relative to the label and the radius of the
blur. The text-shadow property can work in conjunction with the pseudoelements :first-letter and :first-line.
text-shadow: none | <color> <x shift> <y shift>
<blur radius>
None - Cancels the addition of a shadow.
Color - The color of the shadow in any available CSS format. By default,
the color of the shadow matches the color of the text. Optional parameter.
Shift by x - Shadow shifts horizontally relative to the text. A positive value
of this parameter sets the shift of the shadow to the right, the negative
value to the left. Required.
Shift by y - Shadow shifts vertically relative to the text. It is also
permissible to use a negative value that raises the shadow above the text.
Required.
Radius - Specifies the radius of the shadow blur. The more this value, the
stronger the shadow smoothes, becomes wider and lighter. If this
parameter is not set, the default is set to 0.
CSS3: Transformation
Scaling, tilting and rotating any element is possible using the CSS3 transform
property. It is supported by all modern browsers (with prefixes)
transform: <function> [<function>]* | none
Transformation functions
Rotate-rotates an element by a given angle relative to the transformation
point specified by the transform-origin property.
transform: rotate (<angle>)
Scale - The scale of the element horizontally and vertically.
transform: scale (sx [, sy])
A value greater than 1 increases the scale of the element, less than 1 reduces
the scale.
skewX - Tilts the element by a specified angle vertically.
transform: skewX (<angle>)
skewY - Tilts the element by a specified angle horizontally.
transform: skewY (<angle>)
CSS3: Transformation Functions
Translate - moves the element to the specified value
horizontally and vertically.
transform: translate (tx [, ty])
TranslateX - shifts the element horizontally by the
specified value. A positive value shifts to the right, a
negative value to the left.
transform: translateX (tx)
TranslateY - shifts the element vertically by the specified
value. Positive value shifts down, negative up.
transform: translateY (ty)
CSS3: Animation
• A generic property that allows you to set the
values to create a transition effect between
two element states at the same time, they can
be defined using the pseudo class: hover or:
active, and dynamically via JavaScript.
CSS3: Animation functions
ease - The animation starts slowly, then
accelerates and slows down again towards the
end of the movement.
CSS3: Animation functions
ease-in - Анимация медленно начинается, к
концу ускоряется
CSS3: Animation functions
ease-out - Animation starts quickly, slowing
down towards the end.
CSS3: Animation functions
ease-in-out - Animation starts and ends slowly.
CSS3: Animation functions
Linear - The same speed from beginning to end.
CSS3: Animation functions
Step-start - As such, no animation. The style
properties immediately assume the final value
CSS3: Animation functions
Step-end - As such, no
animation. The style
properties are in the
initial value for a given
time, then they
immediately take the
final value.
CSS3: Animation functions
Steps - A step function that has a
specified number of steps.
Here: <number> - an integer
greater than zero;
Start - specifies a lower
semicontinuous function;
End - specifies the upper
semicontinuous function.
transition-timingfunction:
steps(<number>, start
| end)

Download Report

CSS

Paperzz.com

Your Paperzz