As a full-stack engineer, in my daily work, I may focus more on back-end development, such as: C#, Java, SQL, Python, etc., but I am not very proficient in front-end knowledge. In some relatively complete companies or projects, front-end engineers, UI engineers, etc. are usually paired to make up for the lack of front-end experience and skills in back-end development. But not all projects will have full-time front-end engineers. In some small projects or start-up companies, the division of functions is not clear, and one person often has to do both front-end and front-end. Therefore, as a full-stack engineer or back-end engineer, you must master the necessary skills . Preparatory front-end knowledge is also an essential skill. Today I will focus on explaining, as a full-stack engineer, the relevant knowledge that must be mastered in front-end CSS.
What is CSS?
CSS refers to Cascading Style Sheets, which describes how to display HTML elements on screen, paper, or other media. In layman's terms: CSS beautifies the tags in web pages .
CSS syntax
CSS rule-set consists of selectors and declaration blocks:
- The selector points to the HTML element you need to style.
- A declaration block contains one or more declarations separated by semicolons.
- Each declaration contains a CSS property name and a value, separated by a colon.
- Multiple CSS declarations are separated by semicolons, and blocks of declarations are enclosed in curly braces.
CSS syntax examples are as follows:
This article mainly explains CSS styles from several aspects.
size size
Size-related attributes mainly set the size, border, margin and other information of the label style in the page. As follows:
- width page element width, you can set a fixed value, such as: 50px, or you can set a percentage, such as: 50%
- height is the height of the page element. If the content exceeds the height value of the label element, it will overflow. If truncation is required, it needs to be set with the overflow attribute.
- max-width maximum width, max-height maximum height
- min-wdith minimum width, min-height minimum height
- The border border can give 3 values, the format is: border width, border style, border color. Such as: 1px dotted gray. Note that multiple values are separated by spaces.
- border-radius The angular radius of the four corners of the border. The default is right angles, which can be rounded by setting this property.
- padding padding, the distance between the content and the border. You can set 4 values 4px 10px 20px 3px, which represent: top, right, bottom, and left padding in the four directions;
- The box-sizing label sizing property allows us to include padding (padding) and borders in the overall width and height of the element. By default, the overall width of the label is width + left and right padding + border. So if the width is set to 100% and padding is greater than 0, there will be scroll bars by default. This property can be set to border-box to solve the problem.
- margin, which represents the distance between the label and the outer label. By default, browsers set default margins for labels. The default margin can be cleared by *{margin:0;padding:0}.
- margin-bottom/margin-top bottom margin/top margin, indicating the margin between the bottom/top of the page element and other elements.
- margin-left/margin-right left margin/right margin, indicating the margin between the left/right side of the page element and other elements. Auto adaptive can be set, or a fixed value can be set.
- overflow is the processing method after the content overflows, such as: hidden.
The diagram about the dimensions [border, margin, content, width, height] is as follows:
backgroundbackground
Background-related attributes mainly set the background style of page label elements, such as background color, background image and other information, as shown below:
- background-color background color, such as #f9f9f9;
- background-image background image, setting format: url('image path'), the image path can be an absolute path, a relative path, or a network path. Note that the background image and background color cannot take effect at the same time
- box-shadow shadow effect, the format is: shadow offset x shadow offset y shadow bloom width shadow color such as: 5px 5px 5px gray.
textText processing
Text processing related attributes mainly set the attributes of text-related content, such as: color, font, font size, bold, italics, etc. As follows:
- color The foreground color, that is, the color of the text content.
- text-indent The first line of text is indented. You can set the pixels, such as 12px; you can also set the number of indented characters, such as 2em. The setting em can be adapted to the size.
- font-size font size, such as: 16px.
- font-family sets the font such as Heilongte, Arial, etc.
- font-weight text thickness defaults to normal, the main values are: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherited values.
- text-align text alignment such as: left, right, center
- line-height is the line height. Setting the line height can set the position of the text within the line.
- text-shadow Text shadow, the format is the same as box-shadow setting.
- text-decoration text decoration, used to set or delete text decoration such as: dashed underline gray.
- writing-mode The writing mode of text content, which defines how the text is arranged horizontally or vertically. The main values are: writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr, such as: vertical-lr, indicating vertical display, arranged from left to right. Default is for Chinese.
- text-orientation, English direction, such as upright, English will also be displayed vertically.
position position
Position-related attributes mainly set the left, right, top, bottom and other position information of the page label element, mainly through position.
position The position attribute specifies the type of positioning method for an element (static, relative, absolute or fixed).
- Absolute absolute positioning generates absolutely positioned elements and positions them relative to the first parent element other than static positioning. Use top to set the distance from the top, left to set the distance to the left, and the default is relative to the body. You can change the reference object of absolute positioning by setting the positioning method relatvice of the parent element.
- position fixed positioning, the distance relative to the viewport will not change as the page is dragged.
- relative generates a relatively positioned element, positioned relative to its normal position.
- static default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).
- inherit specifies that the value of the position attribute should be inherited from the parent element.
layout layout
If we want to change the default web page label presentation effect to the presentation effect we want, this operation is called web page layout. When performing layout processing, layout-related attributes need to be used. Layout is set through the display attribute [which sets whether the element is treated as a block or inline element and the layout used for child elements, such as fluid layout, grid layout, or flexible layout].
1. flex layout
Flex layout, also known as elastic layout, uses flexbox to make the container flexible and more adaptable to the different widths of various devices without having to rely on traditional block layout and floating positioning. It is a new specification in CSS3 and is currently supported by mainstream browsers. It is worth mentioning that Flex layout does not support IE9 and below.
Flex layout mainly includes the following five concepts:
1. Flex container: An outer container using Flex layout.
2. Flex item: child element in the container.
3. Main axis: The horizontal or vertical direction of the flexible container.
4. Cross axis: the direction perpendicular to the main axis.
5. Alignment (align): Set the alignment of the flexible item within the flexible container.
Common properties of flexible layout are as follows:
- display sets flex. It is a processing of the rendering effect of internal tags of elements.
- flex-direction: used to set the direction of the main axis. It has four values: row: default value, the main axis is horizontal column: the main axis is vertical row-reverse: the main axis is horizontal, but arranged from right to left column-reverse: the main axis is vertical, but from bottom to top arranged on top.
- flex-wrap: Used to define whether the flexible items in the flexible container should wrap. It has three values: nowrap: default value, flexible items do not wrap wrap: flexible items automatically wrap, if necessary wrap-reverse: flexible items automatically wrap, but arranged in reverse order
- align-items: Defines the alignment of flex items on the cross axis. It has five values: flex-start: flex items are arranged from top to bottom on the cross axis flex-end: flex items are arranged from bottom to top on the cross axis center: flex items are arranged in the center on the cross axis baseline: each Flex items are aligned according to their text baseline stretch: the default value, the flex items are stretched on the cross axis to fill the flex container
- justify-content: Defines the alignment of flexible items on the main axis. It has five values: flex-start: default value, flex items are arranged from left to right on the main axis flex-end: flex items are arranged from right to left on the main axis center: flex items are arranged centered on the main axis space-between : The elastic items are evenly distributed on the main axis, with no gaps at the left and right ends. space-around: The elastic items are evenly distributed on the main axis, with gaps between them.
- align-content: Define the alignment of multi-line flex items in the flex container on the cross axis. It has six values: flex-start: flex items are arranged from top to bottom on the cross axis flex-end: flex items are arranged from bottom to top on the cross axis center: flex items are arranged centered on the cross axis space-between: The elastic items are evenly distributed on the cross axis, with no gaps between each row. space-around: the elastic items are evenly distributed on the cross axis, with gaps between each row. stretch: the default value, the elastic items are stretched on the cross axis. Fill flex container
- flex:1 layout element scale. You can further set different block proportions by setting the flex of different internal elements.
By setting the above three attributes, you can easily layout the content, such as center, upper left, upper right, lower left, lower right, etc.
2. grid layout
CSS grid layout (Grid) is a two-dimensional page layout system. Its emergence will completely subvert the traditional way of page layout.
Basic concepts of grid layout
- Container - has container properties
- Items - have item properties
- row
- column
- Gap - the distance between cells
- Area - Divide the area occupied by each cell yourself
- content
Flex is suitable for one-dimensional layout, and grid is suitable for two-dimensional layout. Display internal elements in rows and columns
- display:grid。
- grid-template-columns, column settings, you can set fixed column widths, such as 200px 300px 400px, etc., or you can set percentage widths, such as: 20% 30% 40% 10%, etc.; you can also set proportions, such as: 1fr 1fr 1fr where fr It means proportion. You can set repeat(3,1fr) or repeat(auto-fill,200px), etc.; or mixed settings such as: 200px auto 200px.
- grid-template-rows row setting. The content that can be set is consistent with the column settings.
- Properties
justify-itemsandjustify-selfalign items relative to the row axis, and propertiesalign-itemsandalign-selfalign items relative to the column axis.
Comprehensive example (1)
A comprehensive example of size, background, text, position, and layout is as follows:
Comprehensive example effects include: text bolding, color, element inner spacing, outer spacing, borders, background color, position, flex layout, writing mode and other comprehensive applications. The effect is as follows:
The sample source code Html part is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="article article-v">
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
</div>
</div>
<div class="article article-h">
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
<div class="poem">
<span class="title">凉州词</span>
<span class="author">作者 唐，王之涣</span>
<span class="content">黄河远上白云间，</span>
<span class="content">一片孤城万仞山。</span>
<span class="content">羌笛何须怨杨柳，</span>
<span class="content">春风不度玉门关。</span>
</div>
</div>
</div>
</body>
</html>
The sample source code css part is as follows:
*{
padding: 0px;
margin: 0px;
}
.container{
width: 100%;
}
.article{
margin-top: 10px;
width: 100%;
padding: 10px;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
flex:1;
flex-direction: row;
justify-content: center;
}
.article .poem{
border: 1px;
border-style: dotted;
border-color: #f9f9f9;
border-radius: 2px;
margin: 4px;
width: 15%;
}
.article-v .poem{
background-color: goldenrod;
display: flex;
}
.article .poem span{
padding:4px;
margin: 4px;
letter-spacing: 6px;
color: #F9F9F9;
font-family: Arial, Helvetica, sans-serif;
}
.article .poem .title{
display: block;
font-size: larger;
font-weight: bolder;
}
.article .poem .author{
display: block;
font-size: large;
font-weight: bold;
}
.article .poem .content{
display: block;
font-size: 18px;
}
.article-v .poem .title{
writing-mode: vertical-lr;
}
.article-v .poem .author{
writing-mode: vertical-lr;
}
.article-v .poem .content{
writing-mode: vertical-lr;
}
.article-h .poem{
background-color: darkblue;
display: block;
}
transition transition
CSS transitions allow you to smoothly change property values within a given amount of time. The main settings are as follows:
- transition shorthand property, used to set four transition properties into a single property. Format: Attribute 1 time motion mode, attribute 2 time motion mode , etc. The motion mode can be omitted, and the default is uniform transformation, such as: width 1s, that is, the width is completed within 1 second, not instantly. Not only can you specify specific attributes, but you can also use all to represent all attributes, such as: all 2s. The motion mode defaults to Linear linear transformation, and can also have other values, such as: ease-in, ease-in-out, etc.
- transition-delay specifies the delay in seconds for the transition effect.
- transition-duration specifies how many seconds or milliseconds the transition effect should last.
- transition-property specifies the name of the CSS property for the transition effect.
- transition-timing-function specifies the speed curve of the transition effect.
transform
1. 2D transformation
transform sets the transformation, generally sets the 2D transformation
- translate sets the displacement and sets the movement in the x-axis and y-axis directions, such as translate(200px,300px). You can also set TranslateX(200px) and translateY(200px) separately.
- rotate, set the rotation, such as rotate(30deg), which defaults to center rotation.
- transform-origin transform center, such as: center, right, bottom, etc. This property is generally set in the properties of the element itself, rather than in the interactive transformation effect style.
- scale scaling, the scaling of elements such as scale(0.5) is the scaling in the x-axis and y-axis directions. You can also set two values to control the scaling ratio, such as scale(1,2).
- Skew tilt can be set in the x-axis and y-axis directions, such as: skew(20deg). You can also set them separately, such as skew(10deg,20deg)
2. 3D transformation
3D transformation generally sets a container, that is, the sub-elements of the container content are rendered and displayed in 3D, and the default 2D display outside the container.
- transform-style:preserve-3d sets the container content for 3D rendering.
- perspective sets the depth of field, which is the distance between the viewport and the observer.
- translate3d sets 3D displacement conversion, such as translate3d(100px,0,0) setting
- rotate3D, set the 3D selection, such as rotate(0,0,0,100deg). The first three parameters indicate whether it is effective on the three axes of x, y, and z. 1 means it is effective, and 0 means it is not effective. The fourth parameter represents the angle.
animationanimation
CSS animation causes elements to gradually change from one style to another. You can change as many CSS properties as you like. To use CSS animation, you must first assign some keyframes to the animation. Keyframes contain the style an element has at a specific time.
Animation related properties are as follows:
- @keyframes defines keyframe animation and specifies animation mode.
- animation sets the abbreviation property of all animation properties, format: animation keyframe name duration infinite animation mode
- animation-delay specifies the delay in starting the animation.
- animation-direction determines whether the animation plays forward, backward, or alternately.
- animation-duration specifies the time it should take for the animation to complete one cycle.
- animation-fill-mode specifies the style of the element when it is not playing animation (before it starts, after it ends, or both).
- animation-iteration-count specifies the number of times the animation should play.
- animation-name specifies the name of the @keyframes animation.
- animation-play-state specifies whether the animation is running or paused.
- animation-timing-function specifies the speed curve of the animation.
Comprehensive example (2)
Comprehensive example 2 mainly applies transition, transformation, animation and other effects, as shown below:
The sample source code Html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index2.css" />
</head>
<body>
<div class="container">
<div class="box">
<div class="one">我在后面</div>
<div class="two">我在前面</div>
</div>
</div>
</body>
</html>
The sample source code CSS part is as follows:
.{
margin: 0px;
padding:0px;
}
.container{
position: absolute;
left: 50px;
top: 50px;
transform-style: preserve-3d;
perspective: 500px;
transform-origin: center;
}
.container div{
width: 200px;
height: 200px;
}
.container .box{
transform-style: preserve-3d;
perspective: 500px;
transform-origin: center;
transition: all 1s;
animation: xuanzhuan 5s linear infinite;
}
.container .box div{
position: absolute;
left: 0px;
top:0px;
line-height: 200px;
text-align: center;
}
.container .box .one{
transform: translate3d(0,0,-50px);
border: 1px solid gray;
background-color: beige;
}
.container .box .two{
border: 1px solid gray;
background-color: red;
}
@keyframes xuanzhuan{
from{
transform: rotate3d(0,1,0,0deg);
}
to{
transform: rotate3d(0,1,0,360deg);
}
}
The above is all the front-end CSS skills that full-stack engineers must master. I hope we can inspire others, learn together, and make progress together.