CSS: Styles and Model

Содержание и основные понятия

Back to the table of contents
Alterna chapter 8 · page 8.2
CSS: Styles and Model
The CSS (Cascading Style Sheets) is a language that turns the XML skeleton into a beautiful page.
If TML is
skeleton
that CSS is
Dressing, hair and makeup
Without CSS, all sites would look like documents from the '90s.
CSS describes,
How?
The elements look like: color, size, retreats, location, animation. One CSS file can stylize hundreds of HTML pages.
GEF · Basic
PLF · Infred
01
Selectors and cascade
How CSS finds elements and what style wins
CSS Syntax
Selector
{
property
:
value
;
color
:
#22d3ee
;
font-size
:
16px
;
}
Types of selections
Selector
Example
Which one will choose
Weight
Type
p, h1, div
All elements of this tag
0-0-1
Grade
.card, .btn
Elements with a Class attribute
0-1-0
ID
#header
One element with attribute id
1-0-0
Attribute
[type="email"]
Elements with specified attribute
0-1-0
Pseudoclass
:hover, :first-child
Element status
0-1-0
descendant
nav a
All <a> inside <nav>
Amount
Daughter
ul > li
Direct subsidiaries only <li>
Amount
Universal
*
All elements
0-0-0
Cascad: Who Wins
When more than one regulation applies to one element, CSS uses
Specific
(weight) to determine the winner:
onlines
(style="...) is the weight of 1-0-0 (highest)
ID
(#header) is the weight of 0-1-0-0
Classes, attributes, pseudoclasses
(.card) is the weight of 0-0-1-0
Types, pseudo-elements
(p, h1) - 0-0-0-1 weight
With equal specificity wins.
Last
The rule is coded.
!important
color: red !important;
- Interrupting everything, even inline, but using it is bad practice. If you need it, it means CSS architecture is broken.
02
Box Model
Each element is a box:
Four layers of the box
margin
border
padding
content
Figure 2.
Box Model: from contents to external derogations
Property
What he does
Example
width / height
Size of contents
width: 300px;
padding
Internal Derogations (from Content to Bourder)
padding: 16px;
border
Box around element
border: 1px solid #ccc;
margin
External retreat (border to neighbours)
margin: 20px auto;
box-sizing: border-box
By default
width
= Content only.
box-sizing: border-box
- Width includes padding and border. It's much more convenient. Use it always!
03
Flexbox is a flexible model
Single-dimensional position: row or column with complete control
How Flexbox Works
The parent gets
display: flex
Children automatically line up in
row
By default.
Parental properties (flex container)
Property
Values
What he does
flex-direction
row | column
Direction: Line or column
justify-content
flex-start | center | space-between | space-around
Equalization on main axle
align-items
stretch | center | flex-start | flex-end
Cross-axle alignment
flex-wrap
nowrap | wrap
Transfer to new line
gap
10px, 1rem
Distance between elements
Children &apos; s properties (flex elements)
Property
What he does
flex-grow
What percentage of free space to occupy (0 = do not stretch)
flex-shrink
How to Compress When There Is a Lack of Space
flex-basis
Base size before distribution of available space
align-self
Individual equalization (re-defined aign-items)
04
CSS Grid is a two-dimensional model.
Lines and columns at the same time - for complex models
Grid Foundations
Parent:
display: grid
Browse columns and lines:
.grid {
display: grid;
grid-template-columns:
1fr 2fr 1fr
;
/* 3 columns */
grid-template-rows:
auto 200px
;
/* 2 lines */
gap:
16px
;
/* distance */
}
Unit f
fr
- a portion of the space.
1fr 2fr 1fr
= three columns, the average is twice as wide.
Useful Functions
Function
Example
Appointment
repeat()
repeat(3, 1fr)
Repeat Pater N times
minmax()
minmax(200px, 1fr)
Minimum and maximum size
auto-fit
repeat(auto-fit, minmax(200px, 1fr))
Adaptive net without media requests!
grid-area
1 / 1 / 2 / 3
The element takes up several cells
Flexbox vs Grid
Flexbox
- for single-dimensional positions (line or column): navigation, buttons, cards in row.
Grid
- for two-dimensionals (lines and columns): page layout, gallery, dashboard.
05
Animations and crossovers
Transition for smooth changes, @keyframes for complex animations
Transition
.btn {
background: blue;
transition:
background 0.3s ease
;
}
.btn:hover {
background: red;
/* smooth for 0.3c */
}
@keyframes — Complex Animation
@keyframes
pulse
{
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.card {
animation:
pulse 2s infinite
;
}
Productivity
Aim only.
transform
and
opacity
- They're being processed by the GPU.
width
,
height
,
margin
causes repainting and stops.
06
Adaptation
Media Requests: One page for desktopa, tablet and telephone
Media requisitions
♪ Stiles for all screens ♪
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media
(max-width:
768px
) {
* Planchette: 2 columns*/
.grid { grid-template-columns: 1fr 1fr; }
}
@media
(max-width:
480px
) {
* Phone: 1 column */
.grid { grid-template-columns: 1fr; }
}
Typical Brackpoints
Device
Width
Specialities
Disctop
> 1024px
Full mockup, hover effects
The tablet
768–1024px
Simplified model, less column
Telephone
< 768px
One column, large buttons (44px+)
Mobile-first
The professionals write the mobile styles first, then add them.
@media (min-width: ...)
It's called a big screen.
mobile-first
The approach.
📦
Flexbox Designer
Set the properties · see the result
Interactor
Change the properties of the flex container; the blocks will be re-engineered in real time. On the right is the finished CSS code.
direction
justify
align
wrap
gap
1
2
3
4
5
🎨
HTML Colors Table
140 name colors · click = copy hex
Interactor
CSS supports 140 named colors. click on color -- hex code copied. Use a filter search.
⚖️
Specific calculator
Enter the selector · learn the weight
Interactor
Enter the CSS calculator, which will show its specificity (inline, ID, classes, types).
🧪
CSS singer
HTML + CSS · Live Excuse · Width Switch
Interactor
Edit the XML and CSS -- the prevect is updated instantly. Switch the width to check the adaptive.
Width:
localhost/sandbox