Basic properties of CSS 2

1, Basic properties of CSS 2

1. Table attributes

Attribute name

purpose

Value

border-collapse

 

Sets or retrieves whether the edges of rows and cells of a table are merged or independent.

separate: border independent

collapse: adjacent edges are merged

border-spacing

Spacing between cells when borders are independent

Number, negative value is not allowed

empty-cells

Sets or retrieves whether the border of a table cell is displayed when there is no content in the cell.

Hide: hide the border of the cell.

show: displays the border of the cell.

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Table properties</title>
		<style>
		
			.separate{
				width: 200px;
				height: 200px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells: hide;
				}
		</style>
	</head>
	<body>
		<table border="1" class="separate">
				<td>separate--Border independent</td>
				<td>separate--Border independent</td>
				<td>separate--Border independent</td>
			</tr>
			<tr>
				<td>collapse--Adjacent edges are merged</td>
				<td>collapse--Adjacent edges are merged</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

2. Layout properties

Attribute name

purpose

Value

display

Sets or retrieves whether and how objects are displayed

none: hide objects. Does not reserve its physical space for hidden objects

Block: Specifies that the object is a block element.

visibility

Defines whether the element is visible

Visible: set the visible object to reserve physical space

hidden: set object hiding

collapse: mainly used to hide rows or columns of a table. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden.

 

float

 

Defines the floating placement of elements to the left or right

 

none: set the element not to float

Left: sets the element to float on the left

Right: set the element to float on the right

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.test{
				width: 300px;
				height: 300px;
				float: right;
				background-color: red;
			}
			.table{
				width: 300px;
				height: 300px;
				float: right;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="test">I will appear on the right side of the screen 1</div>
		<div class="table">I will appear on the right side of the screen 2</div>
		<br>
		<img src="imgs/avatar04.png"/>
	</body>
</html>

3. Location properties

Attribute name

purpose

Value

position

 

Specifies how an element is positioned in the document.

static: default.

Relative: relative positioning [the object follows the regular flow and will not affect any element in the regular flow]

Absolute: absolute positioning [object out of normal flow]

top

 

Defines the offset between the upper outer margin boundary of an element and the upper boundary of its containing block

 

Number, negative value is not allowed

right

 

Defines the offset between the right outer margin boundary of an element and the right boundary of its containing block

 

Number, negative value is not allowed

bottom:

 

Defines the offset between the bottom outer margin boundary of an element and the bottom boundary of its containing block

 

Number, negative value is not allowed

left:

 

Defines the offset between the left outer margin boundary of an element and the left boundary of its containing block

 

Number, negative value is not allowed

z-index:

 

Defines the stacking order of an element in the document

Number [the larger the number, the higher it will be]

 

4. Transformation attribute setting

2D Transform Functions:

: [matrix transformation] specify a 2D transformation in the form of a six valued (a,b,c,d,e,f) transformation matrix, which is equivalent to directly applying a [a,b,c,d,e,f] transformation matrix

: Specifies the 2D translation of the object. The first parameter corresponds to the X-axis and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0

: Specifies the 2D scale of the object. The first parameter corresponds to the X-axis and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter is taken by default

Specify the 2D rotation of the object, which requires the definition of the < '> attribute

3D Transform Functions:

: specify a 3D transformation in the form of a 4x4 matrix

:

Specifies the 3D displacement of the object. The first parameter corresponds to the X-axis, the second parameter corresponds to the Y-axis, and the third parameter corresponds to the Z-axis. Parameters cannot be omitted

: Specifies the 3D rotation angle of the object. The first three parameters represent the rotation direction X, y and Z respectively. The fourth parameter represents the rotation angle. Parameters cannot be omitted

: Specifies the 3D scale of the object. The first parameter corresponds to the X-axis, the second parameter corresponds to the Y-axis, and the third parameter corresponds to the Z-axis. Parameters cannot be omitted

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D Transform</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				-webkit-transform:matrix(0,1,1,1,10,10);
			}
			/*
			   1. The normal value is 1, which defines scaleX. Scale is defined by setting the value of X axis. Value: > = 0
			   2. The normal value is 0, which defines skew and defines 2D tilt
			   3. The normal value is 0, which defines the rotation angle of 2D
               4. The normal value is 1, which defines scaleY. Scale is defined by setting the value of Y axis. Value: > = 0
               5. The normal value is 0, which defines translateX. The left and right displacement is defined by setting the value of X axis. Value: any
               6. The normal value is 0, which defines translateY. The up and down displacement is defined by setting the value of Y axis. Value: any
			 */
			#div2{
				width: 200px;
				height: 200px;
				background-color: red;
				transition:all 1s;
			}
			#div2:hover{
				-webkit-transform:translate(100px,100px);
			}
			/*
			   translate(100px,100px)translation
			   Parameter 1 -- moving distance of X axis
			   Parameter 2 -- moving distance of Y axis
			*/
			#div3{
				width: 200px;
				height: 200px;
				background-color: red;
				transition:all 1s;
			}
			#div3:hover{
				 -webkit-transform:scale(2,0.5);
			}
			/*
				transform:scale(2,0.5);---zoom
				Parameter 1 -- shrinkage ratio of X axis [multiple of element width]
				Parameter 2 -- shrinkage ratio of Y axis [multiple of element height]
			*/
		   #div4{
		   	width: 200px;
		   	height: 200px;
		   	background-color: red;
		   	transition:all 1s;
		   }
		   #div4:hover{
			 transform-origin:50% 50%;
		   	 -webkit-transform:rotate(-45deg);
		   }
		   /*
			rotate(-45deg);rotate
			Parameter -- rotation angle [deg]
			Transform origin required: 50%; Establish a reference point for rotation.
		   */
		  #div5{
		  	width: 200px;
		  	height: 200px;
		  	background-color: red;
		  	transition:all 3s;
		  }
		  #div5:hover{
		  			 transform-origin:50% 50%;
					 -webkit-transform:translate(300px,300px) rotate(-45deg) scale(2,0.5);
		  }
		</style>
	</head>
	<body>
		<!--<div id="div1"></div>-->
		<div id="div2"></div>
		<hr>
		<div id="div3"></div>
		<hr>
		<div id="div4"></div>
		<hr>
		<div id="div5"></div>
	</body>
</html>

 

Tags: css

Posted by Hades666 on Sat, 21 May 2022 08:16:11 +0300