huuthiet
commented
1 year ago
How to use CSS in HTML There are 3 ways:
Inline: use in tag by style=" " attribute
Internal: use in file HTML by tag style
External: use a CSS file and link to HTML file
Box model Include:
content
padding
border
margin
Flexbox, grid
- Flexbox:
Use for layout
- Grid
It divides the website page into columns and rows system, create a grid
Transition When we change property of element, it allows us create the smoothness of the change.
transition-duration: set time to the change, default: 0s
transition-delay: after the time delay to change
transition-property: the CSS properties to which a transition effect will be applied such as all, width, height. We can the its value is all.
transition-timing-function: set the speed change of the transition effect, such as: ease, linear,... example:
<div></div> <style> div { width: 100px; height: 100px; background-color: red; transition: height 2s linear 1s }
div:hover {
height: 200px;
}
> * Animation
It have some properties is the same Transition such as: delay, duration, timing-function
We use it with keyframes, with keyframes, we can create the changes in different time periods.
Example:@keyframes test { 0% { property: value....} .... 50% { property: value....} .... 100% { property: value....} }
or Can use: @keyframes test {
from {property: value}
to {property: value}}
When use the keyframe above with:
animation-name: test;
Besides:
- animation-iteration-count: the times animation repeat. Such as a number or infinite,...
- animation-direction: regulate the direction of animation: normal, reverse (>< normal), alternate (do it all and do the opposite)
> * Responsive
Responsive for the website is adjust its layout suitable for the size of the display each different device.
To do so, we can use "Media Query" and determine breakpoints. Breakpoints where there the layout change.
Example:
We have a website, when it displays on destop, we have 3 columns, but display on mobile, we have just a column
> * layouts
A website usually includes header, menu, content and footer.
We can use grid or flexbox to divide the layout for the website
> * variables
Include local and global:
- local: only use in backets {}
> example: h1 { --my-color: red; color: var(--my-color);
- global: use for all element .
It needs to be defined in a pseudo-class is :root.
> example::root {--my-color: red} h1 {color: var(--my-color) h2 {color: var(--my-color)
> * pseudo-class
it's used to define a special state of an element such as when mouses over element
- syntax:
selector:pseudo-classs {property: value}
example:
:root -> access to root element: <html>
: hover
:active
:first-child
:last-child
a:link: link isn't acced
a:visited: link is acced
> * pseudo-element
It's used to style specified parts of an element. We can CSS without write more HTML.
- syntax:
selector :: pseudo-element {property: value}
such as: first-line, first-letter, after, before, selection, marker,...
> * function CSS
- calc(): it can use add, sub, multi, divide for relative values and absolute values
- attr(): it can use to take value from attributes of HTML element
>*Position:
1. Relative:
- It take its present position to make origin. It can override other elements
example:
h1 {
position: relative;
top: ;
buttom: ;
left: ;
right: ;
}
2. Absolute
- position: absolute.
The element has above property will depend the nearest parent with position property to its locate. use properties such as top, left, right,...
3. Fixed
the element has position: fixed will depend browser frame. use top, left, right, bottom to locate
doduongthaituan
Revise CSS: