directory

pseudo-classes

Pseudo elements

Child and descendant element selectors

The box model

margin

A border

Border style

Inline element box model

pseudo-classes

Pseudoclass: used to represent a particular state of an element * e.g. visited hyperlinks, plain hyperlinks. When we need to style elements that need to be in these special states, we can use pseudo classes * to set links: * Normal links: A :link * Visited links: a:visited (can only define font colors) * Mouse-over links: A: Hover * The link being clicked: A: Active * The browser determines whether the link has been visited by browsing history. Because it involves user privacy, visited can only define color * hover and active, and can also be set for other elements

Example:

<style type="text/css">		
			 /* * Sets a color */ for links that have not been visited
			 a:link{
			 	color: purple;
			 }		 
			 a:hover{
			 	color: gold;
			 }			 
			 /* * :foucs: get the focus :before: get the focus * :after: get the focus ::selection: select the element * after the text box gets the focus, change the background color */
			 input:focus{
			 	background-color: yellowgreen;
			 }
		</style>
	</head>
	<body>
		<a href="Block and inline.html">Access blocks and inline links</a>
		<br />
		<input type="text" />
	</body>
Copy the code

The mouse is not moved over the link

Mouse over the hyperlink

Click on the input box

 

Pseudo elements

CSS pseudo-elements are used to set special effects to certain selectors.

Pseudo-element selectors: Use pseudo-elements to represent special positions within an element

For example :first letter

The first line: : first – line

:brfore: indicates the first part of an element. Before is usually used with content

:after: indicates the last part of the element. After is usually used with content

Content allows you to add some content to before and after and cannot be selected

Syntax for pseudo-elements:

selector:pseudo-element {property:value; }

CSS classes can also use pseudo-elements:

selector.class:pseudo-element {property:value; }

Basic examples of pseudo-elements:

<style type="text/css">
			/* * sets a special style */ for the first character in p
			p:first-letter{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>Pseudo element selector</p>
	</body>
Copy the code

 

Child and descendant element selectors

Child element selector; Select the specified child element that specifies the parent element

* Syntax: parent element > child element {}

Example:

    <head>
		<meta charset="utf-8">
		<title>Child and descendant element selectors</title>		
		<style type="text/css">
			/* * child element selector; Check the specified child of the specified parent * syntax: parent > child */
			div>p>span{
				color: red;
			}
		</style>
	</head>
	<body>
		<div >
			<p>This is a P element in a DIV element<br />
				<span>This is a SPAN element within a P element within a div element</span>			
			</p>
		</div>

	</body>
Copy the code

Descendant element selector: Selects the specified descendant element of the specified element

Syntax: ancestor element descendant element {}

Example:

    <head>
		<meta charset="utf-8">
		<title>Child and descendant element selectors</title>
		<style type="text/css">
			/** * Sets a color red for the SPAN element in the div element * descendant element selector: selects the specified descendant element of the specified element * syntax: ancestor element descendant element {} ** /
			div .o span{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div >
			<p class="o">This is a P element in a DIV element<br />
				<span>This is a SPAN element within a P element within a div element</span>			
			</p>
		</div>
	</body>
Copy the code

 

The box model

CSS Box Model

All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

A box will be divided into several parts: 1. Content area 2. Inside margins 3. From the outside

The following picture illustrates the Box Model:

  • Margin – Clears the area outside the border. The Margin is transparent.
  • Border – The Border around the inside margin and around the content.
  • Padding – Clears the area around the content. The Padding is transparent.
  • Content – The contents of the box, displaying text and images.

margin

Width of visible box =border-left-width + padding-left + width +padding-right + border-right-width

Padding: The distance between the content area in the box and the border. There are four attributes you can use to set the padding to affect the size of the box visible. The element’s background extends to the padding **

Padding property definition and usage instructions

Padding property Sets all the padding properties in a single declaration. This attribute can have 1 to 4 values.

Example:

  • padding:10px 5px 15px 20px;

    • The top fill is 10px
    • The right fill is 5px
    • The bottom fill is 15px
    • The left padding is 20px

  • padding:10px 5px 15px;

    • The top fill is 10px
    • Right fill and left fill are 5px
    • The bottom fill is 15px

  • padding:10px 5px;

    • Top fill and bottom fill are 10px
    • Right fill and left fill are 5px

  • padding:10px;

    • All four fills are 10px

Example:

<head>
		<meta charset="utf-8">
		<title>margin</title>
		<style type="text/css">		
			.box1{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
				border: double;
	
				padding-left:100px ;
				padding-right:100px ;
				padding-top:100px ;
				padding-bottom:100px ;				
			}
			#box2{
				/* Create a child element box2 to override the parent element */
				width: 200px;
				height: 200px;
				background-color: royalblue;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div id="box2">				
			</div>
		</div>
	</body>
Copy the code

 

From the outside:

The possible values

value instructions
auto Set browser margins. The results of this will depend on the browser
length Define a fixed margin (using pixels, PT, EM, etc.)
% Define a margin that uses percentages

Margin Clears the surrounding element area. Margin has no background color and is completely transparent.

Margin can change the top, bottom, left, and right margins of an element individually, or all attributes at once.

Margins refer to the distance between a box and other boxes and do not affect the size of the box’s visible box

Margins in four directions:

  1. margin-top
  2. margin-left
  3. margin-right
  4. margin-bottom

Example:

    <head>
		<meta charset="utf-8">
		<title>margin</title>
		<style type="text/css">
			 .box3{
			 	width: 100px;
			 	height: 100px;
			 	background-color: red;
			 	margin-top: 50px;
			 	margin-left: 100px;
			 }
		</style>
	</head>
	<body>
		<div class="box3"></div>
	</body>
Copy the code

 

A border

The CSS border properties allow you to specify the style and color of an element’s border.

To set a border for an element, you must specify three styles:

  1. Border-width Specifies the border width
  2. Border-color Specifies the border color
  3. Bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding

Border-width :10px 20px 30px 40px;

 

Border style

The border style property specifies what borders to display.

The border-style attribute is used to define the style of the border

Border – style value:

none Default no border
dotted Define a dotted border
dashed Define a dotted border
solid Define a solid border
double Define two borders. The width of both borders is the same as the value of border-width
groove Define 3D groove borders. The effect depends on the color value of the border
ridge Define 3D ridge borders. The effect depends on the color value of the border
inset Define a 3D embedded border. The effect depends on the color value of the border
outset Define a 3D highlight border. The effect depends on the color value of the border

Example:

    <head>
		<meta charset="utf-8">
		<title>Box model (Box model)</title>
		<style type="text/css">
			.box1{
				/* * use width, height to display the width and height of the content area * */
				width: 100px;
				height: 100px;
				background-color:yellow ;
	
				border-width:5px ;
				border-color: green orange blueviolet red; 
				border-style:dotted ;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
	</body>
Copy the code

 

Inline element box model

Width and height cannot be set for inline elements. Horizontal and vertical padding can be set for inline elements. Padding-left \right\top\bottom

Turn an inline element into a block element, and use the display style to change the type of the element

  • Inline: Displays an element as an inline element
  • Block: Displays an element as a block element
  • Inline-block: Sets an element to be an inline block element, which can set the width and height without monopolization of the line

Example:

    <head>
		<meta charset="utf-8">
		<title>Box model of inline elements</title>
		<style type="text/css">
			#a{
				background-color: cornflowerblue;
				padding-left: 50px;
				padding-right: 50px;
				/** Inline elements support borders, which can be set to **/
				border: 2px red solid;
				/** Inline elements can have margins. Horizontal margins do not overlap */
				margin-right: 30px;
			}			
			a{				
				background-color: chartreuse;
				
				display: block;
				width: 100px;
				height: 100px;
				/** Visibility can be used to set the hidden and display state of the element * visible: default, the element is displayed * hidden: the element is hidden */
				visibility: visible;
			}
			#box1{
				background-color: greenyellow;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<span id="a">This is a span element, as large as it is</span>		
		<span id="b">This is a span element, as large as it is</span>		
		<div id="box1">			
		</div>
		<a href="#">This is a hyperlink</a>
	</body>
Copy the code

 

Learn together and make progress together. If there are any mistakes, please comment