What is CSS
As the name implies, it is not difficult to know the meaning from the English meaning of css (cascading style sheets). The literal translation of css is called cascading table, that is, multiple styles can be applied to the same html element, that is, they take effect at the same time.
Advantages of css
- Function please hit
- Separate content display and style control to
reduce coupling and decoupling.
Make division of labor easier.
Improve development efficiency.
Basic syntax of css
Format:
selector { attribute name 1: attribute value 1; attribute name 2: attribute value 2; … } selector: filter elements with similar characteristics Note: each pair of attributes needs to be used; separate, the last pair of attributes can be omitted plus;
Selector: Filter elements with similar characteristics
Base selector
- id selector: select elements with specific id attribute values. It is recommended to have unique id values in an html page.
Syntax: #id attribute value{} - Element selector: select elements with the same tag name
Syntax: tag name {}
Note: id selector has higher priority than element selector - Class selector: select elements with the same class attribute value.
Syntax: .class attribute value{}
Note: The priority of the class selector is higher than the element selector
Extended selector:
- Select all elements:
Syntax: *{} - Union selector:
selector 1, selector 2{} - Sub-selector: filter the selector 2 element under the selector 1 element
Syntax: selector 1 selector 2{} - Parent selector: filter the parent element of selector 2 selector 1
syntax: selector 1> selector 2{} - Attribute selector: select element name, attribute name=attribute value element
Syntax: element name[attribute name="attribute value"]{} - Pseudo-class selector: select the state of some elements.
Syntax: element: state {}
such as:<a>
state:
link: initialized state
visited: visited state
active: visiting state
hover: mouse hovering state
Attributes
- Font, text
font-size: font size
color: text color
text-align: alignment method
line-height: line height - Background
: - Border
: Set the border, conform to the attribute - Size
width: width
height: height - Box model: control layout
margin: outer margin
padding: inner margin
By default, the inner margin will affect 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
How CSS implements page layout
- Inline style
Use the style attribute to specify the CSS code in the tag:
<div style="color:red;">hello css</div>
- Internal style
In the head tag, define the style tag. The content of the style tag is the css code.
<div style="color:red;">hello css</div>
- External style
1. Define the CSS resource file.
2. In the head tag, define the link tag and import external resource files.
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
Exterior style
- Define CSS resource files
- In the head tag, define the link tag and import external resource files.
a.css文件：
div{
color:green;
}
When used, it only needs to be introduced:
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
Notes: From top to bottom of the three methods, the scope of css becomes larger
in turn . Inline styles are rarely used, and the most commonly used 2 and 3 are used in projects.
The third format can be written as:
<style>
@import "css/a.css";
</style>
Case
Use css to implement registration page rewriting
style code
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("../img/register_bg.png") no-repeat center;
padding-top: 100px;
}
.rg{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
border: 1px solid red;
float: left;
margin: 20px;
/*padding: 20px;*/
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
border: 1px solid red;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
border: 2px solid red;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:red;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
Page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="text" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td>
<input type="text" name="checkcode" id="checkcode">
<img src="img/verify_code.jpg" alt="验证码">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>