CSS
concept
css: page beautification and layout control
Concept: Cascading Style Sheets
advantage:
- Powerful
- Separating content presentation from style control
- Reduce coupling. decoupling
- Make division of labor and cooperation easier
- Improve development efficiency
use
The use of CSS: the combination of CSS and HTML
- inline style
- Internal style
- External style
inline style
Use the style attribute within the tag to specify the css code
<div style="color:red">hello world</div>
In the head tag, define the style tag. The content of the style tag is css code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: aqua;
}
</style>
</head>
<body>
<!--Internal style in head Used in labels style label, style The content of the label is css code-->
<div>hello world</div>
</body>
</html>
External style
In short, css styles are defined in external files. When html pages need to be used, the link tag is used to import them
a.css
div{
color: red;
}
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/a.css">
</head>
<body>
<div>hello world</div>
</body>
</html>
be careful
-
There are three ways: inline style, internal style and external style. The scope of css is becoming larger and larger
-
Inline styles are not commonly used, and internal styles and external styles are commonly used in the later stage
-
In addition to the introduction of link, there is another way to use external styles
<style> @import "./css/a.css" </style>
CSS syntax
Format:
selector{
Attribute name 1: attribute value 1;
Attribute name 2: attribute value 2;
...
}
-
Selectors: filter elements with similar characteristics
-
be careful:
Each pair of attributes needs to be separated by semicolons, and the last pair of attributes can be left blank
selector
Selectors: filter elements with similar characteristics
-
Basic selector
id selector: select the element of the specific id attribute value
- Syntax: #id{attribute name: attribute value;...}
Element selector: select an element with the same label name
- Syntax: label {attribute name: attribute value;...}
Class selector: select elements with the same class attribute value
- Syntax: class name {attribute name: attribute value;...}
Selector priority: id selector > class selector > element selector
-
Extension selector
Select all elements
- Syntax: * {}
Union selector:
- Syntax: selector 1, selector 2{}
Sub selector: filter selector 2 element under selector 1 element
- Syntax: selector 1 selector 2{}
Parent selector: parent element selector 1 of filter selector 2
- Syntax: selector1 > selector2{}
Attribute selector: select the element name with attribute name = attribute value
- Syntax: element name [attribute name = "attribute value"] {}
Pseudo class selector: select the state that some elements have
-
Syntax: element: state {}
-
For example: status:
link: initial state
visited: accessed status
active: accessing status
Hover: mouse hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*Child selectors */
div p{color:red;}
/*Parent selector*/
div > p{border: red dashed;}
/*Union selector*/
div,p{color:green;}
/*attribute selectors */
div[color]{border: aqua dashed;}
/*Pseudo class selector*/
a:link{color: red;}
a:visited{color: deepskyblue;}
a:active{color: aquamarine;}
a:hover{color: yellow;}
</style>
</head>
<body>
<div>
<p>helloworld</p>
</div>
<div color="green">hellojava</div>
<p>helloC++</p>
<a href="#">www.baidu.com</a>
</body>
</html>
attribute
text
- Font size: font size
- Color: font color
- Text align: alignment
- Line height: line height
background
- Background color: background color
- Background image: background image
frame
- Border: set border, compound attribute
size
- Width: width
- Height: height
Box model
- Margin: outer margin
- padding: inner margin
- By default, the inner margin affects the size of the entire box
- box-sizing: border-box； Set the properties of the box so that width and height are the final box size
- Float: float
- left
- right
practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
<style>
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body{
background:url("./image/White crane bright wings.jpg") center;
}
.layout {
width: 1000px;
height: 700px;
border: 6px solid gainsboro;
background-color: aliceblue;
margin: auto;
margin-top:20px;
}
.left{
/*border: 2px solid red;*/
float: left;
margin:10px;
}
#p1{
color: #FFD026;
size: 40px;
}
#p2{
color: darkgray;
size: 40px;
}
#p3{
size:10px;
}
.center{
/*border: 2px solid red;*/
float: left;
width: 600px;
padding-left: 50px;
padding-top:100px;
}
.right{
/*border: 2px solid red;*/
float: right;
margin:10px;
}
.td_left{
width:100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 30px;
}
.input{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
}
#sub{
width:150px;
height: 40px;
background-color: #FFD026;
border:1px solid #FFD026;
margin-left: 120%;
}
</style>
</head>
<body>
<div class="layout">
<div class="left">
<p id="p1">New user registration</p>
<p id="p2">USER REGISTER</p>
</div>
<div class="center">
<div>
<form>
<table>
<tr>
<td class="td_left"><label for="username">user name</label></td>
<td class="td_right"><input name="username" id="username" placeholder="Please enter the account number" class="input"></td>
</tr>
<tr>
<td class="td_left"><label for="password">password</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="Please input a password" class="input"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="Please enter Email" class="input"></td>
</tr>
<tr>
<td class="td_left"><label for="name">full name</label></td>
<td class="td_right"><input name="name" id="name" placeholder="Please enter your real name" class="input"></td>
</tr>
<tr>
<td class="td_left"><label for="phone">cell-phone number</label></td>
<td class="td_right"><input type="number" name="phone" id="phone" placeholder="Please enter your mobile phone number" class="input"></td>
</tr>
<tr>
<td class="td_left">Gender</td>
<td class="td_right">
<input type="checkbox" name="sex" value="man">male
<input type="checkbox" name="sex" value="women">female
</td>
</tr>
<tr>
<td class="td_left">date of birth</td>
<td class="td_right"><input type="date" name="date" class="input"></td>
</tr>
<tr>
<td class="td_left"><label for="yzm">Verification Code</label></td>
<td class="td_right"><input name="yzm" id="yzm" class="input"></td>
</tr>
<tr>
<td>
<input type="submit" value="register" align="center" id="sub">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="right">
<p id="p3">Existing account,<a href="#"> log in now < / a ></p>
</div>
</div>
</body>
</html>