Front end introduction to web technology CSS

catalogue

CSS Technology

What is CSS

CSS usage

selector

Tag name selector

class selector

id selector

Group selector

attribute selectors

Box model

Margin (outer margin)

border

padding (inner margin)

Element type supplement

Block level element

Inline element

Inline block element

Yonghe store system

User registration exercise

CSS Technology

What is CSS

The full name of CSS is called cascading style sheet stylesheet. It is a technology used to modify HTML web pages and enhance the display ability of web pages.

It is mainly realized by using CSS attributes. Finally, CSS code can be separated from HTML web page code, and the reusability of CSS code can be improved.

CSS usage

Requirement: center the text in the cell

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css Use of</title>
		<!-- css Mode 4 implementation css And HTML Code separation and improvement css Code reusability-->
		<link href="demo.css" rel="stylesheet"/>
		
		
		<!-- css Mode 3 -->
		<style>
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" width="30%">
			<tr align="center"><!-- css Mode 1 -->
				<td >Hello 1</td>
				<td >Hello 2</td>
			</tr>
			<tr style="text-align:center;"><!-- css Mode 2 -->
				<td >Hello 3</td>
				<td >Hello 4</td>
			</tr>
		</table>
	</body>
</html>

selector

The so-called selector is to help us select the tags we want to decorate in HTML.

Tag name selector


Select all elements in the page

<style> /* Add css to HTML*/
    span{ /* Tag name selector, select all span */
    background-color: chartreuse; /* background color */                  font-size: 24px; /*Font size*/
        font-family: Blackbody;/* typeface */
    }
</style> 

class selector

Add a class attribute to the element to be modified. You can use multiple attributes at the same time, separated by spaces.

<p class="a b">123</p> <!-- b cover a-->

<style> /* Add css to HTML*/
	 /* Select the element with class=a */
	.a{
		background-color: cornflowerblue; /*background color */
		color:red; /*Font color*/
	}
	.b{
		background-color: lightsalmon;
		color: black;
	}
</style>

id selector

The value of the id attribute exists as a unique identifier throughout the HTML.

The specified element (#id value) can be selected by ID value

<p id="p1">123</p>
/* Select element with id */
#p1{
	text-indent: 200px; /* text-indent*/
}

Group selector

/* Grouping selectors: combine the elements selected by multiple selectors to set the style uniformly */
.a,.b,#p1{
	background-color: #000000;
}

attribute selectors

Select the qualified elements according to the attribute conditions to set the style (separated by commas)

 

<style type="text/css">
	/* Select the specified element */
	input[type='text']{
		background-color: #6495ED;
	}
</style>

Box model

It refers to treating all elements in HTML as a box. The distance between boxes, including the box border and the distance between box border and box content, can be set.

Margin (outer margin)

<input type="radio" name="sex" value="1" style="margin: 20px;"/>male

 

border

#div2{
border:10px solid yellow;/*Solid line*/
border:10px dashed yellow;/*Punctate*/
border:10px dotted yellow;/*Dotted line*/
}

padding (inner margin)

<td style="padding: 20px;">user name:</td>

 

Element type supplement

Block level element

By default, block level elements have one row (div, P, h1~h6)

Width and height can be set. If you do not set the width and height, where the width is the default to fill the parent element, and the height is determined by the content

The outer margin, border and inner margin can be set

Inline element

By default, multiple inline elements are on the same row

Width and height cannot be set

The left and right outer margins, border and inner margins can be set, but the upper and lower outer margins are invalid

Inline block element

It not only has the characteristics of in-line elements, but also has the characteristics of block level elements

Yonghe store system

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test ticket</title>
		<!-- link Put the outside CSS File into this page 
			rel Refers to the type of file(stylesheet Is a fixed value style sheet)
			href Is the location of the specified file
		-->
		<link rel="stylesheet" href="1.css"/>
			<style>
				/* Unifying the style of web pages */
				body{
					width: 300px;/* width */
				}
				/* Increase font size */
				.a{
					font-size: 30px;
				}
				/* Text centered */
				.b{
					/* text-align:center ; */
					margin-left: 80px;/* Left inner margin */
				}
				/* Set first line indent */
				#readme{
					text-indent: 30px;
				}
				/* Center picture */
				img{
					margin-left: 20px;
				}
				/* Set horizontal line: width dashed red*/
				hr{
					border:1px dashed red;
				}
		</style>
	</head>
	<body>
		<div>Customer link</div>
		<div class="a">Please pay attention to the bill No</div>
		<div class="b">Self taken customer coupon</div>
		<div>King Yonghe(North 2nd Ring West Road store)</div>
		<div>010-62112313</div>
		<div class="b">--Bill of settlement--</div>
		<div class="a">Bill No:P00000009</div>
		<div>Bill type:canteen</div>
		<div>Number of people:1</div>
		<div>cashier:Zhang Jing</div>
		<div>Billing time:2018-04-17 07:24:11</div>
		<div>Checkout time :2018-04-17 07:24:22</div>
		<hr />
		<table>
			<tr>
				<td>quantity</td>
				<td>Item</td>
				<td>amount of money</td>
			</tr>
			<tr>
				<td>1</td>
				<td>
					Fried dough sticks and soybean milk set meal<br />
					1X--Deep-Fried Dough Sticks<br />
					1X--Freshly ground soybean milk(heat/sweet)
				</td>
				<td>7.00</td>
			</tr>
		</table>
		
		<hr />
		<table>
			<tr>
				<td width="180px">Breakfast is one yuan for Alipay flower.</td>
				<td>-3.00</td>
			</tr>
			<tr>
				<td>total</td>
				<td>4.00</td>
			</tr>
			<tr>
				<td>Alipay</td>
				<td>1.00</td>
			</tr>
			<tr>
				<td>Alipay subsidy</td>
				<td>3.00</td>
			</tr>
		</table>
		<hr />
		Print time:2018-04-17 07:24:22
		<hr />
		<div id="readme">
			According to relevant tax laws, the Invoicing Date of electronic invoice is the same as the date of online application for electronic invoice. If you need the electronic invoice of the current day, you must scan the QR code below on the consumption day and issue your ordinary electronic VAT invoice according to the guiding steps. This QR code is valid for 30 days. Please keep the small ticket flat during scanning.
		</div>
		<div>
			<img src="2.png"/>
		</div>
		<div>Official website: www.yonghe.com.cn</div>
		<div>Franchise hotline: 86-21-60769397 Or 86-21-60769002</div>

	</body>
</html>


User registration exercise

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>User registration</title>
		
		<style>
			/* Syntax: selector {style 1; style 2; style 3;} */
/* Unified Web Style */
body{
	font-family: "Song typeface";/* Unified font */
	font-size: 15px;/* Unified font size */
	width: 500px;/* Uniform width */
	padding-left: 100px;/* Set left margin */
}

/*Decorate all input styles */
.a{
	height: 20px;/* height */
	width: 300px;/* width */
	padding: 15px;/* Adjust the distance between content and border, inner margin */
	font-size:20px ;/* The font size becomes larger */
	margin: 10px;/* Adjust the distance between boxes and the outer margin */
}

/* Decorate all tips */
.xiao{
	font-size: 8px;/* Font becomes smaller */
	color: grey;/* Color of words */
	padding-left: 30px;/* left  */
}

/* Modification consent */
#note{
	height: 60px;/* height */
	text-indent: 40px;/* text-indent */
	font-size: 12px;/* The font size becomes larger */
}

/* Modify the register now button */
#btn{
	background-color: #E64346;/*  Background color*/
	font-size: 25px;/* The font size becomes larger */
	color: white;/* Color of words */
	width: 360px;/* Set width */
	height: 50px;/* Set height */
	border: #E64346;/*  Set border*/
}
			
		</style>
		
	</head>
	<body>
		<!-- The data registered by the user needs to be submitted to the server for warehousing,So need form -->
		<form method="get" action="#"> <! -- specify how to submit data -- >
			<table>
					<h2 style="padding-left: 130px;font-size:30px;">User registration</h2>
					<tr>
						<td>
							<input type="text" placeholder="user name" class="a"/>
						</td>
					</tr>
					<tr>
						<td class="xiao">
							Support Chinese, letters, numbers“-","_"Combination of, 4-20 Characters
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="Set password" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							It is recommended to use more than two combinations of numbers, letters and symbols, 6-20 Characters
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="Confirm password" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							The two passwords are inconsistent
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="Verify phone" class="a"/>
							or
							<a href="#"> verify mailbox</a>
						</td>
					</tr>
					<tr>
						<td id="note">
							<input type="checkbox" />
							I have read and agree 
							<a href="#">" Jin gt ao user registration agreement "</a>
						</td>
					</tr>
					<tr>
						<td>
							<!-- type Type must be submit To submit data -->
							<input  id="btn" type="submit" value="Register now" />
						</td>
					</tr>
			</table>
	</body>
</html>

 

Tags: Java Front-end Back-end

Posted on Fri, 19 Nov 2021 07:39:57 -0500 by dimkasmir