catalogue
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>