Article directory
1. CSS common element properties
1.1 Font family and font size
The set font needs to be the font that comes with Windows, and the font that has been installed in the system is required
Use css to set the fonts to Microsoft Yahei and Arial, and the font size to 30 px and 40 px
font - size sets the height of the character box of the font.
<body>
<style>
.fontfamily .one{
font-family: '微软雅黑';
font-size: 30px;
}
.fontfamily .two{
font-family: '宋体';
font-size: 40px;
}
</style>
<div class="fontfamily">
<div class = "one">
这是微软雅黑字体
</div>
<div class="two">
这是宋体
</div>
</div>
</body>
The setting effect is as follows
1.2 Set font weight font-weight
When setting the value of font thickness, there are two setting styles:
Use word settings: normal (normal thickness 400) , bold (bold 700 )
Use number setting: value between 1 - 1000, normal weight size is 400
<body>
<style>
/* 使用单词设置 font-weight */
.font-weight .one{
font-weight:normal;
}
.font-weight .two{
font-weight: bold;
}
/* 使用数字设置 font-weight */
.font-weight .three{
font-weight:200;
}
</style>
<div class="font-weight">
<div class="one">
正常粗细
</div>
<div class="two">
加粗
</div>
<div class="three">
变细
</div>
</div>
</body>
The display effect is as follows:
1.3 Text Style
In our actual use, the main function is to restore the tags and tags set in html to normal through the setting of css style
/* 设置字体为倾斜 */
font-style: italic
/* 设置字体为正常格式 */
font-style: normal;
1.4 Text Color
A lot of light that we see every day is mixed. Red, green and blue are mixed. In the computer, R, G, and B are used to mix and represent colors, referred to as RGB representation. Through the combination of three components in different proportions, to represent different colors.
Assign a byte to represent the three components of RGB, each byte ranges from 0 to 255
<style>
.color{
/* 使用预定义的颜色值 */
color: red;
/* 使用十六进制表示 */
color: #ff0000;
/* 使用 R G B 混合表示 */
color: rgb(255, 0,0);
}
</style>
// 通过设置 rgb 的值得控制混合颜色的结果
1.5 Text Alignment
Use the text - align property to set the text alignment
<body>
<style>
.text-align .one{
/* 设置文本居中对齐 */
text-align: center;
}
.text-align .two{
/*设置文本为靠左对齐 */
text-align: left;
}
.text-align .three{
/* 设置文本为靠右对齐 */
text-align: right;
}
</style>
<div class="text-align">
<div class="one">文本居中对齐</div>
<div class="two">文本靠左对齐 </div>
<div class="three">文本靠右对齐 </div>
</div>
</body>
Set the alignment of the text on the page by setting the text - align property
1.6 Text decoration
Set the decoration of the text by setting text - decoration
/* 设置文本下划线 */
text-decoration: underline;
/* 清空文本装饰 可以给 a 标签链接去掉下划线*/
text-decoration: none;
/* 设置文本下划线 */
text-decoration: overline;
/* 设置文本的删除线 */
text-decoration: line-through;
1.7 Text indentation
Text indentation can control the indentation of two words per line of a paragraph, other lines are not affected, use text-indent to control the distance of indentation, the unit can be px or em, em is set based on the size of the text, assuming The text size is 40 px, then 1 em = 40 px.
The size of text indentation can also be a negative number, when set to a negative number, it will indent to the left.
1.8 Background properties
The background properties mainly include: background color, background image, background tiling, background position, background size
- background tiling options: repeat tiling no-repeat: no tiling repeat-x: horizontal tiling repeat-y: vertical tiling
- Background location: orientation noun, precise unit, mixed unit, the coordinate system in the computer is generally a left-handed coordinate system,
- Background size: It can be a specific value or percentage, set according to the size of the parent element, cover (the background is completely covered) contain (the background adapts to the content area)
Use Cases :
<body>
<style>
.pg{
/* 设背景颜色 */
background-color: transparent;
/* 设置背景链接 */
background-image:url(test.jpg);
/* 设置背景图片不平铺 */
background-repeat: no-repeat;
/* 设置图片方位 */
background-position:center center;
/* 设置背景图片的尺寸 */
height: 500px;
}
</style>
<div class= "pg">
这是一张背景
</div>
</body>
1.9 Border settings
HTML elements are all rectangles by default, but in daily life, rounded rectangles are generally used. In css, the border is set as a rounded rectangle through border - radius.
Many elements in leetcode pages use rounded rectangles
Set up a simple rounded rectangle
<body>
<body>
<style>
.one{
width: 200px;
height:100px;
background-color: gray;
color: black;
text-align: center;
line-height: 100px;
border-radius: 20px; // 设置内切圆的半径
}
</style>
<div class="one">设置一个圆角矩形框</div>
</body>
</body>
length is the radius of the inscribed circle, the larger the length, the larger the border arc of the rounded rectangle
When the length increases to 80, the left and right sides of the rounded rectangle will completely become a semicircle shape
When the length and width of the rectangle are the same, as the length increases, the inscribed circle of the rectangle becomes a complete circle
2. The display mode of the element
In CSS, there are many display modes of HTML tags. Here we only focus on two: block-level elements and inline elements. The display mode of any html tag can be set
The difference between block-level elements and inline elements
Block-level elements occupy a single line, and in-line elements do not occupy a single line
The height, width, and inner and outer margins of block-level elements can be set. The height, width, and row height of inline elements are invalid. The inner margin is valid, and the outer margin is sometimes valid and sometimes invalid.
By default, block-level elements are as wide as the parent element, and inline elements are as wide as the content inside by default.
Generally, inline elements are converted to block-level elements if necessary
2.1 Block-level elements
common block-level elements
h1 - h6 p div ul ol li
Features of block-level elements:
monopoly party
Height, width, inner and outer margins, line height can all be controlled.
The width defaults to 100% of the width of the parent element (as wide as the parent element)
Is a container (box) that can release inner and block-level elements
We need to pay attention when using block-level elements: block-level elements cannot be placed in text tags, and div tags cannot be placed in p tags
2.2 Inline elements
common inline elements
a strong b em i del s ins u span
Features of inline elements:
Do not occupy one line alone, one line can display multiple
Setting height, width, row height is invalid
Left and right outer margins are valid, inner margins are valid
The default width is the content of the text itself
Inline elements can only hold text and other inline elements
2.3 css box model
The page can be regarded as being made up of boxes. The elements in the page are all made up of boxes, and the contents of the elements are contained in the boxes. From the inside to the outside of the box are the content (content), inner margin (padding), border (border), outer margin (margin)
-
border settings
-
border: set the border, border is shorthand for width style color.
-
border-width: Used to set the width of the border.
-
border-style: It is used to set the style of the border. The commonly used attribute values are as follows: solid line (solid); dashed line (dashed); point (dotted); bilateral (double) .
-
border-color: It is used to set the color of the border, which can be word, rgb, or hexadecimal, just like the color attribute value.
Below we use a case to show the use of borders:
<body>
<style>
.one{
width: 200px;
height:200px;
background-color: gray;
color: black;
text-align: center;
border-radius: 20px;
border-style: solid;
border-color: green;
}
</style>
<div class="one">设置元素的边框</div>
</body>
The displayed effect is as follows:
By observing the page elements you can find:
The length and width we set in the class selector are 200 * 200, but the displayed size is slightly larger than the set size, so it can be found that the border will expand the box by default.
Through the setting of box-sizing, we can prevent the frame from being stretched
box-sizing: border-box;
Of course, the border can also set various styles such as color and style (line style)
-
padding: padding setting, it also has four separate attributes. Left (padding-left); right padding-right); top (padding-top); bottom (padding-bottom), padding abbreviation rules are the same as margin .
In order to add padding to the text elements in the above picture, you can set padding-right
padding-right: 30px;The effect after setting is as follows:
Of course, you can also set padding for all four directions of the element
padding: 5px; 表示四个方向都是 5px padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针) -
Margin
Similar to padding, the outer margin sets the distance between elements. When we set multiple elements, usually they are pasted together, and the outer border can be controlled by setting the margin attribute
-
margin: Margin setting, there is a separate property to set a single margin. Left (margin-left); Right (margin-right); Upper (margin-top); Lower (margin-bottom). We can directly write the shorthand mode through margin: margin: top right bottom left (the four attribute values are set clockwise)
Example:
When we set two elements, they are next to each other by default.
<body> <style> .one{ width:200px; height: 100px; background-color: gray; border-radius: 20px; border-color: red; box-sizing: border-box; border-style: solid; text-align: center; padding-top: 30px; } </style> <div class="one">这是第一个div</div> <div class="one">这是第二个div</div> </body>
Add a margin attribute at this time, so that a certain gap can be left between the two elements
margin-top: 30px;
Here the same class is used for the two elements, so there is spacing above the two elements, or different classes can be used to only change the outer spacing of one element.
Similar to padding, it can also be written as follows:
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
3. Flexible layout
Flex is the abbreviation of Flexible Box , which means "elastic layout" or "flexible box". It is a new layout mode in CSS3, which can realize various page layouts in a simple, complete and responsive manner. It is very suitable for screen size and device type, simpler and more perfect than floating layout.
Let's look at an example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
div{
width: 100%;
height: 150px;
background-color: red;
}
div>span{
background-color: green;
width: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
In the above code, the div tag is set to red, and the span tag is set to green, the display effect is as follows:
Although inline elements span are arranged in the horizontal direction, they are not suitable for horizontal layout, because the margins and sizes of inline elements are uncontrollable, and inline elements and inline block elements will treat newlines in the source code as spaces, and will also Unnecessarily affecting the layout of elements in the page.
3.1 Enable flexible layout
display : flex;
Add flexible layout to the parent element of the horizontally arranged elements, set flex, and the elements inside the flexible container are no longer "block level" and "inline elements", but become inline elements, and the size and margin can be set.
3.2 Set the horizontal arrangement
Set the horizontal arrangement of flex elements (left to right, etc.) by setting the justify - content attribute in the parent element
justify-content:space-around；
justify-content：center；
Common arrangement:
3.3 Set the horizontal arrangement of elements
Set the horizontal arrangement of elastic elements by setting the align-items attribute in the parent element (top-bottom alignment)
align-items: flex-start;
Application: Set horizontal centering and vertical centering
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
div>span{
background-color: green;
width: 100px;
}
2)]
justify-content：center；
Common arrangement:
[External link image transfer...(img-kJTf1KXA-1680343571722)]
3.3 Set the horizontal arrangement of elements
Set the horizontal arrangement of elastic elements by setting the align-items attribute in the parent element (top-bottom alignment)
align-items: flex-start;
[External link image transfer...(img-GvnR6Fq2-1680343571723)]
[External link image transfer...(img-27c3BwsX-1680343571723)]
Application: Set horizontal centering and vertical centering
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
div>span{
background-color: green;
width: 100px;
}
[External link image transfer...(img-UQ4PhJd8-1680343571724)]